/* ==========================================================================
   跨海AI 客户线索管理系统 · 设计系统
   主题：黑白（暗色）体系 —— 参考 lingshou168.net
   规则：仅改视觉与交互，功能/结构/接口零改动
   ========================================================================== */

/* ==========================================================================
   主题变量：暗色（默认，保持线上观感）/ 亮色（新增）
   仅新增变量与切换外观，功能/结构/接口/数据结构零改动
   ========================================================================== */
:root,html[data-theme="dark"]{
  color-scheme:dark;

  --bg:#0a0a0a;
  --bg-soft:#0d0d0d;
  --bg-grad-top:#101010;
  --list-bg:#0d0d0d;
  --scroll-track:#0d0d0d;
  --scroll-thumb:#2a2a2a;

  --card:#111111;
  --card2:#1a1a1a;
  --thead:#141414;
  --track:#1b1b1b;
  --hover:#161616;
  --hover2:#232323;
  --skel1:#161616;
  --skel2:#1f1f1f;

  --border:#222222;
  --border2:#2c2c2c;
  --border-strong:#3a3a3a;
  --border-strong2:#4a4a4a;
  --border-td:#1c1c1c;

  --text:#ffffff;
  --t1:#ededed;
  --t2:#d4d4d4;
  --t3:#c9c9c9;
  --sec:#999999;
  --muted:#777777;
  --muted2:#555555;
  --muted3:#4d4d4d;

  /* 主按钮：暗色=白底黑字（现状），亮色=黑底白字 */
  --accent:#ffffff;
  --accent-hover:#e8e8e8;
  --on-accent:#000000;

  /* 语义色（克制使用） */
  --green:#34d399; --green-bg:#052e1f; --green-deep:#065f46; --green-hover:#2fbf8c;
  --green-soft:rgba(52,211,153,.14); --green-soft2:rgba(52,211,153,.16);
  --green-line:rgba(52,211,153,.30); --green-line2:rgba(52,211,153,.35);
  --green-line-dark:#1f4a3b; --green-glow:rgba(52,211,153,.25);
  --red:#f87171; --red-bg:#3b0d0d; --red-deep:#7f1d1d; --red-hover:#ef6161;
  --red-soft:rgba(248,113,113,.14); --red-line:rgba(248,113,113,.30); --red-line-dark:#4a2222;
  --orange:#fb923c; --orange-bg:#4a3520; --orange-soft:rgba(251,146,60,.14);
  --orange-line:rgba(251,146,60,.30); --orange-line-dark:#4a3520;
  --blue:#60a5fa; --blue-deep:#1d4ed8; --blue-soft:rgba(96,165,250,.14); --blue-line:rgba(96,165,250,.32);
  --purple:#a78bfa; --purple-soft:rgba(167,139,250,.14); --purple-line:rgba(167,139,250,.32);
  --cyan:#7dd3fc; --cyan-soft:rgba(56,189,248,.12); --cyan-line:#1e3f5c;

  /* 进度 / 状态点 */
  --prog-from:#4b5563; --prog-to:#e5e5e5;
  --pause-from:#4b5563; --pause-to:#9ca3af;
  --dot-off:#6b7280; --dot-off2:#9ca3af; --dot-off2-soft:rgba(156,163,175,.25);

  /* 遮罩 / 焦点环 / 叠加层 */
  --overlay:rgba(0,0,0,.72);
  --ring:rgba(255,255,255,.14);
  --ov-a:rgba(255,255,255,.02);
  --ov-b:rgba(255,255,255,.03);
  --ov-c:rgba(255,255,255,.035);
  --ov-d:rgba(255,255,255,.05);
  --ov-e:rgba(255,255,255,.06);
  --ov-f:rgba(255,255,255,.07);
  --ov-g:rgba(255,255,255,.08);
  --ov-h:rgba(255,255,255,.10);
  --ov-i:rgba(255,255,255,.14);
  --ov-j:rgba(255,255,255,.18);

  --shadow:0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.35);
  --shadow-hi:0 2px 6px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.5);
  /* 柔和自然的圆角投影（替代 Bootstrap .shadow 的生硬方形投影） */
  --shadow-soft:0 18px 44px -14px rgba(0,0,0,.62), 0 6px 16px -8px rgba(0,0,0,.46);
  --shadow-soft-hi:0 28px 60px -18px rgba(0,0,0,.68), 0 10px 24px -10px rgba(0,0,0,.52);
  --shadow-row:0 16px 34px -14px rgba(0,0,0,.95), 0 8px 18px -8px rgba(255,255,255,.055);
  --hover-row:rgba(255,255,255,.055);
  /* 手机端卡片：默认柔和圆角投影 / 按压凸起投影（暗色下加一层极淡光晕，让「凸起」可感知） */
  --shadow-card:0 1px 2px rgba(0,0,0,.55), 0 6px 16px -6px rgba(0,0,0,.45);
  --shadow-card-hi:0 12px 26px -10px rgba(0,0,0,.92), 0 4px 10px -4px rgba(0,0,0,.70), 0 0 18px -4px rgba(255,255,255,.12);
  --close-filter:invert(1) grayscale(1);
  --date-filter:invert(.7);

  --r:14px;
  --r-sm:10px;
  --r-xs:8px;

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.24s;
}

html[data-theme="light"]{
  color-scheme:light;

  --bg:#ffffff;
  --bg-soft:#f7f7f7;
  --bg-grad-top:#f7f7f7;
  --list-bg:#f7f7f7;
  --scroll-track:#f0f0f0;
  --scroll-thumb:#c9c9c9;

  --card:#ffffff;
  --card2:#f5f5f5;
  --thead:#f5f5f5;
  --track:#e8e8e8;
  --hover:#f2f2f2;
  --hover2:#f2f2f2;
  --skel1:#ececec;
  --skel2:#e0e0e0;

  --border:#e5e5e5;
  --border2:#d4d4d4;
  --border-strong:#bfbfbf;
  --border-strong2:#a3a3a3;
  --border-td:#ededed;

  --text:#0a0a0a;
  --t1:#262626;
  --t2:#333333;
  --t3:#3f3f3f;
  --sec:#525252;
  --muted:#737373;
  --muted2:#a3a3a3;
  --muted3:#8a8a8a;

  --accent:#111111;
  --accent-hover:#000000;
  --on-accent:#ffffff;

  --green:#059669; --green-bg:#ecfdf5; --green-deep:#036b4e; --green-hover:#047857;
  --green-soft:rgba(5,150,105,.12); --green-soft2:rgba(5,150,105,.14);
  --green-line:rgba(5,150,105,.30); --green-line2:rgba(5,150,105,.35);
  --green-line-dark:#a7e8cf; --green-glow:rgba(5,150,105,.20);
  --red:#dc2626; --red-bg:#fef2f2; --red-deep:#991b1b; --red-hover:#b91c1c;
  --red-soft:rgba(220,38,38,.12); --red-line:rgba(220,38,38,.30); --red-line-dark:#f5c2c2;
  --orange:#ea580c; --orange-bg:#fff7ed; --orange-soft:rgba(234,88,12,.12);
  --orange-line:rgba(234,88,12,.30); --orange-line-dark:#f7d4b0;
  --blue:#2563eb; --blue-deep:#1d4ed8; --blue-soft:rgba(37,99,235,.12); --blue-line:rgba(37,99,235,.32);
  --purple:#7c3aed; --purple-soft:rgba(124,58,237,.12); --purple-line:rgba(124,58,237,.32);
  --cyan:#0284c7; --cyan-soft:rgba(2,132,199,.12); --cyan-line:#a5d8f5;

  --prog-from:#a3a3a3; --prog-to:#4b5563;
  --pause-from:#a3a3a3; --pause-to:#6b7280;
  --dot-off:#9ca3af; --dot-off2:#6b7280; --dot-off2-soft:rgba(107,114,128,.25);

  --overlay:rgba(0,0,0,.45);
  --ring:rgba(17,17,17,.12);
  --ov-a:rgba(17,17,17,.025);
  --ov-b:rgba(17,17,17,.035);
  --ov-c:rgba(17,17,17,.04);
  --ov-d:rgba(17,17,17,.05);
  --ov-e:rgba(17,17,17,.055);
  --ov-f:rgba(17,17,17,.07);
  --ov-g:rgba(17,17,17,.075);
  --ov-h:rgba(17,17,17,.09);
  --ov-i:rgba(17,17,17,.12);
  --ov-j:rgba(17,17,17,.14);

  --shadow:0 1px 2px rgba(16,16,16,.06), 0 8px 24px rgba(16,16,16,.08);
  --shadow-hi:0 2px 6px rgba(16,16,16,.08), 0 16px 40px rgba(16,16,16,.10);
  /* 柔和自然的圆角投影（替代 Bootstrap .shadow 的生硬方形投影） */
  --shadow-soft:0 18px 42px -14px rgba(16,16,16,.18), 0 5px 14px -6px rgba(16,16,16,.10);
  --shadow-soft-hi:0 28px 58px -18px rgba(16,16,16,.22), 0 9px 22px -8px rgba(16,16,16,.13);
  --shadow-row:0 16px 32px -14px rgba(16,16,16,.22), 0 5px 12px -5px rgba(16,16,16,.10);
  --hover-row:rgba(17,17,17,.05);
  /* 手机端卡片：默认柔和圆角投影 / 按压凸起投影 */
  --shadow-card:0 1px 2px rgba(16,16,16,.06), 0 6px 14px -6px rgba(16,16,16,.12);
  --shadow-card-hi:0 14px 28px -12px rgba(16,16,16,.28), 0 6px 14px -6px rgba(16,16,16,.16);
  --close-filter:none;
  --date-filter:none;
}

/* 主题切换：仅过渡颜色相关属性，避免布局抖动 */
html,body,.card,.section-card,.app-header,.modal-mask,.modal-box,.table-wrap,.table,
.form-control,.form-select,.form-check-input,.stat-box,.bi-item,.ctl-running,
.link-chip,.chip,.h-avatar,.h-logo,.foot,.empty,.kw-picker{
  transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease);
}

/* ---------- 基础 ---------- */
[v-cloak]{display:none!important;}

html,body{max-width:100%;overflow-x:hidden;}

body{
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

::selection{background:var(--accent);color:var(--on-accent);}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--scroll-track);}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px;border:2px solid var(--scroll-track);}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong);}

a{color:var(--text);text-decoration:none;transition:opacity var(--dur) var(--ease);}
a:hover{opacity:.72;color:var(--text);}

hr{border-color:var(--border);opacity:1;}

/* ---------- 顶栏（对齐参考站 app-header：左侧品牌 + 右侧用户） ---------- */
.app-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--border);
  background:var(--bg);position:sticky;top:0;z-index:var(--z-header);
}
.app-header .h-left{display:flex;align-items:center;gap:10px;min-width:0;}
.app-header .h-logo{
  width:26px;height:26px;border:2px solid var(--text);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;color:var(--text);
}
.app-header .h-title{
  font-size:14px;font-weight:600;letter-spacing:.5px;color:var(--text);
  white-space:nowrap;
}
.app-header .h-title span{color:var(--sec);font-weight:400;}
.app-header .h-right{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--sec);}
.app-header .h-user{display:flex;align-items:center;gap:6px;min-width:0;}
.app-header .h-avatar{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;flex-shrink:0;color:var(--text);background:var(--card);
  user-select:none;
}
.app-header .h-name{
  color:var(--sec);font-size:12px;max-width:140px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app-header .h-logout{
  cursor:pointer;color:var(--muted);font-size:12px;padding:4px 10px;
  border-radius:4px;transition:color var(--dur) var(--ease);user-select:none;
}
.app-header .h-logout:hover{color:var(--red);}

/* ---------- 容器/卡片 ---------- */
.section-card,
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  color:var(--text);
  box-shadow:var(--shadow);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation:fadeUp .4s var(--ease) both;
}
.section-card:hover,.card:hover{border-color:var(--border2);}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

.section-card{padding:18px;}

/* ---------- 状态看板 ---------- */
.status-board{
  border-left:3px solid var(--muted2);
  position:relative;
  overflow:hidden;
}
.status-board::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 120px at 100% 0%,var(--ov-d),transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);
}
.status-board.running{border-left-color:var(--green);}
.status-board.running::after{opacity:1;}

.stat-box{text-align:center;padding:8px 6px;border-radius:var(--r-xs);transition:background var(--dur) var(--ease);}
.stat-box:hover{background:var(--ov-b);}
.stat-box .label{color:var(--muted);font-size:12px;letter-spacing:.3px;margin-bottom:4px;}
.stat-box .value{font-size:20px;font-weight:600;word-break:break-all;line-height:1.3;font-variant-numeric:tabular-nums;}
.stat-box .value.small{font-size:14px;font-weight:500;color:var(--accent-hover);}

.text-primary{color:var(--blue)!important;}
.text-muted{color:var(--muted)!important;}

/* 运行脉冲点 */
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:middle;}

/* ---------- 按钮 ---------- */
.btn{
  border-radius:var(--r-xs);
  font-size:13px;font-weight:500;
  padding:7px 14px;
  transition:transform .16s var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  border:1px solid transparent;
  position:relative;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn:focus,.btn:focus-visible{box-shadow:0 0 0 3px var(--ov-i)!important;outline:0;}
.btn:disabled,.btn.disabled{opacity:.4;cursor:not-allowed;transform:none;}

.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent);transform:translateY(-1px);box-shadow:0 6px 18px var(--ov-i);}

.btn-success{background:var(--green);border-color:var(--green);color:var(--green-bg);}
.btn-success:hover{background:var(--green-hover);border-color:var(--green-hover);color:var(--green-bg);transform:translateY(-1px);box-shadow:0 6px 18px var(--green-glow);}

.btn-danger{background:var(--red);border-color:var(--red);color:var(--red-bg);}
.btn-danger:hover{background:var(--red-hover);border-color:var(--red-hover);color:var(--red-bg);transform:translateY(-1px);}

.btn-outline-light{color:var(--text);border-color:var(--border2);background:transparent;}
.btn-outline-light:hover{background:var(--ov-g);border-color:var(--border-strong);color:var(--text);}

.btn-outline-primary{color:var(--t2);border-color:var(--border2);background:transparent;}
.btn-outline-primary:hover{background:var(--ov-g);border-color:var(--border-strong2);color:var(--text);}

.btn-outline-danger{color:var(--red);border-color:var(--red-line-dark);background:transparent;}
.btn-outline-danger:hover{background:var(--red-soft);border-color:var(--red);color:var(--red);}

.btn-outline-warning{color:var(--orange);border-color:var(--orange-line-dark);background:transparent;}
.btn-outline-warning:hover{background:var(--orange-soft);border-color:var(--orange);color:var(--orange);}

.btn-outline-success{color:var(--green);border-color:var(--green-line-dark);background:transparent;}
.btn-outline-success:hover{background:var(--green-soft);border-color:var(--green);color:var(--green);}
.btn-outline-info{color:var(--cyan);border-color:var(--cyan-line);background:transparent;}
.btn-outline-info:hover{background:var(--cyan-soft);border-color:var(--cyan);color:var(--cyan);}

.btn-outline-secondary{color:var(--sec);border-color:var(--border2);background:transparent;}
.btn-outline-secondary:hover{background:var(--ov-e);border-color:var(--border-strong);color:var(--text);}

.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:7px;}

/* ---------- 标签页 ---------- */
.nav-tabs{border-bottom:1px solid var(--border);gap:4px;}
.nav-tabs .nav-link{
  color:var(--muted);border:0;border-bottom:2px solid transparent;
  border-radius:0;padding:10px 16px;font-size:14px;font-weight:500;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav-tabs .nav-link:hover{color:var(--t2);border-bottom-color:var(--border2);}
.nav-tabs .nav-link.active{color:var(--text);background:transparent;border-bottom-color:var(--text);}

/* ---------- 表单 ---------- */
/* 控件规范（2026-10-13 · 按设计稿 t1）：控件文字=正文文字
   桌面 36px/14px、移动（触屏）42px/16px（16px 为 iOS 聚焦不缩放硬红线，不随聚焦变化） */
.form-control,.form-select,.input-group-text{
  background-color:var(--card2);   /* 用 background-color：简写 background 会重置背景图定位，导致下拉箭头平铺 */
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--r-sm);
  font-size:14px;
  height:36px;
  padding:0 12px;
  line-height:36px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* 废弃 -sm 字号/高度分叉：与基础控件保持一致（保留类名，不改 DOM） */
.form-control-sm,.form-select-sm{height:36px;font-size:14px;padding:0 12px;line-height:36px;border-radius:var(--r-sm);}
.form-control::placeholder{color:var(--muted2);}
.form-control:focus,.form-select:focus{
  background-color:var(--card2);
  border-color:var(--border-strong2);
  color:var(--text);
  box-shadow:0 0 0 3px var(--ov-f);
}
.form-select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:30px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m3.5 6 4.5 4.5L12.5 6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px 12px;
  background-attachment:scroll;
}
.form-select:hover{border-color:var(--border-strong2);}
.form-select::-ms-expand{display:none;}
.form-select option{background:var(--card2);color:var(--text);}
.input-group-text{color:var(--muted);}
.form-label{color:var(--sec);font-size:12px;}
textarea.form-control{height:auto;line-height:1.6;padding:9px 12px;}

input[type=date]::-webkit-calendar-picker-indicator{filter:var(--date-filter);cursor:pointer;}

/* ---------- 表格 ---------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--card);
  -webkit-overflow-scrolling:touch;
}
.table{
  margin:0;color:var(--text);border-color:var(--border);
  --bs-table-bg:transparent;
  --bs-table-color:var(--text);
  --bs-table-border-color:var(--border);
  --bs-table-hover-bg:var(--ov-c);
  --bs-table-hover-color:var(--text);
}
.table>thead th{
  background:var(--thead);color:var(--sec);font-size:12px;font-weight:500;
  white-space:nowrap;letter-spacing:.3px;
  border-bottom:1px solid var(--border);
  padding:11px 12px;position:sticky;top:0;z-index:2;
}
.table>tbody td{
  border-color:var(--border-td);font-size:13px;vertical-align:middle;
  padding:11px 12px;background:transparent;
}
.table-hover>tbody>tr{transition:background var(--dur) var(--ease);}
.table-hover>tbody>tr:hover>td{background:var(--ov-c)!important;}
.table td.text-muted,.table td .text-muted{color:var(--muted)!important;}

.ellipsis{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom;}

/* 复选框 */
.form-check-input{background-color:var(--card2);border-color:var(--border-strong);cursor:pointer;transition:all var(--dur) var(--ease);}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent);}
.form-check-input:focus{box-shadow:0 0 0 3px var(--ov-i);border-color:var(--border-strong2);}

/* ---------- 徽章 ---------- */
.badge{
  font-weight:500;font-size:11.5px;padding:4px 9px;border-radius:99px;
  letter-spacing:.2px;border:1px solid transparent;
}
.bg-success{background:var(--green-soft)!important;color:var(--green)!important;border-color:var(--green-line);}
.bg-secondary{background:var(--ov-e)!important;color:var(--sec)!important;border-color:var(--border2);}
.bg-danger{background:var(--red-soft)!important;color:var(--red)!important;border-color:var(--red-line);}
.bg-primary{background:var(--blue-soft)!important;color:var(--blue)!important;border-color:var(--blue-line);}
.bg-warning{background:var(--orange-soft)!important;color:var(--orange)!important;border-color:var(--orange-line);}

.badge-valid{background:var(--green-soft);color:var(--green);border:1px solid var(--green-line);}
.badge-invalid{background:var(--red-soft);color:var(--red);border:1px solid var(--red-line);}
/* WhatsApp 标记 */
.badge-wa{
  background:var(--green-soft2);color:var(--green);
  border:1px solid var(--green-line2);
  display:inline-flex;align-items:center;gap:4px;
}
.badge-wa::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);}
.badge-phone{background:var(--ov-e);color:var(--sec);border:1px solid var(--border2);}

/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed;inset:0;background:var(--overlay);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:var(--z-detail);display:flex;align-items:flex-start;justify-content:center;
  padding:40px 12px;overflow-y:auto;
  animation:fadeIn .22s var(--ease);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  background:var(--card);border:1px solid var(--border2);border-radius:var(--r);
  width:880px;max-width:100%;box-shadow:var(--shadow-soft);color:var(--text);
  animation:popUp .3s var(--ease) both;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
/* 悬停：投影更柔和、更自然（不再出现生硬方形投影） */
.modal-box:hover{box-shadow:var(--shadow-soft-hi);transform:translateY(-2px);}
/* 兼容残留的 Bootstrap .shadow 工具类：一律使用柔和圆角投影 */
.modal-box.shadow,.modal-box.shadow-lg,.modal-box.shadow-sm{box-shadow:var(--shadow-soft)!important;}
@keyframes popUp{
  from{opacity:0;transform:translateY(16px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.modal-box .border-bottom{border-color:var(--border)!important;}
.modal-box .border-top{border-color:var(--border)!important;}

.btn-close{
  filter:var(--close-filter);
  opacity:.5;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn-close:hover{opacity:1;transform:rotate(90deg);}

/* 详情网格 */
.detail-grid{display:grid;grid-template-columns:150px 1fr;row-gap:10px;column-gap:12px;font-size:13px;}
.detail-grid .k{color:var(--muted);}
.detail-grid .v{word-break:break-all;white-space:pre-wrap;color:var(--t1);}
.detail-grid .v a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.detail-grid .v a:hover{opacity:.8;}

.detail-links{display:flex;flex-wrap:wrap;gap:6px;}
.link-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--card2);border:1px solid var(--border2);
  border-radius:99px;padding:3px 10px;font-size:12px;color:var(--t2);
  transition:all var(--dur) var(--ease);
}
.link-chip:hover{border-color:var(--border-strong2);background:var(--hover2);color:var(--text);transform:translateY(-1px);}

/* 评分 */
.rating{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;}
.rating .star{color:var(--orange);}
.rating .cnt{color:var(--muted);font-size:11.5px;}

/* ---------- 提示条 ---------- */
.alert{border-radius:var(--r-sm);font-size:12.5px;border:1px solid;}
.alert-danger{background:var(--red-soft);border-color:var(--red-line);color:var(--red);}

/* ---------- 空状态 ---------- */
.empty{padding:44px 16px;text-align:center;color:var(--muted);font-size:13px;}
.empty::before{content:'';display:block;width:36px;height:36px;margin:0 auto 12px;border-radius:10px;border:1px dashed var(--border2);}

/* ---------- 骨架/加载 ---------- */
.skeleton{
  background:linear-gradient(90deg,var(--skel1) 25%,var(--skel2) 37%,var(--skel1) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:6px;color:transparent!important;
}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- 登录页 ---------- */
.login-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(800px 400px at 50% -10%,var(--ov-e),transparent 70%),
    var(--bg);
  padding:24px;
  position:relative;overflow:hidden;
}
.login-body::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--ov-a) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ov-a) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%);
}
.login-box{
  width:100%;max-width:380px;margin:0 auto;
  position:relative;z-index:1;
  animation:popUp .5s var(--ease) both;
}
.login-body > #app{width:100%;}
.login-logo{text-align:center;margin-bottom:40px;}
.login-logo .logo-icon{
  width:40px;height:40px;border-radius:8px;
  display:inline-block;vertical-align:middle;object-fit:contain;
  margin-bottom:12px;
}
.login-logo .logo-text{font-size:20px;font-weight:600;letter-spacing:1px;color:var(--text);}
.login-logo .logo-text span{color:var(--sec);font-weight:400;}
.login-logo .logo-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.login-form{display:flex;flex-direction:column;gap:14px;}
.login-form input{
  padding:14px 16px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);font-size:14px;outline:none;width:100%;
  transition:border-color .2s var(--ease);
}
.login-form input:focus{border-color:var(--sec);}
.login-form input::placeholder{color:var(--muted);}
.login-form button{
  padding:14px;background:var(--text);color:var(--bg);border:none;
  border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;
  transition:opacity .2s;letter-spacing:.5px;
}
.login-form button:hover{opacity:.9;}
.login-form button:disabled{opacity:.4;cursor:not-allowed;}
.login-error{font-size:12px;color:var(--red);text-align:center;min-height:18px;margin-bottom:8px;}
.login-hint{font-size:11px;color:var(--muted);text-align:center;margin-top:20px;line-height:1.6;}

/* ---------- 页脚 ---------- */
.foot{
  text-align:center;color:var(--muted2);font-size:12px;
  padding:22px 12px 28px;letter-spacing:.3px;
}

/* ============================ 响应式 ============================ */
@media (max-width: 991.98px){
  .section-card{padding:14px;}
  .status-board .stat-box{border-bottom:1px solid var(--border);}
}

/* 手机端：表格 → 卡片 */
@media (max-width: 767.98px){
  body{font-size:13.5px;}
  .app-header{padding:10px 14px;}
  .app-header .h-logo{width:22px;height:22px;font-size:9px;border-radius:5px;}
  .app-header .h-title{font-size:12px;}
  .app-header .h-right{gap:6px;font-size:11px;}
  .app-header .h-avatar{width:24px;height:24px;font-size:10px;}
  .app-header .h-name{max-width:84px;font-size:11px;}

  .stat-box{padding:10px 6px;}
  .stat-box .value{font-size:17px;}
  .stat-box .value.small{font-size:13.5px;}

  .section-card{padding:12px;border-radius:var(--r-sm);}

  /* 表头隐藏，行变卡片 */
  .table-wrap{border:0;background:transparent;overflow-x:visible;}
  .table>thead{display:none;}
  .table,.table>tbody,.table>tbody>tr,.table>tbody>tr>td{display:block;width:100%;}
  .table>tbody>tr{
    background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
    margin-bottom:10px;padding:10px 12px !important;
    box-shadow:var(--shadow);
    animation:fadeUp .35s var(--ease) both;
  }
  .table>tbody>tr:hover>td{background:transparent!important;}
  .table>tbody>tr>td{
    border:0!important;padding:5px 0!important;
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
    font-size:13px;text-align:right;
  }
  .table>tbody>tr>td::before{
    content:attr(data-label);
    color:var(--muted);font-size:12px;flex:0 0 auto;text-align:left;padding-right:8px;
  }
  .table>tbody>tr>td:first-child{align-items:center;}
  .table>tbody>tr>td[data-label=""]::before{display:none;}
  /* 手机卡片：标签在左、值在右，值可换行不撑破 */
  .table>tbody>tr>td>div,.table>tbody>tr>td>*{min-width:0;}
  .table>tbody>tr>td>.task-progress{width:100%;}
  .ellipsis{max-width:58vw;text-align:right;}

  .modal-mask{padding:12px 10px 40px;}
  .modal-box{border-radius:var(--r-sm);}
  .detail-grid{grid-template-columns:1fr;row-gap:2px;}
  .detail-grid .k{font-size:11.5px;margin-top:8px;}
  .detail-grid .v{font-size:13.5px;}

  .nav-tabs .nav-link{padding:9px 12px;font-size:13.5px;flex:1;text-align:center;}
  .nav-tabs{flex-wrap:nowrap;}

  .section-card .d-flex.justify-content-between{align-items:flex-start!important;}
}

@media (max-width: 419.98px){
  .app-header .h-name{display:none;}
  .stat-box .value.small{font-size:12.5px;}
}

/* ============ 采集源徽章 ============ */
.badge-src-map {
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
  border: 1px solid var(--blue-line);
}
.badge-src-search {
  background: var(--purple-soft) !important;
  color: var(--purple) !important;
  border: 1px solid var(--purple-line);
}
/* 关键字「状态」列：点击胶囊即切换启用/禁用（保留原徽章外观） */
#kw-table .kw-status-btn {
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
  box-shadow: none;
  transition: filter .15s ease, transform .1s ease;
}
#kw-table .kw-status-btn:hover { filter: brightness(.92); }
#kw-table .kw-status-btn:active { transform: scale(.95); }
#kw-table .kw-status-btn:focus-visible { outline: 2px solid var(--caramel, #C8A15A); outline-offset: 1px; }
/* 表格内官网链接（可长按复制） */
a.link-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  background: var(--ov-d);
  border: 1px solid var(--border);
  color: var(--text) !important;
  transition: all .18s var(--ease);
}
a.link-chip:hover {
  background: var(--ov-h);
  border-color: var(--border-strong2);
  transform: translateY(-1px);
}

/* ---------- WhatsApp 号码链接 + 人工点亮标记 ---------- */
.wa-cell{display:inline-flex;align-items:flex-start;gap:6px;max-width:100%;}
.wa-nums{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0;}
.wa-cell .wa-dot{margin-top:5px;}
a.wa-num{
  display:inline-flex;align-items:center;gap:5px;
  text-decoration:none;cursor:pointer;transition:all .18s var(--ease);
}
a.wa-num::before{display:none;}                 /* 去掉自动绿点，只留人工点亮指示 */
a.wa-num:hover{transform:translateY(-1px);filter:brightness(1.3);border-color:var(--border-strong2);}
.wa-glyph{font-size:9.5px;font-weight:700;letter-spacing:.3px;opacity:.9;flex:0 0 auto;}
.wa-dot{
  width:16px;height:16px;padding:0;flex:0 0 auto;
  border-radius:50%;background:transparent;
  border:1.5px solid var(--border-strong);cursor:pointer;
  position:relative;transition:all .18s var(--ease);
}
.wa-dot:hover{border-color:var(--green);transform:scale(1.15);}
.wa-dot.on{
  background:var(--green);border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-glow);
}
.wa-dot.on::after{
  content:'✓';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--green-bg);line-height:1;
}

/* ============ 品牌标识块 海寻AI（登录页） ============ */
.opai-mark{
  display:flex;align-items:center;justify-content:center;
  width:auto;min-width:48px;height:48px;padding:0 16px;
  margin:0 auto 14px;border-radius:14px;
  background:var(--accent);color:var(--on-accent);
  font-weight:800;font-size:17px;letter-spacing:2px;
  box-shadow:0 8px 22px var(--ov-i);
  border:1px solid var(--accent);
}
.login-copyright{color:var(--muted2)!important;letter-spacing:.3px;}

/* ============ 任务进度条 ============ */
.task-progress{min-width:190px;}
.task-progress-track{
  height:8px;border-radius:99px;background:var(--track);overflow:hidden;
  border:1px solid var(--border);
}
.task-progress-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--prog-from),var(--prog-to));
  transition:width .6s var(--ease);
  box-shadow:0 0 10px var(--ov-j);
}
.task-progress-fill.is-running{background:linear-gradient(90deg,var(--green-deep),var(--green));box-shadow:0 0 10px var(--green-glow);}
.task-progress-fill.is-paused{background:linear-gradient(90deg,var(--pause-from),var(--pause-to));box-shadow:0 0 10px var(--dot-off2-soft);}
.live-dot.is-paused{background:var(--dot-off2);animation:none;}
.live-dot.is-finished{background:var(--dot-off);animation:none;}
.done-hint{font-size:13px;color:var(--muted);}
.ctl-running.is-finished{border-color:var(--border2);}
.task-progress-fill.is-done{background:linear-gradient(90deg,var(--blue-deep),var(--blue));}
.task-progress-fill.is-failed{background:linear-gradient(90deg,var(--red-deep),var(--red));}
.task-progress-meta{
  display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--muted);margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.task-progress-meta span:last-child{color:var(--t2);}

@media (max-width: 767.98px){
  .task-progress{min-width:0;width:100%;}
  .task-progress-meta{max-width:100%;}
}

/* ============================================================
   UI/UX 第二轮：BI 统计条 / 新建大按钮 / 顶部进行中任务
   ============================================================ */

/* ---------- BI 统计条 ---------- */
.bi-bar{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.bi-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:14px 14px 12px;
  position:relative;
  overflow:hidden;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bi-item:hover{border-color:var(--border2);transform:translateY(-1px);}
.bi-item::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--t2);opacity:.5;
}
.bi-item .bi-num{
  font-size:26px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;color:var(--text);
}
.bi-item .bi-label{
  margin-top:5px;font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.bi-item .bi-hint{
  font-size:10.5px;color:var(--muted2);border:1px solid var(--border2);
  border-radius:99px;padding:1px 6px;white-space:nowrap;
}

/* ---------- 新建采集任务：已并入采集总控操作区，与开始/停止同为 btn-sm 描边按钮 ---------- */

/* ---------- 顶部：进行中任务 ---------- */
.running-area{border-left:3px solid var(--green);}
.run-item{
  display:grid;grid-template-columns:1fr minmax(200px,280px) auto;
  align-items:center;gap:16px;
  padding:12px 0;border-top:1px solid var(--border);
}
.run-item:first-of-type{border-top:0;}
.run-head{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;}
.run-head .run-name{font-weight:600;font-size:13.5px;color:var(--text);}
.run-head .run-country{font-size:12px;color:var(--muted);}
.run-actions{display:flex;gap:6px;justify-content:flex-end;}

/* ---------- 采集总控（兼容旧版轮询，置于任务列表之后） ---------- */
.ctl-card .ctl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.ctl-card .ctl-grid .label{color:var(--muted);font-size:11.5px;margin-bottom:4px;}
.ctl-card .ctl-grid .value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
.ctl-card .ctl-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}

/* ---------- 新建任务弹窗 ---------- */
.task-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
.task-form-grid .full{grid-column:1 / -1;}

@media (max-width: 991.98px){
  .bi-bar{grid-template-columns:repeat(5,minmax(0,1fr));}
  .run-item{grid-template-columns:1fr;gap:10px;}
  .run-actions{justify-content:flex-start;}
}

@media (max-width: 767.98px){
  .bi-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .bi-item{padding:11px 11px 10px;}
  .bi-item::after{width:2px;}
  .bi-item .bi-num{font-size:21px;}
  .bi-item .bi-label{font-size:11px;}
  .ctl-card .ctl-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ctl-card .ctl-actions{justify-content:stretch;}
  .ctl-card .ctl-actions .btn{flex:1 1 auto;}
  .task-form-grid{grid-template-columns:1fr;}
  /* 手机端：表格值区允许换行，操作按钮并排铺满 */
  .table>tbody>tr>td .d-flex.flex-wrap.gap-1{width:100%;justify-content:flex-start!important;}
  .table>tbody>tr>td .d-flex.flex-wrap.gap-1 .btn{flex:0 0 auto;}
  .wa-cell{max-width:100%;}
  .wa-nums{max-width:100%;}
  a.wa-num{max-width:62vw!important;}
}

/* ============================================================
   UI/UX 第三轮：BI 条 / 大按钮 重做 + 首页结构重排
   （追加覆盖，保持黑白体系，克制精致）
   ============================================================ */

/* ---------- BI 统计条：分隔式指标组，无大色块 ---------- */
.bi-bar{
  display:flex;flex-wrap:wrap;align-items:stretch;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-sm);overflow:hidden;margin-bottom:16px;gap:0;
}
.bi-item{
  flex:1 1 0;min-width:0;padding:15px 18px;background:transparent;
  border:0;border-left:1px solid var(--border);border-radius:0;overflow:visible;
  transition:background var(--dur) var(--ease);
}
.bi-item:first-child{border-left:0;}
.bi-item::after{display:none;}           /* 去掉旧版左侧色条 */
.bi-item:hover{background:var(--ov-a);transform:none;}
.bi-item .bi-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:28px;font-weight:600;line-height:1.05;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.bi-item .bi-label{margin-top:7px;font-size:11.5px;color:var(--muted);letter-spacing:.4px;display:block;}
.bi-item .bi-hint{
  display:inline-block;margin-top:4px;font-size:10px;color:var(--muted2);
  border:0;padding:0;letter-spacing:.2px;
}

/* ---------- 新建采集任务：已并入采集总控操作区（btn-sm），此处不再重复定义 ---------- */
/* ---------- 采集总控：当前运行任务 ---------- */
.ctl-card .ctl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.ctl-card .ctl-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.ctl-running{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.ctl-empty{
  margin-top:14px;padding:22px 16px;text-align:center;color:var(--muted);font-size:13px;
  border:1px dashed var(--border2);border-radius:var(--r-xs);
}

/* ---------- 历史任务：折叠下拉 ---------- */
.history-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:transparent;border:0;padding:0;color:var(--text);cursor:pointer;text-align:left;
}
.history-toggle .ht-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.history-toggle .caret{color:var(--muted);font-size:12px;transition:transform var(--dur) var(--ease);}
.history-toggle.open .caret{transform:rotate(180deg);}
.history-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}

/* ---------- 关键字选择器（新建任务弹窗） ---------- */
.kw-picker{
  max-height:230px;overflow:auto;border:1px solid var(--border2);border-radius:var(--r-xs);
  background:var(--list-bg);
}
.kw-opt{
  display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
  border-top:1px solid var(--border);font-size:13px;margin:0;
}
.kw-opt:first-child{border-top:0;}
.kw-opt:hover{background:var(--ov-b);}
.kw-opt input{margin:0;flex:0 0 auto;}
.kw-opt .kw-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1);}
.kw-opt .kw-country{flex:0 0 auto;font-size:11.5px;color:var(--muted);}

/* ---------- 客户线索：折叠筛选 ---------- */
.filter-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.filter-toggle{
  display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;
  color:var(--text);font-weight:600;font-size:14px;cursor:pointer;padding:2px 0;
}
.filter-toggle .caret{color:var(--muted);font-size:12px;transition:transform var(--dur) var(--ease);}
.filter-toggle.open .caret{transform:rotate(180deg);}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.chip{
  font-size:11.5px;color:var(--t2);background:var(--ov-d);
  border:1px solid var(--border2);border-radius:99px;padding:2px 9px;white-space:nowrap;
}
.chip-clear{
  font-size:11.5px;color:var(--muted);background:transparent;border:1px solid var(--border2);
  border-radius:99px;padding:2px 9px;cursor:pointer;transition:all var(--dur) var(--ease);
}
.chip-clear:hover{color:var(--text);border-color:var(--border-strong2);}
.filter-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}

@media (max-width:600px){
  .bi-bar{display:grid;grid-template-columns:1fr 1fr;}
  .bi-item{border-left:1px solid var(--border);border-top:1px solid var(--border);padding:13px 15px;}
  .bi-item:nth-child(1),.bi-item:nth-child(2){border-top:0;}
  .bi-item:nth-child(odd){border-left:0;}
  .bi-item:last-child{grid-column:1 / -1;}
  .bi-item .bi-num{font-size:23px;}
  .task-new-row{margin:14px 0;}
  .btn-create-task{width:100%;}
}

/* ============================================================
   设计优化 v5（2026-09-30）：登录页 / 首页 / 客户列表 排版精修
   原则：只改视觉与排版，不动结构与功能
   ============================================================ */

/* ---------- 登录页：层级与呼吸感 ---------- */
.login-logo{margin-bottom:32px;}
.login-logo .logo-icon{
  width:44px;height:44px;border-radius:11px;margin-bottom:15px;
  box-shadow:0 6px 22px var(--ov-e);object-fit:contain;
}
.login-logo .logo-text{font-size:21px;font-weight:600;letter-spacing:.8px;}
.login-logo .logo-sub{font-size:11.5px;letter-spacing:1.2px;margin-top:7px;}
.login-form{gap:12px;}
.login-form input{
  padding:15px 16px;border-radius:12px;font-size:14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.login-form input:focus{border-color:var(--border-strong2);box-shadow:0 0 0 3px var(--ov-g);}
.login-form button{padding:15px;border-radius:12px;font-size:14px;letter-spacing:1px;}
.login-form button:hover{opacity:1;background:var(--accent-hover);}
.login-error{margin-bottom:10px;}
.login-hint{margin-top:24px;letter-spacing:.3px;}

/* ---------- 首页：BI 统计条 ---------- */
.bi-bar{margin-bottom:16px;}
.bi-item{padding:16px 20px;}
.bi-item .bi-num{font-size:27px;letter-spacing:-.8px;}
.bi-item .bi-label{font-size:11.5px;letter-spacing:.6px;color:var(--muted);}
.bi-item .bi-hint{font-size:10px;color:var(--muted3);}
.bi-item:hover{background:var(--ov-b);}

/* ---------- 首页：采集总控 = 任务面板 ---------- */
.ctl-card .ctl-head{padding-bottom:2px;}
.ctl-card .ctl-head strong{font-size:15px;font-weight:600;letter-spacing:.3px;}
.ctl-card .ctl-head .text-muted{font-size:11.5px;}
.ctl-card .ctl-actions .btn{min-width:96px;}
.ctl-running{
  margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:linear-gradient(180deg,var(--bg-grad-top),var(--list-bg));
}
.ctl-running.is-finished{border-color:var(--border2);background:var(--list-bg);}
.ctl-running .run-head{gap:9px;margin-bottom:2px;}
.ctl-running .run-head .run-name{font-size:14.5px;font-weight:600;letter-spacing:.2px;}
.ctl-running .run-head .run-country{
  font-size:11.5px;color:var(--t3);background:var(--ov-d);
  border:1px solid var(--border);border-radius:99px;padding:2px 9px;
}
.ctl-running .task-progress{margin-top:14px;}
.task-progress-track{height:7px;background:var(--track);border-radius:99px;overflow:hidden;}
.task-progress-fill{border-radius:99px;}
.task-progress-meta{margin-top:8px;font-size:11.5px;color:var(--muted);}
.task-progress-meta span:last-child{font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.ctl-running .small.text-muted{font-size:11.5px;color:var(--muted);line-height:1.7;}
.ctl-running .run-actions{margin-top:14px;}
.ctl-running .run-actions .btn{min-width:88px;}
.ctl-empty{margin-top:16px;padding:26px 16px;background:var(--list-bg);border-style:dashed;font-size:12.5px;}
.ctl-card > .text-muted[style]{font-size:11.5px!important;color:var(--muted3)!important;margin-top:14px!important;}

/* ---------- 首页：历史任务表 ---------- */
.section-card .table-wrap{border-radius:var(--r-xs);}
.table>thead th{
  background:var(--thead);font-size:11.5px;letter-spacing:.5px;
  text-transform:none;padding:11px 12px;
}
.table>tbody td{padding:12px;font-size:13px;}
.table-hover>tbody>tr:hover>td{background:var(--ov-b)!important;}
#task-table>tbody>tr>td[data-label="任务"] .ellipsis{color:var(--text);font-weight:500;}
#task-table>tbody>tr>td[data-label="任务"] .small{font-size:11.5px;color:var(--muted)!important;}
.history-toggle strong{font-size:15px;letter-spacing:.3px;}

/* ---------- 客户列表：筛选区 ---------- */
.filter-toggle{font-size:15px;letter-spacing:.3px;}
.filter-chips .chip{font-size:11px;padding:3px 10px;}
.filter-body .form-label{font-size:12px;color:var(--sec);letter-spacing:.2px;}

/* ---------- 客户列表：表格排版 ---------- */
#cust-table>tbody>tr>td[data-label="公司"] .ellipsis{font-size:13.5px;font-weight:600;color:var(--text);}
#cust-table>tbody>tr>td[data-label="邮箱"] .ellipsis{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--t3);
}
#cust-table>tbody>tr>td[data-label="国家"],
#cust-table>tbody>tr>td[data-label="联系人"],
#cust-table>tbody>tr>td[data-label="关键字"]{color:var(--t2);}
#cust-table>tbody>tr>td[data-label="操作"] .btn{min-width:76px;}
/* 关键字：带边框的标签样式 */
.kw-tags{display:flex;flex-wrap:wrap;gap:4px;}
.kw-tag{
  display:inline-block;padding:2px 9px;border-radius:99px;
  border:1px solid var(--border-strong2);background:var(--ov-a);
  color:var(--t2);font-size:11.5px;line-height:1.5;letter-spacing:.2px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#cust-table>tbody>tr>td[data-label="关键字"] .kw-tag{color:var(--t2);}
/* 客户列表：行悬停用柔和圆角投影（仅桌面端） */
@media (min-width:768px){
  #cust-table>tbody>tr{transition:box-shadow .26s var(--ease), background .26s var(--ease), transform .18s var(--ease);border-radius:10px;}
  #cust-table>tbody>tr:hover{box-shadow:var(--shadow-row);}
}
/* 每页条数选择器 */
.page-size-select{width:auto;min-width:88px;padding-top:3px;padding-bottom:3px;font-size:12.5px;}

/* ---------- 手机端：卡片更清爽 ---------- */
@media (max-width: 767.98px){
  .section-card{padding:13px;}
  .bi-item{padding:13px 15px;}
  .bi-item .bi-num{font-size:22px;}
  .ctl-running{padding:14px;}
  .ctl-card .ctl-actions .btn{min-width:0;}
  .ctl-running .run-actions .btn{flex:1 1 auto;}

  .table>tbody>tr{padding:12px 14px !important;border-radius:12px;}
  .table>tbody>tr>td{padding:5px 0 !important;font-size:13px;}
  .table>tbody>tr>td::before{font-size:11.5px;color:var(--muted3);}
  #cust-table>tbody>tr>td[data-label="公司"]{padding-bottom:8px !important;}
  #cust-table>tbody>tr>td[data-label="公司"]::before{display:none;}
  #cust-table>tbody>tr>td[data-label="公司"] .ellipsis{
    max-width:100%;font-size:15px;font-weight:600;text-align:left;
  }
  #cust-table>tbody>tr>td[data-label="操作"]{padding-top:10px !important;border-top:1px solid var(--border)!important;margin-top:6px;}
  #cust-table>tbody>tr>td[data-label="操作"]::before{display:none;}
  #cust-table>tbody>tr>td[data-label="操作"] .d-flex{width:100%;justify-content:flex-start!important;gap:8px;}
  #cust-table>tbody>tr>td[data-label="操作"] .btn{flex:1 1 0;min-width:0;}
  #task-table>tbody>tr>td[data-label="操作"]{padding-top:10px !important;border-top:1px solid var(--border)!important;}
  .history-body{margin-top:12px;padding-top:12px;}
}

/* ============================================================
   暗/亮主题切换按钮（仅视觉，用户级操作）
   位置：顶栏 .h-right 内、用户名之后「退出」之前；登录页固定右上角
   ============================================================ */
.theme-toggle{
  position:relative;
  width:32px;height:32px;flex:0 0 auto;
  padding:0;border-radius:8px;
  background:transparent;border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease),transform .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.theme-toggle:active{transform:scale(.94);}
.theme-toggle:focus-visible{outline:0;box-shadow:0 0 0 2px var(--ring);border-color:var(--border-strong);}
.theme-toggle svg{
  position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  opacity:0;transform:rotate(-90deg) scale(.5);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
html[data-theme="dark"] .theme-toggle .ic-moon,
html[data-theme="light"] .theme-toggle .ic-sun{opacity:1;transform:rotate(0deg) scale(1);}

/* 登录页无顶栏 → 固定右上角 */
body.login-body .theme-toggle{position:fixed;top:16px;right:16px;z-index:1100;}

@media (max-width: 767.98px){
  .theme-toggle{width:28px;height:28px;border-radius:7px;}
  .theme-toggle svg{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;}
  body.login-body .theme-toggle{top:12px;right:12px;}
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce){
  .theme-toggle,.theme-toggle svg{transition:none!important;}
  html,body,.card,.section-card,.app-header,.modal-mask,.modal-box,.table-wrap,.table,
  .form-control,.form-select,.form-check-input,.stat-box,.bi-item,.ctl-running,
  .link-chip,.chip,.h-avatar,.h-logo,.foot,.empty,.kw-picker{transition:none!important;}
}

/* =====================================================================
   采集总控：每日采集额度 + 运行控制（2026-10-01）
   ===================================================================== */
@keyframes ctlPulse{0%,100%{opacity:1}50%{opacity:.35}}

.ctl-card .ctl-new{white-space:nowrap;}
.ctl-card .ctl-new:disabled{opacity:.45;cursor:not-allowed;}

/* 每日采集额度条 */
.quota{margin-top:12px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--list-bg);}
.quota-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--t2);}
.quota-label{font-weight:600;color:var(--text);letter-spacing:.3px;}
.quota-nums strong{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;}
.quota-cap{font-size:11.5px;color:var(--muted3);}
.quota-out-tag{margin-left:auto;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;color:var(--red);border:1px solid var(--red);background:var(--red-soft);}
.quota-track{margin-top:9px;height:6px;border-radius:99px;background:var(--track);overflow:hidden;}
.quota-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green-deep),var(--green));transition:width .45s ease;}
.quota.is-out{border-color:var(--red);}
.quota.is-out .quota-fill{background:linear-gradient(90deg,var(--red-deep),var(--red));}
.quota-hint{margin-top:8px;font-size:11.5px;line-height:1.55;color:var(--red);}

/* 状态徽章与呼吸点 */
.status-badge{font-weight:500;letter-spacing:.3px;}
.live-dot.dot-running,.live-dot.is-waiting{animation:ctlPulse 1.5s ease-in-out infinite;}
.live-dot.is-waiting{background:var(--orange);}

/* 运行控制区：1 主按钮 + 1 次级「结束任务」 */
.ctl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.ctl-primary{min-width:136px;font-weight:600;}
.ctl-link{font-size:12.5px;color:var(--muted);text-decoration:none;border-bottom:1px dashed var(--border-strong);padding-bottom:1px;cursor:pointer;}
.ctl-link:hover{color:var(--red);border-bottom-color:var(--red);}
.confirm-text{font-size:12.5px;color:var(--text);}
.ctl-empty{margin-top:12px;}
.state-msg{color:var(--t3);}

@media (max-width:575px){
  .ctl-foot{gap:8px;}
  .ctl-primary{flex:1 1 100%;min-width:0;}
  .quota-line .quota-out-tag{margin-left:0;}
  .quota-cap{display:none;}
}

/* =====================================================================
   表格悬停：修复「生硬方形投影」
   根因：Bootstrap .table-hover 用 inset 0 0 0 9999px 填充单元格，
        在带圆角的行/卡片上会溢出成方形边界。
   做法：取消该 inset 填充，改用「随卡片圆角」的柔和悬停底 + 柔和投影。
   ===================================================================== */
.table-hover>tbody>tr:hover>*{
  box-shadow:none !important;          /* 关键：去掉 Bootstrap 的方形 inset 填充 */
}
.table-hover>tbody>tr:hover>td{
  background:var(--hover-row) !important;
  transition:background-color .22s var(--ease);
}
/* 首/末单元格跟随卡片圆角，保证悬停边界是圆角而非方形 */
@media (min-width:768px){
  .table-hover>tbody>tr>td:first-child{border-radius:10px 0 0 10px;}
  .table-hover>tbody>tr>td:last-child{border-radius:0 10px 10px 0;}
  .table-hover>tbody>tr{border-radius:10px;transition:box-shadow .26s var(--ease), background-color .26s var(--ease);}
  /* 圆角行 + 柔和扩散投影（深色用一层极淡光晕，避免黑底看不见阴影） */
  .table-hover>tbody>tr:hover{box-shadow:var(--shadow-row);}
}

/* =====================================================================
   修复 v2：圆角/投影在 collapse 表格里根本不渲染
   根因：Bootstrap reboot 的 table{border-collapse:collapse} 下，Chrome 会
        忽略单元格/行上的 border-radius 与 box-shadow → 悬停底永远是方形；
        且上一版阴影里的 `0 0 0 1px` 描边在暗色下是一条硬矩形线（"方框"）。
   做法：表格改 separate（间距 0，视觉与 collapse 一致），圆角与柔和投影才真正生效。
   ===================================================================== */
.table{border-collapse:separate;border-spacing:0;}
@media (min-width:768px){
  .table-hover>tbody>tr{border-radius:12px;}
  .table-hover>tbody>tr>td:first-child{border-radius:12px 0 0 12px;}
  .table-hover>tbody>tr>td:last-child{border-radius:0 12px 12px 0;}
  /* 悬停底色 + 柔和扩散投影（无任何硬边描边） */
  .table-hover>tbody>tr:hover>td{background:var(--hover-row)!important;}
  .table-hover>tbody>tr:hover{box-shadow:var(--shadow-row);}
}

/* =====================================================================
   列表卡片「凸起」交互 —— 手机(≤767.98px) 与 任何触摸设备(hover:none)
   用户实际在手机端预览：移动端没有鼠标 hover，故不用 hover 做反馈；
   默认态=柔和圆角阴影+细描边，按压态(active/.is-press)=上浮凸起+阴影加深+描边提亮。
   仅视觉与交互；功能、结构、接口、数据结构零改动。
   ===================================================================== */

/* ① 按压凸起：不限宽度（桌面点击行同样有反馈；触摸端由 .is-press 兜底） */
#cust-table>tbody>tr:active,
#task-table>tbody>tr:active,
#kw-table>tbody>tr:active,
#cust-table>tbody>tr.is-press,
#task-table>tbody>tr.is-press,
#kw-table>tbody>tr.is-press,
.cust-row:active,
.cust-row.is-press{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card-hi)!important;
  border-color:var(--border-strong)!important;
}

/* ② 卡片外观：手机 或 任何触摸设备 */
@media (max-width: 767.98px), (hover: none){
  #cust-table>tbody>tr,
  #task-table>tbody>tr,
  #kw-table>tbody>tr{
    border:1px solid var(--border) !important;      /* 细描边 */
    border-radius:14px !important;                  /* 阴影跟随圆角，不出现方形边界 */
    box-shadow:var(--shadow-card) !important;       /* 默认：贴合卡片的柔和圆角投影 */
    transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    -webkit-tap-highlight-color:transparent;
    /* 去掉 fill 固定（both）：否则动画结束时的 transform:translateY(0) 会顶掉按压位移 */
    animation:fadeUp .35s var(--ease);
  }
  /* 触摸端不保留任何仅桌面有效的 hover 反馈：:not(:active) 且排在 :active 之前，
     否则同优先级下后写的 :hover 会盖掉按压态的阴影/描边（触摸时两者同时命中） */
  #cust-table>tbody>tr:hover:not(:active):not(.is-press),
  #task-table>tbody>tr:hover:not(:active):not(.is-press),
  #kw-table>tbody>tr:hover:not(:active):not(.is-press){
    box-shadow:var(--shadow-card) !important;
    border-color:var(--border) !important;
  }
  /* 彻底杜绝方形：单元格不留任何 inset 填充 */
  #cust-table>tbody>tr>td,#task-table>tbody>tr>td,#kw-table>tbody>tr>td{box-shadow:none!important;}
  /* 卡片内操作按钮按压也上浮（原生按钮的 :active 在 iOS 上必定生效） */
  #cust-table .btn:active,#cust-table .wa-dot:active,#cust-table .link-chip:active,
  #task-table .btn:active,#kw-table .btn:active{transform:translateY(-2px) scale(.985);}
}

/* ③ 触摸设备（平板 / 桌面模式手机，宽度≥768）同样走卡片式：补足卡片化布局 */
@media (hover: none) and (min-width: 768px){
  .table-wrap{border:0!important;background:transparent!important;overflow-x:visible!important;}
  #cust-table,#task-table,#kw-table,
  #cust-table>tbody,#task-table>tbody,#kw-table>tbody,
  #cust-table>tbody>tr,#task-table>tbody>tr,#kw-table>tbody>tr{display:block;width:100%;}
  #cust-table>thead,#task-table>thead,#kw-table>thead{display:none;}
  #cust-table>tbody>tr,#task-table>tbody>tr,#kw-table>tbody>tr{padding:12px 14px!important;margin-bottom:10px;}
  #cust-table>tbody>tr>td,#task-table>tbody>tr>td,#kw-table>tbody>tr>td{
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
    border:0!important;padding:5px 0!important;font-size:13px;text-align:right;
  }
  #cust-table>tbody>tr>td::before,#task-table>tbody>tr>td::before,#kw-table>tbody>tr>td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;padding-right:8px;font-size:11.5px;color:var(--muted3);
  }
  #cust-table>tbody>tr>td[data-label=""],#task-table>tbody>tr>td[data-label=""],#kw-table>tbody>tr>td[data-label=""]{display:block;}
  #cust-table>tbody>tr>td[data-label=""]::before,#task-table>tbody>tr>td[data-label=""]::before,#kw-table>tbody>tr>td[data-label=""]::before{display:none;}
}

/* =====================================================================
   客户页改版（设计师方案 v1）—— 4 区行卡 / 移动卡片 / 分段控件 / 滑动翻页
   原则：仅换展示方式与样式；功能、接口、数据结构零改动（全部走现有 token，暗/亮通用）
   ===================================================================== */

/* ---- 有效性分段控件（高频筛选，提到列表上方） ---- */
.seg-ctrl{display:inline-flex;gap:4px;padding:3px;background:var(--card2);border:1px solid var(--border);border-radius:10px;margin-bottom:10px}
.seg-ctrl button{appearance:none;border:0;background:transparent;color:var(--muted);font-size:12.5px;padding:5px 12px;border-radius:8px;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.seg-ctrl button b{font-weight:600;margin-left:4px;opacity:.75;font-variant-numeric:tabular-nums}
.seg-ctrl button:hover{color:var(--text)}
.seg-ctrl button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.seg-ctrl button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--ring)}

/* ---- 列表容器 ---- */
.cust-list{display:block;transition:opacity .18s var(--ease);touch-action:pan-y;overscroll-behavior-x:contain}
.cust-list.busy{opacity:.5;pointer-events:none}
.cust-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:46px 12px;color:var(--muted);font-size:13px}

/* ---- 桌面行卡（≥768px）：主体 / 联系动作 / 状态 / 操作 四区 grid ---- */
.cust-row{position:relative;display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(200px,300px) 84px 172px;
  gap:16px;align-items:center;padding:14px 16px 14px 18px;border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.cust-row:last-child{border-bottom:0}
.cust-row:hover{background:var(--hover)}
.cust-bar{position:absolute;left:6px;top:16px;bottom:16px;width:3px;border-radius:2px;background:var(--green);
  transition:width .18s var(--ease),background .18s var(--ease)}
.cust-row.invalid .cust-bar{background:var(--muted2)}
.cust-row:hover .cust-bar{width:4px}

.cust-main{min-width:0}
.cust-title{display:flex;align-items:center;gap:8px;min-width:0}
.cust-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cust-valid-m{display:none}
.cust-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:11.5px;color:var(--muted);min-width:0}
.cust-meta .m-kw{color:var(--t2)}
.cust-meta .m-kw i{font-style:normal;color:var(--muted2);margin-left:2px}
.cust-meta .m-src{display:inline-flex;align-items:center}
.cust-meta .m-src.src-map{color:var(--blue)}
.cust-meta .m-src.src-search{color:var(--purple)}
.cust-meta .m-rate{color:var(--muted2)}
.cust-meta .m-rate .star{color:var(--orange);margin-right:2px}
.cust-meta .m-time{color:var(--muted2)}

.cust-contact{min-width:0;display:flex;flex-direction:column;gap:6px}
.wa-lines{display:flex;flex-direction:column;gap:6px;min-width:0}
.wa-btn{position:relative;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 26px 0 9px;
  border:1px solid var(--green-line2);background:var(--green-soft2);color:var(--green);border-radius:8px;
  font-size:12px;text-decoration:none;min-width:0;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .14s var(--ease)}
.wa-btn:hover{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.wa-btn.phone{border-color:var(--border-strong);background:transparent;color:var(--t2)}
.wa-btn .wa-glyph{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.4px;border:1px solid currentColor;border-radius:4px;padding:1px 3px;opacity:.9}
.wa-btn .wa-dot{position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  border:1.5px solid var(--muted3);background:transparent;cursor:pointer;padding:0;
  transition:background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.wa-btn .wa-dot:hover{border-color:var(--green)}
.wa-btn .wa-dot.on{background:var(--green);border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow)}
.wa-more{font-size:11px;color:var(--muted2)}
.wa-none{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border:1px dashed var(--border-strong);border-radius:8px;color:var(--muted2);font-size:11.5px}
.m-mail{font-size:11.5px;color:var(--muted);text-decoration:none;max-width:100%}
.m-mail:hover{color:var(--text);text-decoration:underline}

.cust-status{display:flex;align-items:center}
.cust-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.c-btn{appearance:none;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:8px;
  border:1px solid var(--border-strong);background:transparent;color:var(--t2);font-size:12px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .14s var(--ease)}
.c-btn:hover{border-color:var(--border-strong2);color:var(--text);background:var(--hover2)}
.c-btn.primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}
.c-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.c-more{position:relative;display:inline-flex}
.c-btn.more{opacity:.45;padding:0 9px;font-size:15px;line-height:1}
.cust-row:hover .c-btn.more{opacity:1}
.c-menu{position:absolute;right:0;top:34px;z-index:var(--z-inline);min-width:112px;padding:4px;background:var(--card);
  border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-soft)}
/* 浮层打开时：本行提升层级且不上浮（根因修复 2026-10-01）——
   若本行因 :active/.is-press 产生 transform 会新建层叠上下文，浮层会掉到下一行下面，
   鼠标抬起落到下一行→浏览器不派发 click→「访问/发邮件」点了没反应 */
.cust-row.has-pop{z-index:var(--z-inline)}
.cust-row.has-pop,.cust-row.has-pop:active,.cust-row.has-pop.is-press{transform:none!important}
.pop-none{display:flex;align-items:center;justify-content:center;height:30px;border:1px dashed var(--border-strong);
  border-radius:8px;color:var(--muted2);font-size:11.5px}
.c-menu button{display:block;width:100%;text-align:left;appearance:none;border:0;background:transparent;color:var(--t2);font-size:12.5px;padding:7px 9px;border-radius:7px;cursor:pointer}
.c-menu button:hover{background:var(--hover2);color:var(--text)}

/* ---- 翻页栏（列表下方居中） ---- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted)}
.pg-stat strong{color:var(--text);font-variant-numeric:tabular-nums}
.pg-nav{display:flex;align-items:center;gap:8px}
.pg-btn{appearance:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--border-strong);background:transparent;color:var(--t2);
  font-size:15px;line-height:1;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.pg-btn:hover:not(:disabled){border-color:var(--border-strong2);color:var(--text);background:var(--hover2)}
.pg-btn:disabled{opacity:.35;cursor:not-allowed}
.pg-num{min-width:62px;text-align:center;color:var(--text);font-variant-numeric:tabular-nums}
.pg-dots{display:inline-flex;align-items:center;gap:5px;margin-left:4px}
.pg-dots i{width:6px;height:6px;border-radius:50%;background:var(--border-strong);transition:transform .18s var(--ease),background .18s var(--ease)}
.pg-dots i.on{background:var(--text);transform:scale(1.3)}
.pg-size{display:flex;align-items:center;gap:6px}
.swipe-tip{position:fixed;left:50%;bottom:82px;transform:translateX(-50%);z-index:var(--z-toast);padding:8px 14px;border-radius:10px;
  background:var(--card);border:1px solid var(--border-strong);color:var(--text);font-size:12.5px;box-shadow:var(--shadow-soft);
  animation:fadeUp .2s var(--ease) both}

/* ---- 手机 / 触摸设备：单列卡片（10 条约 1500px，较原表格式减半） ---- */
@media (max-width: 767.98px), (hover: none){
  .cust-list{display:flex;flex-direction:column;gap:10px}
  .cust-row{grid-template-columns:1fr;gap:8px;align-items:stretch;background:var(--card);border:1px solid var(--border);
    border-radius:14px;box-shadow:var(--shadow-card);padding:14px 14px 14px 16px;border-bottom:1px solid var(--border)}
  .cust-row:last-child{margin-bottom:0}
  .cust-bar{left:0;top:14px;bottom:14px;width:3px}
  .cust-title{align-items:flex-start}
  .cust-name{font-size:15px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cust-valid-m{display:inline-flex;flex:0 0 auto;margin-left:auto}
  .cust-status{display:none}
  .wa-btn{width:100%;height:40px;justify-content:flex-start;font-size:13px;padding:0 36px 0 12px}
  .wa-btn .wa-dot{right:12px;width:12px;height:12px;margin-top:-6px}
  .wa-none{width:100%;height:40px}
  .m-mail{font-size:12px}
  .cust-actions{justify-content:flex-start;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:10px;margin-top:2px}
  .c-btn{height:32px;padding:0 12px;font-size:12.5px}
  .c-btn.primary{margin-left:auto}
  .c-menu{top:36px}
  .seg-ctrl{width:100%;justify-content:space-between}
  .seg-ctrl button{flex:1 1 0;text-align:center}
  .pager{flex-direction:column;gap:10px;align-items:center;text-align:center}
  .pg-stat{order:1}
  .pg-nav{order:2}
  .pg-size{order:3}
  .swipe-tip{bottom:96px}
}

/* ===================== 客户页交互改版（v5-1001q）=====================
   ① 有效/无效：点徽章即翻转（不再走 ⋯ 菜单）
   ② 邮箱：列表只留图标，点图标展开地址 + 「发邮件」
   ③ 官网：点图标展开地址 + 「访问」
   ④ ⋯ → 星标：点击即标记「重点」，顶部新增「重点」Tab
   =================================================================== */

/* 状态徽章可点击（点即翻转） */
.badge-toggle{border:0;cursor:pointer;font-family:inherit;line-height:1;
  transition:filter .16s var(--ease),transform .14s var(--ease),box-shadow .16s var(--ease)}
.badge-toggle:hover{filter:brightness(1.16)}
.badge-toggle:active,.badge-toggle.is-press{transform:scale(.94)}
.badge-toggle:focus-visible{outline:0;box-shadow:0 0 0 2px var(--ring)}

/* 顶部「重点」Tab 的星 */
.seg-star .st{color:#f5b301;margin-right:3px;font-size:12px}

/* 图标按钮（邮箱 / 官网） */
.c-btn.icon{padding:0;width:28px;justify-content:center;color:var(--muted)}
.c-btn.icon:hover{color:var(--text)}
.c-btn.icon.open{border-color:var(--accent);color:var(--accent)}

/* 星标按钮 */
.c-btn.star{padding:0 8px;font-size:15px;line-height:1;color:var(--muted2)}
.c-btn.star:hover{color:#f5b301;border-color:var(--border-strong2)}
.c-btn.star.on{color:#f5b301;border-color:rgba(245,179,1,.45);background:rgba(245,179,1,.10)}
.c-btn.star:active,.c-btn.star.is-press{transform:scale(.9)}

/* 地址浮层（邮箱 / 官网） */
.c-menu.pop{min-width:212px;max-width:min(300px,78vw);padding:10px;display:flex;flex-direction:column;gap:8px}
.pop-cap{font-size:11px;color:var(--muted2)}
.pop-val{display:flex;flex-direction:column;gap:3px;max-height:108px;overflow:auto}
.pop-val i{font-style:normal;font-size:12px;color:var(--text);word-break:break-all;line-height:1.45}
.pop-act{justify-content:center;height:30px;width:100%}

/* 重点客户：左侧色条转金色 */
.cust-row.starred .cust-bar{background:#f5b301}

@media (max-width: 767.98px), (hover: none){
  .c-btn.icon{width:32px;height:32px}
  .c-btn.star{padding:0 12px;font-size:17px}
  /* 手机端图标在行首，浮层从左侧展开，避免出界 */
  .c-menu.pop{left:0;right:auto;top:38px;max-width:min(280px,80vw)}
  .badge-toggle{padding:4px 9px}
}

/* ============================================================
   关键字模块（v5-1001u）：列表采集效果统计 + 预制词库
   仅视觉与交互，不改功能与数据结构
   ============================================================ */
.kw-lib{
  margin-top:12px;padding:10px 12px;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-sm);
}
.kw-lib-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.kw-lib-head strong{font-size:13px;color:var(--text);}
.kw-lib-meta{font-size:11.5px;color:var(--muted);}
.kw-lib-meta em{font-style:normal;display:block;color:var(--muted2);margin-top:2px;}
.kw-lib-search{width:220px;margin-left:auto;}
.kw-lib-cats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px;}
.kw-cat{
  padding:3px 10px;border:1px solid var(--border2);border-radius:99px;background:var(--ov-d);
  color:var(--t2);font-size:11.5px;line-height:1.5;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.kw-cat:hover{border-color:var(--border-strong2);color:var(--text);}
.kw-cat.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.kw-lib-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:6px;
  max-height:264px;overflow-y:auto;padding-right:2px;
}
.kw-item{
  display:flex;align-items:center;gap:6px;min-width:0;
  padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--card);
  color:var(--text);font-size:12px;text-align:left;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.kw-item:hover{border-color:var(--accent);background:var(--hover);transform:translateY(-1px);}
.kw-item:active{transform:translateY(0);}
.kw-item .kw-term{font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.kw-item .kw-zh{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;}
.kw-item .kw-tag{
  flex:0 0 auto;font-size:10px;padding:1px 6px;border-radius:4px;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--muted);
}
.kw-item .kw-market{border-color:var(--border-strong);color:var(--t2);}
.kw-item .kw-flag{flex:0 0 auto;font-size:10px;padding:1px 6px;border-radius:4px;}
.kw-item .kw-flag.added{background:var(--green-soft);border:1px solid var(--green-line);color:var(--green);}
.kw-item .kw-flag.off{background:var(--orange-soft);border:1px solid var(--orange-line);color:var(--orange);}
.kw-item.added,.kw-item.off{opacity:.62;cursor:not-allowed;background:var(--bg-soft);}
.kw-item.added:hover,.kw-item.off:hover{border-color:var(--border);transform:none;}
.kw-lib-empty{padding:14px;text-align:center;color:var(--muted);font-size:12px;}
/* 列表统计数值 —— 与客户列表 chip 同一套标签体系 */
.kw-stat{display:inline-flex;align-items:baseline;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums;
  background:var(--ov-d);border:1px solid var(--border2);border-radius:99px;padding:2px 9px;}
.kw-stat i{font-style:normal;font-size:11px;font-weight:400;color:var(--muted);margin-left:1px;}
.kw-stat.zero{color:var(--muted);font-weight:400;background:transparent;border-color:var(--border);}
.kw-last{font-size:12px;}

@media (max-width:600px){
  .kw-lib{padding:10px;}
  .kw-lib-search{width:100%;margin-left:0;}
  .kw-lib-list{grid-template-columns:1fr;max-height:320px;}
  .kw-item{min-height:42px;padding:9px 10px;font-size:12.5px;}
  .kw-item.added,.kw-item.off{opacity:.7;}
  .kw-cat{padding:4px 11px;}
}

/* =====================================================================
   修复 v5-1001v（2026-10-01）
   ① 客户列表顶部 Tab（.seg-ctrl）在 iPhone 下文字挤压
      根因：手机端每格 flex:1 均分，375px 时单格仅 74px，而内边距 12px×2
            已占 24px → 「★重点 2」等文字被迫换行成两行，视觉上「挤在一起」。
      做法：缩小字号与内边距 + 强制单行不换行 + 允许横向滚动兜底（计数变长自动可滑），
            触摸目标高度保持 ≥32px，可正常点击。仅视觉与交互，功能零改动。
   ② 「关键字」模块视觉对齐客户列表（配色 / 卡片 / 标签 / 间距）
   ===================================================================== */

/* ---------- ① 客户列表顶部 Tab 手机适配 ---------- */
@media (max-width:767.98px), (hover:none){
  .seg-ctrl{
    width:100%;justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .seg-ctrl::-webkit-scrollbar{display:none;}
  .seg-ctrl button{
    flex:0 0 auto;white-space:nowrap;text-align:center;
    padding:6px 10px;font-size:12px;line-height:1.35;
  }
  .seg-ctrl button b{margin-left:3px;font-size:11.5px;}
  .seg-star .st{font-size:11px;margin-right:2px;}
}

/* ---------- ② 关键字列表：桌面视觉对齐客户列表 ---------- */
#kw-table td[data-label="关键字"]{font-weight:600;color:var(--text);}
#kw-table td[data-label="ID"]{color:var(--muted2);font-size:12px;}
#kw-section .section-card>.d-flex>div>strong{font-size:15px;font-weight:600;letter-spacing:.2px;}
#kw-section .section-card>.d-flex>div>.small{font-size:12px;line-height:1.55;display:inline-block;}

/* ---------- ② 关键字卡片：手机 / 触摸设备（对齐客户列表卡片体系） ---------- */
@media (max-width:767.98px), (hover:none){
  /* 左侧状态色条（启用=绿、禁用=灰），与 .cust-row 的 .cust-bar 同源 */
  #kw-table>tbody>tr{border-left:3px solid var(--green)!important;}
  #kw-table>tbody>tr.off{border-left-color:var(--muted2)!important;}
  /* 关键字文本＝卡片标题 */
  #kw-table>tbody>tr>td[data-label="关键字"]{
    font-size:15px;font-weight:600;color:var(--text)!important;
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
    max-width:none!important;padding-bottom:6px!important;
  }
  #kw-table>tbody>tr>td[data-label="关键字"]::before{display:none;}
  /* 次要字段压暗 */
  #kw-table>tbody>tr>td[data-label="ID"],
  #kw-table>tbody>tr>td[data-label="创建时间"]{color:var(--muted);font-size:12px;}
  #kw-table>tbody>tr>td[data-label="国家"]{color:var(--t2);}
  /* 操作区：与客户卡片一致（上分隔线 + 按钮左对齐、统一 32px） */
  #kw-table>tbody>tr>td[data-label="操作"]{
    padding-top:10px!important;border-top:1px solid var(--border)!important;margin-top:6px;
  }
  #kw-table>tbody>tr>td[data-label="操作"]::before{display:none;}
  #kw-table>tbody>tr>td[data-label="操作"] .d-flex{width:100%;justify-content:flex-start!important;gap:8px;}
  #kw-table .btn{height:32px;padding:0 12px;font-size:12.5px;}
}

/* =====================================================================
   修复 v5-1001w（2026-10-01）：关键字列表去掉鼠标悬停的阴影
   诉求：悬停关键字行时出现的阴影在手机端显示别扭 → 移除。
   根因：桌面规则 .table-hover>tbody>tr:hover{box-shadow:var(--shadow-row)}
        对所有 .table-hover 表格生效（含 #kw-table）；手机横屏 / 平板等
        「hover 可用」的环境下点按行会命中该规则，大扩散阴影还会「粘住」。
   做法：仅对 #kw-table 的 :hover 取消阴影。以下交互一律保留：
        · 悬停底色（.table-hover>tbody>tr:hover>td 的 hover-row）
        · 按压凸起（:active / .is-press 的 --shadow-card-hi）
        · 卡片式布局的默认柔和投影（--shadow-card）
   范围：仅「关键字」列表；任务列表 / 客户列表的悬停效果不受影响。
   ===================================================================== */
#kw-table>tbody>tr:hover{box-shadow:none;}
@media (max-width:767.98px), (hover:none){
  /* 卡片式布局下：悬停不额外加阴影，保持卡片默认柔和投影 */
  #kw-table>tbody>tr:hover{box-shadow:var(--shadow-card)!important;}
}

/* =====================================================================
   修复 v5-1001x（2026-10-01）：关键字列表去掉「悬停 / 按压」时的阴影效果
   用户反馈（手机上看的）：点按关键字卡片时冒出的阴影很别扭。
   真根因（逐状态实测，非桌面那条 hover 规则）：
     手机卡片布局下，按压态命中第 1179-1188 行
       #kw-table>tbody>tr:active / .is-press { box-shadow: var(--shadow-card-hi) !important }
     阴影从 --shadow-card 跳到 --shadow-card-hi
       （亮色 rgba(16,16,16,.28) 0 14px 28px；暗色还带 0 0 18px rgba(255,255,255,.12) 白色光晕）
     默认态与鼠标悬停态阴影本来一致 → 冲突只发生在按压瞬间。
   做法：仅在「手机 / 触摸」上下文，把 #kw-table 行的阴影锁死为卡片默认值，
        使其在 默认 / 悬停 / 按压 / 聚焦 四态下完全一致（不再出现阴影变化）；
        仍保留上浮位移作为触觉反馈。
   范围：仅关键字列表；客户列表、任务列表的卡片交互一行未动。
   ===================================================================== */
@media (max-width:767.98px), (hover:none){
  #kw-table>tbody>tr:hover,
  #kw-table>tbody>tr:active,
  #kw-table>tbody>tr.is-press,
  #kw-table>tbody>tr:focus-within{
    box-shadow:var(--shadow-card)!important;
  }
}

/* =====================================================================
   客户列表页 · 筛选区改版（v5-1001y，2026-10-01）
   ① 去掉「有效 / 无效」筛选（筛选体下拉项 + 顶部有效性 Tab + 筛选值），
      「有效 / 无效」仅保留为行内标记（徽章可点翻转 / 档案展示）。
   ② 新增两个高频筛选：WA（WhatsApp）与 邮箱，均支持 全部 / 有 / 无 三态，
      口径与列表展示一致：有 WA = whatsapp 或 phone 任一非空；有邮箱 = email 非空。
   ③ 视觉沿用现有分段控件 .seg-ctrl（同一套 token），仅新增分组标签与自动换行容器。
   ===================================================================== */
.filter-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:10px;}
.filter-quick .seg-ctrl{margin-bottom:0;}
.seg-group{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.seg-label{font-size:11.5px;color:var(--muted);letter-spacing:.3px;flex:0 0 auto;}

@media (max-width:767.98px), (hover:none){
  .filter-quick{gap:8px 10px;}
  /* 覆盖上方移动端 .seg-ctrl{width:100%}：按“组”换行，而不是每组独占一行再横向滚动 */
  .filter-quick .seg-ctrl{width:auto;flex:0 1 auto;}
  .seg-group{width:100%;}
  .seg-group .seg-ctrl{flex:1 1 auto;min-width:0;}
}

/* =====================================================================
   客户列表页 · 筛选区重设计（v5-1001z，2026-10-01，按设计师稿 ch-customer-filter-redesign.md）
   结构：① 主搜索（常驻·最高权重） ② 快捷分段（常驻：范围 / WA / 邮箱） ③ 更多筛选（折叠：国家 / 来源关键字 / 采集源）
   硬规则：WA 只出现一处（折叠区「WA 可联系」下拉已并入 WA 段第 4 段「✓可联系」）；
           高频在上、低频进折叠；筛选态永远可见（is_star 计入 chips，「已选 N 项 · 清空」紧贴折叠按钮）
   配色：不新增色值，全部沿用客户页既有 token
   ===================================================================== */

/* ---------- ① 主搜索行 ---------- */
.sq-row{position:relative;display:flex;align-items:center;gap:8px;}
.sq-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none;display:flex;z-index:1;}
.sq-ico svg{width:16px;height:16px;display:block;}
.sq-input{
  flex:1 1 auto;min-width:0;height:36px;padding:0 34px 0 34px;font-size:13.5px;
  background:var(--card2);border:1px solid var(--border);border-radius:8px;color:var(--text);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.sq-input::placeholder{color:var(--muted2);}
.sq-input:hover{border-color:var(--border2);}
.sq-input:focus{outline:0;border-color:var(--border-strong);box-shadow:0 0 0 3px var(--ring);}
.sq-clear{
  position:absolute;right:84px;top:50%;transform:translateY(-50%);width:24px;height:24px;z-index:2;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:transparent;color:var(--muted2);font-size:12px;line-height:1;cursor:pointer;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.sq-clear:hover{color:var(--text);background:var(--ov-d);}
.sq-btn{flex:0 0 auto;height:36px;min-width:72px;display:inline-flex;align-items:center;justify-content:center;gap:5px;}
.sq-btn-ico{width:15px;height:15px;display:none;}

/* ---------- ② 快捷分段行（范围 / WA / 邮箱）---------- */
.fq-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:12px;}
.fq-group{display:flex;align-items:center;gap:8px;min-width:0;}
.fq-label{flex:0 0 40px;font-size:11.5px;color:var(--muted);letter-spacing:.3px;}
.fq-row .seg-ctrl{margin-bottom:0;height:32px;padding:3px;}
.fq-row .seg-ctrl button{padding:0 12px;height:24px;font-size:12.5px;line-height:24px;display:inline-flex;align-items:center;}
.fq-row .seg-ctrl button b{font-size:11.5px;opacity:.7;margin-left:4px;}
.fq-row .seg-ctrl button.on b{opacity:1;}
.fq-row .seg-star .st{font-size:12px;margin-right:3px;}

/* ---------- ③ 更多筛选（折叠）---------- */
.more-wrap{margin-top:12px;}
.more-wrap.open{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.more-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.more-toggle{
  display:inline-flex;align-items:center;gap:5px;padding:2px 0;border:0;border-radius:6px;
  background:transparent;color:var(--sec);font-size:13px;cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.more-toggle:hover{color:var(--text);}
.more-toggle:focus-visible{outline:0;box-shadow:0 0 0 2px var(--ring);}
.more-toggle .caret{color:var(--muted);font-size:11px;transition:transform var(--dur) var(--ease);}
.more-toggle.open .caret{transform:rotate(180deg);}
.more-hint{font-size:11.5px;}
.more-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;}
.more-hint + .more-chips{margin-left:auto;}
.more-body{overflow:hidden;max-height:0;transition:max-height .2s var(--ease);}
.more-wrap.open .more-body{max-height:320px;}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.more-grid .form-label{font-size:12px;color:var(--sec);letter-spacing:.2px;}
.more-grid .form-select,.more-grid .form-control{height:36px;padding-top:0;padding-bottom:0;font-size:14px;}
.more-actions{display:flex;gap:8px;margin-top:12px;}

/* ---------- 手机端 / 触摸设备 ---------- */
@media (max-width:767.98px), (hover:none){
  /* 运行卡：状态头强制单行（国家已含在任务名中；任务名超长省略号截断） */
  .ctl-running .run-head{flex-wrap:wrap;gap:6px;}
  .ctl-running .run-head .run-country{display:none;}
  .ctl-running .run-head .run-name{flex:1 1 100%;min-width:0;font-size:13.5px;line-height:1.5;}
  .ctl-running .run-head .badge{flex:0 0 auto;}
  /* 当前关键字：手机端字号与内边距适配，长词换行完整可见 */
  .run-kw{margin-top:8px;padding:8px 10px;gap:6px;}
  .run-kw .rk-word{flex:1 1 100%;font-size:15px;line-height:1.55;}
  /* ① 搜索框全宽独占一行；查询按钮改为「框内右侧图标」（绝对定位进输入框，不占独立槽位） */
  .sq-row{gap:0;}
  .sq-input{width:100%;height:38px;padding-right:72px;}
  .sq-clear{right:44px;width:26px;height:26px;}
  .sq-btn{
    position:absolute;right:4px;top:50%;transform:translateY(-50%);z-index:2;
    min-width:34px;width:34px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  }
  .sq-btn:active{transform:translateY(-50%) scale(.96);}
  .sq-btn-txt{display:none;}
  .sq-btn-ico{display:block;width:15px;height:15px;}
  /* ② 每组占一行：label 40px + 分段控件横向滚动（沿用 v5-1001x 的 .seg-ctrl 规则，不自建新体系） */
  .fq-row{flex-direction:column;align-items:stretch;gap:10px;margin-top:10px;}
  .fq-group{width:100%;gap:6px;}
  .fq-group .seg-ctrl{flex:1 1 auto;min-width:0;width:auto;height:34px;justify-content:flex-start;padding:3px;}
  .fq-row .seg-ctrl button{height:26px;line-height:26px;padding:0 10px;font-size:12px;}
  /* ③ 折叠字段单列全宽；chips / 清空单独一行可横向滚动 */
  .more-wrap{margin-top:10px;}
  .more-wrap.open{padding-top:10px;}
  .more-grid{grid-template-columns:1fr;gap:10px;}
  .more-wrap.open .more-body{max-height:420px;}
  .more-hint{display:none;}
  .more-chips{width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  .more-chips::-webkit-scrollbar{display:none;}
  .more-actions{margin-top:10px;}
}

/* =====================================================================
   采集总控 · 运行卡实时进度（v5-1002a，2026-10-01，按设计师稿 ch-live-task-status-design.md）
   机制：本地 1s 时钟驱动（秒表/外推）+ 2s 轻量校准（只增不减，按节点更新）
   动效只用 transform / opacity / background-position（性能红线①）；reduced-motion 全关
   ===================================================================== */
.ctl-running{position:relative;overflow:hidden;}
.run-sweep{
  position:absolute;left:0;top:0;height:2px;width:100%;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent 0%,var(--green) 50%,transparent 100%);
  animation:runSweep 3s linear infinite;
}
@keyframes runSweep{from{transform:translateX(-100%)}to{transform:translateX(200%)}}

/* ① 状态头 */
.run-state{font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--text);flex:0 0 auto;}
.ctl-running .run-head .run-name{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.45;}
.ctl-running.is-running .run-state{color:var(--green);}
.ctl-running.is-paused .run-state{color:var(--pause-to);}
.ctl-running.is-done .run-state{color:var(--blue);}
.ctl-running.is-failed .run-state{color:var(--red);}
.ctl-running.is-quota .run-state,.ctl-running.is-stale .run-state{color:var(--orange);}
.live-dot.is-pulsing{animation:dotPulse 1.5s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ② 主进度：环形 + 计数 + 双轨条 */
.run-main{display:flex;align-items:center;gap:14px;margin-top:10px;}
.run-ring{position:relative;width:64px;height:64px;flex:0 0 auto;}
.run-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block;}
.ring-bg{fill:none;stroke:var(--track);stroke-width:6;}
.ring-fg{
  fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:276.46;transition:stroke-dashoffset .8s cubic-bezier(.22,.61,.36,1);
}
.ctl-running.is-paused .ring-fg{stroke:var(--pause-to);}
.ctl-running.is-done .ring-fg{stroke:var(--blue);}
.ctl-running.is-stopped .ring-fg{stroke:var(--muted);}
.ctl-running.is-failed .ring-fg{stroke:var(--red);}
.ctl-running.is-quota .ring-fg,.ctl-running.is-stale .ring-fg{stroke:var(--orange);}
/* 环形百分比文字：只显示数字（去掉「%」——圆环本身已表达进度）
   ① 文字层独立于被 rotate(-90deg) 的 SVG 进度环，不参与旋转
   ② flex 双向居中（justify-content+align-items）+ line-height:1，1~3 位数字均绝对居中
   ③ 无兄妹元素占位 → 数字不会被挤偏；translateY 抵消字体上下留白不对称的基线偏移 */
.ring-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.rt-num{position:relative;display:flex;align-items:center;justify-content:center;line-height:1;transform:translateY(-1px);}
.ring-txt b{display:block;font-size:20px;font-weight:700;color:var(--text);line-height:1;}

.run-nums{flex:1 1 auto;min-width:0;}
.rn-row{display:flex;align-items:baseline;gap:6px;min-width:0;}
.rn-row .rn-k{font-size:11px;color:var(--muted);}
.rn-row .rn-v{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.rn-row .rn-v b{font-size:17px;font-weight:700;}
.rn-row .rn-u{font-size:11px;color:var(--muted);}
.rn-row.is-sub{margin-top:3px;}
.rn-row.is-sub .rn-v,.rn-row.is-sub .rn-v b{font-size:13px;font-weight:600;}
/* 当前关键字条：完整展示（去 max-width/省略号/nowrap，长词自动换行，永不截断、不溢出容器） */
.run-kw{
  display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
  margin-top:9px;padding:9px 11px;border-radius:10px;
  background:var(--card2);border:1px solid var(--border-strong);
}
.run-kw .rk-label{
  flex:0 0 auto;font-size:11px;line-height:1.6;letter-spacing:.4px;color:var(--muted);
  padding:1px 7px;border-radius:6px;border:1px solid var(--border-strong2);background:var(--card);
}
.run-kw .rk-word{
  flex:1 1 240px;min-width:0;
  font-size:15px;font-weight:700;line-height:1.5;color:var(--text);letter-spacing:.2px;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;
}
.ctl-running.is-live .run-kw,.ctl-running.is-running .run-kw{border-color:var(--border-strong2);}

.run-track{position:relative;height:8px;border-radius:99px;background:var(--track);overflow:hidden;margin-top:10px;}
.rt-pred{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  background-image:repeating-linear-gradient(45deg,var(--green-soft2) 0 6px,transparent 6px 14px);
  background-size:28px 28px;transition:width 1s linear;
}
.rt-pred.is-live{animation:rtFlow 8s linear infinite;}
@keyframes rtFlow{from{background-position:0 0}to{background-position:28px 0}}
.rt-fact{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;z-index:2;
  background:linear-gradient(90deg,var(--green-deep),var(--green));
  transition:width .8s cubic-bezier(.22,.61,.36,1);
}
.rt-cursor{
  position:absolute;top:50%;left:0;width:6px;height:6px;border-radius:50%;background:var(--green);z-index:3;
  transform:translate(-50%,-50%);transition:left .8s cubic-bezier(.22,.61,.36,1);box-shadow:0 0 0 0 rgba(52,211,153,0);
}
.rt-cursor.is-live{animation:cursorBreath 1.6s ease-in-out infinite;}
@keyframes cursorBreath{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}50%{box-shadow:0 0 12px 2px var(--green-glow)}}
.ctl-running.is-paused .rt-fact,.ctl-running.is-quota .rt-fact{background:var(--pause-to);}
.ctl-running.is-done .rt-fact{background:linear-gradient(90deg,var(--blue-deep),var(--blue));}
.ctl-running.is-failed .rt-fact{background:var(--red);}

/* ③ 过程四联格 */
.run-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
.rg-cell{
  background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:6px 9px;
  min-width:0;display:flex;flex-direction:column;gap:2px;
}
.rg-k{font-size:11px;color:var(--muted);}
.rg-v{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ④ 阶段行 + 心跳 */
.run-phase{margin-top:8px;}
.rp-line{font-size:12.5px;color:var(--t2);line-height:1.5;}
.rp-kw{display:flex;align-items:center;gap:8px;margin-top:6px;}
.rp-dots{display:inline-flex;gap:5px;}
.rp-dots i{width:6px;height:6px;border-radius:50%;background:var(--dot-off);display:block;}
.rp-dots i.is-cur{background:var(--green);}
.rp-dots i.is-done{background:var(--green-deep);}
.rp-kwtxt{font-size:11.5px;color:var(--muted);}
.run-foot{margin-top:6px;}
.rp-hb{font-size:11.5px;color:var(--muted);}
.rp-hb::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:middle;opacity:.8;}
.rp-hb.is-warn{color:var(--orange);}
.rp-hb.is-warn::before{background:var(--orange);}
.rp-clock{font-size:11.5px;color:var(--muted);margin-top:3px;}

/* ④′ 结果条：完成 / 受阻（费用上限·额度）/ 失败 → 原因 + 恢复倒计时 + 下一步 */
.run-result{
  display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--border);background:var(--card2);
}
.rr-ic{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;line-height:1;color:#fff;background:var(--muted);margin-top:1px;}
.rr-body{flex:1 1 auto;min-width:0;}
.rr-title{font-size:12.5px;font-weight:700;color:var(--text);}
.rr-desc{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px;word-break:break-word;}
.rr-acts{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;}
.rr-acts .btn{font-size:11.5px;padding:3px 9px;white-space:nowrap;}
.run-result.is-done{border-color:rgba(34,160,90,.35);background:rgba(34,160,90,.08);}
.run-result.is-done .rr-ic{background:var(--green);}
.run-result.is-done .rr-title{color:var(--green);}
.run-result.is-cost,.run-result.is-quota{border-color:rgba(230,150,40,.4);background:rgba(230,150,40,.09);}
.run-result.is-cost .rr-ic,.run-result.is-quota .rr-ic{background:var(--orange);}
.run-result.is-cost .rr-title,.run-result.is-quota .rr-title{color:var(--orange);}
.run-result.is-failed{border-color:rgba(215,70,70,.4);background:rgba(215,70,70,.09);}
.run-result.is-failed .rr-ic{background:#d74646;}
.run-result.is-failed .rr-title{color:#d74646;}
@media (max-width:560px){
  .run-result{flex-wrap:wrap;}
  .rr-acts{flex-direction:row;width:100%;justify-content:flex-end;}
}

/* 桌面：环 88px、四联格 1×4、阶段行与关键字进度同行 */
@media (min-width:768px){
  /* 桌面两列：左（环+计数+双轨条）｜右（四联格 1×4）；状态头 / 阶段行+心跳跨列 */
  .ctl-card .ctl-running{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 22px;align-items:center;
    grid-template-areas:"head head" "main grid" "phase foot";padding:14px 16px;
  }
  .run-head{grid-area:head;}
  .run-main{grid-area:main;margin-top:0;}
  .run-grid{grid-area:grid;margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr));}
  .run-grid .rg-cell{padding:6px 10px;}
  .run-phase{grid-area:phase;margin-top:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .run-foot{grid-area:foot;margin-top:0;justify-self:end;text-align:right;align-self:center;}
  .run-ring{width:88px;height:88px;}
  .ring-txt b{font-size:26px;}
  .rp-kw{margin-top:0;}
}

/* 性能红线②：prefers-reduced-motion 全关 */
@media (prefers-reduced-motion: reduce){
  .run-sweep,.live-dot.is-pulsing,.rt-pred.is-live,.rt-cursor.is-live{animation:none!important;}
  .rt-fact,.rt-pred,.rt-cursor,.ring-fg{transition:none!important;}
}

/* ==========================================================================
   iOS Safari 聚焦自动放大治理（v5-1002d · 手机端 App 化）
   根因：iOS Safari 对 font-size < 16px 的可聚焦控件会在聚焦瞬间放大整页；
   治理：① 触屏/窄屏下所有输入控件字号锁 ≥16px（iOS 不缩放阈值，阈值是字号不是高度）
        ② 配套 viewport( maximum-scale=1 / user-scalable=no ) 见 index.html / login.html
        ③ touch-action:manipulation 去掉双击缩放的 300ms 延迟，点击响应更接近原生 App
        ④ 只改字号与触控行为，不改任何布局尺寸/结构/接口；字号为静态值，聚焦前后不变 → 不跳动
   ========================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
input,select,textarea{touch-action:manipulation;}
button,a,.btn,.seg-ctrl button,.nav-link{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}

/* 【2026-10-13 修订】改用「能力查询」(hover:none + pointer:coarse) 判定触屏，
   不再靠宽度猜设备——修掉 iPad Pro 横屏(1366px)/宽屏触屏漏网仍会聚焦放大的漏洞；
   窄屏桌面(≤575.98px) 保留视觉代理，仅为开发期预览一致（桌面本就不自动放大）。 */
@media (hover:none) and (pointer:coarse), (max-width:575.98px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea,
  .form-control,.form-select,.form-control-sm,.form-select-sm,
  .sq-input,.kw-lib-search,.page-size-select,
  .login-form input{font-size:16px !important;}
  /* 输入态不改变字号（防止聚焦瞬间重排抖动） */
  input:focus,select:focus,textarea:focus,.sq-input:focus,.form-control:focus,.form-select:focus{font-size:16px !important;}
  /* 已有固定高度的控件保持原高度，避免整体布局位移 */
  .sq-input{height:36px;}
  .page-size-select{height:auto;}
  /* 触控目标不小于 32px，接近原生 App 手感 */
  .btn,.btn-sm,.sq-btn{min-height:32px;}
  .login-form input{padding:13px 16px;}
}

/* 手机 / 触屏：控件 42px + 16px（16px 是 iOS 不缩放硬红线，不能降；
   病根是 16px 挤在 34px 盒子里，所以要「把控件体格配上去」而不是把字改小） */
@media (hover:none) and (pointer:coarse), (max-width:767.98px){
  .form-control,.form-select,.form-control-sm,.form-select-sm,textarea.form-control{
    height:42px;border-radius:10px;
    padding-left:14px;padding-right:14px;
  }
  .form-control,.form-select,.form-control-sm,.form-select-sm{font-size:16px !important;line-height:42px;}
  .form-select,.form-select-sm{padding-right:34px;}
  /* 更高优先级的选择器同步（否则 .more-grid 内的控件仍卡在 36px/14px） */
  .more-grid .form-select,.more-grid .form-control{height:42px;font-size:16px !important;}
  textarea.form-control{height:auto;line-height:1.6;padding-top:10px;padding-bottom:10px;}
  /* 数字输入框里的原生调节按钮不撑高 */
  input[type=number].form-control{line-height:40px;}
  .form-label{font-size:12.5px;}
  .more-grid .form-label,.filter-body .form-label{font-size:12px;}
}

/* ==========================================================================
   新手引导 / 空状态提醒（新增 · 全部沿用现有 token，不新增色值）
   ========================================================================== */

/* ①A 任务弹窗内空关键字引导块 */
.kw-empty-guide{
  border:1px dashed var(--border-strong);border-radius:12px;background:var(--card2);
  padding:14px 14px 12px;text-align:left;width:100%;
}
.kw-empty-guide .keg-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;}
.kw-empty-guide .keg-desc{font-size:12.5px;line-height:1.6;color:var(--muted);margin-bottom:11px;}
.kw-empty-guide .keg-acts{display:flex;gap:8px;flex-wrap:wrap;}
.kw-empty-guide .keg-btn{flex:1 1 auto;min-width:132px;}
.kw-empty-guide .keg-foot{margin-top:10px;font-size:11.5px;color:var(--muted);}

/* ①B 未勾选：抖动 + 红描边一次（300ms×2） */
@keyframes kwNudge{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.is-shake{animation:kwNudge .34s ease-in-out;border-color:var(--red)!important;box-shadow:0 0 0 2px var(--red-soft)!important;}
.tf-err-act{margin-left:6px;font-weight:600;white-space:nowrap;}

/* ② 关键字页行内行动条 */
.kw-actbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;margin-bottom:12px;border-radius:10px;
  background:var(--card2);border:1px solid var(--border-strong);
  animation:kwBarIn .35s ease-out;
}
@keyframes kwBarIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.kw-actbar .ka-txt{font-size:12.5px;color:var(--text);font-weight:600;flex:1 1 auto;}
.kw-actbar .btn-close{opacity:.55;}
/* 新加入的关键字行高亮脉冲 */
@keyframes kwPulse{0%{box-shadow:0 0 0 0 var(--green-soft)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
#kw-table tr.is-hit > td{background:var(--card2);}
#kw-table tr.is-hit{animation:kwPulse 1.2s ease-out 2;}
.kw-lib.lib-pulse{animation:kwPulse 1.6s ease-out 1;border-radius:10px;}

/* ③-1 任务页三步引导卡 */
.guide-wrap{padding:0;border:0;background:transparent;text-align:left;}
.guide-card{
  border:1px solid var(--border-strong);border-radius:14px;background:var(--card2);
  padding:16px 15px 13px;
}
.guide-card .gc-title{font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:12px;}
.guide-card .gc-dots{display:flex;align-items:center;gap:0;margin:0 0 14px;padding:0 4px;}
.guide-card .gc-dots i{width:9px;height:9px;border-radius:50%;background:var(--muted2);display:block;flex:0 0 auto;}
.guide-card .gc-dots i.is-cur{background:var(--green);box-shadow:0 0 0 3px var(--green-soft);}
.guide-card .gc-dots i.is-done{background:var(--green-deep);}
.guide-card .gc-dot-line{display:block;height:2px;flex:1 1 auto;background:var(--border-strong);margin:0 6px;}
.guide-card .gc-step{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 12px;border-radius:10px;background:var(--card);
  border:1px solid var(--border);margin-bottom:9px;
}
.guide-card .gc-step.is-done{border-color:var(--border-strong);}
.guide-card .gc-step-main{flex:1 1 auto;min-width:0;}
.guide-card .gc-step-title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:4px;}
.guide-card .gc-step-title b{color:var(--green);margin-right:2px;}
.guide-card .gc-step-desc{font-size:12px;line-height:1.6;color:var(--muted);}
.guide-card .gc-step-reason{margin-top:5px;font-size:11.5px;color:var(--muted);}
.guide-card .gc-btn{flex:0 0 auto;align-self:center;min-width:76px;}
.guide-card .gc-foot{margin-top:4px;text-align:right;font-size:12px;}
.guide-card .gc-foot a{color:var(--muted);text-decoration:none;}
.guide-collapsed{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--muted);}
.guide-collapsed a{font-weight:600;}

/* ③-3 关键字页空状态 */
.kw-page-empty{
  border:1px dashed var(--border-strong);border-radius:12px;background:var(--card2);
  padding:15px 14px;margin-bottom:14px;text-align:left;
}
.kw-page-empty .kpe-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;}
.kw-page-empty .kpe-desc{font-size:12.5px;line-height:1.65;color:var(--muted);margin-bottom:11px;}
.kw-page-empty .kpe-desc em{font-style:normal;color:var(--text);font-weight:600;}
.kw-page-empty .kpe-acts{display:flex;gap:8px;flex-wrap:wrap;}

/* 全局 Toast（带行动链接，新替旧） */
.gtoast{
  position:fixed;z-index:var(--z-toast);left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;max-width:92vw;
  padding:11px 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--border-strong);
  box-shadow:0 8px 26px rgba(0,0,0,.22);
  animation:gtIn .26s ease-out;
}
@keyframes gtIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.gtoast .gt-txt{font-size:12.5px;color:var(--text);font-weight:600;line-height:1.5;}
.gtoast .gt-act{font-size:12.5px;font-weight:700;white-space:nowrap;text-decoration:none;}
.gtoast .gt-x{background:none;border:0;color:var(--muted);font-size:12px;line-height:1;padding:2px;}

/* ③-2 气泡引导（一次性 + 可重看无遮罩） */
.gmask{position:fixed;inset:0;z-index:var(--z-inline);background:rgba(0,0,0,.42);}
.gbubble{
  position:fixed;z-index:var(--z-inline);background:var(--card);border:1px solid var(--border-strong);
  border-radius:12px;padding:13px 14px;box-shadow:0 12px 30px rgba(0,0,0,.3);
  animation:gtIn .3s ease-out;
}
.gbubble.is-replay{border-style:dashed;}
.gbubble .gb-idx{font-size:11px;color:var(--muted);margin-bottom:5px;letter-spacing:.3px;}
.gbubble .gb-txt{font-size:13px;line-height:1.6;color:var(--text);font-weight:600;margin-bottom:11px;}
.gbubble .gb-acts{display:flex;gap:8px;justify-content:flex-end;}

/* 手机端适配 */
@media (max-width:767.98px){
  .kw-empty-guide .keg-btn,.kw-page-empty .kpe-acts .btn,.guide-card .gc-btn{flex:1 1 auto;width:100%;}
  .kw-page-empty .kpe-acts,.kw-empty-guide .keg-acts{flex-direction:column;}
  .guide-card .gc-step{flex-direction:column;align-items:stretch;gap:9px;}
  .guide-card .gc-btn{align-self:stretch;width:100%;}
  .gtoast{left:12px;right:12px;bottom:14px;transform:none;max-width:none;}
  @keyframes gtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .gbubble{left:12px!important;width:auto!important;right:12px;}
}

/* ==========================================================================
   邮件能力前端（2026-10-12）：铃铛提醒 / 软提示 Toast / 通知面板 / 邮件状态胶囊 / 往来记录抽屉
   仅视觉与交互，复用现有 token（暗/亮双主题自动生效），无任何数据结构改动
   ========================================================================== */

/* ---- 顶栏铃铛入口 ---- */
.mail-bell{position:relative;appearance:none;width:32px;height:32px;border-radius:8px;border:0;background:transparent;
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease),color .18s var(--ease),transform .08s var(--ease)}
.mail-bell:hover{background:var(--ov-d);color:var(--text);transform:translateY(-1px)}
.mail-bell:active{background:var(--ov-e)}
.mail-bell:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.mail-bell.has-unread{color:var(--text)}
.mail-bell.ring svg{animation:mbRing .32s var(--ease) 2}
@keyframes mbRing{0%,100%{transform:rotate(0)}25%{transform:rotate(9deg)}75%{transform:rotate(-9deg)}}
.mail-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;
  background:var(--red);color:#fff;font-size:9.5px;line-height:15px;text-align:center;font-weight:600;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--card)}
.mail-badge.green{background:var(--green)}
.mail-badge.dot{min-width:8px;width:8px;height:8px;padding:0;top:1px;right:1px;line-height:0;font-size:0}

/* ---- 软提示 Toast ---- */
.mail-toast{position:fixed;z-index:var(--z-toast);left:12px;right:12px;top:61px;display:flex;align-items:center;gap:10px;
  padding:11px 12px 11px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-card-hi);cursor:pointer;overflow:hidden}
.mail-toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.mail-toast.reply::before{background:var(--green)}
.mail-toast .mt-ic{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ov-e);color:var(--muted)}
.mail-toast.reply .mt-ic{background:var(--green-soft);color:var(--green)}
.mail-toast .mt-body{min-width:0;flex:1 1 auto}
.mail-toast .mt-title{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.3}
.mail-toast .mt-sub{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-toast .mt-x{flex:0 0 auto;appearance:none;width:24px;height:24px;border:0;border-radius:7px;background:transparent;
  color:var(--muted2);font-size:12px;cursor:pointer;line-height:1}
.mail-toast .mt-x:hover{background:var(--hover2);color:var(--text)}
.mt-fade-enter-active{transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s cubic-bezier(.22,.61,.36,1)}
.mt-fade-leave-active{transition:transform .24s var(--ease),opacity .24s var(--ease)}
.mt-fade-enter-from{transform:translateY(-16px);opacity:0}
.mt-fade-leave-to{transform:translateY(-16px);opacity:0}
@media (min-width:768px) and (hover:hover){
  .mail-toast{left:auto;right:24px;top:24px;width:360px}
}

/* ---- 通知面板 ---- */
.mail-panel-mask{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:calc(var(--z-panel) - 10)}
.mail-panel{position:fixed;z-index:var(--z-panel);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card-hi);display:flex;flex-direction:column}
.mail-panel .mp-grip{display:none}
.mail-panel .mp-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;border-bottom:1px solid var(--border)}
.mail-panel .mp-head strong{font-size:13px;font-weight:600;color:var(--text)}
.mail-panel .mp-acts{display:inline-flex;align-items:center;gap:6px}
.mail-panel .mp-refresh{appearance:none;width:24px;height:24px;border:1px solid var(--border-strong);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mail-panel .mp-refresh:hover{border-color:var(--border-strong2);color:var(--text);background:var(--hover2)}
.mail-panel .mp-refresh.busy svg{animation:mbSpin .9s linear infinite}
@keyframes mbSpin{to{transform:rotate(360deg)}}
.mail-panel .mp-readall{appearance:none;border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;padding:3px 5px;border-radius:6px}
.mail-panel .mp-readall:hover{color:var(--text);background:var(--hover2)}
.mail-panel .mp-seg{margin:8px 14px 4px}
.mail-panel .mp-seg button i{font-style:normal;margin-left:4px;font-size:10px;opacity:.85}
.mail-panel .mp-list{flex:1 1 auto;overflow:auto;padding:4px 6px 10px;min-height:0}
.mail-panel .mp-empty{padding:36px 12px;text-align:center;color:var(--muted2);font-size:12.5px}
.mail-panel .mp-item{position:relative;display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;min-height:60px}
.mail-panel .mp-item:hover{background:var(--hover2)}
.mail-panel .mp-item.unread{background:var(--ov-d)}
.mail-panel .mp-item .mp-dir{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--blue-soft);color:var(--blue)}
.mail-panel .mp-item .mp-dir.in-reply{background:var(--green-soft);color:var(--green)}
.mail-panel .mp-item .mp-main{min-width:0;flex:1 1 auto}
.mail-panel .mp-item .mp-c{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-panel .mp-item .mp-s{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-panel .mp-item .mp-t{flex:0 0 auto;font-size:11px;color:var(--muted2);align-self:flex-start;margin-top:2px}
.mail-panel .mp-item .mp-dot{position:absolute;left:2px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--red)}

@media (max-width:767.98px), (hover:none){
  .mail-panel{left:0;right:0;bottom:0;top:auto;border-radius:16px 16px 0 0;border-bottom:0;height:70vh;max-height:70vh;
    animation:sheetUp .24s var(--ease) both}
  .mail-panel .mp-grip{display:block;width:36px;height:4px;border-radius:2px;background:var(--border-strong);margin:8px auto 2px;flex:0 0 auto}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
@media (min-width:768px) and (hover:hover){
  .mail-panel-mask{display:none}
  .mail-panel{top:56px;right:16px;width:360px;max-height:480px;border-radius:12px;animation:popIn .18s var(--ease) both}
  @keyframes popIn{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
}

/* ---- 客户列表「往来邮件状态」 ---- */
.cust-mail{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.mail-chip{appearance:none;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:99px;
  border:1px solid var(--border);background:var(--ov-d);color:var(--muted2);font-size:11.5px;line-height:1;cursor:default;
  max-width:100%;white-space:nowrap;position:relative;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .14s var(--ease)}
.mail-chip .mc-ic{display:inline-flex;width:11px;height:11px;flex:0 0 auto}
.mail-chip .mc-ic svg{width:11px;height:11px;display:block}
.mail-chip.clickable{cursor:pointer}
.mail-chip.clickable:hover{transform:translateY(-1px);border-color:var(--border-strong2)}
.mail-chip.sent{background:var(--blue-soft);color:var(--blue);border-color:var(--border2,var(--border-strong))}
.mail-chip.replied{background:var(--green-soft);color:var(--green);border-color:var(--green-line2)}
.mail-chip.failed{background:var(--red-soft);color:var(--red);border-color:var(--border-strong)}
.mail-chip.none{opacity:.9}
.mail-chip .mc-new{position:absolute;top:-3px;right:-3px;width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 2px var(--card)}
.cm-mail{font-size:11.5px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-mail.muted{color:var(--muted2)}

/* ---- 往来邮件记录抽屉 ---- */
.mail-thread-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:calc(var(--z-thread) - 10)}
.mail-thread{position:fixed;z-index:var(--z-thread);background:var(--card);border:1px solid var(--border);display:flex;flex-direction:column;box-shadow:var(--shadow-card-hi)}
.mail-thread .mt-grip{display:none}
.mail-thread .mth-head{padding:12px 14px;border-bottom:1px solid var(--border);flex:0 0 auto}
.mail-thread .mth-t1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mail-thread .mth-t1 strong{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-thread .mth-x{appearance:none;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;flex:0 0 auto}
.mail-thread .mth-x:hover{background:var(--hover2);color:var(--text)}
.mail-thread .mth-t2{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:5px}
.mail-thread .mth-mail{font-size:11.5px;color:var(--muted);word-break:break-all}
.mail-thread .mth-stat{font-size:11.5px;color:var(--muted2)}
.mail-thread .mth-list{flex:1 1 auto;overflow:auto;padding:8px 14px 14px;min-height:0}
.mail-thread .mth-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 12px;color:var(--muted);font-size:13px}
.mail-thread .mth-empty-btn{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:600;text-decoration:none}
.mail-thread .mth-item{position:relative;padding:10px 4px 12px 20px}
.mail-thread .mth-item::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--border)}
.mail-thread .mth-item:first-child::before{top:14px}
.mail-thread .mth-item:last-child::before{bottom:auto;height:14px}
.mail-thread .mth-node{position:absolute;left:1px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px var(--card)}
.mail-thread .mth-node.in{background:var(--green)}
.mail-thread .mth-body{min-width:0}
.mail-thread .mth-r1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mail-thread .mth-tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:var(--blue-soft);color:var(--blue)}
.mail-thread .mth-tag.in{background:var(--green-soft);color:var(--green)}
.mail-thread .mth-time{font-size:11px;color:var(--muted2);flex:0 0 auto}
.mail-thread .mth-subj{font-size:12.5px;font-weight:600;color:var(--text);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-thread .mth-peer{font-size:11.5px;color:var(--muted);margin-top:3px;word-break:break-all}
.mail-thread .mth-item.d-in.is-reply{background:var(--green-soft);border-radius:10px}
.mail-thread .mth-foot{flex:0 0 auto;display:flex;gap:10px;padding:10px 14px;border-top:1px solid var(--border);background:var(--card)}
.mail-thread .mth-btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:10px;
  border:1px solid var(--border-strong);background:transparent;color:var(--t2);font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer}
.mail-thread .mth-btn:hover{border-color:var(--border-strong2);color:var(--text);background:var(--hover2)}
.mail-thread .mth-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mail-thread .mth-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}

@media (max-width:767.98px), (hover:none){
  .mail-thread{left:0;right:0;bottom:0;top:auto;border-radius:16px 16px 0 0;border-bottom:0;height:78vh;max-height:78vh;animation:sheetUp .24s var(--ease) both}
  .mail-thread .mt-grip{display:block;width:36px;height:4px;border-radius:2px;background:var(--border-strong);margin:8px auto 2px;flex:0 0 auto}
  /* 手机卡片：邮件状态行放到卡片底部（拇指易达），桌面独立列样式在下方覆盖 */
  .cust-mail{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;width:100%;
    border-top:1px solid var(--border);padding-top:10px;margin-top:2px}
  .cust-mail .cm-mail{max-width:58%;text-align:right}
}
@media (min-width:768px) and (hover:hover){
  .mail-thread{top:0;right:0;bottom:0;width:420px;border-radius:0;border-top:0;border-right:0;border-bottom:0;animation:drawerIn .24s var(--ease) both}
  @keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
  /* 桌面行卡：新增「邮件状态」列（主体 / 联系动作 / 邮件状态 / 有效性 / 操作） */
  .cust-row{grid-template-columns:minmax(200px,1fr) minmax(180px,280px) 122px 76px 156px}
}
@media (prefers-reduced-motion: reduce){
  .mail-toast,.mail-panel,.mail-thread,.mail-chip.clickable,.mail-bell{animation:none!important;transition:none!important}
  .mt-fade-enter-from,.mt-fade-leave-to{transform:none}
}

/* 往来记录：新回复条目（淡绿底 + 绿色标签）；发送失败红标签 */
.mail-thread .mth-tag.is-reply{background:var(--green-soft);color:var(--green)}
.mail-thread .mth-tag.is-fail{background:var(--red-soft);color:var(--red)}
.mail-thread .mth-item.is-reply .mth-node{background:var(--green)}
.mail-thread .mth-item.is-reply{background:var(--green-soft);border-radius:10px}

/* ==================== 邮件管理页（导航「邮件」） ==================== */
#mail-section .section-card{margin-top:0}
.mgr-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 14px 12px;
  background:linear-gradient(180deg,var(--card2) 0%,var(--card) 100%);border-bottom:1px solid var(--border)}
.mgr-quota{flex:1 1 auto;min-width:0}
.mq-r1{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.mq-label{font-size:12.5px;color:var(--sec)}
.mq-num{font-size:12.5px;color:var(--sec)}
.mq-num b{font-size:16px;color:var(--t1);font-weight:600}
.mq-bar{height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.mq-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand,var(--accent)),var(--accent));transition:width .3s ease}
.mq-bar i.over{background:var(--red)}
.mq-r2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.mq-mail{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-left{font-size:12px;color:var(--sec);flex:0 0 auto}
.mq-left.warn{color:var(--red)}
.mgr-acts{flex:0 0 auto;display:flex;gap:8px}
.mgr-seg{margin:12px 14px 4px}
.mgr-panel{padding:6px 14px 16px}
.mgr-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 10px;flex-wrap:wrap}
.mgr-hint{min-width:0;flex:1 1 auto}
.mgr-bar-acts{display:flex;gap:8px;flex:0 0 auto}
.mgr-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 12px;color:var(--sec);font-size:13px;
  border:1px dashed var(--border2);border-radius:12px}
.mgr-sub{margin:0;flex-wrap:wrap}
.mgr-sub button{height:28px;font-size:12px;padding:0 12px}

/* 模板条目 */
.tpl-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;
  background:var(--card);margin-bottom:9px;transition:border-color .2s ease,transform .2s ease}
.tpl-item:hover{border-color:var(--border-strong2);transform:translateY(-1px)}
.tpl-item.off{opacity:.62}
.ti-main{flex:1 1 auto;min-width:0}
.ti-name{font-size:13.5px;color:var(--t1);font-weight:600;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.ti-chip{display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:6px;font-size:11px;
  background:var(--track);color:var(--sec);border:1px solid var(--border2);white-space:nowrap}
.ti-chip.lang{color:var(--blue);border-color:var(--blue-line);background:var(--blue-soft)}
.ti-chip.on{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.ti-chip.off{color:var(--sec)}
.ti-sub{font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ti-acts,.ai-acts{flex:0 0 auto;display:flex;gap:6px}
.c-btn{appearance:none;height:27px;padding:0 10px;border-radius:8px;border:1px solid var(--border2);background:var(--card2);
  color:var(--t2);font-size:11.5px;cursor:pointer;transition:.18s ease;white-space:nowrap}
.c-btn:hover{border-color:var(--border-strong2);color:var(--t1)}
.c-btn.danger{color:var(--red);border-color:var(--red-line)}
.c-btn:disabled{opacity:.5;cursor:default}

/* 发送记录 */
.snd-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;
  background:var(--card);margin-bottom:9px;min-width:0}
.snd-st{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-size:11px;
  background:var(--track);color:var(--sec);border:1px solid var(--border2)}
.snd-st.sent{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.snd-st.failed{color:var(--red);border-color:var(--red-line);background:var(--red-soft)}
.snd-st.queued,.snd-st.sending{color:var(--orange);border-color:var(--orange-line);background:var(--orange-soft)}
.snd-main{flex:1 1 auto;min-width:0;max-width:100%}
.snd-t1{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.snd-co{font-size:13px;color:var(--t1);font-weight:600;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-to{font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.snd-t2{display:block;width:100%;max-width:100%;font-size:11.5px;line-height:1.5;color:var(--sec);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-time{flex:0 0 auto;font-size:11px;color:var(--muted)}

/* 发信邮箱 */
.acc-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;
  background:var(--card);margin-bottom:9px}
.ai-main{flex:1 1 auto;min-width:0}
.ai-mail{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--t1);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-mail .badge{background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:600;border-radius:6px;padding:2px 6px}
.ai-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--sec);margin-top:5px}
.ai-meta .ok{color:var(--green)}.ai-meta .bad{color:var(--red)}

/* ==================== 客户列表：批量发信条 + 行内发送按钮 ==================== */
.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;margin:0 0 10px;
  border:1px solid var(--border);border-radius:12px;background:var(--card)}
.bulk-bar.on{border-color:var(--border-strong2);background:var(--card2)}
.bulk-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border2);background:var(--card2);color:var(--t2)}
.bulk-toggle.is-on{border-color:var(--accent);color:var(--on-accent);background:var(--accent)}
.bulk-info{font-size:12.5px;color:var(--sec)}
.bulk-info b{color:var(--t1)}
.bulk-cap{color:var(--muted);font-size:11.5px}
.bulk-acts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.bulk-hint{font-size:12px;color:var(--muted);margin-left:auto}
.pick-box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:0 0 auto;
  border-radius:5px;border:1.5px solid var(--border-strong);color:var(--on-accent);background:var(--card2)}
.pick-box.on{background:var(--accent);border-color:var(--accent)}
.cust-row.pick-mode{cursor:pointer}
.cust-row.picked{background:var(--hover);border-radius:12px}
.cust-row .pick-box{position:absolute;left:7px;top:14px;z-index:2}
.cust-row.pick-mode{padding-left:34px}
.cust-row.pick-mode .cust-bar{display:none}
@media (min-width:768px){.cust-row{position:relative}.cust-row .pick-box{top:50%;transform:translateY(-50%)}.cust-row.pick-mode{padding-left:38px}}

/* ==================== 弹层：模板编辑 / 发送开发信 / 配置邮箱 ==================== */
.tpl-form .tf-row{margin-bottom:12px}
.tpl-form .tf-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.tf-vars{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.tf-var{appearance:none;height:23px;padding:0 9px;border-radius:99px;border:1px solid var(--border2);background:var(--card2);
  color:var(--sec);font-size:11px;cursor:pointer}
.tf-var:hover{border-color:var(--accent);color:var(--accent)}
.sendm .sm-sec{margin-bottom:14px}
.sm-lbl{font-size:12.5px;color:var(--sec);margin-bottom:7px}
.sm-lbl b{color:var(--t1)}
.sm-custs{display:flex;flex-wrap:wrap;gap:7px;max-height:110px;overflow:auto}
.sm-cust{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--border2);border-radius:9px;
  background:var(--card2);font-size:11.5px;max-width:100%}
.smc-co{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.smc-mail{color:var(--muted)}
.smc-mail.bad{color:var(--red)}
.sm-note{margin-top:8px;font-size:11.5px;color:var(--sec);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sm-note .bad{color:var(--red)}
.sm-subj{margin-bottom:8px}
.sm-body{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;resize:vertical}
.sm-quota{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border2);
  border-radius:10px;background:var(--card2);font-size:12px;color:var(--sec)}
.sm-quota b{color:var(--t1)}
.sm-quota b.bad{color:var(--red)}
.sm-result{padding:10px 12px;border:1px solid var(--green-line);border-radius:10px;background:var(--green-soft);font-size:12.5px;color:var(--t2)}
.sm-result b{color:var(--green)}
.sr-fail{margin-top:6px;line-height:1.7;word-break:break-all}
.accf .af-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.accf .af-3{display:grid;grid-template-columns:1.5fr .7fr .8fr;gap:12px;margin-bottom:12px}
.accf .af-row{margin-bottom:12px}
.accf .af-note{margin-top:2px}

@media (max-width:767px){
  .mgr-top{flex-direction:column;align-items:stretch;gap:10px}
  .mgr-acts{justify-content:flex-end}
  .ti-acts,.ai-acts{flex-direction:column}
  .snd-item{align-items:flex-start;flex-wrap:wrap}
  .snd-time{margin-left:auto}
  .bulk-acts{width:100%;margin-left:0}
  .bulk-hint{width:100%;margin-left:0}
  .tpl-form .tf-2,.accf .af-2,.accf .af-3{grid-template-columns:1fr}
  .modal-box#send-modal,.modal-box#tpl-modal,.modal-box#acc-modal{width:auto!important}
}

/* 发信弹层压在其它浮层之上（详情弹窗 1050 / 往来记录抽屉 1500~1600） */
.modal-mask.mm-top{z-index:var(--z-top)}
/* 抽屉内的发信按钮由 <a> 改为 <button>，继承原按钮外观 */
button.mth-btn,button.mth-empty-btn{font:inherit;cursor:pointer}

/* ============================================================
   第六轮（2026-10-13）：按设计稿 t1 落地
   ① 行内单发「发邮件」外显 ② 统计卡下钻 + 面包屑 ③ 去信息完整度
   ④ 信件详情阅读器 ⑤ 客户抽屉（采集信息 / 往来邮件） ⑥ 排版美化
   原则：只改视觉与交互，接口 / 数据结构零改动；暗亮双主题走现有变量
   ============================================================ */

/* ---------- ① 客户行：单发「发邮件」按钮（有邮箱才显，一眼可见） ---------- */
.cust-mail .cm-send{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 10px;margin-left:2px;
  font-size:11.5px;font-weight:600;letter-spacing:.2px;line-height:1;
  color:var(--on-accent);background:var(--accent);
  border:1px solid var(--accent);border-radius:99px;cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.cust-mail .cm-send svg{flex:0 0 auto;}
.cust-mail .cm-send:hover{transform:translateY(-1px);box-shadow:var(--shadow-card-hi);}
.cust-mail .cm-send:active{transform:translateY(0);opacity:.85;}
.cust-mail .cm-send:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- ② 首页统计卡：可点下钻 ---------- */
.bi-item.is-drill{
  appearance:none;-webkit-appearance:none;font-family:inherit;text-align:left;
  cursor:pointer;color:var(--text);position:relative;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bi-item.is-drill:hover{background:var(--ov-b);}
.bi-item.is-drill:active{transform:scale(.985);}
.bi-item.is-drill:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.bi-item.is-drill .bi-arrow{
  position:absolute;top:14px;right:14px;font-size:12px;line-height:1;
  color:var(--muted3);opacity:0;transform:translateX(-3px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bi-item.is-drill:hover .bi-arrow,.bi-item.is-drill:focus-visible .bi-arrow{opacity:1;transform:translateX(0);color:var(--text);}
.bi-item.is-static{cursor:default;}
@media (hover:none){
  .bi-item.is-drill .bi-arrow{opacity:.5;transform:none;}
}

/* ---------- ② 下钻面包屑（客户列表顶部） ---------- */
.drill-crumb{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  padding:9px 13px;border-radius:var(--r-sm);
  background:var(--ov-b);border:1px solid var(--border2);
  animation:dcIn .2s var(--ease);
}
@keyframes dcIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.drill-crumb .dc-ic{flex:0 0 auto;font-size:12px;color:var(--muted);line-height:1;}
.drill-crumb .dc-txt{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--t1);letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drill-crumb .dc-x{
  flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border2);border-radius:50%;
  color:var(--muted);font-size:11px;line-height:1;cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.drill-crumb .dc-x:hover{color:var(--text);border-color:var(--border-strong2);}

/* ---------- ③ 详情弹窗：备注整行（信息完整度已移除） ---------- */
#detail-modal .form-label{font-size:12px;color:var(--muted);margin-bottom:6px;}
#detail-modal textarea.form-control{resize:vertical;line-height:1.6;}

/* ---------- 客户详情弹窗：卡片式重构（沿用 cd-* 设计体系 + 蓝/绿配色） ---------- */
#detail-modal{width:640px;max-width:100%;padding:0;display:flex;flex-direction:column;max-height:90vh;overflow:hidden;}
#detail-modal .dt-head{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--card2) 0%,var(--card) 100%);
}
#detail-modal .dt-av{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-line);
}
#detail-modal .dt-id{flex:1 1 auto;min-width:0;}
#detail-modal .dt-co{font-size:15px;font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#detail-modal .dt-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;min-width:0;}
#detail-modal .dt-pill{
  display:inline-flex;align-items:center;height:19px;padding:0 9px;border-radius:99px;
  font-size:11px;font-weight:600;line-height:1;white-space:nowrap;
}
#detail-modal .dt-pill.ok{color:var(--green);background:var(--green-soft);border:1px solid var(--green-line);}
#detail-modal .dt-pill.bad{color:var(--red);background:var(--red-soft);border:1px solid var(--red-line);}
#detail-modal .dt-pill.id{color:var(--sec);background:var(--track);border:1px solid var(--border2);}
#detail-modal .dt-mut{font-size:11.5px;color:var(--muted);}  
#detail-modal .dt-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 4px;}
#detail-modal .dt-body .cd-group{margin-bottom:16px;}
#detail-modal .dt-links{display:inline-flex;flex-wrap:wrap;gap:6px;}
#detail-modal .dt-link{
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:99px;
  font-size:12px;text-decoration:none;border:1px solid var(--border2);background:var(--card2);color:var(--t2);
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .14s var(--ease);
}
#detail-modal .dt-link:hover{transform:translateY(-1px);}
#detail-modal .dt-link.wa{border-color:var(--green-line2);background:var(--green-soft);color:var(--green);}
#detail-modal .dt-link.wa:hover{border-color:var(--green);}
#detail-modal .dt-link.tel{border-color:var(--blue-line);background:var(--blue-soft);color:var(--blue);}
#detail-modal .dt-link.tel:hover{border-color:var(--blue);}
#detail-modal .dt-link-ic{font-size:10px;font-weight:700;letter-spacing:.3px;}
#detail-modal .dt-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--sec);word-break:break-all;}
#detail-modal .dt-remark{margin-top:2px;}
#detail-modal .dt-foot{
  flex:0 0 auto;display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;
  border-top:1px solid var(--border);background:var(--card);
}
@media (max-width:767px){
  #detail-modal{width:auto;max-height:92vh;}
  #detail-modal .dt-body{padding:12px 12px 2px;}
}

/* ---------- ⓸ 发送记录：公司名 / 主题 可点 ---------- */
.snd-co.link,.snd-t2.link{
  appearance:none;-webkit-appearance:none;font-family:inherit;background:transparent;
  border:0;padding:0;text-align:left;cursor:pointer;color:inherit;
  border-bottom:1px dashed transparent;transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.snd-co.link:hover{color:var(--text);border-bottom-color:var(--border-strong2);}
.snd-t2.link:hover{color:var(--t1);border-bottom-color:var(--border2);}
.snd-t2.link:focus-visible,.snd-co.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}

/* ============================================================
   ⓵ 信件详情阅读器
   手机：全屏上滑 Sheet（底部圆角）；桌面：居中模态 660px
   ============================================================ */
.letter-mask{position:fixed;inset:0;background:var(--overlay);z-index:calc(var(--z-letter) - 10);animation:ltFade .18s var(--ease);}
@keyframes ltFade{from{opacity:0;}to{opacity:1;}}
.letter-view{
  position:fixed;z-index:var(--z-letter);display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border2);color:var(--text);
  left:0;right:0;bottom:0;top:0;
  border-radius:0;overflow:hidden;
  animation:ltUp .26s var(--ease);
}
@keyframes ltUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}

.lt-head{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:10px 10px;border-bottom:1px solid var(--border);
  padding-top:calc(10px + env(safe-area-inset-top,0px));
}
.lt-head .lt-back,.lt-head .lt-x{
  flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:var(--r-xs);
  color:var(--t2);cursor:pointer;transition:all var(--dur) var(--ease);
}
.lt-head .lt-back:hover,.lt-head .lt-x:hover{color:var(--text);background:var(--ov-b);border-color:var(--border2);}
.lt-head .lt-title{flex:1 1 auto;text-align:center;font-size:14px;font-weight:600;letter-spacing:.4px;}

.lt-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 20px;-webkit-overflow-scrolling:touch;}

/* 「客户是谁」卡：整行可点 */
.lt-cust{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;
  padding:12px;margin-bottom:14px;cursor:pointer;
  background:var(--ov-b);border:1px solid var(--border2);border-radius:var(--r-sm);
  transition:all var(--dur) var(--ease);
}
.lt-cust:not(.is-none):hover{border-color:var(--border-strong2);transform:translateY(-1px);box-shadow:var(--shadow-card-hi);}
.lt-cust.is-none{cursor:not-allowed;opacity:.62;}
.lt-cust .lt-av{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:var(--on-accent);background:var(--accent);
}
.lt-cust-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.lt-cust-name{font-size:13.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lt-cust-sub{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lt-cust-go{flex:0 0 auto;font-size:12px;color:var(--muted);white-space:nowrap;}

.lt-meta{margin-bottom:14px;}
.lt-meta .lt-row{display:flex;gap:8px;font-size:12px;margin-bottom:6px;}
.lt-meta .lt-lb{flex:0 0 auto;min-width:38px;color:var(--muted2);letter-spacing:.6px;}
.lt-meta .lt-v{flex:1 1 auto;min-width:0;color:var(--t2);word-break:break-all;}
.lt-subj{font-size:16px;font-weight:600;line-height:1.45;color:var(--text);margin:4px 0 6px;word-break:break-word;}
.lt-time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

.lt-warn{
  display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:12px;
  font-size:12px;color:var(--red);background:var(--red-soft);
  border:1px solid var(--red-line);border-radius:var(--r-xs);
}

.lt-content{
  font-size:14px;line-height:1.75;color:var(--t2);
  white-space:pre-wrap;word-break:break-word;
}
.lt-content.lt-empty{color:var(--muted);font-size:13px;padding:24px 0;text-align:center;}
.lt-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--skel1),var(--skel2),var(--skel1));
  background-size:200% 100%;animation:ltSkel 1.4s linear infinite;margin-bottom:11px;}
.lt-skel-t{height:18px;width:62%;margin-bottom:16px;}
.lt-skel:nth-child(3){width:92%;}
.lt-skel:nth-child(5){width:78%;}
@keyframes ltSkel{from{background-position:200% 0;}to{background-position:0 0;}}

.lt-foot{
  flex:0 0 auto;display:flex;gap:9px;align-items:center;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);background:var(--card);
}
.lt-foot .lt-btn{
  flex:1 1 auto;height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.3px;
  border-radius:var(--r-xs);border:1px solid var(--border2);
  background:transparent;color:var(--t1);cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.lt-foot .lt-btn:hover{border-color:var(--border-strong2);background:var(--ov-b);}
.lt-foot .lt-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.lt-foot .lt-btn.primary:hover{opacity:.9;}
.lt-foot .lt-btn.star{flex:0 0 auto;width:42px;font-size:16px;}
.lt-foot .lt-btn.star.on{color:#DFA64D;border-color:rgba(223,166,77,.5);}

@media (min-width:768px){
  .letter-view{
    left:50%;right:auto;top:50%;bottom:auto;
    width:660px;max-width:calc(100vw - 48px);max-height:86vh;
    transform:translate(-50%,-50%);
    border-radius:var(--r);
    animation:ltPop .22s var(--ease);
  }
  @keyframes ltPop{from{opacity:0;transform:translate(-50%,-50%) scale(.97);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
  .lt-head{padding-top:12px;}
}

/* ============================================================
   ⓶ 客户抽屉（客户是谁 · hub）：手机底部 86vh / 桌面右侧 460px
   ============================================================ */
.cust-drawer-mask{position:fixed;inset:0;background:var(--overlay);z-index:calc(var(--z-drawer) - 10);animation:ltFade .18s var(--ease);}
.cust-drawer{
  position:fixed;z-index:var(--z-drawer);display:flex;flex-direction:column;
  background:var(--card);color:var(--text);
  left:0;right:0;bottom:0;max-height:86vh;
  border-top:1px solid var(--border2);border-radius:18px 18px 0 0;
  box-shadow:var(--shadow-card-hi);
  animation:cdUp .26s var(--ease);
}
@keyframes cdUp{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}
.cd-grip{flex:0 0 auto;width:38px;height:4px;border-radius:99px;background:var(--border-strong2);
  margin:9px auto 3px;opacity:.6;}

.cd-head{flex:0 0 auto;padding:6px 16px 0;}
.cd-top{display:flex;align-items:flex-start;gap:11px;padding:4px 0 12px;}
.cd-av{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:var(--on-accent);background:var(--accent);
}
.cd-name-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:1px;}
.cd-name{font-size:15px;font-weight:600;color:var(--text);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
.cd-sub{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--muted);min-width:0;}
.cd-sub .cd-em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cd-send{
  flex:0 0 auto;height:30px;padding:0 12px;display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.2px;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:99px;cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.cd-send:hover{opacity:.9;transform:translateY(-1px);}
.cd-x{
  flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border2);border-radius:50%;
  color:var(--muted);font-size:12px;cursor:pointer;transition:all var(--dur) var(--ease);
}
.cd-x:hover{color:var(--text);border-color:var(--border-strong2);}
.cd-seg{width:100%;margin-bottom:2px;}
.cd-seg button i{font-style:normal;font-size:10.5px;opacity:.75;margin-left:2px;}

.cd-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 16px;-webkit-overflow-scrolling:touch;}
.cd-loading{padding:30px 0;text-align:center;font-size:12.5px;color:var(--muted);}

.cd-group{margin-bottom:16px;}
.cd-g-title{font-size:11.5px;font-weight:600;letter-spacing:.8px;color:var(--muted);margin-bottom:9px;
  display:flex;align-items:center;gap:8px;}
.cd-g-title::after{content:"";flex:1 1 auto;height:1px;background:var(--border);}
.cd-grid{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;}
.cd-kv{display:flex;gap:10px;padding:9px 12px;border-top:1px solid var(--border);font-size:12.5px;}
.cd-kv:first-child{border-top:0;}
.cd-kv .k{flex:0 0 34%;max-width:120px;color:var(--muted);}
.cd-kv .v{flex:1 1 auto;min-width:0;color:var(--t1);word-break:break-word;}
.cd-kv .v .dim{color:var(--muted);}
.cd-kv .v a{color:var(--text);border-bottom:1px dotted var(--border-strong2);}
.cd-remark-txt{padding:10px 12px;font-size:12.5px;line-height:1.65;color:var(--t2);background:var(--ov-b);
  border:1px solid var(--border);border-radius:var(--r-sm);white-space:pre-wrap;word-break:break-word;}

.cd-stat{font-size:11.5px;color:var(--muted);margin-bottom:12px;font-variant-numeric:tabular-nums;}
.cd-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0;color:var(--muted);font-size:13px;}
.cd-btn{
  height:38px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.3px;
  border-radius:var(--r-xs);border:1px solid var(--border2);background:transparent;color:var(--t1);cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.cd-btn:hover{border-color:var(--border-strong2);background:var(--ov-b);}
.cd-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.cd-btn.primary:hover{opacity:.9;}

/* 往来邮件时间线：整条可点 */
.cd-tl{
  width:100%;display:flex;gap:11px;align-items:flex-start;text-align:left;
  padding:11px 12px;margin-bottom:9px;cursor:pointer;
  background:var(--ov-a);border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:inherit;transition:all var(--dur) var(--ease);
}
.cd-tl:hover{border-color:var(--border-strong2);background:var(--ov-b);transform:translateY(-1px);box-shadow:var(--shadow-card-hi);}
.cd-tl:active{transform:none;}
.cd-tl .cd-tl-node{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px;
  background:var(--muted3);box-shadow:0 0 0 3px var(--ov-b);
}
.cd-tl .cd-tl-node.in{background:#34d399;}
.cd-tl .cd-tl-node.out{background:#60a5fa;}
.cd-tl.is-reply .cd-tl-node.in{box-shadow:0 0 0 3px rgba(52,211,153,.22);}
.cd-tl-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;}
.cd-tl-r1{display:flex;align-items:center;gap:8px;}
.cd-tl-tag{
  font-size:10.5px;font-weight:600;letter-spacing:.3px;padding:1px 7px;border-radius:5px;
  border:1px solid var(--border2);color:var(--muted);white-space:nowrap;
}
.cd-tl-tag.in{color:#34d399;border-color:rgba(52,211,153,.32);background:var(--green-soft);}
.cd-tl-tag.out{color:#60a5fa;border-color:rgba(96,165,250,.32);background:rgba(96,165,250,.12);}
.cd-tl-tag.is-reply{color:#34d399;border-color:rgba(52,211,153,.5);background:var(--green-soft2);}
.cd-tl-tag.is-fail{color:var(--red);border-color:var(--red-line);background:var(--red-soft);}
.cd-tl-time{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.cd-tl-subj{font-size:13px;color:var(--t1);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
.cd-tl-peer{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cd-tl-go{font-size:11px;color:var(--muted);opacity:0;transition:opacity var(--dur) var(--ease);}
.cd-tl:hover .cd-tl-go{opacity:1;color:var(--text);}
@media (hover:none){.cd-tl-go{opacity:.55;}}

.cd-foot{
  flex:0 0 auto;display:flex;gap:9px;padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);background:var(--card);
}
.cd-foot .cd-btn{flex:1 1 auto;height:42px;}

@media (min-width:768px){
  .cust-drawer{
    left:auto;right:0;top:0;bottom:0;max-height:none;width:460px;max-width:92vw;
    border-top:0;border-left:1px solid var(--border2);border-radius:0;
    animation:cdRight .24s var(--ease);
  }
  @keyframes cdRight{from{transform:translateX(24px);opacity:.6;}to{transform:none;opacity:1;}}
  .cd-grip{display:none;}
  .cd-head{padding-top:14px;}
  .cd-foot .cd-btn{height:40px;}
}

/* ---------- 排版美化：细节统一（滚动条 / 焦点环 / 数字等宽 / 空值） ---------- */
.lt-body::-webkit-scrollbar,.cd-body::-webkit-scrollbar{width:8px;}
.lt-body::-webkit-scrollbar-thumb,.cd-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px;}
.lt-body::-webkit-scrollbar-thumb:hover,.cd-body::-webkit-scrollbar-thumb:hover{background:var(--border-strong2);}
.lt-body::-webkit-scrollbar-track,.cd-body::-webkit-scrollbar-track{background:transparent;}
.cd-tl:focus-visible,.lt-cust:focus-visible,.cm-send:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* 手机端：邮件状态行允许换行，避免「状态胶囊 + 邮箱 + 发邮件」三个元素溢出 375px */
@media (max-width:767.98px), (hover:none){
  .cust-mail{flex-wrap:wrap;row-gap:8px;}
  .cust-mail .cm-mail{max-width:100%;text-align:left;}
  .cust-mail .cm-send{margin-left:auto;}
}

/* ---------- 层叠修正：发送弹窗须浮在「信件详情 / 客户抽屉」之上 ---------- */
.modal-mask.mm-top{z-index:var(--z-top);}

/* ---------- WhatsApp 口径统一（与客户列表页 WA 列同规则） ----------
   详情页不再输出「该号码非 WhatsApp」这类无法证实的否定提示：
   有 whatsapp 用绿色态直接打开；仅有电话时用中性态「试连」，与列表页一致。 */
#detail-modal .dt-link.wa.phone{border-color:var(--border-strong);background:transparent;color:var(--t2);}
#detail-modal .dt-link.wa.phone:hover{border-color:var(--green);color:var(--green);}
#detail-modal .dt-wa-ok{font-size:11px;color:var(--green);white-space:nowrap;}

/* ==================== 客户详情弹窗：分区 Tab（资料 / 邮件来往记录） ====================
   参照「邮件」页（.seg-ctrl.mgr-seg + .mgr-panel + .snd-item）的样式与交互，
   把详情拆成互不干扰的两个分区，可随时切换；375 手机端优先、桌面兼容。 */
#detail-modal .dt-tabs{flex:0 0 auto;padding:10px 16px 0;border-bottom:1px solid var(--border);background:var(--card);}
#detail-modal .dt-seg{margin-bottom:10px;}
#detail-modal .dt-seg button{white-space:nowrap;}
#detail-modal .dt-mail{min-height:120px;}
#detail-modal .dt-mail .mgr-bar{padding:0 0 10px;}
#detail-modal .dt-mail .mgr-hint{font-size:11.5px;line-height:1.5;}
#detail-modal .dt-mail-stat{margin:0 0 10px;padding:8px 10px;border:1px solid var(--border2);border-radius:10px;
  background:var(--card2);font-size:11.5px;color:var(--sec);font-variant-numeric:tabular-nums;}
/* 客户来信：与「已发信」绿态区分开的蓝态胶囊 */
.snd-st.in{color:var(--blue);border-color:var(--blue-line);background:var(--blue-soft)}
/* 标题可点（复用邮件页发送记录的可点标题观感，仅限详情弹窗内覆盖颜色） */
#detail-modal .snd-t2.link{font-size:11.5px;line-height:1.5;color:var(--sec);margin-top:3px;}
#detail-modal .snd-t2.link:hover{color:var(--accent);border-bottom-color:var(--accent);}
@media (max-width:767.98px), (hover: none){
  #detail-modal .dt-tabs{padding:10px 14px 0;}
  #detail-modal .dt-mail .mgr-bar{gap:8px;}
  #detail-modal .dt-mail .mgr-bar-acts{width:100%;justify-content:flex-end;}
  #detail-modal .dt-mail .snd-item{align-items:flex-start;flex-wrap:wrap;}
  #detail-modal .dt-mail .snd-time{margin-left:auto;}
}

/* ==========================================================================
   ① 关键词饱和提醒（2026-10-13 · 按设计稿 t1）
   逻辑：某关键词「带来客户」≥ KW_SATURATE_X(默认 20) → 三处提醒，主次分明，不做全屏横幅打扰
   全部沿用现有 token，不新增色值
   ========================================================================== */

/* ⓐ 主：任务完成弹窗内嵌建议条（采完正在看结果，转化最高） */
.kw-sat-tip{
  margin-top:12px;
  background:var(--orange-soft);
  border-left:3px solid var(--orange);
  border-radius:10px;
  padding:10px 12px;
  text-align:left;
}
.kw-sat-tip .kst-title{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--orange);margin-bottom:5px;}
.kw-sat-tip .kst-title svg{flex:0 0 auto;}
.kw-sat-tip .kst-desc{font-size:12.5px;line-height:1.65;color:var(--text);word-break:break-word;}
.kw-sat-tip .kst-desc b{color:var(--orange);font-weight:700;}
.kw-sat-tip .kst-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.kw-sat-tip .kst-acts .btn{font-size:12.5px;}

/* ⓑ 常驻：关键字列表「带来客户」数值后的「已饱和」徽标 */
.kw-sat-badge{
  display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:6px;
  border-radius:99px;font-size:10.5px;font-weight:600;line-height:1;
  background:var(--orange-soft);color:var(--orange);border:1px solid var(--orange-line);
  vertical-align:middle;cursor:help;white-space:nowrap;
}

/* ⓑ2 关键字行「换个词」次按钮 */
.btn-kw-swap{
  background:transparent;color:var(--sec);border:1px solid var(--border2);
}
.btn-kw-swap:hover{background:var(--hover);color:var(--text);border-color:var(--border-strong2);}

/* ⓒ 即时：采集总控「当前关键字」右侧小提示（不打断，只是贴着） */
.run-kw-sat{
  display:inline-flex;align-items:center;gap:4px;margin-left:8px;
  font-size:11px;color:var(--orange);cursor:pointer;text-decoration:none;
  border-bottom:1px dashed transparent;
}
.run-kw-sat:hover{color:var(--text);border-bottom-color:var(--text);}

@media (max-width:767.98px){
  .kw-sat-tip .kst-desc{font-size:13px;}
  .kw-sat-tip .kst-acts .btn{flex:1 1 auto;min-height:36px;}
  .run-kw-sat{display:flex;margin-left:0;margin-top:4px;font-size:12px;}
}

/* ==========================================================================
   2026-10-13 本批：①信件详情关闭按钮 ②采集中区块强调 ③多邮箱展示 ④额度前置
   （按设计师 t1 方案 ch-crawl-ux-detail-design.md；只改视觉与交互，接口/数据结构零改动）
   说明：本区块为纯覆盖层，放在末尾以便回滚（删掉本段即恢复本批前外观）。
   ========================================================================== */

/* ---------- ① 信件详情：关闭按钮醒目化 ---------- */
.letter-view .lt-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));
}
.letter-view .lt-head .lt-title{
  flex:none;grid-column:2;text-align:center;font-size:14px;font-weight:600;letter-spacing:.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.letter-view .lt-head .lt-back{
  grid-column:1;justify-self:start;
  width:36px;height:36px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ov-d);border:1px solid var(--border);border-radius:10px;color:var(--t2);
  cursor:pointer;transition:all var(--dur) var(--ease);
}
.letter-view .lt-head .lt-back:hover{background:var(--ov-e);border-color:var(--border2);color:var(--text);}
.letter-view .lt-head .lt-back:active{transform:scale(.96);}
.letter-view .lt-head .lt-x{
  grid-column:3;justify-self:end;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:74px;height:36px;padding:0 14px;flex:0 0 auto;
  background:var(--ov-e);border:1px solid var(--border2);border-radius:99px;
  color:var(--t1);font-size:12.5px;font-weight:600;line-height:1;
  cursor:pointer;transition:all var(--dur) var(--ease);
}
.letter-view .lt-head .lt-x .lt-x-t{letter-spacing:.3px;}
.letter-view .lt-head .lt-x svg{transition:transform .18s var(--ease);}
.letter-view .lt-head .lt-x:hover{background:var(--ov-f);border-color:var(--border-strong2);color:var(--text);}
.letter-view .lt-head .lt-x:hover svg{transform:rotate(90deg);}
.letter-view .lt-head .lt-x:active{transform:scale(.96);}
.letter-view .lt-head .lt-x:focus-visible,.letter-view .lt-head .lt-back:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--ov-f);
}
@media (max-width:575.98px){
  .letter-view .lt-head .lt-x{min-width:70px;padding:0 12px;}
}

/* ---------- ② 采集中的区块：一个变量驱动整块颜色 + 动效 ---------- */
.ctl-running{
  --run-c:var(--border);
  --run-c-soft:transparent;
  --run-c-line:var(--border);
}
.ctl-running.is-running{--run-c:var(--green);--run-c-soft:var(--green-soft);--run-c-line:var(--green-line);}
.ctl-running.is-paused,.ctl-running.is-quota{--run-c:var(--orange);--run-c-soft:var(--orange-soft);--run-c-line:var(--orange-line);}
.ctl-running.is-done{--run-c:var(--blue);--run-c-soft:var(--blue-soft);--run-c-line:var(--blue-line);}
.ctl-running.is-failed{--run-c:var(--red);--run-c-soft:var(--red-soft);--run-c-line:var(--red-line);}
.ctl-running.is-running,.ctl-running.is-paused,.ctl-running.is-quota,.ctl-running.is-done,.ctl-running.is-failed{
  border-color:var(--run-c-line);
  background:linear-gradient(180deg,var(--run-c-soft) 0%,transparent 58%),var(--card);
}
.ctl-running.is-live{padding:16px 18px;}
/* 左侧强调条 */
.ctl-running::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:3px;
  background:var(--run-c);opacity:0;transition:opacity .25s var(--ease);
}
.ctl-running.is-running::before,.ctl-running.is-paused::before,
.ctl-running.is-quota::before,.ctl-running.is-done::before,.ctl-running.is-failed::before{opacity:1;}
/* 外发光呼吸（只动 opacity，不触发 layout） */
.ctl-running.is-live::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 22px 2px var(--run-c-soft);opacity:0;
  animation:runBreathe 2.4s ease-in-out infinite;
}
@keyframes runBreathe{0%,100%{opacity:.25}50%{opacity:.9}}
/* 顶扫光：加粗 + 随状态色 */
.ctl-running.is-live .run-sweep{
  height:3px;background:linear-gradient(90deg,transparent 0%,var(--run-c) 50%,transparent 100%);
}
/* 进度条条纹流动 */
.ctl-running.is-live .task-progress-fill{
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 8px,transparent 8px 16px);
  background-size:auto;animation:runStripe 1.2s linear infinite;
}
@keyframes runStripe{from{background-position:0 0}to{background-position:23px 0}}
/* 环形进度发光 */
.ctl-running.is-running .ring-fg,.ctl-running.is-paused .ring-fg,.ctl-running.is-quota .ring-fg{
  filter:drop-shadow(0 0 6px var(--run-c-soft));
}
/* 状态头「运行中」胶囊 */
.run-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;height:19px;padding:0 8px;
  border-radius:99px;font-size:11px;font-weight:600;line-height:1;letter-spacing:.2px;
  background:var(--run-c-soft);color:var(--run-c);border:1px solid var(--run-c-line);
  white-space:nowrap;
}

/* ---------- ③ 多邮箱：列表收、详情展 ---------- */
.cm-mails{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;}
.cm-mails .cm-mail{min-width:0;}
.cm-more{
  flex:0 0 auto;display:inline-flex;align-items:center;height:16px;padding:0 6px;
  border-radius:99px;font-size:10.5px;font-weight:600;font-style:normal;line-height:1;
  background:var(--ov-e);color:var(--sec);border:1px solid var(--border);cursor:help;
}
.cm-mails:hover .cm-more{background:var(--ov-f);color:var(--t1);}
.pop-note{margin-top:6px;font-size:11px;color:var(--muted);line-height:1.5;}
.pop-val.email-rows{gap:0;max-height:180px;}
.email-row{
  display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 0;
  border-bottom:1px solid var(--border);
}
.email-row:last-child{border-bottom:none;}
.er-idx{
  flex:0 0 auto;width:16px;text-align:center;font-size:10.5px;color:var(--muted3);
  font-variant-numeric:tabular-nums;
}
.er-mail{
  flex:1 1 auto;min-width:0;font-size:12px;color:var(--text);line-height:1.4;
  overflow-wrap:anywhere;word-break:break-word;
}
.er-main{
  flex:0 0 auto;display:inline-flex;align-items:center;height:16px;padding:0 6px;
  border-radius:99px;font-size:10px;font-weight:600;line-height:1;
  background:var(--orange-soft);color:var(--orange);border:1px solid var(--orange-line);
}
.er-copy{
  flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:7px;
  color:var(--muted);font-size:12px;line-height:1;cursor:pointer;transition:all var(--dur) var(--ease);
}
.er-copy:hover{background:var(--hover);color:var(--text);border-color:var(--border-strong2);}
.er-copy.ok{color:var(--green);border-color:var(--green-line);background:var(--green-soft);}
/* 抽屉 / 详情弹窗里的堆叠列表（跨满整行） */
.cd-kv-wide{grid-column:1 / -1;}
.cd-kv-wide .v{display:block;}
.email-stack{
  display:flex;flex-direction:column;margin-top:2px;
  border:1px solid var(--border);border-radius:8px;background:var(--ov-a);padding:2px 8px;
}
.email-stack .email-row{min-height:34px;}
.email-stack .email-row:last-child{border-bottom:none;}
.pop-val .email-row .er-mail{font-size:12px;}

/* ---------- ④ 今日采集额度：独立紧凑卡（置于采集总控上方） ---------- */
.quota-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:12px;
}
.quota-card .qc-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.quota-card .qc-t{font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:.3px;}
.quota-card .qc-num{font-size:12.5px;color:var(--muted);}
.quota-card .qc-num b{font-size:15px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums;}
.quota-card .qc-cap{
  margin-left:auto;display:inline-flex;align-items:center;height:20px;padding:0 9px;
  border-radius:99px;font-size:11.5px;color:var(--sec);
  background:var(--ov-d);border:1px solid var(--border);white-space:nowrap;
}
.quota-card .qc-out{
  display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:99px;
  font-size:11.5px;font-weight:600;color:var(--red);background:var(--red-soft);border:1px solid var(--red-line);
}
.quota-card .qc-track{height:8px;border-radius:99px;background:var(--track);overflow:hidden;margin-top:9px;}
.quota-card .qc-fill{
  height:100%;border-radius:99px;background:var(--accent);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.quota-card .qc-fill.warn{background:var(--orange);}
.quota-card .qc-fill.out{background:var(--red);}
.quota-card .qc-hint{margin-top:7px;font-size:11.5px;color:var(--muted3);line-height:1.6;}
.quota-card.is-out{border-color:var(--red-line);background:linear-gradient(180deg,var(--red-soft),var(--card) 60%);}

/* ---------- ⑥ 历史任务里的饱和提醒（详情弹窗 + 列表徽标） ---------- */
.kw-sat-tip.kw-sat-history{margin-bottom:14px;}
.kw-sat-badge.kw-sat-mini{
  margin-left:6px;height:15px;padding:0 6px;font-size:10px;
}

/* ---------- 性能红线：reduced-motion 关停本批动效（颜色强调保留） ---------- */
@media (prefers-reduced-motion: reduce){
  .ctl-running.is-live::after{animation:none!important;opacity:.35;}
  .ctl-running.is-live .run-sweep{animation:none!important;}
  .ctl-running.is-live .task-progress-fill{animation:none!important;background-image:none;}
  .letter-view .lt-head .lt-x svg{transition:none!important;}
}
/* ============================================================
   多邮箱：发信弹窗「收件邮箱」逐条勾选器（t1 方案 v1）· v5-1004l
   — 仅新增类，不改动任何既有规则；删掉本段即完整回滚
   ============================================================ */
.sm-lbl-flex{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ep-quick{display:inline-flex;gap:4px;padding:3px;background:var(--card2);border:1px solid var(--border);border-radius:10px}
.ep-q{appearance:none;border:0;background:transparent;color:var(--muted);font-size:12px;padding:4px 11px;border-radius:7px;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease)}
.ep-q:hover{color:var(--text)}
.ep-q.on{background:var(--accent);color:var(--on-accent);font-weight:600}

.ep-list{max-height:236px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.ep-card{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.ep-card.ep-off{background:var(--ov-d);border-style:dashed}
.ep-chead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ep-co{font-size:12.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ep-all{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);cursor:pointer;user-select:none;flex:0 0 auto}
.ep-all:hover{color:var(--t1)}
.ep-skip{font-size:11.5px;color:var(--muted);padding:5px 0 1px;text-decoration:line-through}

.ep-rows{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.ep-row{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 8px;border-radius:8px;cursor:pointer;
  transition:background .15s var(--ease)}
.ep-row:hover{background:var(--hover)}
.ep-row.on{background:var(--accent-soft,var(--ov-e))}
.ep-row.over .ep-mail{color:var(--orange)}
.ep-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ep-mk{flex:0 0 auto;width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:6px;background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;transition:background .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease)}
.ep-row:hover .ep-mk{border-color:var(--border-strong2,var(--border-strong))}
.ep-row.on .ep-mk{background:var(--accent);border-color:var(--accent)}
.ep-row.on .ep-mk::after{content:"";width:10px;height:6px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);
  transform:rotate(-45deg) translateY(-1px)}
.ep-box{flex:0 0 auto;width:16px;height:16px;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--card);
  display:inline-flex;align-items:center;justify-content:center}
.ep-box.on{background:var(--accent);border-color:var(--accent)}
.ep-box.on::after{content:"";width:8px;height:5px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg) translateY(-1px)}
.ep-box.half{background:var(--accent);border-color:var(--accent)}
.ep-box.half::after{content:"";width:8px;height:2px;background:var(--on-accent);border-radius:1px}
.ep-dot{flex:0 0 auto;width:6px;height:6px;border-radius:99px;background:var(--accent)}
.ep-mail{font-size:13px;color:var(--text);overflow-wrap:anywhere;min-width:0}
.ep-main{flex:0 0 auto;margin-left:auto;font-size:10.5px;line-height:16px;padding:0 6px;border-radius:99px;
  background:var(--orange-soft);color:var(--orange);border:1px solid var(--orange-line)}
.ep-fold{display:flex;align-items:center;gap:6px;width:100%;margin-top:6px;padding:8px 10px;min-height:40px;
  background:transparent;border:1px dashed var(--border);border-radius:8px;cursor:pointer;text-align:left;
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.ep-fold:hover{background:var(--hover);border-color:var(--border2)}
.ep-fold .ep-more{font-style:normal;font-size:11px;line-height:16px;padding:0 6px;border-radius:99px;
  background:var(--ov-e);color:var(--t2);border:1px solid var(--border)}
.ep-fold-t{margin-left:auto;font-size:11.5px;color:var(--muted)}
.ep-sum{color:var(--muted)}
.ep-sum.over{color:var(--orange);font-weight:600}
@media (prefers-reduced-motion: reduce){
  .ep-q,.ep-row,.ep-mk,.ep-fold{transition:none}
  .ep-row.on .ep-mk{transform:none}
}
@media (max-width: 575.98px){
  .ep-list{max-height:200px}
  .ep-row{min-height:42px}
  .ep-mail{font-size:13.5px}
  .ep-quick{width:100%;justify-content:space-between}
  .ep-q{flex:1;text-align:center;padding:6px 0}
}

/* ============================================================================
   UX5 · 统一浮动层规范（t1 设计稿 v1）—— 2026-10-13
   ① 层级令牌单一真源 ② 醒目关闭胶囊 ③ 防误触（滚动锁/遮罩分级/手势判定）
   只改视觉与交互：接口与数据结构零改动。整段删除即可回滚本批样式。
   ============================================================================ */
:root,html[data-theme="dark"],html[data-theme="light"]{
  --z-header:1030;   /* 吸顶导航 */
  --z-inline:1200;   /* 页内浮层：行内菜单 / 列表浮层 / 引导 */
  --z-panel:1500;    /* 通知面板（遮罩 −10） */
  --z-thread:1600;   /* 往来记录（遮罩 −10） */
  --z-detail:1650;   /* 客户详情（遮罩 −10） */
  --z-drawer:1700;   /* 客户抽屉（遮罩 −10） */
  --z-letter:1750;   /* 信件详情（遮罩 −10） */
  --z-top:1800;      /* 发信 / 模板 / 邮箱 / 任务 / 关键字（遮罩 −10） */
  --z-toast:1850;    /* 全局软提示（不阻挡点击） */
  --z-confirm:1900;  /* 预留：确认 / 多选层（用尽说明该改层内步骤，禁再加号） */
}
/* 硬规则：新浮层只允许取 --z-confirm 以内的令牌，不得再写裸数字 */

/* ---------- ① 层级归一（唯一真源，禁用裸数字） ---------- */
.app-header{ z-index:var(--z-header); }
.c-menu{ z-index:var(--z-inline); }
.cust-row.has-pop{ z-index:var(--z-inline); }
.gmask{ z-index:var(--z-inline); }
.gbubble{ z-index:var(--z-inline); }
.gtoast{ z-index:var(--z-toast); }
.swipe-tip{ z-index:var(--z-toast); }
.mail-toast{ z-index:var(--z-toast); }
.mail-panel-mask{ z-index:calc(var(--z-panel) - 10); }
.mail-panel{ z-index:var(--z-panel); }
.mail-thread-mask{ z-index:calc(var(--z-thread) - 10); }
.mail-thread{ z-index:var(--z-thread); }
.modal-mask{ z-index:var(--z-detail); }
.modal-mask.mm-top{ z-index:var(--z-top); }
.cust-drawer-mask{ z-index:calc(var(--z-drawer) - 10); }
.cust-drawer{ z-index:var(--z-drawer); }
.letter-mask{ z-index:calc(var(--z-letter) - 10); }
.letter-view{ z-index:var(--z-letter); }

/* ---------- ② 醒目关闭胶囊（全站唯一形态） ---------- */
.layer-close{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  min-width:74px;height:36px;padding:0 14px;border-radius:99px;
  border:1px solid var(--border2);background:var(--ov-e,rgba(127,127,127,.08));
  color:var(--t1);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
}
.layer-close .lc-i{font-size:13px;line-height:1;transition:transform .2s var(--ease)}
.layer-close:hover{background:var(--ov-f,rgba(127,127,127,.15));border-color:var(--border-strong)}
.layer-close:hover .lc-i{transform:rotate(90deg)}
.layer-close:active{transform:scale(.96)}
.layer-close:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ov-e,rgba(127,127,127,.18))}
.layer-close.is-attn{background:var(--ov-f,rgba(127,127,127,.18));box-shadow:0 0 0 3px var(--ov-e,rgba(127,127,127,.14))}
@media (max-width:767.98px),(hover:none) and (pointer:coarse){
  .layer-close{min-width:78px;height:40px;font-size:13px}
}

/* 头部：sticky 置顶（关闭键永不随内容滚走）+ 三栏保证标题真居中 */
.modal-box>.d-flex.border-bottom,.dt-head,.mp-head,.mth-head,.lt-head,.cd-head{
  position:sticky;top:0;z-index:2;background:var(--card);
}
.modal-box>.d-flex.border-bottom{
  display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:10px 12px!important;
}
.modal-box>.d-flex.border-bottom>strong{grid-column:2;text-align:center;font-size:14px;font-weight:600}
.modal-box>.d-flex.border-bottom>.layer-close{grid-column:3;justify-self:end}
.dt-head{grid-template-columns:auto minmax(0,1fr) auto}
.mp-head>.mp-acts{justify-self:end;display:flex;align-items:center;gap:8px}

/* ---------- ③ 防误触：滚动锁 + 滚动链拦截 + 误点抖动 ---------- */
body.is-locked{overflow:hidden}
@supports (-webkit-touch-callout:none){
  body.is-locked{position:fixed;left:0;right:0;width:100%}
}
.modal-mask,.modal-box,.mail-panel,.cust-drawer,.letter-view,
.cd-body,.dt-body,.lt-body,.p-3,.sendm,.tpl-form,.accf,.kw-lib-list,.ep-list,.mp-list{
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
@keyframes layerShake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}
}
.modal-box.is-shake,.cust-drawer.is-shake,.letter-view.is-shake{animation:layerShake .2s var(--ease)}

/* ---------- Sheet 把手条 + 手机端统一底部上滑 ---------- */
.sheet-grip{display:none;width:36px;height:6px;border-radius:3px;background:var(--border-strong);margin:8px auto 0;flex:0 0 auto}
@media (max-width:767.98px){
  .sheet-grip{display:block}
  .modal-mask{align-items:flex-end;padding:0}
  .modal-box{
    width:100%!important;max-width:100%!important;margin:0!important;
    border-radius:16px 16px 0 0!important;max-height:92vh;overflow-y:auto;
    padding-bottom:env(safe-area-inset-bottom);
    animation:sheetUp .24s var(--ease) both;
  }
  .modal-box>.d-flex.border-bottom{border-radius:0}
}
@keyframes sheetUp{from{transform:translateY(26px);opacity:.65}to{transform:none;opacity:1}}

/* ---------- ④ 关键字「添加关键字」浮动层 ---------- */
#kw-sheet .ks-grid{display:grid;gap:14px}
#kw-sheet .ks-foot{
  position:sticky;bottom:0;z-index:2;display:flex;gap:10px;justify-content:flex-end;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--card);
}
#kw-sheet .ks-foot .btn{min-height:36px}
#kw-sheet .row.g-2>[class*=col-]{width:100%!important;flex:0 0 100%!important;max-width:100%!important}
#kw-sheet .ks-kw-hint{font-size:12px;color:var(--muted);margin:-4px 0 2px}
@media (min-width:768px){
  #kw-sheet{width:720px!important;max-width:720px!important}
  #kw-sheet .ks-grid{grid-template-columns:minmax(0,38%) minmax(0,62%);align-items:start}
  #kw-sheet .kw-lib{max-height:min(50vh,420px);overflow:auto}
}

/* ---------- reduced motion：关动效但保留层级与颜色 ---------- */
@media (prefers-reduced-motion:reduce){
  .modal-box,.modal-mask,.cust-drawer,.cust-drawer-mask,.letter-view,.letter-mask,
  .mail-panel,.mail-toast,.gtoast,.layer-close,.layer-close .lc-i,.modal-box.is-shake{
    animation:none!important;transition:none!important;
  }
}

/* 预制词库「已选」高亮（t1 §5.3） */
#kw-sheet .kw-item.is-picked{border-color:var(--accent);box-shadow:0 0 0 2px var(--ov-e,rgba(127,127,127,.14))}

/* 客户抽屉关闭键：旧 .cd-x 圆点按钮 → 统一「✕ 关闭」胶囊 */
.cd-head .cd-x.layer-close{width:auto;height:36px;border-radius:99px;padding:0 14px;gap:5px;
  background:var(--ov-e,rgba(127,127,127,.08));border-color:var(--border2);color:var(--t1);font-size:12.5px;font-weight:600}
.cd-head .cd-x.layer-close:hover{background:var(--ov-f,rgba(127,127,127,.15));border-color:var(--border-strong);color:var(--t1)}
@media (max-width:767.98px),(hover:none) and (pointer:coarse){.cd-head .cd-x.layer-close{min-width:78px;height:40px;font-size:13px}}

/* ============================================================
   第七轮（2026-10-13）
   ① 客户列表：发信区块重排（行A/行B）+ 邮箱浮层 .mail-pop + 批量选择交互
   ② PC 端：左侧 OS 式侧边栏（按设计师 t1 设计稿）
   原则：只改视觉与交互；接口 / 数据结构零改动；暗亮双主题沿用现有 token
   说明：整段为覆盖层，删除本段即可完整回滚（旧规则均保留未删）
   ============================================================ */

/* ---------------- ① 客户行：行A（状态 + 主操作）/ 行B（邮箱独占一行） ---------------- */
.cust-mail{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0}
.cm-rowA{display:flex;align-items:center;gap:8px;height:26px;min-width:0}
.cm-rowA .mail-chip{flex:0 0 auto}
.cust-mail .cm-send{margin-left:auto;flex:0 0 auto}
.cm-rowB{display:flex;align-items:center;gap:6px;height:22px;min-width:0;padding:0 2px;border-radius:6px;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.cm-rowB .cmb-ic{flex:0 0 auto;color:var(--muted3);transition:color var(--dur) var(--ease)}
.cm-rowB .cm-mail{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-rowB .cm-more{flex:0 0 auto}
.cm-rowB .cmb-ar{flex:0 0 auto;font-size:12px;line-height:1;color:var(--muted3);
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.cm-rowB:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.cm-rowB.is-none{height:22px;padding:0;font-size:11.5px;color:var(--muted2);cursor:default}
.cust-row.no-mail{opacity:.55;cursor:not-allowed}
.cust-row.row-shake{animation:layerShake .32s var(--ease)}
@media (hover:hover){
  .cm-rowB:hover{background:var(--hover)}
  .cm-rowB:hover .cm-mail,.cm-rowB:hover .cmb-ic,.cm-rowB:hover .cmb-ar{color:var(--t1)}
  .cm-rowB:hover .cm-more{background:var(--ov-f);color:var(--t1)}
}

/* 桌面：邮件列加宽到 212px（行A 的「胶囊 + 按钮」稳定一行不换行）；勾选框进 grid 流 */
@media (min-width:768px) and (hover:hover){
  .cust-row:not(.pick-mode){grid-template-columns:minmax(200px,1fr) minmax(180px,280px) 212px 76px 156px}
  .cust-row.pick-mode{grid-template-columns:auto minmax(200px,1fr) minmax(180px,280px) 212px 76px 156px;padding-left:16px}
  .cust-row.pick-mode .cust-bar{display:block}
  .cust-row .pick-box{position:static;left:auto;top:auto;transform:none;align-self:center}
}

/* ---------------- ① 勾选框：从「飘着的小方块」变成「格子里的控件」 ---------------- */
.cust-row .pick-box{position:static;left:auto;top:auto;transform:none;width:24px;height:24px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  border:1.5px solid var(--border-strong);background:var(--card2);color:var(--on-accent);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .12s var(--ease)}
.cust-row .pick-box svg{width:14px;height:14px}
.cust-row .pick-box.on{background:var(--accent);border-color:var(--accent);animation:pkPop .12s var(--ease)}
@keyframes pkPop{from{transform:scale(.92)}to{transform:none}}
.cust-row .pick-box.is-disabled{border-style:dashed;opacity:.45;background:transparent;cursor:not-allowed}
.cust-row .pick-box.is-disabled::after{content:'';position:absolute;left:50%;top:50%;width:132%;height:1.5px;
  background:var(--muted3);border-radius:2px;transform:translate(-50%,-50%) rotate(-45deg)}
.cust-row .pick-box{position:relative}
@media (hover:hover){
  .cust-row .pick-box:not(.on):not(.is-disabled):hover{border-color:var(--border-strong2);background:var(--ov-d)}
}
/* 选中态三处同时可见：勾选框 + 行底色 + 左侧色条 */
.cust-row.picked{background:var(--hover);border-radius:12px}
.cust-row.picked .cust-bar{background:var(--accent)}
@media (max-width:767.98px),(hover:none){
  .cust-row .pick-box{width:26px;height:26px}
  .cust-row.pick-mode{grid-template-columns:auto 1fr;padding-left:16px}
  .cust-row.pick-mode .cust-bar{display:block}
  .cust-mail{flex-wrap:nowrap;row-gap:0}
  .cm-rowA{height:28px}
  .cm-rowB{height:24px}
}

/* ---------------- ① 邮箱浮层 .mail-pop（行B 与 ✉ 图标共用同一浮层） ---------------- */
.mail-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-inline);width:min(300px,86vw);
  display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--border2);
  border-radius:12px;box-shadow:var(--shadow-card);animation:dcIn .16s var(--ease)}
.mail-pop.flip-l{left:0;right:auto}
.mail-pop.flip-up{top:auto;bottom:calc(100% + 6px)}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;height:34px;padding:0 10px 0 12px;
  border-bottom:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.mp-cap{font-variant-numeric:tabular-nums}
.mp-all{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:12px;line-height:1;cursor:pointer;
  transition:all var(--dur) var(--ease)}
.mp-all:hover{border-color:var(--border-strong2);color:var(--t1)}
.mp-list{display:flex;flex-direction:column;max-height:176px;overflow:auto}
.mp-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 12px;border-bottom:1px solid var(--border)}
.mp-row:last-child{border-bottom:none}
.mp-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--muted3)}
.mp-row.is-main .mp-dot{background:var(--orange)}
.mp-mail{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-tag{flex:0 0 auto;display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:99px;
  font-size:10.5px;font-weight:600;line-height:1;background:var(--orange-soft);color:var(--orange);border:1px solid var(--orange-line)}
.mp-copy{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:12px;line-height:1;
  cursor:pointer;transition:all var(--dur) var(--ease)}
.mp-copy:hover{border-color:var(--border-strong2);color:var(--t1)}
.mp-copy.ok{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.mp-foot{padding:8px 10px 6px}
.mp-send{width:100%;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--accent);border:1px solid var(--accent);border-radius:9px;color:var(--on-accent);
  font-size:12.5px;font-weight:600;cursor:pointer;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.mp-send:hover{transform:translateY(-1px)}
.mp-send:active{transform:translateY(0);opacity:.85}
.mp-note{padding:0 12px 10px;font-size:11px;color:var(--muted);line-height:1.5}
.mp-none{padding:10px 12px;font-size:11.5px;color:var(--muted2)}
@media (max-width:767.98px),(hover:none){.mail-pop{width:min(300px,88vw)}}

/* ---------------- ① 批量条计数 + 手机吸底操作条 ---------------- */
.bulk-can{margin-left:6px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.bulk-excl{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bulk-full{font-size:11.5px;color:var(--orange)}
.bulk-acts .btn.is-on{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.bulk-dock{display:none}
@media (max-width:767.98px),(hover:none){
  .bulk-dock{display:flex;align-items:center;gap:8px;position:sticky;bottom:0;z-index:var(--z-inline);
    margin-top:10px;padding:10px 0 calc(10px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--border)}
  .bulk-dock .bd-info{flex:1 1 auto;font-size:12.5px;color:var(--sec);font-variant-numeric:tabular-nums}
  .bulk-dock .bd-info b{color:var(--t1)}
  .bulk-dock .bd-can{margin-left:4px;color:var(--accent);font-weight:700}
}

/* ---------------- ② PC 端：左侧 OS 式侧边栏 ---------------- */
:root{--side-w:224px;--side-w-min:64px;--side-item-h:40px;--side-item-r:10px;--side-pad:12px}
/* 工具提示（tooltip）文本节点必须默认隐藏：仅收起态 hover/focus 才显示。
   注：HTML 用 .si-tip，此前误写成 .as-tip → 提示文本与标签并排渲染（菜单文字重复）*/
.as-tip,.si-tip{display:none}

@media (min-width:1024px){
  .app-shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;
    transition:grid-template-columns var(--dur) var(--ease)}
  .app-shell.side-collapsed{grid-template-columns:var(--side-w-min) minmax(0,1fr)}
  .app-main{min-width:0;display:flex;flex-direction:column}
  /* 侧栏 = 独立面板：从视口最顶到底，滚动长列表时不动 */
  .app-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
    background:var(--bg-soft);border-right:1px solid var(--border);z-index:var(--z-inline)}
  /* 品牌只出现一次（顶栏左侧隐藏，手机端恢复） */
  .app-header .h-left{display:none}
  .container-fluid.px-3{padding-left:8px}

  /* L1 品牌区 */
  .as-brand{display:flex;align-items:center;gap:10px;height:56px;flex:0 0 auto;padding:0 var(--side-pad);overflow:hidden}
  .as-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),width var(--dur) var(--ease)}
  .as-name span{color:var(--muted)}

  /* L2 导航区 */
  .as-nav{flex:1 1 auto;min-height:0;padding:6px var(--side-pad) 8px;overflow:visible}
  .as-nav .nav-tabs{border-bottom:0;display:flex;flex-direction:column;gap:2px}
  .as-nav .nav-item{width:100%}
  .side-item{position:relative;display:flex;align-items:center;gap:10px;height:var(--side-item-h);
    padding:0 10px;color:var(--sec);font-size:13.5px;font-weight:600;white-space:nowrap;
    transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .side-item .si-ic{flex:0 0 auto;color:var(--muted3);transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .side-item .si-t{opacity:1;transform:none;transition:opacity .16s var(--ease) .06s,transform var(--dur) var(--ease)}
  .side-item::before{content:'';position:absolute;left:-6px;top:50%;width:3px;height:18px;border-radius:2px;
    background:var(--accent);opacity:0;transform:translateY(-50%) scaleY(0);
    transition:transform .18s var(--ease),opacity .18s var(--ease)}
  .side-item.active{background:var(--ov-e);color:var(--t1)}
  .side-item.active .si-ic{color:var(--t1)}
  .side-item.active::before{opacity:1;transform:translateY(-50%) scaleY(1)}
  .side-item:active{transform:scale(.985)}
  .side-item:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
  .si-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-width:18px;height:18px;padding:0 5px;
    display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:var(--ov-f);color:var(--t1);
    font-size:10.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}

  /* L3 系统区 */
  .as-foot{display:flex;align-items:center;gap:8px;height:52px;flex:0 0 auto;padding:0 var(--side-pad);border-top:1px solid var(--border)}
  .as-collapse{width:32px;height:32px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;
    transition:all var(--dur) var(--ease)}
  .as-collapse svg{transition:transform var(--dur) var(--ease)}
  .as-collapse:hover{border-color:var(--border-strong2);color:var(--t1);background:var(--ov-b)}
  .as-ver{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),width var(--dur) var(--ease)}

  /* 收起态：64px，只剩图标 + tooltip */
  .app-shell.side-collapsed .as-brand,
  .app-shell.side-collapsed .as-foot{justify-content:center;padding:0}
  .app-shell.side-collapsed .as-nav{padding-left:8px;padding-right:8px}
  .app-shell.side-collapsed .side-item{justify-content:center;padding:0}
  .app-shell.side-collapsed .as-name,
  .app-shell.side-collapsed .side-item .si-t,
  .app-shell.side-collapsed .as-ver{opacity:0;width:0;transform:translateX(-6px);pointer-events:none;overflow:hidden}
  .app-shell.side-collapsed .as-collapse svg{transform:rotate(180deg)}
  .app-shell.side-collapsed .si-badge{right:7px;top:7px;transform:none;min-width:0;width:6px;height:6px;padding:0;
    font-size:0;border-radius:50%;background:var(--green)}
  .app-shell.side-collapsed .side-item::before{left:0}
  .app-shell.side-collapsed .as-nav{overflow:visible}
  /* 收起态 tooltip：默认不渲染（display:none，避免文本节点重复），仅 hover/focus 时以绝对定位浮出 */
  .app-shell.side-collapsed .si-tip{display:none}
  .app-shell.side-collapsed .side-item:hover .si-tip,
  .app-shell.side-collapsed .side-item:focus-visible .si-tip{display:block;position:absolute;left:calc(100% + 8px);top:50%;z-index:var(--z-inline);
    padding:5px 10px;border-radius:8px;background:var(--card2);border:1px solid var(--border2);color:var(--t1);
    font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;
    transform:translateY(-50%);animation:tipIn .14s var(--ease)}
  @keyframes tipIn{from{opacity:0;transform:translateY(-50%) translateX(-4px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}
}

/* 桌面 hover 态（触屏无 hover → 不生效，仅保留 :active） */
@media (min-width:1024px) and (hover:hover){
  .side-item:hover{background:var(--ov-b);color:var(--t1)}
  .side-item:hover .si-ic{color:var(--t1);transform:translateX(1px)}
  .side-item.active:hover{background:var(--ov-e)}
}

/* <1024px：无侧栏，导航回落为顶部横向 Tab（与线上现状一致，手机端零回归） */
@media (max-width:1023.98px){
  .app-shell{display:block}
  .app-side{display:contents}
  .as-brand,.as-foot,.si-tip,.si-badge{display:none}
  .as-nav{padding:16px 16px 0}
  .as-nav .nav-tabs{border-bottom:1px solid var(--border);display:flex;flex-wrap:nowrap;gap:4px}
  .nav-tabs .nav-link.side-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 0;min-width:0;
    padding:9px 12px;font-size:13.5px;font-weight:500;border-bottom:2px solid transparent;border-radius:0;
    color:var(--muted);white-space:nowrap}
  .nav-tabs .nav-link.side-item.active{color:var(--text);background:transparent;border-bottom-color:var(--text)}
  .nav-tabs .nav-link.side-item:hover{color:var(--t2);border-bottom-color:var(--border2)}
  .side-item .si-ic{display:none}
  .side-item .si-t{opacity:1;transform:none;width:auto}
  .side-item::before{display:none}
  .app-header .h-left{display:flex}
}

/* 动效降级：关闭宽度/位移过渡，状态颜色仍可辨 */
@media (prefers-reduced-motion:reduce){
  .app-shell,.side-item,.side-item .si-t,.as-name,.as-ver,.as-collapse svg,.si-tip,
  .mail-pop,.pick-box,.cm-rowB,.cust-row.row-shake{transition:none!important;animation:none!important}
}

/* 修复（伴随侧栏改造）：`html,body{overflow-x:hidden}` 会让 body 变成滚动容器，
   导致后代 `position:sticky`（顶栏 / 侧栏）失效。改用 overflow-x:clip：
   同样裁剪横向溢出，但不产生滚动容器 → sticky 恢复正常。
   （clip 不被支持的老浏览器会忽略本条，退回原 overflow-x:hidden，行为不变） */
body{overflow-x:clip}

/* 侧栏品牌区 logo 芯片（与顶栏同款；设计稿 28×28，收起态 26×26） */
@media (min-width:1024px){
  .as-brand .h-logo{width:28px;height:28px;border:2px solid var(--text);border-radius:7px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text)}
  .app-shell.side-collapsed .as-brand .h-logo{width:26px;height:26px;font-size:11px;border-width:2px}
}

/* ============================================================
   第八轮（2026-10-13）：批量发信体验优化（v5-1004t）
   ① 批量选择态布局重排：桌面三列（勾选 / 客户 / 邮箱发信）、手机两列 + 邮件区独占整行
      —— 原手机 pick-mode 只有 `auto 1fr` 两列，邮件区被塞进 26px 的 auto 列 → 按钮文字错乱
   ② 发信入口整合进邮箱浮层：逐条邮箱「单个发送」+ 底部「全部发送（N 个邮箱）」
   ③ 行内独立「发邮件」按钮已移除（发信入口唯一：邮箱 → 浮层 → 发送）
   ④ 批量选择时隐藏无邮箱客户（列表层过滤）与 WA / 有效性 / 官网 / 详情 / 星标等无关项
   原则：只改视觉与交互；接口 / 数据结构零改动；整段为覆盖层，删除本段即回滚
   ============================================================ */

/* ---------------- ② 邮箱浮层：单个发送 / 全部发送 ---------------- */
.mp-row .mp-one{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:13px;line-height:1;
  cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease),transform .12s var(--ease)}
.mp-row .mp-one:active{transform:scale(.94)}
@media (hover:hover){
  .mp-row .mp-one:hover{border-color:var(--accent);color:var(--accent);background:var(--ov-d)}
}
.mp-row.is-main .mp-one{border-color:var(--border-strong)}
.mp-note{line-height:1.55}
.mp-foot .mp-send{gap:7px}

/* ---------------- ①④ 批量选择态：重排 + 只留有邮箱客户 ---------------- */
/* 无关项一律隐藏：WA 联系方式 / 有效性列 / 官网·详情·星标操作列 / 标题行有效性徽章 */
.cust-row.pick-mode .cust-contact,
.cust-row.pick-mode .cust-status,
.cust-row.pick-mode .cust-actions,
.cust-row.pick-mode .cust-valid-m{display:none}
/* 行内已无独立发信按钮，邮件区回到网格流内（清掉旧的自动外推） */
.cust-row.pick-mode .cust-mail{grid-column:auto;width:auto}
.cust-row.pick-mode .cm-rowA{justify-content:flex-start}

@media (min-width:768px) and (hover:hover){
  /* 桌面：勾选框 / 客户信息 / 邮箱（发信入口）三列 —— 隐藏 3 块后不留空档 */
  .cust-row.pick-mode{grid-template-columns:auto minmax(200px,1fr) minmax(280px,380px);gap:14px;
    padding-left:16px;align-items:center}
  .cust-row.pick-mode .cm-rowA{height:26px}
}

@media (max-width:767.98px),(hover:none){
  /* 手机：勾选框 + 客户信息一行，其余（邮件区）独占整行 —— 根治两列挤压导致的错乱 */
  .cust-row.pick-mode{grid-template-columns:auto 1fr;gap:10px;padding-left:16px}
  .cust-row.pick-mode > *:not(.pick-box):not(.cust-main){grid-column:1 / -1}
  .cust-row.pick-mode .cust-mail{border-top:1px solid var(--border);padding-top:10px;margin-top:0;width:100%}
  .cust-row.pick-mode .cm-rowA{height:28px}
  .cust-row.pick-mode{align-items:start}
  .cust-row.pick-mode .pick-box{margin-top:2px}
  .bulk-dock{box-shadow:0 -6px 18px -10px rgba(0,0,0,.45)}
}

/* ④ 兜底（与列表层过滤双保险）：批量选择态下无邮箱客户一律不显示 */
.cust-row.pick-mode.no-mail{display:none!important}
/* ④ 批量选择态：隐藏左侧装饰性有效/无效色条（与勾选框同位，避免视觉冲突），界面更简洁 */
.cust-row.pick-mode .cust-bar{display:none}

/* ==========================================================================
   海寻 · 游戏模式（Game Mode）样式
   —— 视觉基调与站点一致：墨黑底 + 信号黄点缀；全部使用主题变量，暗/亮双主题自适应。
   —— 本段与既有页面样式完全隔离（所有选择器带 gm- 前缀），不影响经典模式。
   —— 🎨 设计师视觉接入点：文件中标注 [FX-SLOT] 的两处（.gm-fx 切换特效、.gm-hero 等级卡）
      可直接用设计师提供的 CSS 覆盖，无需改动 JS/模板。
   ========================================================================== */
:root{
  --gm-gold:#F5D90A;
  --gm-gold-2:#E6C400;
  --gm-ink:#0A0B0D;
  --gm-rare:#a78bfa;
  --gm-glow:rgba(245,217,10,.35);
}
html[data-theme="light"]{ --gm-glow:rgba(230,196,0,.30); }

/* ---------- 侧边栏入口徽标 ---------- */
.si-badge.gm{ background:var(--gm-gold); color:var(--gm-ink); font-weight:800; }
.si-ic.gm-on{ color:var(--gm-gold); }

/* ---------- 游戏中心容器 ---------- */
.gm-wrap{ display:flex; flex-direction:column; gap:14px; max-width:1080px; }
.gm-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.gm-card h3{ font-size:15px; font-weight:800; margin:0 0 10px; color:var(--text); display:flex; align-items:center; gap:8px; }
.gm-card h3 .gm-sub{ font-size:12px; font-weight:500; color:var(--sec); }
.gm-hint{ font-size:12.5px; color:var(--sec); line-height:1.6; }

/* ---------- 等级卡 [FX-SLOT] ---------- */
.gm-hero{ position:relative; overflow:hidden; border-radius:16px; padding:18px;
  background:linear-gradient(135deg,#141414 0%,#0d0d0d 55%,#161207 100%);
  border:1px solid var(--border2); }
html[data-theme="light"] .gm-hero{ background:linear-gradient(135deg,#ffffff 0%,#f7f7f7 55%,#fffbe6 100%); }
.gm-hero::after{ content:""; position:absolute; right:-70px; top:-80px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,var(--gm-glow),transparent 70%); pointer-events:none; }
.gm-hero-top{ display:flex; align-items:center; gap:16px; }
.gm-lv{ position:relative; flex:none; width:84px; height:84px; border-radius:20px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:var(--gm-ink); color:var(--gm-gold);
  box-shadow:0 10px 26px rgba(10,11,13,.35), inset 0 0 0 1.5px rgba(245,217,10,.55); }
.gm-lv b{ font-size:26px; font-weight:900; line-height:1; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.gm-lv span{ font-size:10px; letter-spacing:.18em; opacity:.75; margin-top:2px; }
.gm-title{ font-size:19px; font-weight:900; color:var(--text); letter-spacing:-.2px; }
.gm-title .gm-tag{ display:inline-block; margin-left:8px; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px;
  background:rgba(245,217,10,.14); border:1px solid rgba(245,217,10,.42); color:var(--gm-gold-2); vertical-align:middle; }
html[data-theme="light"] .gm-title .gm-tag{ color:#8a6d00; }
.gm-meta{ font-size:12.5px; color:var(--sec); margin-top:4px; }
.gm-bar{ position:relative; height:10px; border-radius:999px; background:var(--track); margin-top:14px; overflow:hidden; }
.gm-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gm-gold-2),var(--gm-gold)); transition:width .5s cubic-bezier(.4,0,.2,1); }
.gm-bar-tx{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--sec); margin-top:6px; }
.gm-mini{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.gm-mini div{ flex:1 1 120px; background:var(--card2); border:1px solid var(--border); border-radius:11px; padding:9px 11px; }
.gm-mini b{ display:block; font-size:17px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
.gm-mini span{ font-size:11.5px; color:var(--sec); }

/* ---------- 模式开关 ---------- */
.gm-modes{ display:flex; gap:10px; flex-wrap:wrap; }
.gm-mode{ flex:1 1 200px; border:1.5px solid var(--border2); background:var(--card2); border-radius:13px; padding:13px 14px;
  cursor:pointer; transition:border-color .18s,transform .18s,box-shadow .18s; }
.gm-mode:hover{ transform:translateY(-1px); }
.gm-mode.on{ border-color:var(--gm-gold); box-shadow:0 0 0 3px rgba(245,217,10,.14); }
.gm-mode .gm-m-t{ font-size:14.5px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
.gm-mode .gm-m-t em{ font-style:normal; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px;
  background:var(--gm-gold); color:var(--gm-ink); }
.gm-mode .gm-m-d{ font-size:12px; color:var(--sec); margin-top:6px; line-height:1.55; }

/* ---------- 开箱 ---------- */
.gm-box{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.gm-chest{ flex:none; width:76px; height:76px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1b1b1b,#0e0e0e); border:1px solid rgba(245,217,10,.35); }
html[data-theme="light"] .gm-chest{ background:linear-gradient(160deg,#fffdf0,#f7f7f7); }
.gm-chest svg{ width:40px; height:40px; color:var(--gm-gold); }
.gm-chest.shake{ animation:gmShake .5s ease-in-out; }
@keyframes gmShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px) rotate(-3deg)} 45%{transform:translateX(4px) rotate(3deg)} 70%{transform:translateX(-2px) rotate(-1deg)} }
.gm-box-tx{ flex:1 1 200px; }
.gm-box-tx .gm-bn{ font-size:16px; font-weight:900; color:var(--text); }
.gm-box-tx .gm-bn i{ font-style:normal; color:var(--gm-gold-2); font-size:22px; font-variant-numeric:tabular-nums; }
.gm-box-tx p{ margin:5px 0 0; font-size:12px; color:var(--sec); }
.gm-btn{ appearance:none; border:1px solid var(--gm-gold); background:var(--gm-gold); color:var(--gm-ink);
  font-weight:900; font-size:14px; padding:11px 22px; border-radius:999px; cursor:pointer;
  transition:transform .16s,box-shadow .16s,background .16s; box-shadow:0 6px 18px rgba(245,217,10,.28); }
.gm-btn:hover{ background:var(--gm-gold-2); transform:translateY(-1px); box-shadow:0 10px 24px rgba(245,217,10,.38); }
.gm-btn:active{ transform:translateY(0) scale(.98); }
.gm-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.gm-btn.ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); box-shadow:none; font-weight:700; }
.gm-btn.ghost:hover{ background:var(--hover2); transform:none; }
.gm-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.gm-chip{ font-size:11.5px; padding:4px 10px; border-radius:999px; background:var(--card2); border:1px solid var(--border2); color:var(--t2); }
.gm-chip.on{ border-color:rgba(245,217,10,.5); color:var(--gm-gold-2); background:rgba(245,217,10,.1); }

/* ---------- 奖励 / 规则 列表 ---------- */
.gm-rows{ display:flex; flex-direction:column; gap:7px; }
.gm-row{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--card2); }
.gm-row .gm-rn{ font-size:13px; font-weight:700; color:var(--text); flex:none; min-width:132px; }
.gm-row .gm-rd{ font-size:11.5px; color:var(--sec); flex:1 1 auto; }
.gm-row .gm-rp{ font-size:11.5px; font-weight:800; color:var(--gm-gold-2); font-variant-numeric:tabular-nums; flex:none; }
.gm-row.rare1{ border-color:rgba(96,165,250,.4); }
.gm-row.rare2{ border-color:rgba(167,139,250,.55); background:linear-gradient(90deg,rgba(167,139,250,.08),var(--card2)); }
.gm-rules{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:7px; }
.gm-rule{ display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:9px; background:var(--card2); font-size:12px; }
.gm-rule span{ color:var(--sec); }
.gm-rule b{ color:var(--gm-gold-2); font-variant-numeric:tabular-nums; }
.gm-log{ display:flex; flex-direction:column; gap:6px; max-height:230px; overflow:auto; }
.gm-log div{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--t2); padding:6px 9px; border-radius:8px; background:var(--card2); }
.gm-log em{ font-style:normal; color:var(--muted); font-size:11px; }
.gm-empty{ font-size:12.5px; color:var(--muted); padding:10px 0; }

/* ---------- 开启提醒 / 开箱结果 浮层 ---------- */
.gm-ov{ position:fixed; inset:0; z-index:var(--z-top); display:flex; align-items:center; justify-content:center; padding:18px; }
.gm-ov-mask{ position:absolute; inset:0; background:var(--overlay); backdrop-filter:blur(2px); }
.gm-ov-box{ position:relative; width:100%; max-width:440px; max-height:86vh; overflow:auto; background:var(--card);
  border:1px solid var(--border2); border-radius:18px; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.gm-ov-box h2{ margin:0; font-size:19px; font-weight:900; color:var(--text); letter-spacing:-.2px; }
.gm-ov-box .gm-ov-sub{ font-size:12.5px; color:var(--sec); margin-top:6px; line-height:1.6; }
.gm-ov-acts{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.gm-ov-acts .gm-btn{ flex:1 1 140px; }
.gm-intro-list{ margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.gm-intro-list li{ display:flex; gap:9px; font-size:12.5px; color:var(--t2); line-height:1.6;
  background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; }
.gm-intro-list li b{ color:var(--gm-gold-2); flex:none; }
.gm-close{ position:absolute; right:12px; top:12px; width:30px; height:30px; border-radius:9px; border:1px solid var(--border2);
  background:var(--card2); color:var(--t2); cursor:pointer; font-size:15px; line-height:1; }
.gm-close:hover{ background:var(--hover2); color:var(--text); }

/* 开箱结果 */
.gm-res{ text-align:center; }
.gm-res .gm-res-ic{ width:78px; height:78px; margin:2px auto 12px; border-radius:22px; display:flex; align-items:center; justify-content:center;
  background:var(--gm-ink); color:var(--gm-gold); box-shadow:0 10px 30px rgba(245,217,10,.35); animation:gmPop .45s cubic-bezier(.2,1.4,.4,1); }
.gm-res .gm-res-ic svg{ width:42px; height:42px; }
.gm-res.rare .gm-res-ic{ color:var(--gm-rare); box-shadow:0 10px 30px rgba(167,139,250,.45); }
@keyframes gmPop{ 0%{transform:scale(.5);opacity:0} 100%{transform:scale(1);opacity:1} }
.gm-res .gm-res-n{ font-size:22px; font-weight:900; color:var(--text); letter-spacing:-.3px; }
.gm-res .gm-res-d{ font-size:13px; color:var(--sec); margin-top:7px; line-height:1.6; }
.gm-res .gm-res-g{ margin-top:12px; font-size:13px; font-weight:800; color:var(--gm-gold-2);
  background:rgba(245,217,10,.1); border:1px solid rgba(245,217,10,.4); border-radius:999px; padding:8px 14px; display:inline-block; }

/* ---------- [FX-SLOT] 模式切换特效（设计师视觉可直接覆盖本段） ---------- */
.gm-fx{ position:fixed; inset:0; z-index:calc(var(--z-top) + 50); pointer-events:none; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.gm-fx .gm-fx-flash{ position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(245,217,10,.30),rgba(245,217,10,0) 62%); animation:gmFlash .9s ease-out forwards; }
.gm-fx .gm-fx-scan{ position:absolute; left:0; right:0; height:34%; top:-34%;
  background:linear-gradient(180deg,transparent,rgba(245,217,10,.22),transparent); animation:gmScan 1s cubic-bezier(.4,0,.2,1) forwards; }
.gm-fx .gm-fx-ring{ position:absolute; width:180px; height:180px; border-radius:50%; border:2px solid rgba(245,217,10,.75); animation:gmRing .9s ease-out forwards; }
.gm-fx .gm-fx-tx{ position:relative; text-align:center; animation:gmTx 1.1s ease-out forwards; }
.gm-fx .gm-fx-tx b{ display:block; font-size:26px; font-weight:900; letter-spacing:2px; color:var(--gm-gold); text-shadow:0 0 24px rgba(245,217,10,.6); }
.gm-fx .gm-fx-tx span{ display:block; margin-top:6px; font-size:12.5px; letter-spacing:3px; color:rgba(255,255,255,.72); }
.gm-fx.classic .gm-fx-flash{ background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22),rgba(255,255,255,0) 62%); }
.gm-fx.classic .gm-fx-ring{ border-color:rgba(255,255,255,.6); }
.gm-fx.classic .gm-fx-tx b{ color:#e8e8e8; text-shadow:0 0 20px rgba(255,255,255,.35); }
.gm-fx-back{ position:absolute; inset:0; background:rgba(6,6,7,.86); }
html[data-theme="light"] .gm-fx-back{ background:rgba(250,250,250,.9); }
@keyframes gmFlash{ 0%{opacity:0} 22%{opacity:1} 100%{opacity:0} }
@keyframes gmScan{ 0%{top:-34%} 100%{top:118%} }
@keyframes gmRing{ 0%{transform:scale(.2);opacity:0} 30%{opacity:.9} 100%{transform:scale(2.6);opacity:0} }
@keyframes gmTx{ 0%{opacity:0;transform:translateY(10px) scale(.96)} 25%{opacity:1;transform:none} 78%{opacity:1} 100%{opacity:0} }

/* 游戏模式下的一点氛围（仅视觉，不影响任何功能与数据） */
html[data-gm="game"] .as-brand .h-logo{ box-shadow:0 0 0 2px rgba(245,217,10,.5), 0 6px 16px rgba(245,217,10,.22); }
html[data-gm="game"] .app-header{ border-bottom-color:rgba(245,217,10,.28); }

@media (max-width:640px){
  .gm-hero-top{ gap:12px; }
  .gm-lv{ width:70px; height:70px; border-radius:17px; }
  .gm-lv b{ font-size:22px; }
  .gm-row .gm-rn{ min-width:0; flex:1 1 auto; }
  .gm-row{ flex-wrap:wrap; }
  .gm-btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .gm-fx .gm-fx-flash,.gm-fx .gm-fx-scan,.gm-fx .gm-fx-ring,.gm-fx .gm-fx-tx{ animation-duration:.01ms; }
}

/* ===== 以下为游戏模式样式层（设计师稿原样移植 + 落地适配）===== */

/* ---- gskin-game.css ---- */


/* ==========================================================================
   海寻 OceanLead · 内页「游戏模式」设计稿
   基准配色 = 官网首页：墨黑 #0A0B0D + 信号黄 #F5D90A
   内页现状 = 暗色底 #0a0a0a / 白 accent / 语义色（绿红橙蓝紫）
   游戏模式 = 用首页的信号黄做「能量/经验/奖励」主色，语义色继续承担状态
   尺寸：375px 手机端优先 · ≥1024px PC
   ========================================================================== */
html[data-mode="game"] .gskin :root{
  /* 底色（对齐全站墨黑系） */
  --ink:#0A0B0D; --ink2:#0D1014; --panel:#111317; --panel2:#171A1F; --panel3:#1E2329;
  --line:#232830; --line2:#2E343D;
  --t1:#F2F4F6; --t2:#A6ADB8; --t3:#767E89;
  /* 品牌（首页同款） */
  --brand:#F5D90A; --brand2:#E6C400; --brand-ink:#0A0B0D;
  --brand-soft:rgba(245,217,10,.14); --brand-line:rgba(245,217,10,.38);
  --brand-glow:rgba(245,217,10,.30);
  /* 语义（沿用内页既有值） */
  --ok:#34D399; --err:#F87171; --warn:#FB923C; --info:#60A5FA; --rare:#A78BFA;
  --ok-soft:rgba(52,211,153,.14); --err-soft:rgba(248,113,113,.14);
  --warn-soft:rgba(251,146,60,.14); --info-soft:rgba(96,165,250,.14); --rare-soft:rgba(167,139,250,.14);
  /* 稀有度 */
  --r-n:#8B9099; --r-r:#60A5FA; --r-sr:#A78BFA; --r-ssr:#F5D90A;
  /* 尺 */
  --r-card:14px; --r-btn:10px; --r-pill:999px; --pad:16px; --gap:12px;
  --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 10px 28px rgba(0,0,0,.55);
  --ease:cubic-bezier(.4,0,.2,1);
}


html[data-mode="game"] .gskin *{margin:0;padding:0;box-sizing:border-box}


html[data-mode="game"] .gskin body{background:#06070A;color:var(--t1);line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;padding:22px 16px 60px}


html[data-mode="game"] .gskin a{color:inherit;text-decoration:none}


html[data-mode="game"] .gskin button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}


html[data-mode="game"] .gskin .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}



/* ---------- 设计稿外壳（展示用，非产品部分） ---------- */
html[data-mode="game"] .gskin .deck{max-width:1180px;margin:0 auto}


html[data-mode="game"] .gskin .deck-h{padding:8px 0 20px;border-bottom:1px solid #1A1E25;margin-bottom:22px}


html[data-mode="game"] .gskin .deck-h h1{font-size:20px;font-weight:800;letter-spacing:-.2px}


html[data-mode="game"] .gskin .deck-h h1 em{font-style:normal;color:var(--brand)}


html[data-mode="game"] .gskin .deck-h p{font-size:13px;color:#8A92A0;margin-top:6px}


html[data-mode="game"] .gskin .deck-h .tagline{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}


html[data-mode="game"] .gskin .deck-tag{font-size:11.5px;padding:4px 9px;border-radius:var(--r-pill);background:#12151A;border:1px solid #242A33;color:#A6ADB8}


html[data-mode="game"] .gskin .deck-tag b{color:var(--brand);font-weight:700}


html[data-mode="game"] .gskin .grid{display:grid;grid-template-columns:1fr;gap:26px}

@media(min-width:820px){
html[data-mode="game"] .gskin .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}}

@media(min-width:1180px){
html[data-mode="game"] .gskin .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


html[data-mode="game"] .gskin .slot{min-width:0}


html[data-mode="game"] .gskin .slot-wide{grid-column:1/-1}


html[data-mode="game"] .gskin .cap{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}


html[data-mode="game"] .gskin .cap b{font-size:13.5px;font-weight:800}


html[data-mode="game"] .gskin .cap i{font-style:normal;font-size:11.5px;color:#7E8794}


html[data-mode="game"] .gskin .cap .idx{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;
  background:var(--brand);color:var(--brand-ink);font-size:11px;font-weight:800;flex:none}


html[data-mode="game"] .gskin .note{font-size:11.5px;color:#8A92A0;line-height:1.7;margin-top:10px;padding-left:2px}


html[data-mode="game"] .gskin .note b{color:#C9CFD8;font-weight:600}


html[data-mode="game"] .gskin .note code{background:#12151A;border:1px solid #242A33;border-radius:4px;padding:1px 5px;font-size:11px;color:var(--brand)}



/* 手机框 */
html[data-mode="game"] .gskin .phone{width:100%;max-width:375px;margin:0 auto;border-radius:26px;background:#000;padding:9px;
  border:1px solid #202530;box-shadow:0 22px 50px rgba(0,0,0,.6)}


html[data-mode="game"] .gskin .screen{border-radius:19px;overflow:hidden;background:var(--ink);position:relative;
  background-image:radial-gradient(120% 60% at 50% -12%,rgba(245,217,10,.10),rgba(245,217,10,0) 62%)}



/* ---------- 内页「游戏模式」组件层（这一段就是可落地的产品样式） ---------- */
html[data-mode="game"] .gskin .app{color:var(--t1);font-size:13px;position:relative}


html[data-mode="game"] .gskin .hud{display:flex;align-items:center;gap:10px;padding:12px var(--pad) 10px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,#12151A,rgba(10,11,13,0))}


html[data-mode="game"] .gskin .hud .lv{position:relative;width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:var(--panel2);border:1px solid var(--brand-line);box-shadow:0 0 0 3px rgba(245,217,10,.08)}


html[data-mode="game"] .gskin .hud .lv b{font-size:14px;font-weight:800;color:var(--brand);line-height:1}


html[data-mode="game"] .gskin .hud .lv span{font-size:8px;color:var(--t3);letter-spacing:.08em}


html[data-mode="game"] .gskin .hud .who{flex:1;min-width:0}


html[data-mode="game"] .gskin .hud .who .n{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}


html[data-mode="game"] .gskin .hud .who .rank{font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);
  background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line);white-space:nowrap}


html[data-mode="game"] .gskin .xp{display:flex;align-items:center;gap:7px;margin-top:5px}


html[data-mode="game"] .gskin .xp .tr{flex:1;height:6px;border-radius:var(--r-pill);background:var(--panel3);overflow:hidden}


html[data-mode="game"] .gskin .xp .tr i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand2),var(--brand));
  width:71%;box-shadow:0 0 10px var(--brand-glow)}


html[data-mode="game"] .gskin .xp .v{font-size:10.5px;color:var(--t3);letter-spacing:.02em}


html[data-mode="game"] .gskin .streak{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--warn);
  background:var(--warn-soft);border:1px solid rgba(251,146,60,.32);padding:4px 8px;border-radius:var(--r-pill);white-space:nowrap}



html[data-mode="game"] .gskin .body{padding:var(--pad)}


html[data-mode="game"] .gskin .sec-t{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}


html[data-mode="game"] .gskin .sec-t h3{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--t2);display:flex;align-items:center;gap:7px}


html[data-mode="game"] .gskin .sec-t h3::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--brand)}


html[data-mode="game"] .gskin .sec-t .r{font-size:11px;color:var(--t3)}



/* 体力 / 行动点（= 真实额度） */
html[data-mode="game"] .gskin .stam{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}


html[data-mode="game"] .gskin .st{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 11px}


html[data-mode="game"] .gskin .st .k{font-size:10.5px;color:var(--t3);display:flex;align-items:center;gap:5px}


html[data-mode="game"] .gskin .st .v{font-size:19px;font-weight:800;margin-top:3px;letter-spacing:-.4px}


html[data-mode="game"] .gskin .st .v small{font-size:11px;font-weight:600;color:var(--t3);margin-left:1px}


html[data-mode="game"] .gskin .st .bar{height:5px;border-radius:var(--r-pill);background:var(--panel3);margin-top:7px;overflow:hidden}


html[data-mode="game"] .gskin .st .bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand2),var(--brand))}


html[data-mode="game"] .gskin .st.is-out .v{color:var(--err)}


html[data-mode="game"] .gskin .st.is-out .bar i{background:var(--err)}


html[data-mode="game"] .gskin .st .sub{font-size:10px;color:var(--t3);margin-top:5px}



/* 关卡航线 */
html[data-mode="game"] .gskin .map{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 14px 12px;overflow:hidden}


html[data-mode="game"] .gskin .map::after{content:"";position:absolute;right:-30px;top:-36px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,217,10,.13),rgba(245,217,10,0) 70%);pointer-events:none}


html[data-mode="game"] .gskin .rail{position:absolute;left:31px;top:34px;bottom:34px;width:2px;background:linear-gradient(180deg,var(--brand),rgba(245,217,10,.10));opacity:.5}


html[data-mode="game"] .gskin .stage{position:relative;display:flex;gap:12px;align-items:flex-start;padding:9px 0;cursor:pointer}


html[data-mode="game"] .gskin .stage .nd{width:26px;height:26px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:11px;
  font-weight:800;background:var(--panel3);color:var(--t3);border:1px solid var(--line2);z-index:1;
  transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}


html[data-mode="game"] .gskin .stage .tx{flex:1;min-width:0}


html[data-mode="game"] .gskin .stage .tt{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}


html[data-mode="game"] .gskin .stage .tt em{font-style:normal;font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);
  border:1px solid var(--line2);color:var(--t3)}


html[data-mode="game"] .gskin .stage .ds{font-size:11px;color:var(--t3);margin-top:2px}


html[data-mode="game"] .gskin .stage[data-s="now"] .nd{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-soft),0 6px 18px var(--brand-glow);animation:pulseNd 2.4s var(--ease) infinite}


html[data-mode="game"] .gskin .stage[data-s="now"] .tt em{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}


html[data-mode="game"] .gskin .stage[data-s="done"] .nd{background:var(--ok-soft);color:var(--ok);border-color:rgba(52,211,153,.42)}


html[data-mode="game"] .gskin .stage[data-s="done"] .tt{color:var(--t2)}


html[data-mode="game"] .gskin .stage[data-s="done"] .tt em{background:var(--ok-soft);border-color:rgba(52,211,153,.42);color:var(--ok)}


html[data-mode="game"] .gskin .stage[data-s="lock"] .nd{color:var(--t3);opacity:.65}


html[data-mode="game"] .gskin .stage[data-s="lock"] .tx{opacity:.55}


html[data-mode="game"] .gskin .stage.on .nd{transform:scale(1.12)}

@keyframes pulseNd{0%,100%{box-shadow:0 0 0 4px var(--brand-soft),0 6px 18px var(--brand-glow)}
  50%{box-shadow:0 0 0 8px rgba(245,217,10,.06),0 6px 22px var(--brand-glow)}}



/* 每日任务 */
html[data-mode="game"] .gskin .quests{display:flex;flex-direction:column;gap:8px}


html[data-mode="game"] .gskin .q{display:flex;gap:11px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-card);padding:10px 11px;transition:transform .18s var(--ease),border-color .18s var(--ease)}


html[data-mode="game"] .gskin .q:hover{transform:translateY(-1px);border-color:var(--line2)}


html[data-mode="game"] .gskin .q .ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:14px;
  background:var(--panel3);border:1px solid var(--line2)}


html[data-mode="game"] .gskin .q .tx{flex:1;min-width:0}


html[data-mode="game"] .gskin .q .tt{font-size:12.5px;font-weight:600}


html[data-mode="game"] .gskin .q .pg{display:flex;align-items:center;gap:7px;margin-top:5px}


html[data-mode="game"] .gskin .q .pg .tr{flex:1;height:5px;border-radius:var(--r-pill);background:var(--panel3);overflow:hidden}


html[data-mode="game"] .gskin .q .pg .tr i{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand)}


html[data-mode="game"] .gskin .q .pg .v{font-size:10px;color:var(--t3)}


html[data-mode="game"] .gskin .q .rw{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);
  border:1px solid var(--brand-line);padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap}


html[data-mode="game"] .gskin .q.done{opacity:.72}


html[data-mode="game"] .gskin .q.done .rw{color:var(--ok);background:var(--ok-soft);border-color:rgba(52,211,153,.42)}


html[data-mode="game"] .gskin .q.done .ic{background:var(--ok-soft);border-color:rgba(52,211,153,.42);color:var(--ok)}



/* 宝箱 */
html[data-mode="game"] .gskin .chest{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px;border-radius:var(--r-card);
  background:linear-gradient(120deg,rgba(245,217,10,.16),rgba(245,217,10,.04));border:1px solid var(--brand-line);
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}


html[data-mode="game"] .gskin .chest:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(245,217,10,.20)}


html[data-mode="game"] .gskin .chest .bx{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:rgba(10,11,13,.5);border:1px solid var(--brand-line)}


html[data-mode="game"] .gskin .chest .tx{flex:1;min-width:0}


html[data-mode="game"] .gskin .chest .tt{font-size:12.5px;font-weight:800;color:var(--brand)}


html[data-mode="game"] .gskin .chest .ds{font-size:10.5px;color:var(--t2);margin-top:2px}


html[data-mode="game"] .gskin .chest .go{font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--brand-ink)}


html[data-mode="game"] .gskin .chest.opened{background:linear-gradient(120deg,rgba(52,211,153,.14),rgba(52,211,153,.03));border-color:rgba(52,211,153,.42)}


html[data-mode="game"] .gskin .chest.opened .tt{color:var(--ok)}



/* TabBar（功能位置不变：4 项，游戏名 + 原功能名小字） */
html[data-mode="game"] .gskin .tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  background:rgba(13,16,20,.96);backdrop-filter:blur(8px)}


html[data-mode="game"] .gskin .tab{padding:9px 4px 11px;text-align:center;position:relative;color:var(--t3)}


html[data-mode="game"] .gskin .tab .ic{font-size:17px;line-height:1;display:block}


html[data-mode="game"] .gskin .tab .g{font-size:11px;font-weight:700;margin-top:4px;display:block}


html[data-mode="game"] .gskin .tab .o{font-size:9px;color:var(--t3);display:block;letter-spacing:.02em}


html[data-mode="game"] .gskin .tab.on{color:var(--brand)}


html[data-mode="game"] .gskin .tab.on::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:26px;height:2px;
  border-radius:2px;background:var(--brand);box-shadow:0 0 10px var(--brand-glow)}


html[data-mode="game"] .gskin .tab .bdg{position:absolute;top:6px;right:calc(50% - 26px);min-width:15px;height:15px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--brand-ink);font-size:9.5px;font-weight:800;display:grid;place-items:center;padding:0 4px}



/* 雷达 · 采集进行中 */
html[data-mode="game"] .gskin .radar{position:relative;width:150px;height:150px;margin:4px auto 0;border-radius:50%;
  background:radial-gradient(circle,rgba(245,217,10,.07),rgba(245,217,10,0) 68%);
  border:1px solid var(--line2)}


html[data-mode="game"] .gskin .radar i{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(245,217,10,.16)}


html[data-mode="game"] .gskin .radar i:nth-child(1){width:100%;height:100%}


html[data-mode="game"] .gskin .radar i:nth-child(2){width:70%;height:70%}


html[data-mode="game"] .gskin .radar i:nth-child(3){width:40%;height:40%}


html[data-mode="game"] .gskin .radar .sw{position:absolute;inset:0;border-radius:50%;overflow:hidden}


html[data-mode="game"] .gskin .radar .sw::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(245,217,10,.42),rgba(245,217,10,0) 26%);
  animation:sweep 3.4s linear infinite;will-change:transform}

@keyframes sweep{to{transform:rotate(360deg)}}


html[data-mode="game"] .gskin .radar .core{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;text-align:center;background:rgba(11,13,16,.9);border:1px solid var(--brand-line);
  box-shadow:0 0 24px var(--brand-glow)}


html[data-mode="game"] .gskin .radar .core b{font-size:19px;font-weight:800;color:var(--brand);letter-spacing:-.4px;line-height:1}


html[data-mode="game"] .gskin .radar .core span{font-size:9px;color:var(--t3);letter-spacing:.06em}


html[data-mode="game"] .gskin .blip{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.35;
  animation:blip 3.4s var(--ease) infinite}

@keyframes blip{0%,58%{opacity:.3}72%{opacity:1}100%{opacity:0}}



/* 战利品（线索卡） */
html[data-mode="game"] .gskin .loot{display:flex;flex-direction:column;gap:9px}


html[data-mode="game"] .gskin .lc{position:relative;display:flex;gap:11px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-card);padding:11px;overflow:hidden;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}


html[data-mode="game"] .gskin .lc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--r-n)}


html[data-mode="game"] .gskin .lc[data-r="R"]::before{background:var(--r-r)}


html[data-mode="game"] .gskin .lc[data-r="SR"]::before{background:var(--r-sr)}


html[data-mode="game"] .gskin .lc[data-r="SSR"]::before{background:var(--r-ssr)}


html[data-mode="game"] .gskin .lc[data-r="SSR"]{border-color:var(--brand-line);background:linear-gradient(120deg,rgba(245,217,10,.07),var(--panel))}


html[data-mode="game"] .gskin .lc:hover{transform:translateY(-1px);border-color:var(--line2);box-shadow:var(--sh-2)}


html[data-mode="game"] .gskin .lc .av{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:12px;
  font-weight:800;background:var(--panel3);border:1px solid var(--line2);color:var(--t2)}


html[data-mode="game"] .gskin .lc .mn{flex:1;min-width:0}


html[data-mode="game"] .gskin .lc .co{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


html[data-mode="game"] .gskin .lc .at{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}


html[data-mode="game"] .gskin .atg{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:var(--r-pill);border:1px solid var(--line2);color:var(--t3)}


html[data-mode="game"] .gskin .atg.on{color:var(--ok);background:var(--ok-soft);border-color:rgba(52,211,153,.42)}


html[data-mode="game"] .gskin .atg.wa{color:var(--info);background:var(--info-soft);border-color:rgba(96,165,250,.42)}


html[data-mode="game"] .gskin .atg.st{color:var(--warn);background:var(--warn-soft);border-color:rgba(251,146,60,.42)}


html[data-mode="game"] .gskin .atg.back{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-line)}


html[data-mode="game"] .gskin .rar{position:absolute;right:0;top:0;font-size:9px;font-weight:800;padding:3px 8px;border-bottom-left-radius:9px;
  background:var(--r-n);color:#0A0B0D;letter-spacing:.04em}


html[data-mode="game"] .gskin .lc[data-r="R"] .rar{background:var(--r-r);color:#04121F}


html[data-mode="game"] .gskin .lc[data-r="SR"] .rar{background:var(--r-sr);color:#12061F}


html[data-mode="game"] .gskin .lc[data-r="SSR"] .rar{background:var(--r-ssr)}


html[data-mode="game"] .gskin .lc .act{display:flex;flex-direction:column;gap:6px;align-items:flex-end;padding-top:13px}


html[data-mode="game"] .gskin .mini{font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px;background:var(--brand);color:var(--brand-ink);white-space:nowrap;transition:transform .18s var(--ease),background .18s var(--ease)}


html[data-mode="game"] .gskin .mini:hover{background:var(--brand2);transform:translateY(-1px)}


html[data-mode="game"] .gskin .mini.gh{background:var(--panel3);color:var(--t2);border:1px solid var(--line2)}


html[data-mode="game"] .gskin .captured{position:absolute;right:9px;bottom:9px;font-size:9.5px;font-weight:800;color:var(--ok);
  border:1px dashed rgba(52,211,153,.5);border-radius:6px;padding:2px 6px;transform:rotate(-4deg)}



/* 筛选 chips */
html[data-mode="game"] .gskin .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}


html[data-mode="game"] .gskin .chip{font-size:11px;font-weight:600;padding:6px 11px;border-radius:var(--r-pill);background:var(--panel);
  border:1px solid var(--line);color:var(--t2);transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}


html[data-mode="game"] .gskin .chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:800}


html[data-mode="game"] .gskin .chip .c{opacity:.7;margin-left:4px}



/* 战报 */
html[data-mode="game"] .gskin .report{display:flex;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:11px;
  border-left:3px solid var(--ok)}


html[data-mode="game"] .gskin .report .tx{flex:1;min-width:0}


html[data-mode="game"] .gskin .report .tt{font-size:12.5px;font-weight:700}


html[data-mode="game"] .gskin .report .ds{font-size:11px;color:var(--t3);margin-top:3px}


html[data-mode="game"] .gskin .report .xp{font-size:11px;font-weight:800;color:var(--brand);white-space:nowrap}



/* 装备（关键字） */
html[data-mode="game"] .gskin .gear{display:flex;gap:11px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-card);padding:10px 11px}


html[data-mode="game"] .gskin .gear.on{border-color:var(--brand-line);background:linear-gradient(120deg,rgba(245,217,10,.07),var(--panel))}


html[data-mode="game"] .gskin .gear .g-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:14px;
  background:var(--panel3);border:1px solid var(--line2)}


html[data-mode="game"] .gskin .gear.on .g-ic{background:var(--brand-soft);border-color:var(--brand-line)}


html[data-mode="game"] .gskin .gear .tx{flex:1;min-width:0}


html[data-mode="game"] .gskin .gear .tt{font-size:12.5px;font-weight:700}


html[data-mode="game"] .gskin .gear .ds{font-size:10.5px;color:var(--t3);margin-top:2px}


html[data-mode="game"] .gskin .sw{width:42px;height:24px;border-radius:var(--r-pill);background:var(--panel3);border:1px solid var(--line2);
  position:relative;flex:none;transition:background .2s var(--ease),border-color .2s var(--ease)}


html[data-mode="game"] .gskin .sw i{position:absolute;top:2.5px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--t3);
  transition:transform .2s var(--ease),background .2s var(--ease)}


html[data-mode="game"] .gskin .sw.on{background:var(--brand);border-color:var(--brand)}


html[data-mode="game"] .gskin .sw.on i{transform:translateX(18px);background:var(--brand-ink)}


html[data-mode="game"] .gskin .worn{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--warn);margin-top:6px}



/* 成就墙 */
html[data-mode="game"] .gskin .medals{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;text-align:center}


html[data-mode="game"] .gskin .md{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 4px}


html[data-mode="game"] .gskin .md .m{font-size:20px}


html[data-mode="game"] .gskin .md .n{font-size:9.5px;color:var(--t2);margin-top:4px;line-height:1.3}


html[data-mode="game"] .gskin .md.lock{opacity:.42}


html[data-mode="game"] .gskin .md.on{border-color:var(--brand-line);background:linear-gradient(160deg,rgba(245,217,10,.10),var(--panel))}



/* 通用小件 */
html[data-mode="game"] .gskin .row{display:flex;align-items:center;gap:9px}


html[data-mode="game"] .gskin .between{display:flex;align-items:center;justify-content:space-between;gap:10px}


html[data-mode="game"] .gskin .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:12px}


html[data-mode="game"] .gskin .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}


html[data-mode="game"] .gskin .kpi > div{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:9px 4px}


html[data-mode="game"] .gskin .kpi .v{font-size:16px;font-weight:800;letter-spacing:-.3px}


html[data-mode="game"] .gskin .kpi .k{font-size:10px;color:var(--t3);margin-top:2px}


html[data-mode="game"] .gskin .btn{display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:var(--r-btn);
  font-size:14px;font-weight:700;background:var(--brand);color:var(--brand-ink);transition:transform .18s var(--ease),background .18s var(--ease)}


html[data-mode="game"] .gskin .btn:hover{background:var(--brand2)}


html[data-mode="game"] .gskin .btn:active{transform:scale(.99)}


html[data-mode="game"] .gskin .btn.gh{background:var(--panel2);color:var(--t2);border:1px solid var(--line2)}


html[data-mode="game"] .gskin .banner{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;border-radius:12px;font-size:11.5px;
  background:var(--warn-soft);border:1px solid rgba(251,146,60,.32);color:#FFD9B8;margin-bottom:12px}


html[data-mode="game"] .gskin .banner.ok{background:var(--ok-soft);border-color:rgba(52,211,153,.34);color:#BDF3E0}


html[data-mode="game"] .gskin .banner.b{background:var(--brand-soft);border-color:var(--brand-line);color:#FFEEA8}


html[data-mode="game"] .gskin .sheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:14px}


html[data-mode="game"] .gskin .fm{margin-bottom:11px}


html[data-mode="game"] .gskin .fm label{font-size:11px;color:var(--t3);display:block;margin-bottom:5px}


html[data-mode="game"] .gskin .inp{height:42px;border-radius:var(--r-btn);background:var(--panel2);border:1px solid var(--line2);
  display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--t1)}


html[data-mode="game"] .gskin .inp.k{border-color:var(--brand-line);background:linear-gradient(120deg,rgba(245,217,10,.08),var(--panel2))}


html[data-mode="game"] .gskin .mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}


html[data-mode="game"] .gskin .seg{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}


html[data-mode="game"] .gskin .seg button{flex:1;height:28px;border-radius:var(--r-pill);font-size:11px;font-weight:600;color:var(--t3)}


html[data-mode="game"] .gskin .seg button.on{background:var(--brand);color:var(--brand-ink);font-weight:800}


html[data-mode="game"] .gskin .fx{position:absolute;left:50%;bottom:34%;transform:translateX(-50%);font-size:13px;font-weight:800;color:var(--brand);
  text-shadow:0 2px 14px rgba(0,0,0,.6);pointer-events:none;animation:fly 1.35s var(--ease) forwards}

@keyframes fly{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-46px) scale(1.06)}}



/* PC 端 */
html[data-mode="game"] .gskin .pc{width:100%;border-radius:16px;overflow:hidden;border:1px solid #202530;background:var(--ink);
  box-shadow:0 22px 50px rgba(0,0,0,.6);display:grid;grid-template-columns:196px 1fr;min-height:470px}


html[data-mode="game"] .gskin .pc-side{border-right:1px solid var(--line);background:var(--ink2);padding:14px 12px;display:flex;flex-direction:column;gap:5px}


html[data-mode="game"] .gskin .pc-brand{display:flex;align-items:center;gap:9px;padding:4px 6px 14px}


html[data-mode="game"] .gskin .pc-brand .g{width:28px;height:28px;border-radius:9px;background:var(--brand);color:var(--brand-ink);
  display:grid;place-items:center;font-weight:800;font-size:13px}


html[data-mode="game"] .gskin .pc-brand b{font-size:13px}


html[data-mode="game"] .gskin .pc-brand small{display:block;font-size:9px;color:var(--t3);letter-spacing:.1em}


html[data-mode="game"] .gskin .pc-nav{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;font-size:12.5px;color:var(--t2)}


html[data-mode="game"] .gskin .pc-nav small{margin-left:auto;font-size:9.5px;color:var(--t3)}


html[data-mode="game"] .gskin .pc-nav b{margin-left:auto;font-size:10px;color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);
  padding:1px 6px;border-radius:var(--r-pill)}


html[data-mode="game"] .gskin .pc-nav.on{background:var(--brand-soft);color:var(--brand);font-weight:700;box-shadow:inset 2px 0 0 var(--brand)}


html[data-mode="game"] .gskin .pc-xp{margin-top:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}


html[data-mode="game"] .gskin .pc-main{padding:18px 20px;display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-content:start}


html[data-mode="game"] .gskin .pc-map{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;position:relative;overflow:hidden}


html[data-mode="game"] .gskin .pc-rail{display:flex;align-items:center;gap:6px;margin:16px 0 6px}


html[data-mode="game"] .gskin .pc-node{flex:1;text-align:center;position:relative}


html[data-mode="game"] .gskin .pc-node .d{width:34px;height:34px;margin:0 auto;border-radius:11px;display:grid;place-items:center;font-size:12px;
  font-weight:800;background:var(--panel3);border:1px solid var(--line2);color:var(--t3)}


html[data-mode="game"] .gskin .pc-node.now .d{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
  box-shadow:0 0 0 5px var(--brand-soft),0 8px 22px var(--brand-glow);animation:pulseNd 2.4s var(--ease) infinite}


html[data-mode="game"] .gskin .pc-node.done .d{background:var(--ok-soft);color:var(--ok);border-color:rgba(52,211,153,.42)}


html[data-mode="game"] .gskin .pc-node .l{font-size:10.5px;color:var(--t3);margin-top:6px}


html[data-mode="game"] .gskin .pc-node.now .l{color:var(--brand);font-weight:700}


html[data-mode="game"] .gskin .pc-line{position:absolute;left:6%;right:6%;top:33px;height:2px;background:linear-gradient(90deg,var(--ok),var(--brand),var(--line2));opacity:.5}


html[data-mode="game"] .gskin .intro{margin-top:26px}


html[data-mode="game"] .gskin .warnbox{margin:44px 0 0;padding:16px;border-radius:var(--r-card);border:1px solid var(--brand-line);
  background:linear-gradient(120deg,rgba(245,217,10,.10),rgba(245,217,10,.02));font-size:12px;color:#FFEEA8}

@media(max-width:1023px){
html[data-mode="game"] .gskin .pc{grid-template-columns:1fr}

html[data-mode="game"] .gskin .pc-side{border-right:0;border-bottom:1px solid var(--line)}


  html[data-mode="game"] .gskin .pc-main{grid-template-columns:1fr}}


/* 经典模式对照（证明「只换皮、不动结构」） */
html[data-mode="game"] .gskin .classic .hud{background:linear-gradient(180deg,#141414,rgba(10,10,10,0))}


html[data-mode="game"] .gskin .classic .lv{background:#141414;border-color:var(--line2);box-shadow:none}


html[data-mode="game"] .gskin .classic .lv b{color:#fff}


html[data-mode="game"] .gskin .classic .hud .who .rank{background:#1a1a1a;border-color:var(--line2);color:var(--t2)}


html[data-mode="game"] .gskin .classic .xp .tr i{background:linear-gradient(90deg,#4b5563,#e5e5e5);box-shadow:none}


html[data-mode="game"] .gskin .classic .sec-t h3::before{background:#4b5563}


html[data-mode="game"] .gskin .classic .stage[data-s="now"] .nd{background:#fff;color:#000;border-color:#fff;box-shadow:none;animation:none}


html[data-mode="game"] .gskin .classic .stage[data-s="now"] .tt em{background:#1a1a1a;border-color:var(--line2);color:#fff}


html[data-mode="game"] .gskin .classic .stage[data-s="done"] .nd{background:#1a1a1a;color:var(--t2);border-color:var(--line2)}


html[data-mode="game"] .gskin .classic .stage[data-s="done"] .tt em{background:#1a1a1a;border-color:var(--line2);color:var(--t2)}


html[data-mode="game"] .gskin .classic .q .tr i{background:#e5e5e5}


html[data-mode="game"] .gskin .classic .q .rw{background:#1a1a1a;border-color:var(--line2);color:var(--t2)}


html[data-mode="game"] .gskin .classic .chest{background:#141414;border-color:var(--line2)}


html[data-mode="game"] .gskin .classic .chest .tt{color:#fff}

html[data-mode="game"] .gskin .classic .chest .go{background:#fff;color:#000}


html[data-mode="game"] .gskin .classic .tab.on{color:#fff}

html[data-mode="game"] .gskin .classic .tab.on::before{background:#fff;box-shadow:none}


html[data-mode="game"] .gskin .classic .tab .bdg{background:#fff;color:#000}


html[data-mode="game"] .gskin .classic .st .bar i{background:linear-gradient(90deg,#4b5563,#e5e5e5)}


html[data-mode="game"] .gskin .classic .btn{background:#fff;color:#000}


html[data-mode="game"] .gskin .classic .mini{background:#fff;color:#000}


html[data-mode="game"] .gskin .classic .map::after{display:none}



/* ---- gskin_app.css ---- */
/* ==========================================================================
   海寻内页 · 游戏模式「应用层」换皮（我自己写的一层，与设计师组件层叠加）
   纪律：只换皮不动结构/接口/功能位置；全部走主题变量，暗/亮双主题各自映射
   ========================================================================== */

/* ---------- 1) 主题变量重映射：一处换色，全站内页跟随（面板/描边/主色/进度） ---------- */
html[data-mode="game"]:not([data-theme="light"]){
  --bg:#0A0B0D; --bg-soft:#0D1014; --bg-grad-top:#0F1216;
  --list-bg:#0D1014; --card:#111317; --card2:#171A1F; --thead:#14181E;
  --track:#1E2329; --hover:#171A1F; --hover2:#1E2329;
  --border:#232830; --border2:#2E343D; --border-strong:#2E343D; --border-strong2:#3A424D;
  --border-td:#1C2028; --sec:#A6ADB8; --muted:#767E89; --muted2:#5C636D; --muted3:#4A5058;
  --accent:#F5D90A; --accent-hover:#E6C400; --on-accent:#0A0B0D;
  --prog-from:#E6C400; --prog-to:#F5D90A;
  --skel1:#14181E; --skel2:#1E2329;
}
html[data-mode="game"][data-theme="light"]{
  --bg:#F6F6F4; --bg-soft:#FBFBF9; --card:#FFFFFF; --card2:#F7F7F5; --thead:#F2F2EF;
  --track:#E8E8E4; --hover:#F3F3F0; --hover2:#EDEDE9;
  --border:#E2E2DC; --border2:#D5D5CE; --border-strong:#C9C9C1; --border-strong2:#B5B5AC;
  --border-td:#ECECE7; --accent:#E6C400; --accent-hover:#D6B500; --on-accent:#0A0B0D;
  --prog-from:#D6B500; --prog-to:#F5D90A;
}
/* 顶栏/侧栏在游戏模式下加一点品牌黄氛围（纯视觉） */
html[data-mode="game"] .app-header{ border-bottom-color:rgba(245,217,10,.28); }
html[data-mode="game"] .as-brand .h-logo{ box-shadow:0 0 0 2px rgba(245,217,10,.5), 0 6px 16px rgba(245,217,10,.22); }

/* ---------- 2) 侧边栏：游戏名 + 原功能名并列（CSS 注入，零模板改动） ---------- */
html[data-mode="game"] .side-item .si-t::after{
  display:block;font-size:9px;font-weight:700;letter-spacing:.06em;color:#F5D90A;opacity:.92;line-height:1.2;margin-top:1px;
}
html[data-mode="game"] #nav-task .si-t::after{content:"战役"}
html[data-mode="game"] #nav-customer .si-t::after{content:"收集册"}
html[data-mode="game"] #nav-keyword .si-t::after{content:"装备库"}
html[data-mode="game"] #nav-mail .si-t::after{content:"战报"}
html[data-mode="game"] #nav-game .si-t::after{content:"战绩"}

/* ---------- 3) 战利品稀有度：客户卡左侧色条 + 右上角标（真实字段派生，不改字段与位置） ---------- */
html[data-mode="game"] .cust-row{ position:relative; }
html[data-mode="game"] .cust-row .cust-bar{ background:#8B9099 !important; }
html[data-mode="game"] .cust-row[data-r="R"] .cust-bar{ background:#60A5FA !important; }
html[data-mode="game"] .cust-row[data-r="SR"] .cust-bar{ background:#A78BFA !important; }
html[data-mode="game"] .cust-row[data-r="SSR"] .cust-bar{ background:#F5D90A !important; box-shadow:0 0 10px rgba(245,217,10,.45); }
html[data-mode="game"] .gsk-rar{
  position:absolute;right:0;top:0;z-index:3;font-size:9px;font-weight:800;letter-spacing:.04em;
  padding:2px 7px;border-bottom-left-radius:9px;background:#8B9099;color:#0A0B0D;pointer-events:none;
}
html[data-mode="game"] .cust-row[data-r="R"] .gsk-rar{ background:#60A5FA;color:#04121F; }
html[data-mode="game"] .cust-row[data-r="SR"] .gsk-rar{ background:#A78BFA;color:#12061F; }
html[data-mode="game"] .cust-row[data-r="SSR"] .gsk-rar{ background:#F5D90A; }
html[data-mode="game"] .cust-row[data-r="SSR"]{ border-color:rgba(245,217,10,.38) !important; }

/* ---------- 4) 游戏模式下的区块小提示条（装备库 / 战报 / 收集册） ---------- */
.gsk-note{ display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 11px;border-radius:12px;font-size:11.5px;
  background:rgba(245,217,10,.10);border:1px solid rgba(245,217,10,.34);color:#FFEEA8; }
html[data-theme="light"] .gsk-note{ color:#7A6400;background:rgba(245,217,10,.16); }
.gsk-note b{ color:#F5D90A;font-weight:800; }
html[data-theme="light"] .gsk-note b{ color:#8A6D00; }

/* ---------- 5) 经典「今日采集额度」卡在游戏模式下由「行动点卡」承载，避免同数据重复展示 ---------- */
html[data-mode="game"] #quota-bar{ display:none !important; }

/* ---------- 6) 经典模式：游戏层一律不显示（双保险，模板已 v-if） ---------- */
html:not([data-mode="game"]) .gskin,
/* 序列/提醒层由 v-if 控制显隐，不按模式隐藏（提醒需在经典模式下弹出） */

/* ---------- 7) 开箱/升级的轻反馈动效（transform/opacity） ---------- */
@keyframes gskPop{ 0%{transform:scale(.86);opacity:0} 100%{transform:scale(1);opacity:1} }
.gskin .gsk-pop{ animation:gskPop .34s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes gskFloat{ 0%{transform:translateY(4px);opacity:0} 30%{opacity:1} 100%{transform:translateY(-22px);opacity:0} }
.gsk-float{ position:fixed;z-index:9999;font-size:13px;font-weight:900;color:#F5D90A;pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.7); animation:gskFloat 1.35s ease-out both; }


/* ---- gskin-switch.css ---- */


/* ==========================================================================
   海寻 · 游戏模式：① 开启提醒（奖励预告） ② 游戏⇄经典 切换特效
   配色基准 = 官网首页：墨黑 #0A0B0D + 信号黄 #F5D90A
   动效纪律：只用 transform / opacity（合成层），时长 ≤1.2s，可被打断
   ========================================================================== */
.gsw :root{
  --ink:#0A0B0D; --ink2:#0D1014; --panel:#111317; --panel2:#171A1F; --panel3:#1E2329;
  --line:#232830; --line2:#2E343D;
  --t1:#F2F4F6; --t2:#A6ADB8; --t3:#767E89;
  --brand:#F5D90A; --brand2:#E6C400; --brand-ink:#0A0B0D;
  --brand-soft:rgba(245,217,10,.14); --brand-line:rgba(245,217,10,.38); --brand-glow:rgba(245,217,10,.30);
  --ok:#34D399; --err:#F87171; --warn:#FB923C; --info:#60A5FA; --rare:#A78BFA;
  --ok-soft:rgba(52,211,153,.14); --warn-soft:rgba(251,146,60,.14); --info-soft:rgba(96,165,250,.14);
  --r-card:14px; --r-btn:10px; --r-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.2,.9,.2,1);
}


.gsw *{margin:0;padding:0;box-sizing:border-box}


.gsw body{background:#06070A;color:var(--t1);line-height:1.6;padding:22px 16px 60px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}


.gsw button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}


.gsw .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}


.gsw .deck{max-width:1180px;margin:0 auto}


.gsw .deck-h{padding:8px 0 20px;border-bottom:1px solid #1A1E25;margin-bottom:22px}


.gsw .deck-h h1{font-size:20px;font-weight:800}


.gsw .deck-h h1 em{font-style:normal;color:var(--brand)}


.gsw .deck-h p{font-size:13px;color:#8A92A0;margin-top:6px}


.gsw .tagline{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}


.gsw .deck-tag{font-size:11.5px;padding:4px 9px;border-radius:var(--r-pill);background:#12151A;border:1px solid #242A33;color:#A6ADB8}


.gsw .deck-tag b{color:var(--brand)}


.gsw .grid{display:grid;grid-template-columns:1fr;gap:28px}

@media(min-width:860px){
.gsw .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}}

@media(min-width:1180px){
.gsw .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


.gsw .slot{min-width:0}

.gsw .slot-wide{grid-column:1/-1}


.gsw .cap{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}


.gsw .cap b{font-size:13.5px;font-weight:800}


.gsw .cap i{font-style:normal;font-size:11.5px;color:#7E8794}


.gsw .cap .idx{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;
  background:var(--brand);color:var(--brand-ink);font-size:11px;font-weight:800;flex:none}


.gsw .note{font-size:11.5px;color:#8A92A0;line-height:1.75;margin-top:10px}


.gsw .note b{color:#C9CFD8}


.gsw .note code{background:#12151A;border:1px solid #242A33;border-radius:4px;padding:1px 5px;font-size:11px;color:var(--brand)}


.gsw .phone{width:100%;max-width:375px;margin:0 auto;border-radius:26px;background:#000;padding:9px;border:1px solid #202530;box-shadow:0 22px 50px rgba(0,0,0,.6)}


.gsw .screen{border-radius:19px;overflow:hidden;background:var(--ink);position:relative;
  background-image:radial-gradient(120% 60% at 50% -12%,rgba(245,217,10,.10),rgba(245,217,10,0) 62%)}


.gsw .pcbox{width:100%;border-radius:16px;overflow:hidden;border:1px solid #202530;background:var(--ink);box-shadow:0 22px 50px rgba(0,0,0,.6);position:relative;height:430px}



/* ---------- ① 开启提醒：手机底部抽屉 ---------- */
.gsw .scrim{position:absolute;inset:0;background:rgba(10,11,13,.72)}


.gsw .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line2);
  border-radius:20px 20px 0 0;padding:10px 16px 18px;box-shadow:0 -18px 50px rgba(0,0,0,.6)}


.gsw .sheet .grip{width:36px;height:4px;border-radius:var(--r-pill);background:var(--line2);margin:0 auto 14px}


.gsw .sh-top{display:flex;gap:12px;align-items:flex-start}


.gsw .sh-ic{width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:26px;
  background:var(--brand-soft);border:1px solid var(--brand-line);box-shadow:0 8px 24px rgba(245,217,10,.16)}


.gsw .sh-tt{font-size:18px;font-weight:800;letter-spacing:-.2px}


.gsw .sh-ds{font-size:12.5px;color:var(--t2);margin-top:5px;line-height:1.6}


.gsw .rw-box{margin-top:14px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-card);padding:11px 11px 5px}


.gsw .rw-box .h{font-size:11px;font-weight:800;color:var(--brand);letter-spacing:.08em;margin-bottom:9px;display:flex;align-items:center;gap:6px}


.gsw .rw{display:flex;gap:10px;align-items:flex-start;padding-bottom:9px}


.gsw .rw .i{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:14px;
  background:var(--panel3);border:1px solid var(--line2)}


.gsw .rw .t{font-size:12px;font-weight:700}


.gsw .rw .d{font-size:10.5px;color:var(--t3);margin-top:2px}


.gsw .rw .v{font-size:10px;font-weight:700;color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);
  padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap;margin-left:auto}


.gsw .foot-note{font-size:10.5px;color:var(--t3);margin:12px 0 12px;line-height:1.6}


.gsw .btns{display:flex;flex-direction:column;gap:9px}


.gsw .btn{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:var(--r-btn);
  font-size:14.5px;font-weight:800;background:var(--brand);color:var(--brand-ink);
  transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}


.gsw .btn:hover{background:var(--brand2);box-shadow:0 10px 26px rgba(245,217,10,.28)}


.gsw .btn:active{transform:scale(.99)}


.gsw .btn.gh{background:transparent;color:var(--t2);border:1px solid var(--line2);font-weight:600;font-size:13.5px;height:42px}


.gsw .btn.gh:hover{border-color:var(--t3);box-shadow:none;background:rgba(255,255,255,.02)}


.gsw .chk{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--t3);margin-top:11px}


.gsw .chk .bx{width:16px;height:16px;border-radius:5px;border:1px solid var(--line2);display:grid;place-items:center;font-size:10px;color:var(--brand-ink)}


.gsw .chk.on .bx{background:var(--brand);border-color:var(--brand)}


.gsw .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}



/* ---------- ① PC 居中对话框 ---------- */
.gsw .dlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:420px;max-width:92%;
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:22px;box-shadow:0 28px 70px rgba(0,0,0,.7)}


.gsw .dlg .rw-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}


.gsw .dlg .rw-grid .rw{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px;margin:0;flex-direction:column;gap:6px}


.gsw .dlg .rw-grid .rw .v{margin-left:0}


.gsw .dlg .btns{flex-direction:row;justify-content:flex-end}


.gsw .dlg .btns .btn{height:40px;padding:0 20px;font-size:13.5px;width:auto}



/* ---------- ② 演示台 ---------- */
.gsw #stageWrap{position:relative}


.gsw .veil{position:absolute;inset:0;pointer-events:none;z-index:9}


.gsw .veil .vb{position:absolute;inset:0;background:rgba(10,11,13,.94);opacity:0}


.gsw .veil .vb i{position:absolute;inset:0;background:rgba(10,11,13,.94);display:block}


.gsw .veil .fx{position:absolute;inset:0;display:grid;place-items:center;opacity:0}


.gsw .veil .ring{position:absolute;left:50%;top:44%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;
  border:2px solid var(--brand);opacity:0}


.gsw .veil .core{position:absolute;left:50%;top:44%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,217,10,.30),rgba(245,217,10,0) 70%);opacity:0}


.gsw .veil .bg{position:relative;text-align:center}


.gsw .veil .bmark{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;
  background:var(--brand);color:var(--brand-ink);font-size:26px;font-weight:800;box-shadow:0 0 0 6px rgba(245,217,10,.12),0 16px 40px rgba(245,217,10,.35)}


.gsw .veil .vt{font-size:20px;font-weight:800;letter-spacing:-.3px}


.gsw .veil .vt b{color:var(--brand)}


.gsw .veil .vs{font-size:12px;color:var(--t2);margin-top:7px}


.gsw .veil .vline{width:44px;height:2px;border-radius:2px;background:var(--brand);margin:14px auto 0;box-shadow:0 0 12px var(--brand-glow)}



.gsw .gbox{position:absolute;inset:0;overflow:hidden;background:var(--ink);
  background-image:radial-gradient(120% 60% at 50% -12%,rgba(245,217,10,.10),rgba(245,217,10,0) 62%)}


.gsw .gbox .hud{display:flex;align-items:center;gap:10px;padding:12px 16px 10px;border-bottom:1px solid var(--line)}


.gsw .gbox .lv{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--panel2);
  border:1px solid var(--brand-line);box-shadow:0 0 0 3px rgba(245,217,10,.08)}


.gsw .gbox .lv b{font-size:14px;font-weight:800;color:var(--brand);line-height:1}


.gsw .gbox .who{flex:1;min-width:0}


.gsw .gbox .n{font-size:13px;font-weight:700;display:flex;gap:6px;align-items:center}


.gsw .gbox .rank{font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);background:var(--brand-soft);
  color:var(--brand);border:1px solid var(--brand-line)}


.gsw .gbox .xp{display:flex;align-items:center;gap:7px;margin-top:5px}


.gsw .gbox .xp .tr{flex:1;height:6px;border-radius:var(--r-pill);background:var(--panel3);overflow:hidden}


.gsw .gbox .xp .tr i{display:block;height:100%;width:71%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand2),var(--brand))}


.gsw .gbox .xp .v{font-size:10.5px;color:var(--t3)}


.gsw .gbox .body{padding:16px}


.gsw .gbox .st-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}


.gsw .gbox .st{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 11px}


.gsw .gbox .st .k{font-size:10.5px;color:var(--t3)}


.gsw .gbox .st .v{font-size:19px;font-weight:800;margin-top:3px}


.gsw .gbox .st .v small{font-size:11px;color:var(--t3);font-weight:600}


.gsw .gbox .st .bar{height:5px;border-radius:var(--r-pill);background:var(--panel3);margin-top:7px;overflow:hidden}


.gsw .gbox .st .bar i{display:block;height:100%;width:60%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand2),var(--brand))}


.gsw .gbox .sec-t{font-size:12px;font-weight:800;color:var(--t2);letter-spacing:.06em;display:flex;align-items:center;gap:7px;margin-bottom:10px}


.gsw .gbox .sec-t::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--brand)}


.gsw .gbox .map{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px}


.gsw .gbox .rail{position:absolute;left:31px;top:22px;bottom:22px;width:2px;transform-origin:top center;
  background:linear-gradient(180deg,var(--brand),rgba(245,217,10,.10));opacity:.5}


.gsw .gbox .stage{display:flex;gap:12px;align-items:center;padding:7px 0}


.gsw .gbox .nd{width:26px;height:26px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;
  background:var(--panel3);color:var(--t3);border:1px solid var(--line2);z-index:1}


.gsw .gbox .stage.now .nd{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-soft),0 6px 18px var(--brand-glow)}


.gsw .gbox .stage.done .nd{background:var(--ok-soft);color:var(--ok);border-color:rgba(52,211,153,.42)}


.gsw .gbox .stage .tt{font-size:12.5px;font-weight:700}


.gsw .gbox .stage .ds{font-size:10.5px;color:var(--t3);margin-top:2px}


.gsw .gbox .tabs{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);background:rgba(13,16,20,.96)}


.gsw .gbox .tab{padding:8px 4px 10px;text-align:center;color:var(--t3)}


.gsw .gbox .tab .ic{font-size:16px;display:block}


.gsw .gbox .tab .g{font-size:10.5px;font-weight:700;margin-top:3px;display:block}


.gsw .gbox .tab .o{font-size:8.5px;display:block}


.gsw .gbox .tab.on{color:var(--brand);position:relative}


.gsw .gbox .tab.on::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:24px;height:2px;border-radius:2px;background:var(--brand)}



/* 经典模式底层（关闭序列的目标状态） */
.gsw .clx{position:absolute;inset:0;background:#0A0A0A;opacity:0}


.gsw .clx .ch{padding:12px 16px 10px;border-bottom:1px solid #222;display:flex;align-items:center;gap:9px}


.gsw .clx .ch .l{width:34px;height:34px;border-radius:10px;background:#141414;border:1px solid #2c2c2c;display:grid;place-items:center;font-weight:800;font-size:13px}


.gsw .clx .ch .b{height:9px;border-radius:5px;background:#1d1d1d;flex:1;max-width:110px}


.gsw .clx .cb{padding:14px 16px}


.gsw .clx .row{height:54px;border-radius:12px;background:#111;border:1px solid #232323;margin-bottom:9px;padding:11px}


.gsw .clx .row .b1{height:9px;border-radius:5px;background:#232323;width:62%}


.gsw .clx .row .b2{height:7px;border-radius:4px;background:#1b1b1b;width:38%;margin-top:8px}


.gsw .clx .row .bar{height:5px;border-radius:3px;background:#1b1b1b;margin-top:10px;overflow:hidden}


.gsw .clx .row .bar i{display:block;height:100%;width:60%;background:linear-gradient(90deg,#4b5563,#e5e5e5)}


.gsw .clx .ct{height:9px;border-radius:5px;background:#1d1d1d;width:34%;margin:4px 0 11px}



.gsw .twrap{position:absolute;left:16px;right:16px;top:12px;z-index:20;opacity:0}


.gsw .toast{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:12px;background:rgba(17,19,23,.96);
  border:1px solid var(--brand-line);box-shadow:0 14px 34px rgba(0,0,0,.55)}


.gsw .toast .tin{display:flex;align-items:center;gap:9px;flex:1;min-width:0}


.gsw .toast .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;background:var(--brand);color:var(--brand-ink)}


.gsw .toast .tt{font-size:12px;font-weight:700}


.gsw .toast .ds{font-size:10.5px;color:var(--t3);margin-top:1px}


.gsw .toast.off{border-color:var(--line2)}


.gsw .toast.off .ic{background:var(--panel3);color:var(--t2)}



/* 播放控制 */
.gsw .ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}


.gsw .ctl{font-size:11.5px;font-weight:700;padding:8px 12px;border-radius:var(--r-pill);background:var(--panel);
  border:1px solid var(--line2);color:var(--t2);transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease)}


.gsw .ctl:hover{transform:translateY(-1px);border-color:var(--t3)}


.gsw .ctl.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}


.gsw .ctl.sec{background:var(--panel2)}


.gsw .ctl.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}


.gsw .tline{font-size:11px;color:var(--t3);margin-left:auto}


.gsw .ruler{margin-top:12px;position:relative;height:46px;border-radius:12px;background:var(--panel);border:1px solid var(--line);padding:0 10px}


.gsw .ruler .base{position:absolute;left:10px;right:10px;top:23px;height:2px;background:var(--line2)}


.gsw .ruler .mk{position:absolute;top:14px;transform:translateX(-50%);text-align:center}


.gsw .ruler .mk i{display:block;width:2px;height:20px;margin:0 auto;background:var(--brand);opacity:.5}


.gsw .ruler .mk.on i{opacity:1;box-shadow:0 0 8px var(--brand-glow)}


.gsw .ruler .mk span{font-size:9px;color:var(--t3);white-space:nowrap;position:absolute;left:50%;transform:translateX(-50%);top:22px}


.gsw .ruler .mk.on span{color:var(--brand)}



/* 关键帧静帧卡 */
.gsw .frames{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}

@media(min-width:520px){
.gsw .frames{grid-template-columns:repeat(4,1fr)}}


.gsw .fc{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}


.gsw .fc .thumb{height:150px;background:var(--ink);position:relative;overflow:hidden}


.gsw .fc .lb{padding:7px 9px;font-size:10.5px;color:var(--t2);border-top:1px solid var(--line)}


.gsw .fc .lb b{color:var(--brand)}


.gsw .tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:11.5px}


.gsw .tbl th,
.gsw .tbl td{border:1px solid #1E242C;padding:7px 9px;text-align:left;vertical-align:top}


.gsw .tbl th{background:#12151A;color:#C9CFD8;font-weight:700;font-size:11px}


.gsw .tbl td b{color:var(--brand)}


.gsw .tbl code{color:var(--t2);font-size:10.5px}


.gsw .sw-demo{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--t3);margin-top:10px;flex-wrap:wrap}


.gsw .sw{width:42px;height:24px;border-radius:var(--r-pill);background:var(--panel3);border:1px solid var(--line2);position:relative;flex:none;
  transition:background .2s var(--ease),border-color .2s var(--ease)}


.gsw .sw i{position:absolute;top:2.5px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--t3);transition:transform .2s var(--ease),background .2s var(--ease)}


.gsw .sw.on{background:var(--brand);border-color:var(--brand)}


.gsw .sw.on i{transform:translateX(18px);background:var(--brand-ink)}



/* ---- gskin_anim.css ---- */
/* ==========================================================================
   海寻 · 游戏模式：设计令牌 + 开启提醒动效 + 切换序列（按设计师规范时间轴落地）
   纪律：只用 transform/opacity；序列总时长 开启 1.2s / 关闭 0.9s；可被打断；降级到直切
   ========================================================================== */

/* ---------- 设计令牌（设计师 :root 变量在落地层挂到容器上） ---------- */
.gskin, .gsw{
  --ink:#0A0B0D; --ink2:#0D1014; --panel:#111317; --panel2:#171A1F; --panel3:#1E2329;
  --line:#232830; --line2:#2E343D;
  --t1:#F2F4F6; --t2:#A6ADB8; --t3:#767E89;
  --brand:#F5D90A; --brand2:#E6C400; --brand-ink:#0A0B0D;
  --brand-soft:rgba(245,217,10,.14); --brand-line:rgba(245,217,10,.38); --brand-glow:rgba(245,217,10,.30);
  --ok:#34D399; --err:#F87171; --warn:#FB923C; --info:#60A5FA; --rare:#A78BFA;
  --ok-soft:rgba(52,211,153,.14); --warn-soft:rgba(251,146,60,.14);
  --r-n:#8B9099; --r-r:#60A5FA; --r-sr:#A78BFA; --r-ssr:#F5D90A;
  --r-card:14px; --r-btn:10px; --r-pill:999px; --pad:16px; --gap:12px;
  --sh-2:0 10px 28px rgba(0,0,0,.55);
  --ease:cubic-bezier(.4,0,.2,1);
}
/* 游戏组件层不再使用演示用的手机外框（融入真实内页） */
html[data-mode="game"] .gskin .phone{ max-width:none;border:0;border-radius:0;background:none;box-shadow:none;padding:0 }
html[data-mode="game"] .gskin .screen{ border-radius:0;background:none;background-image:none;overflow:visible }
html[data-mode="game"] .gskin .body{ padding:14px 0 4px }
html[data-mode="game"] .gskin .sec-t{ display:flex;align-items:baseline;gap:8px;margin:16px 0 9px;font-size:13px;font-weight:800 }
html[data-mode="game"] .gskin .sec-t .r{ font-size:10.5px;color:#767E89;font-weight:600 }

/* ---------- ① 开启提醒：抽屉（手机）/ 对话框（PC） ---------- */
.gsw{ position:fixed; inset:0; z-index:9997; }
.gsw .scrim{ position:absolute; inset:0; opacity:0; transition:opacity .16s linear; }
.gsw .sheet{ transform:translateY(101%); transition:transform .32s cubic-bezier(.2,.9,.2,1); }
.gsw.show .scrim{ opacity:1 }
.gsw.show .sheet{ transform:translateY(0) }
.gsw.closing .sheet{ transform:translateY(101%); transition:transform .24s ease-in }
.gsw.closing .scrim{ opacity:0; transition:opacity .24s ease-in }
/* 条目/图标/文案入场 */
@keyframes gIc{ from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes gUp{ from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes gRw{ from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }
.gsw.show .sh-ic{ animation:gIc .24s var(--ease) .08s both }
.gsw.show .sh-tt{ animation:gUp .26s var(--ease) .12s both }
.gsw.show .sh-ds{ animation:gUp .26s var(--ease) .16s both }
.gsw.show .rw-box .h{ animation:gUp .2s var(--ease) .1s both }
.gsw.show .rw{ animation:gRw .22s var(--ease) both }
.gsw.show .rw:nth-child(2){ animation-delay:.14s } .gsw.show .rw:nth-child(3){ animation-delay:.21s }
.gsw.show .rw:nth-child(4){ animation-delay:.28s } .gsw.show .rw:nth-child(5){ animation-delay:.35s }
.gsw.show .foot-note{ animation:gUp .24s var(--ease) .3s both }
.gsw.show .btns{ animation:gUp .24s var(--ease) .34s both }
.gsw.show .chk{ animation:gUp .24s var(--ease) .38s both }
/* PC：居中对话框 420px + 奖励 2×2 栅格（≥1024） */
@media(min-width:1024px){
  .gsw{ display:grid; place-items:center; padding:24px }
  .gsw .scrim{ background:rgba(10,11,13,.72) }
  .gsw .sheet{ position:relative; left:auto;right:auto;bottom:auto; width:420px; max-width:100%; border:1px solid var(--line2);
    border-radius:18px; padding:22px; box-shadow:0 28px 70px rgba(0,0,0,.7); transform:translateY(14px) scale(.96); opacity:0;
    transition:transform .24s var(--ease), opacity .24s var(--ease) }
  .gsw.show .sheet{ transform:none; opacity:1 }
  .gsw.closing .sheet{ transform:translateY(10px) scale(.98); opacity:0; transition:transform .2s ease-in, opacity .2s ease-in }
  .gsw .sheet .grip{ display:none }
  .gsw .rw-box{ display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:11px; background:transparent; border:0 }
  .gsw .rw-box .h{ grid-column:1/-1; margin-bottom:2px }
  .gsw .rw{ flex-direction:column; align-items:flex-start; gap:6px; padding:11px; border-radius:12px;
    background:var(--panel2); border:1px solid var(--line) }
  .gsw .btns{ flex-direction:row-reverse; justify-content:flex-start }
  .gsw .btns .btn{ flex:0 0 auto; min-width:132px }
}

/* ---------- ② 切换序列：开启 1.2s / 关闭 0.9s ---------- */
@keyframes gvbIn{ from{opacity:0} to{opacity:1} }
@keyframes gvbOut{ from{opacity:1} to{opacity:0} }
@keyframes gvbClose{ 0%{opacity:1} 60%{opacity:1} 100%{opacity:0} }
@keyframes gRing{ 0%{transform:scale(.2);opacity:.55} 100%{transform:scale(1.6);opacity:0} }
@keyframes gRingOut{ 0%{transform:scale(1.4);opacity:.5} 100%{transform:scale(.4);opacity:0} }
@keyframes gCore{ 0%{transform:scale(.3);opacity:0} 60%{transform:scale(1.15);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes gBmark{ 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.06);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes gFxSeq{ 0%{opacity:0;transform:translateY(10px)} 22%{opacity:1;transform:translateY(0)} 60%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-40px)} }
@keyframes gLine{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes gToastSeq{ 0%{opacity:0;transform:translateY(-12px)} 9%{opacity:1;transform:translateY(0)} 82%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-8px)} }
@keyframes gToastSeqOff{ 0%{opacity:0;transform:translateY(-12px)} 27%{opacity:1;transform:translateY(0)} 73%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-8px)} }

.gsw.seq{ pointer-events:none }
.gsw.seq .veil{ pointer-events:none }
.gsw.seq .vb{ opacity:0 }
.gsw.seq .fx{ opacity:0 }
.gsw.seq .twrap{ opacity:0 }
.gsw.seq.on .vb{ animation:gvbIn .16s linear forwards, gvbOut .32s .64s linear forwards }
.gsw.seq.on .fx{ animation:gFxSeq .94s linear .28s forwards }
.gsw.seq.on .vt{ animation:gUp .28s var(--ease) .3s both }
.gsw.seq.on .vs{ animation:gUp .26s var(--ease) .38s both }
.gsw.seq.on .vline{ animation:gLine .24s var(--ease) .42s both }
.gsw.seq.on .ring{ animation:gRing .52s ease-out forwards; opacity:0 }
.gsw.seq.on .ring[data-i="0"]{ animation-delay:0s } .gsw.seq.on .ring[data-i="1"]{ animation-delay:.12s } .gsw.seq.on .ring[data-i="2"]{ animation-delay:.24s }
.gsw.seq.on .core{ animation:gCore .42s ease-out .06s both }
.gsw.seq.on .bmark{ animation:gBmark .26s cubic-bezier(.2,1.3,.4,1) .14s both }
.gsw.seq.on .twrap{ animation:gToastSeq 2.48s linear 1.12s forwards }
.gsw.seq.off .ring{ animation:gRingOut .4s ease-in forwards; opacity:.5 }
.gsw.seq.off .vb{ animation:gvbClose .76s linear forwards }
.gsw.seq.off .core{ animation:gRingOut .5s ease-in forwards; opacity:1 }
.gsw.seq.off .fx{ display:none }
.gsw.seq.off .twrap{ animation:gToastSeqOff .82s linear .675s forwards }
.gsw.seq.off .vt{ opacity:0 } .gsw.seq.off .vs{ opacity:0 } .gsw.seq.off .vline{ opacity:0 }
/* 打断：快版 240ms（不连播、不卡死） */
.gsw.seq.fast .vb{ animation:gvbIn .12s linear forwards, gvbOut .12s .12s linear forwards }
.gsw.fast .sheet{ transition-duration:.12s }
.gsw.seq.fast.on .ring{ animation:gRing .28s ease-out forwards }
.gsw.seq.fast.on .core,.gsw.seq.fast.on .bmark{ animation-duration:.22s }
.gsw.seq.fast.on .fx{ animation-duration:.4s }
.gsw.seq.fast.on .twrap{ animation-duration:1.2s }
.gsw.seq.fast.off .vb{ animation:gvbClose .3s linear forwards }
.gsw.seq.fast.off .twrap{ animation-duration:.5s }

/* ---------- ③ 应用游戏层「装配」动效（切换序列期间） ---------- */
@keyframes gHud{ from{transform:translateY(-14px);opacity:0} to{transform:none;opacity:1} }
@keyframes gActL{ from{transform:translateX(-12px);opacity:0} to{transform:none;opacity:1} }
@keyframes gActR{ from{transform:translateX(12px);opacity:0} to{transform:none;opacity:1} }
@keyframes gRail{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes gNd{ 0%{transform:scale(.8);opacity:0} 60%{transform:scale(1.1);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes gTabs{ from{transform:translateY(12px);opacity:0} to{transform:none;opacity:1} }
html.gm-enter .gskin .hud{ animation:gHud .26s var(--ease) .56s both }
html.gm-enter .gskin .sec-t:first-of-type{ animation:gHud .24s var(--ease) .6s both }
html.gm-enter .gskin .stam .st:nth-child(1){ animation:gActL .24s var(--ease) .6s both }
html.gm-enter .gskin .stam .st:nth-child(2){ animation:gActR .24s var(--ease) .64s both }
html.gm-enter .gskin .map{ animation:gUp .24s var(--ease) .65s both }
html.gm-enter .gskin .rail{ transform-origin:top; animation:gRail .42s var(--ease) .66s both }
html.gm-enter .gskin .stage:nth-child(2) .nd{ animation:gNd .2s var(--ease) .70s both }
html.gm-enter .gskin .stage:nth-child(3) .nd{ animation:gNd .2s var(--ease) .79s both }
html.gm-enter .gskin .stage:nth-child(4) .nd{ animation:gNd .2s var(--ease) .88s both }
html.gm-enter .gskin .stage:nth-child(5) .nd{ animation:gNd .2s var(--ease) .97s both }
html.gm-enter .gskin .stage:nth-child(6) .nd{ animation:gNd .2s var(--ease) 1.06s both }
html.gm-enter .gskin .quests,html.gm-enter .gskin .chest{ animation:gUp .24s var(--ease) 1.0s both }
html.gm-enter .side-nav{ animation:gTabs .22s var(--ease) 1.08s both }
/* 关闭序列：游戏层熄灭 */
html.gm-leave .gskin .hud,html.gm-leave .gskin .stam,html.gm-leave .gskin .quests,html.gm-leave .gskin .chest{
  animation:gHud .22s ease-in reverse both }
html.gm-leave .gskin .map,html.gm-leave .gskin .sec-t{ animation:gUp .22s ease-in reverse both }

@media (prefers-reduced-motion: reduce){
  .gsw.seq .vb,.gsw.seq .fx,.gsw.seq .twrap,.gsw.seq .ring,.gsw.seq .core,.gsw.seq .bmark,
  .gsw.seq .vt,.gsw.seq .vs,.gsw.seq .vline,.gsw.show .rw,.gsw.show .sh-ic,.gsw.show .btns,.gsw.show .chk,
  html.gm-enter .gskin *,html.gm-leave .gskin *{ animation-duration:.01ms !important; animation-delay:0ms !important }
  .gsw .sheet,.gsw.show .sheet{ transition-duration:.01ms !important }
}


/* ==========================================================================
   2026-10-14 · 游戏模式细节补齐（对齐设计师稿 §1/§4/§6/§7）
   ① 菜单栏「游戏切换」开关：与「黑白主题」切换同一位置（仅视觉，功能零改动）
   ② 游戏模式下主题锁定：仅黑色（暗色）可选
   ③ 收集册稀有度筛选 / 装备库伤害星级 / 战绩·段位·成就墙
   ========================================================================== */

/* ---------- ① 游戏切换开关（.gm-sw）同位置、同尺寸语言 ---------- */
.gm-sw{
  position:relative;flex:0 0 auto;height:32px;padding:0 9px 0 8px;border-radius:8px;
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--border);color:var(--text);cursor:pointer;
  transition:background-color .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease),transform .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.gm-sw:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.gm-sw:active{transform:scale(.95);}
.gm-sw:focus-visible{outline:0;box-shadow:0 0 0 2px var(--ring);border-color:var(--border-strong);}
.gm-sw[disabled]{opacity:.6;cursor:default;transform:none;}
.gm-sw .gm-sw-tr{
  position:relative;width:26px;height:15px;border-radius:999px;background:#2a2f38;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background-color .24s var(--ease);
}
.gm-sw .gm-sw-kn{
  position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:#8b93a0;transition:transform .24s var(--ease),background-color .24s var(--ease);
}
.gm-sw.on{border-color:var(--brand);color:var(--brand);}
.gm-sw.on .gm-sw-tr{background:color-mix(in srgb, var(--brand) 30%, #10131a);}
.gm-sw.on .gm-sw-kn{transform:translateX(11px);background:var(--brand);}
.gm-sw .gm-sw-t{font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.gm-sw.busy{pointer-events:none;}
@media (max-width: 767.98px){
  .gm-sw{height:28px;padding:0 7px;gap:5px;}
  .gm-sw .gm-sw-t{font-size:11px;}
  .gm-sw .gm-sw-tr{width:24px;height:14px;}
  .gm-sw .gm-sw-kn{width:10px;height:10px;}
  .gm-sw.on .gm-sw-kn{transform:translateX(10px);}
}

/* ---------- ② 游戏模式：仅暗色（主题切换按钮置灰不可用） ---------- */
html[data-mode="game"] #themeToggle{opacity:.4;cursor:not-allowed;filter:grayscale(1);}
html[data-mode="game"] #themeToggle:hover{transform:none;border-color:var(--border);}
html[data-mode="game"] .theme-toggle svg{transition:none;}

/* ---------- ③-A 收集册：稀有度筛选 chips ---------- */
#seg-rarity [data-rarity].on{border-color:var(--brand);color:#0d0f13;background:var(--brand);}
#seg-rarity [data-rarity]{font-weight:700;letter-spacing:.02em;}
#seg-rarity [data-rarity="SSR"].on{background:linear-gradient(180deg,#ffd76a,#f0b21f);border-color:#f0b21f;}

/* ---------- ③-B 装备库：伤害星级 ---------- */
.gsk-dmg{display:inline-block;margin-left:6px;font-size:11px;letter-spacing:1px;color:#f5d90a;vertical-align:1px;}

/* ---------- ③-C HUD：连胜 / 宝箱 双胶囊 ---------- */
html[data-mode="game"] .gskin .hud .streak{white-space:nowrap;}
html[data-mode="game"] .gskin .hud .streak.box{background:#1a1410;border-color:#3a2c18;color:#ffd76a;}

/* ---------- ③-D 战绩：段位卡 / 成就墙 / 浮动飘字 ---------- */
.gm-rank{display:flex;flex-direction:column;gap:8px;}
.gm-rank-cur{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.gm-rank-cur b{font-size:20px;font-weight:800;letter-spacing:-.2px;}
.gm-rank-lv{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:#12151A;border:1px solid #242A33;}
.gm-streak{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:#1a1410;border:1px solid #3a2c18;color:#ffd76a;}
.gm-rank-next{font-size:13px;opacity:.85;}
.gm-rank-next b{color:var(--brand);font-weight:800;}
.gm-rank-rw{font-size:12px;opacity:.7;}
.gm-mini-3{grid-template-columns:repeat(3,1fr);}
.gm-ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;}
.gm-ach-i{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:10px 6px;border-radius:10px;background:#0F1216;border:1px solid #1E232B;opacity:.5;
}
.gm-ach-i.on{opacity:1;border-color:#3a2c18;background:linear-gradient(180deg,#171310,#0F1216);}
.gm-ach-i .gm-ach-ic{font-size:18px;line-height:1;}
.gm-ach-i b{font-size:12px;font-weight:700;}
.gm-ach-i i{font-size:10.5px;font-style:normal;opacity:.65;line-height:1.35;}
.gsk-float{
  position:fixed;z-index:9999;pointer-events:none;
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;
  background:rgba(15,18,22,.92);border:1px solid var(--brand);color:var(--brand);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  animation:gskFloatUp 1.4s var(--ease) forwards;
}
@keyframes gskFloatUp{
  0%{opacity:0;transform:translateY(8px) scale(.92);}
  18%{opacity:1;transform:translateY(0) scale(1);}
  75%{opacity:1;transform:translateY(-18px);}
  100%{opacity:0;transform:translateY(-30px);}
}
@media (prefers-reduced-motion: reduce){
  .gsk-float{animation-duration:.01ms;}
}