/* 样式提取自 autoreply/app/templates/panel.html —— 保持原有视觉，勿手改 */

  /* 深色设计系统：对齐「前端设计」稿（call-logs / auto-inquiry-dashboard / knowledge-base）。
     底：近黑 + 多层径向光晕 + 细噪点；卡：玻璃拟态；主色：青→蓝渐变。 */
  :root {
    --bg:#06080e;
    --card:rgba(20,24,33,.72);
    --card-solid:#131722;
    --border:rgba(255,255,255,.07);
    --border-strong:rgba(255,255,255,.13);
    --text:#e9eef7;
    --muted:#8590a3;
    --muted-2:#5d6778;
    --cyan:#2dd4ee; --blue:#5b8dff; --violet:#8b7bff;
    --green:#34d399; --amber:#fbbf24; --red:#fb7185;
    --grad:linear-gradient(135deg,#2ee6cf 0%,#34b6f5 52%,#5b8dff 100%);
    --radius:18px;
    /* 兼容既有内联样式 / JS 里用到的旧变量名，避免改坏功能 */
    --line:rgba(255,255,255,.07);
    --line-soft:rgba(255,255,255,.05);
    --brand:var(--cyan);
    --brand-fg:#04222c;
    --brand-soft:rgba(45,212,238,.12);
    --ok:var(--green); --warn:var(--amber); --danger:var(--red);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  /* 页面不出现横向滚动条：装饰性光晕（绝对定位、超出容器）不该撑出横向滚动 */
  html, body { overflow-x:hidden; }
  /* 自定义滚动条（对齐图文视频创作页：细、透明轨道、圆角滑块，不用系统默认样式） */
  ::-webkit-scrollbar { width:8px; height:8px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:99px; }
  ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.24); }
  ::-webkit-scrollbar-corner { background:transparent; }
  body {
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
    background-color:var(--bg);
    background-image:
      radial-gradient(820px 380px at 82% -10%,rgba(52,182,245,.14),transparent 62%),
      radial-gradient(620px 420px at 4% 6%,rgba(46,230,207,.09),transparent 58%),
      radial-gradient(900px 520px at 50% 118%,rgba(91,141,255,.12),transparent 60%),
      radial-gradient(520px 360px at 96% 78%,rgba(139,123,255,.07),transparent 60%),
      linear-gradient(180deg,#080b13 0%,#06080e 46%,#070a12 100%);
    background-attachment:fixed;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-size:13.5px; letter-spacing:.1px;
    min-height:100vh;
    padding:0 0 56px;
  }
  /* macOS 专用：让出窗口顶部的拖拽区（20px）。
     用 body 内边距而不是宿主空隙——内边距仍在 body 的绘制范围内，背景渐变是连续的，不会出现黑边。 */
  html.is-mac body { padding-top:20px; }
  /* 细噪点：消除渐变色带，更有质感 */
  body::after {
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap { max-width:1180px; margin:0 auto; padding:14px 40px 0; position:relative; z-index:1; }

  /* ---------- 顶部栏（与智能体市场 / 图文视频创作同款）----------
     纯文字档位 + E能（悬停拆个人/团队/总计）+ 升级购买；无底色、无分割线，通栏贴顶。 */
  .cf-gb {
    position:relative; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    height:46px; padding:0 24px;
    border-bottom:0; background:transparent;
  }
  .cf-gb-left, .cf-gb-right { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
  .cf-gb-left { flex:1; min-width:0; }
  .tier-badge {
    display:inline-flex; align-items:baseline; gap:6px;
    font-size:12px; color:#B9C0D4; white-space:nowrap; letter-spacing:.02em;
  }
  .tier-badge b {
    font-weight:800;
    background:linear-gradient(90deg,#D9D4FA,#9C86F0);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .tier-badge-cur { font-weight:400; color:#5D6272; margin-left:1px; }
  .cf-gb-ener { position:relative; display:inline-flex; }
  .cf-gb-enerbtn {
    display:inline-flex; align-items:center; height:30px; padding:0 12px;
    border-radius:9px; font-size:12px; color:#e5e7eb;
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13);
    transition:all .15s ease; white-space:nowrap; cursor:pointer; font-family:inherit;
  }
  .cf-gb-enerbtn:hover { border-color:rgba(139,92,246,.55); background:rgba(255,255,255,.07); color:#fff; }
  .cf-gb-enerbtn.low { color:#FBBF24; border-color:rgba(251,191,36,.36); background:rgba(251,191,36,.10); }
  .cf-gb-enerbtn.low:hover { color:#FDE68A; background:rgba(251,191,36,.16); border-color:rgba(251,191,36,.55); }
  .cf-gb-tip {
    position:absolute; top:calc(100% + 9px); right:0; min-width:200px;
    padding:10px 14px; border-radius:10px; background:#14152e;
    border:1px solid rgba(255,255,255,.14); box-shadow:0 16px 38px rgba(0,0,0,.5);
    display:none; white-space:nowrap; z-index:80;
  }
  .cf-gb-ener:hover .cf-gb-tip { display:block; }
  .cf-gb-tip-row { display:flex; justify-content:space-between; gap:26px; font-size:12.5px; color:#9aa6bf; line-height:2.05; }
  .cf-gb-tip-row b { color:#fff; font-weight:700; }
  .cf-gb-tip-sum { margin-top:6px; padding-top:8px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:26px; font-size:12.5px; color:#c9d1e6; line-height:1.6; }
  .cf-gb-tip-sum b { color:#fff; font-weight:800; }
  .cf-gb-upgrade {
    display:inline-flex; align-items:center; height:30px; padding:0 14px;
    border-radius:8px; border:0; font-size:12.5px; font-weight:700;
    color:#fff; background:linear-gradient(135deg,#a855f7,#3b82f6);
    box-shadow:0 6px 16px rgba(139,92,246,.28);
    transition:filter .15s ease, transform .15s ease;
    white-space:nowrap; cursor:pointer; font-family:inherit;
  }
  .cf-gb-upgrade:hover { filter:brightness(1.08); transform:translateY(-1px); }

  /* ---------- Header ---------- */
  header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
  /* 顶部栏本身不要继承下面的 22px 底边距，否则它和页面标题之间会空出一大块 */
  header.cf-gb { margin-bottom:0; }
  .brand { display:flex; align-items:center; gap:13px; }
  .logo {
    width:38px; height:38px; border-radius:11px; background:var(--grad);
    display:grid; place-items:center; flex:none; position:relative;
    box-shadow:0 6px 18px rgba(52,182,245,.35),0 0 0 1px rgba(255,255,255,.12) inset;
  }
  .logo::after { content:""; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 55%); }
  .logo svg { width:19px; height:19px; position:relative; z-index:1; }
  h1 { font-size:19px; font-weight:700; letter-spacing:.6px; }
  .badge {
    font-size:11.5px; font-weight:600; color:var(--cyan);
    padding:3.5px 11px; border-radius:999px; letter-spacing:.5px;
    background:rgba(45,212,238,.08); border:1px solid rgba(45,212,238,.3);
    box-shadow:0 0 14px rgba(45,212,238,.12),0 0 0 3px rgba(45,212,238,.04);
  }

  /* ---------- Tabs ---------- */
  .tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .tabs button {
    display:inline-flex; align-items:center; gap:7px;
    padding:7.5px 16px; border-radius:999px; cursor:pointer; user-select:none;
    background:rgba(255,255,255,.035); border:1px solid var(--border);
    color:var(--muted); font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.3px;
    transition:all .22s ease; backdrop-filter:blur(8px);
  }
  .tabs button:hover { color:var(--text); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06); }
  .tabs button.on {
    background:var(--grad); color:#04222c; border-color:transparent; font-weight:700;
    box-shadow:0 6px 20px rgba(52,182,245,.38),0 0 0 1px rgba(255,255,255,.14) inset;
  }
  /* 商户未开通前锁住的页签（用属性而不是 class：switchTab 会把 className 整体覆盖掉） */
  .tabs button[data-locked="1"] { opacity:.38; cursor:not-allowed; }
  .tabs button[data-locked="1"]:hover {
    color:var(--muted); border-color:var(--border); background:rgba(255,255,255,.035);
  }
  /* 导航「连接」按钮上的连接状态：切到任何页都能一眼看到 已连接/未连接 */
  .tabs button .navstate { font-size:11.5px; margin-left:2px; font-weight:700; letter-spacing:.4px; }
  .tabs button .navstate.ok { color:#3fe0b4; }
  .tabs button .navstate.off { color:var(--muted-2); }
  .tabs button.on .navstate.ok,
  .tabs button.on .navstate.off { color:#0a5148; }

  /* ---------- Cards ---------- */
  .card {
    background:
      linear-gradient(165deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.012) 42%,rgba(255,255,255,.025) 100%),
      var(--card);
    border:1px solid var(--border); border-radius:var(--radius);
    padding:22px 24px; margin-bottom:16px; position:relative; overflow:hidden;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 14px 40px rgba(2,5,12,.5),0 1px 0 rgba(255,255,255,.05) inset;
  }
  .card::before {
    content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  }
  .card.span-2 { grid-column:1 / -1; }
  /* 卡片标题（demo 组件）：图标磁贴 + 标题 + 可选右侧标签 */
  .card-title { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
  .title-icon {
    width:32px; height:32px; border-radius:10px; flex:none;
    background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.09);
    display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.25);
  }
  .title-icon svg { width:16px; height:16px; stroke:#c2ccdc; }
  .card-title h2 { font-size:15.5px; font-weight:700; letter-spacing:.4px; }
  .card-title .tag {
    margin-left:auto; font-size:11.5px; font-weight:600; color:var(--muted);
    padding:3.5px 11px; border-radius:999px;
    background:rgba(255,255,255,.045); border:1px solid var(--border);
  }
  /* 兼容未重构的普通标题（左侧渐变竖条） */
  .card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .card-head h2 { margin:0; font-size:15.5px; font-weight:700; letter-spacing:.4px;
    display:flex; align-items:center; gap:11px; }
  .card-head h2::before {
    content:""; width:4px; height:15px; border-radius:2px; flex:none;
    background:var(--grad); box-shadow:0 0 10px rgba(52,182,245,.55);
  }
  .card > h2 { font-size:15.5px; font-weight:700; letter-spacing:.4px; margin-bottom:16px;
    display:flex; align-items:center; gap:11px; }
  .card > h2::before {
    content:""; width:4px; height:15px; border-radius:2px; flex:none;
    background:var(--grad); box-shadow:0 0 10px rgba(52,182,245,.55);
  }

  /* ---------- Rows（键值行） ---------- */
  .row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; font-size:13.5px; }
  .row + .row { border-top:1px dashed rgba(255,255,255,.06); }
  .row .k { color:var(--muted); display:flex; align-items:center; gap:9px; }
  .row > span:not(.k) { font-weight:600; text-align:right; }
  .state { font-weight:600; }
  .state.ok { color:var(--green); } .state.warn { color:var(--amber); } .state.err { color:var(--red); }

  /* ---------- Buttons ---------- */
  .actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:16px; }
  .btn, button {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 16px; border-radius:11px; cursor:pointer;
    font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.3px;
    border:1px solid var(--border-strong);
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    color:var(--text); transition:all .18s ease; box-shadow:0 2px 8px rgba(0,0,0,.25);
    text-decoration:none;
  }
  .btn:hover, button:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.22); }
  .btn svg, button svg { width:14.5px; height:14.5px; }
  .btn.primary, button.primary {
    background:var(--grad); color:#04222c; border-color:transparent; font-weight:700;
    box-shadow:0 6px 20px rgba(52,182,245,.4),0 1px 0 rgba(255,255,255,.35) inset;
  }
  .btn.primary:hover, button.primary:hover { box-shadow:0 8px 26px rgba(52,182,245,.55),0 1px 0 rgba(255,255,255,.35) inset; }
  .btn.ghost-dark, button.ghost-dark { background:rgba(255,255,255,.03); color:var(--muted); box-shadow:none; }
  .btn.ghost-dark:hover, button.ghost-dark:hover { color:var(--text); background:rgba(255,255,255,.06); }
  .btn.danger, button.danger {
    color:var(--red); border-color:rgba(251,113,133,.22);
    background:rgba(251,113,133,.05); box-shadow:none;
  }
  .btn.danger:hover, button.danger:hover { background:rgba(251,113,133,.11); box-shadow:0 0 16px rgba(251,113,133,.12); }
  .btn.success, button.success {
    background:rgba(52,211,153,.1); color:var(--green);
    border-color:rgba(52,211,153,.38); box-shadow:0 0 16px rgba(52,211,153,.1);
  }
  .btn.sm, button.sm { padding:5px 12px; font-size:12px; border-radius:9px; }
  button:disabled { opacity:.45; cursor:not-allowed; transform:none; }

  /* ---------- Header 右侧（demo 组件） ---------- */
  .head-right { display:flex; align-items:center; gap:10px; }
  .icon-btn {
    width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.035);
    border:1px solid var(--border); display:grid; place-items:center; cursor:pointer;
    transition:.2s; font-family:inherit; padding:0; box-shadow:none;
  }
  .icon-btn:hover { border-color:var(--border-strong); background:rgba(255,255,255,.07);
    box-shadow:0 0 14px rgba(52,182,245,.12); transform:none; }
  .icon-btn svg { width:16px; height:16px; stroke:var(--muted); }
  .tabs button .dot, .tab .dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8; }

  /* ---------- Grid（demo 两栏） ---------- */
  .grid { display:grid; grid-template-columns:7fr 5fr; gap:16px; }
  /* 两栏直接子项去掉底部外边距，否则左卡多出的 margin 会把整行撑高、导致左右视觉不等高 */
  .grid > * { margin-bottom:0; }

  /* ---------- info-row（商户信息） ---------- */
  .info-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
  .info-row + .info-row { border-top:1px dashed rgba(255,255,255,.06); }
  .info-label { color:var(--muted); font-size:13px; display:flex; align-items:center; gap:9px; }
  .info-label svg { width:14px; height:14px; stroke:var(--muted-2); }
  .info-value { font-size:13.5px; font-weight:600; text-align:right; }
  .shop-name { font-size:15px; font-weight:700; letter-spacing:.3px; }
  .role-chip {
    font-size:11.5px; font-weight:600; color:#a9d4ff; letter-spacing:.4px;
    padding:3px 11px; border-radius:999px;
    background:rgba(91,141,255,.1); border:1px solid rgba(91,141,255,.28);
    box-shadow:0 0 12px rgba(91,141,255,.1);
  }
  .card-actions { margin-top:16px; display:flex; flex-wrap:wrap; gap:9px; }

  /* ---------- 首次使用引导（Step 1-3）----------
     三步全部完成前，其它页签都锁住；完成后 Step 3 卡片自动收起（知识库里还能「重新建立」）。 */
  .step-head { display:flex; align-items:flex-start; gap:13px; margin-bottom:12px; }
  .step-badge {
    width:34px; height:34px; border-radius:11px; flex:none;
    display:grid; place-items:center; font-size:15px; font-weight:800; color:#04222c;
    background:var(--grad); box-shadow:0 6px 18px rgba(52,182,245,.35),0 1px 0 rgba(255,255,255,.35) inset;
    transition:all .2s ease;
  }
  .step-head-main { flex:1; min-width:0; }
  .step-kicker { font-size:10.5px; font-weight:700; letter-spacing:2px; color:#7fd7ea; margin-bottom:3px; }
  .step-head-main h2 { font-size:16px; font-weight:700; letter-spacing:.3px; }
  .step-state {
    flex:none; font-size:11.5px; font-weight:700; letter-spacing:.3px; color:var(--muted);
    padding:4px 11px; border-radius:999px; background:rgba(255,255,255,.045);
    border:1px solid var(--border); white-space:nowrap;
  }
  .step-desc { color:var(--muted); line-height:1.75; margin-bottom:14px; }
  .step-desc b { color:var(--text); font-weight:600; }
  .step-actions { display:flex; flex-wrap:wrap; gap:9px; }
  .step-hint { font-size:12px; color:var(--muted-2); line-height:1.7; margin-top:10px; }
  .step-field { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .step-field .step-label { font-size:12.5px; color:var(--muted); flex:none; width:74px; }
  .step-field .text-input { margin:0; flex:1; }
  /* 已完成：徽标变绿打勾（复用 Step 状态胶囊的绿色系） */
  .step-card.done .step-badge {
    background:rgba(52,211,153,.14); color:var(--green);
    border:1px solid rgba(52,211,153,.4); box-shadow:none;
  }
  .step-card.done .step-state {
    color:var(--green); background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.35);
  }
  /* 未轮到：整卡降透明度，避免和当前该做的那步抢注意力 */
  .step-card.locked { opacity:.58; }
  .step-card.locked .step-badge { background:rgba(255,255,255,.08); color:var(--muted); box-shadow:none; }

  /* ---------- 渐变状态大卡（demo） ---------- */
  /* 用 flex 让右侧卡片撑满整行高度，与左「商户」卡等高（不管哪边内容多） */
  .status-wrap { position:relative; display:flex; }
  .status-wrap > .card { flex:1; margin-bottom:0; }
  .status-wrap::after {
    content:""; position:absolute; inset:-18% -8% -10%; z-index:-1;
    background:radial-gradient(60% 70% at 50% 40%,rgba(56,190,245,.3),transparent 70%);
    filter:blur(26px); pointer-events:none;
  }
  /* 双态：未连接=暗灰（不刺眼）；已连接=青蓝点亮。动画 1.5s（用户口径）。
     ⚠️ 让文字「跟着背景同速变黑」的正确做法是：**不给后代单独加 transition**。
     父级 color 过渡时每一帧都在变，子元素直接继承当前帧的值 → 天然同步；
     若给 `.status-card *` 也加 transition，等于给"已在动画的值"再套一层缓动 → 文字明显慢半拍
     （实测踩过：背景已经亮完，文字还在灰→黑慢慢爬）。
     ⚠️ 下面所有 1.5s 必须一致。 */
  .status-card {
    background:linear-gradient(155deg,#2a323f 0%,#1c222c 62%,#242c39 100%);
    border:1px solid rgba(255,255,255,.09);
    color:#c7d2e4; display:flex; flex-direction:column;
    box-shadow:0 14px 40px rgba(2,5,12,.5);
    --sc-icon:#8ea0ba; --sc-bar:rgba(255,255,255,.12);
    --sc-bar-fill:linear-gradient(90deg,#4c5769,#717f96); --sc-bar-glow:0 0 8px rgba(255,255,255,.08);
    transition:color 1.5s ease, border-color 1.5s ease, box-shadow 1.5s ease;
  }
  .status-card::before {
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); opacity:.9; z-index:2;
  }
  .status-card::after {
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(260px 170px at 88% -12%,rgba(255,255,255,.28),transparent 65%),
      radial-gradient(220px 200px at -12% 112%,rgba(3,58,90,.35),transparent 60%),
      var(--grad);
    opacity:0; transform:scale(1.03);
    transition:opacity 1.5s ease, transform 1.5s ease;
  }
  .status-card.lit {
    color:#04222c; border-color:rgba(255,255,255,.18);
    box-shadow:0 18px 46px rgba(36,140,220,.32),0 0 60px rgba(52,182,245,.14),0 1px 0 rgba(255,255,255,.4) inset;
    --sc-icon:#05242e; --sc-bar:rgba(4,34,44,.25);
    --sc-bar-fill:linear-gradient(90deg,#07364a,#0e5d77); --sc-bar-glow:0 0 8px rgba(127,240,201,.4);
  }
  .status-card.lit::after { opacity:1; transform:scale(1); }
  /* 注意：绝不给 `.status-card *` 加 color transition（会双重缓动 → 文字慢半拍），靠继承即可 */
  .status-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
  .status-platform { display:flex; align-items:center; gap:10px; font-weight:700; font-size:13.5px; letter-spacing:.3px; }
  .platform-tile {
    width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.28); display:grid; place-items:center;
    box-shadow:0 2px 8px rgba(4,40,60,.18);
  }
  .platform-tile svg { width:16px; height:16px; stroke:var(--sc-icon); transition:stroke 1.5s ease; }
  /* 右上角「未连接」胶囊：未点亮=灰（不显绿）；点亮（已连接）才转绿 + 呼吸点 */
  .status-pill {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(14,20,30,.72); color:#9aa7ba;
    font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; letter-spacing:.4px;
    border:1px solid rgba(154,167,186,.26); box-shadow:none;
    transition:color 1.5s ease, background 1.5s ease, border-color 1.5s ease, box-shadow 1.5s ease;
  }
  .status-card.lit .status-pill {
    background:rgba(4,34,44,.8); color:#7ff0c9;
    border:1px solid rgba(127,240,201,.25); box-shadow:0 0 14px rgba(127,240,201,.18);
  }
  .status-pill .pulse {
    width:6px; height:6px; border-radius:50%; background:#8592a6; box-shadow:none;
    transition:background 1.5s ease;
  }
  .status-card.lit .status-pill .pulse {
    background:#4ade80; animation:pulse 2.2s infinite;
  }
  @keyframes pulse {
    0%{box-shadow:0 0 0 0 rgba(127,240,201,.5)}
    70%{box-shadow:0 0 0 7px rgba(127,240,201,0)}
    100%{box-shadow:0 0 0 0 rgba(127,240,201,0)}
  }
  .status-meta { margin-top:auto; position:relative; z-index:1; }
  .status-meta .cn { font-size:12px; font-weight:600; opacity:.82; letter-spacing:.2px;
    display:flex; align-items:center; gap:7px; margin-bottom:12px; word-break:break-all; }
  .status-meta .cn svg { width:13px; height:13px; flex:none; stroke:var(--sc-icon); transition:stroke 1.5s ease; }
  /* 两种底色上绿色都偏糊 → 登录态等状态字用高对比暖橙 */
  .status-meta .state.ok { color:#ff9f1c; }
  .countdown-label { display:flex; justify-content:space-between; font-size:11.5px; font-weight:600;
    opacity:.85; margin-bottom:6px; letter-spacing:.3px; }
  .countdown-label b { font-size:12.5px; letter-spacing:.5px; }
  .bar { height:6px; border-radius:99px; background:var(--sc-bar); overflow:hidden;
    box-shadow:0 1px 3px rgba(4,34,44,.2) inset; transition:background 1.5s ease; }
  .bar > i { display:block; height:100%; width:38%; border-radius:99px;
    background:var(--sc-bar-fill); box-shadow:var(--sc-bar-glow); transition:background 1.5s ease; }

  /* ---------- 自动接待浮层 ---------- */
  /* 只在 5 秒「防误触倒计时（arming）」期间全屏显示：盖住面板，但**碰不到 App 外层左侧导航**
     （浮层在 webview 内部）；倒计时结束正式接入后**渐隐消失**（不遮挡面板上的按钮，如「平滑重启」），
     改在右下角「自动接待」开关旁显示持续接待时长。 */
  .admit-overlay {
    position:fixed; inset:0; z-index:60; display:grid; place-items:center;
    background:
      radial-gradient(820px 380px at 82% -10%,rgba(52,182,245,.14),transparent 62%),
      radial-gradient(620px 420px at 4% 6%,rgba(46,230,207,.09),transparent 58%),
      radial-gradient(900px 520px at 50% 118%,rgba(91,141,255,.12),transparent 60%),
      linear-gradient(180deg,#080b13 0%,#06080e 46%,#070a12 100%);
    opacity:0; pointer-events:none; transition:opacity .55s ease;
  }
  .admit-overlay.on { opacity:1; pointer-events:auto; }
  .admit-card {
    width:min(360px,86vw); border-radius:20px; padding:26px 24px 22px; text-align:center;
    background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.01)), var(--card-solid);
    border:1px solid var(--border-strong);
    box-shadow:0 24px 70px rgba(2,5,12,.7),0 0 50px rgba(52,182,245,.16);
    animation:admitPop .3s cubic-bezier(.2,.9,.3,1.25);
  }
  @keyframes admitPop { from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }
  .admit-badge {
    display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.5px;
    color:#7ff0c9; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3);
    padding:6px 15px; border-radius:999px;
  }
  .admit-badge .pulse { width:7px; height:7px; border-radius:50%; background:#4ade80;
    box-shadow:0 0 0 0 rgba(127,240,201,.8); animation:pulse 2.2s infinite; }
  .admit-timer { margin:16px 0 4px; font-size:46px; font-weight:800; letter-spacing:2px;
    font-variant-numeric:tabular-nums; color:#e8eefb; line-height:1; }
  .admit-hint { font-size:12.5px; color:var(--muted); margin-bottom:20px; line-height:1.5; }
  .admit-stop { width:100%; justify-content:center; }
  /* 开关旁「接待中 · mm:ss」小徽标（正式接入后显示，替代浮层） */
  .admit-elapsed {
    display:inline-flex; align-items:center; margin-left:8px; font-size:11.5px; font-weight:700;
    color:#7ff0c9; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3);
    padding:3px 9px; border-radius:999px; font-variant-numeric:tabular-nums; letter-spacing:.3px;
  }

  /* ---------- 会话页（模拟阿里卖家端 IM） ---------- */
  .im-wrap { padding:0; overflow:hidden; }
  /* 会话整块比页面底色亮一档：和页面背景拉开层次，边界更清楚（原来玻璃底和背景太接近） */
  .card.im-wrap {
    background:
      linear-gradient(165deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.015) 45%,rgba(255,255,255,.03) 100%),
      rgba(32,38,52,.92);
    border-color:rgba(148,163,184,.28);
    box-shadow:0 18px 46px rgba(2,5,12,.55),0 1px 0 rgba(255,255,255,.06) inset;
  }
  .im-layout { position:relative; display:grid; grid-template-columns:308px minmax(0,1fr);
    height:min(70vh,640px); min-height:420px; }
  /* 会话页底部状态条：自动接待开/关 */
  .im-admit-bar { display:flex; align-items:center; gap:8px; flex:none;
    padding:10px 16px; border-top:1px solid var(--border);
    font-size:12.5px; color:var(--muted-2); background:rgba(255,255,255,.02); }
  .im-admit-bar .dot { width:8px; height:8px; border-radius:50%; background:#8a93a6; flex:none; }
  .im-admit-bar.on { color:#7ff0c9; }
  .im-admit-bar.on .dot { background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.16); }
  .im-admit-bar.arming { color:#f0b429; }
  .im-admit-bar.arming .dot { background:#f0b429; }
  .im-left, .im-mid { min-width:0; min-height:0; display:flex; flex-direction:column; }
  .im-left { border-right:1px solid var(--border); }
  /* 右侧客户面板 = 悬浮抽屉：展开时**覆盖**在对话上层（不占中栏宽度），收起时只露 26px 把手；
     默认收起，不影响商户看聊天记录。 */
  .im-right {
    position:absolute; top:0; right:0; bottom:0; width:380px; z-index:6;
    display:flex; align-items:stretch; background:var(--card-solid);
    border-left:1px solid var(--border);
    box-shadow:-16px 0 34px rgba(2,5,12,.5);
    transform:translateX(calc(100% - 26px));
    transition:transform .28s cubic-bezier(.3,.8,.3,1), box-shadow .28s ease;
  }
  .im-right.open { transform:none; box-shadow:0 0 0 rgba(0,0,0,0); }
  .im-right-tab {
    width:26px; flex:none; display:grid; place-items:center; cursor:pointer;
    border-right:1px solid var(--border); color:var(--muted-2); user-select:none;
  }
  .im-right-tab:hover { color:var(--text); background:rgba(255,255,255,.04); }
  .im-right-tab svg { width:15px; height:15px; transition:transform .28s ease; }
  .im-right.open .im-right-tab svg { transform:rotate(180deg); }
  .im-right-scroll { flex:1; min-width:0; overflow-y:auto; padding:16px 16px 20px; }
  /* 客户卡片（借鉴设计稿右栏顶部，配色沿用本页深色） */
  .im-profile { text-align:center; padding:4px 0 14px; border-bottom:1px solid var(--border); margin-bottom:14px; }
  .im-profile .im-avatar.lg { width:50px; height:50px; border-radius:16px; font-size:15px; margin:0 auto 9px; }
  .im-profile-name { font-size:13.5px; font-weight:700; }
  .im-profile-region { font-size:11.5px; color:var(--muted-2); margin-top:3px; }
  .im-left-head { display:flex; align-items:center; justify-content:space-between; padding:13px 15px 7px; }
  .im-left-head h3 { font-size:14px; font-weight:700; }
  .im-tabs { display:flex; gap:16px; padding:0 13px; border-bottom:1px solid var(--border); flex:none; }
  .im-tab { font-size:12.5px; color:var(--muted); padding:7px 0; cursor:pointer; position:relative; white-space:nowrap; }
  .im-tab.on { color:var(--cyan); font-weight:700; }
  .im-tab.on::after { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-1px;
    width:16px; height:3px; border-radius:2px; background:var(--cyan); }
  .im-conv-list { flex:1; overflow-y:auto; min-height:0; }
  .im-conv { display:flex; gap:12px; padding:14px 14px; cursor:pointer; border-bottom:1px solid var(--line-soft); }
  .im-conv:hover { background:rgba(255,255,255,.04); }
  .im-conv.on { background:rgba(52,182,245,.1); box-shadow:inset 3px 0 0 var(--cyan); }
  .im-avatar { width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
    font-size:15px; font-weight:700; color:#cfe0ff; letter-spacing:.3px;
    background:linear-gradient(135deg,#33405a,#1b2231); border:1px solid rgba(255,255,255,.08); }
  .im-avatar.sm { width:28px; height:28px; border-radius:8px; font-size:10.5px; }
  .im-conv-main { flex:1; min-width:0; }
  .im-conv-r1 { display:flex; align-items:center; gap:6px; }
  .im-conv-name { flex:0 1 auto; min-width:0; font-size:13px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .im-conv-time { margin-left:auto; font-size:11px; color:var(--muted-2); flex:none; }
  .im-conv-r2 { display:flex; align-items:center; gap:8px; margin-top:7px; }
  .im-conv-msg { flex:1; min-width:0; font-size:12px; color:var(--muted-2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .im-badge { min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:var(--red);
    color:#fff; font-size:10.5px; line-height:17px; text-align:center; flex:none; font-weight:700; }
  /* 国旗小图标（与阿里国际站 IM 一样用图片；Windows 不认 emoji 国旗，会退化成 CN/US 文字） */
  .im-flag { width:18px; height:13px; border-radius:2px; object-fit:cover; flex:none;
    display:inline-block; vertical-align:middle; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
  .im-flag-fb { font-size:10px; color:var(--muted-2); line-height:1; }
  /* 「接待」开关：开=自动接待，关=不接待（不清红点/未读，留给人工） */
  .im-switch { width:34px; height:19px; border-radius:10px; flex:none; position:relative; cursor:pointer;
    background:#3a4152; transition:background .15s; }
  .im-switch::after { content:""; position:absolute; top:2px; left:2px; width:15px; height:15px;
    border-radius:50%; background:#cfd6e4; transition:transform .15s; }
  .im-switch.on { background:var(--cyan); }
  .im-switch.on::after { transform:translateX(15px); background:#fff; }
  .im-switch.busy { opacity:.5; pointer-events:none; }
  .im-chat-head { display:flex; align-items:center; gap:10px; padding:11px 16px;
    border-bottom:1px solid var(--border); flex:none; min-height:56px; }
  .im-head-who { min-width:0; }
  .im-head-name { display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; }
  .im-head-sub { font-size:11.5px; color:var(--muted-2); margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .im-chat-body { flex:1; overflow-y:auto; min-height:0; padding:14px 0 18px; }
  .im-day { text-align:center; margin:2px 0 12px; }
  .im-day span { font-size:10.5px; color:var(--muted-2); background:rgba(255,255,255,.06);
    padding:3px 11px; border-radius:12px; }
  .im-msg { display:flex; gap:9px; margin:0 16px 14px; align-items:flex-start; }
  .im-msg.me { flex-direction:row-reverse; }
  .im-bubble-col { max-width:min(760px,80%); display:flex; flex-direction:column; }
  .im-msg.me .im-bubble-col { align-items:flex-end; }
  .im-sender { font-size:10.5px; color:var(--muted-2); margin-bottom:4px; padding:0 4px; }
  .im-bubble { background:var(--card-solid); border:1px solid var(--border); padding:8px 12px;
    border-radius:4px 13px 13px 13px; font-size:12.5px; line-height:1.65; color:var(--text);
    word-break:break-word; white-space:pre-wrap; }
  /* 我方气泡：纯色底（不用渐变），与深色主题协调 */
  .im-msg.me .im-bubble { background:#2f7fe0; border-color:#2f7fe0; color:#fff;
    border-radius:13px 4px 13px 13px; }
  .im-bubble-time { font-size:10.5px; color:var(--muted-2); margin-top:4px; padding:0 4px; }
  .im-right-sec { margin-bottom:16px; }
  .im-right-sec h4 { font-size:12.5px; font-weight:700; margin-bottom:9px;
    display:flex; align-items:center; gap:7px; }
  /* 跟进进度：已收集 / 还缺 用小标签展示（比一整段文字省空间、也更好扫） */
  .im-prog-label { font-size:11px; color:var(--muted-2); margin:9px 0 5px; }
  .im-chips { display:flex; flex-wrap:wrap; gap:5px; }
  .im-chip { font-size:11px; padding:2.5px 8px; border-radius:8px;
    background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--muted);
    max-width:100%; overflow-wrap:anywhere; }
  .im-chip.miss { background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.25); color:#f5cf7a; }
  .im-prog-time { font-size:10.5px; color:var(--muted-2); margin-top:9px; }
  .im-right-sec h4::before { content:""; width:3px; height:12px; border-radius:2px; background:var(--grad); }
  .im-kv { display:flex; font-size:12px; line-height:1.5; padding:4px 0; gap:10px; }
  .im-kv .k { width:68px; flex:none; color:var(--muted-2); }
  .im-kv .v { color:var(--text); min-width:0; word-break:break-word; }
  .im-empty { padding:24px 14px; text-align:center; color:var(--muted-2); font-size:12.5px; }

  /* ---------- 对话测试（气泡对话：上面滚动、下面输入） ---------- */
  .ct-wrap { display:flex; flex-direction:column; height:min(60vh,560px); min-height:340px;
    border:1px solid var(--border); border-radius:16px; background:rgba(10,13,19,.5); overflow:hidden; }
  .ct-body { flex:1; overflow-y:auto; min-height:0; padding:18px 18px 4px;
    display:flex; flex-direction:column; }
  .ct-empty { margin:auto; text-align:center; color:var(--muted-2); font-size:12.5px; line-height:1.9; }
  .ct-msg { display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
  .ct-msg.me { flex-direction:row-reverse; }
  .ct-av { width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center;
    font-size:11px; font-weight:700; color:#cfeffe;
    background:rgba(120,180,255,.14); border:1px solid rgba(120,180,255,.22); }
  .ct-msg.me .ct-av { color:#eaf6ff; background:rgba(47,127,224,.3); border-color:rgba(47,127,224,.5); }
  .ct-col { max-width:min(620px,76%); display:flex; flex-direction:column; }
  .ct-msg.me .ct-col { align-items:flex-end; }
  .ct-bubble { padding:10px 14px; border-radius:4px 14px 14px 14px; font-size:13px; line-height:1.7;
    background:var(--card-solid); border:1px solid var(--border); color:var(--text);
    white-space:pre-wrap; word-break:break-word; }
  .ct-msg.me .ct-bubble { background:#2f7fe0; border-color:#2f7fe0; color:#fff;
    border-radius:14px 4px 14px 14px; }
  .ct-bubble.think { color:var(--muted-2); }
  .ct-bubble.err { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#ffb4b4; }
  .ct-inputbar { flex:none; display:flex; gap:10px; align-items:flex-end; padding:12px 14px;
    border-top:1px solid var(--border); background:rgba(10,13,19,.62); }
  .ct-inputbar .text-input { margin:0; flex:1; min-height:44px; max-height:140px; resize:none; }
  .ct-inputbar .btn { flex:none; height:44px; }

  /* ---------- detail-grid（连接详情） ---------- */
  .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }
  .detail-row { display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:14px 0; border-bottom:1px dashed rgba(255,255,255,.06); }
  .detail-row .k { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
  .detail-row .k .ic { width:28px; height:28px; border-radius:9px; flex:none;
    background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.08); display:grid; place-items:center; }
  .detail-row .k .ic svg { width:13.5px; height:13.5px; stroke:#97a2b6; }
  .detail-row .v { font-size:13px; font-weight:600; text-align:right; }
  .v.mono { font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; color:#c3cddf; font-size:12.5px; letter-spacing:.4px; }
  .v.ok { color:var(--green); display:inline-flex; align-items:center; gap:6px; }
  .v.ok::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--green);
    box-shadow:0 0 8px rgba(52,211,153,.8); }
  .v .hl { color:var(--cyan); }
  .v .dim { color:var(--muted); font-weight:500; }
  .v .warm { color:var(--amber); }
  .detail-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); }
  .btn-row { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }

  /* ---------- Stats（调用记录统计卡） ---------- */
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
  .stat {
    border-radius:var(--radius); padding:18px 20px; position:relative; overflow:hidden;
    border:1px solid var(--border);
    background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 55%),rgba(18,22,31,.75);
    box-shadow:0 10px 30px rgba(2,5,12,.4),0 1px 0 rgba(255,255,255,.05) inset;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .stat::after { content:""; position:absolute; right:-34px; top:-34px; width:110px; height:110px; border-radius:50%;
    background:radial-gradient(circle,rgba(91,141,255,.14),transparent 70%); }
  .stat .s-top { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
  .s-ic { width:28px; height:28px; border-radius:9px; flex:none;
    background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.09); display:grid; place-items:center; }
  .s-ic svg { width:14px; height:14px; stroke:#9fb0c9; }
  .stat .s-label { font-size:12.5px; color:var(--muted); letter-spacing:.3px; }
  .stat .s-num { font-size:27px; font-weight:800; letter-spacing:.5px; line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,#f4f8ff,#aeb9cc);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .stat .s-sub { margin-top:8px; font-size:11px; color:var(--muted-2); letter-spacing:.2px; }
  .stat.hl {
    background:radial-gradient(200px 120px at 90% -20%,rgba(255,255,255,.3),transparent 65%),var(--grad);
    border-color:rgba(255,255,255,.2);
    box-shadow:0 14px 36px rgba(45,160,230,.3),0 0 44px rgba(52,182,245,.12),0 1px 0 rgba(255,255,255,.4) inset;
  }
  .stat.hl::after { display:none; }
  .stat.hl .s-ic { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.3); }
  .stat.hl .s-ic svg { stroke:#053040; }
  .stat.hl .s-label { color:rgba(4,34,44,.72); font-weight:600; }
  .stat.hl .s-num { background:none; -webkit-text-fill-color:#052a38; color:#052a38; font-size:31px; }
  .stat.hl .s-sub { color:rgba(4,34,44,.6); }
  .stat.hl .s-chip { position:absolute; right:14px; bottom:14px; font-size:10.5px; font-weight:700;
    color:#0a5148; background:rgba(255,255,255,.55); padding:3px 9px; border-radius:999px; letter-spacing:.4px; }
  .billing-note { display:flex; gap:10px; align-items:flex-start; color:var(--muted);
    font-size:12.5px; line-height:1.8; margin:2px 2px 0; }
  .billing-note svg { width:14px; height:14px; stroke:var(--cyan); flex:none; margin-top:4px; }
  .billing-note b { color:#9fe9ff; font-weight:600; }

  /* ---------- 日志行（demo call-logs） ---------- */
  .logs { margin-top:16px; }
  .log-row { display:flex; align-items:center; gap:14px; padding:15px 6px;
    border-bottom:1px solid rgba(255,255,255,.06); transition:.18s; }
  .log-row:last-child { border-bottom:none; }
  .log-row:hover { background:rgba(255,255,255,.02); margin:0 -6px; padding-left:12px; padding-right:12px; border-radius:12px; }
  .log-ic { width:34px; height:34px; border-radius:11px; flex:none;
    background:linear-gradient(160deg,rgba(45,212,238,.13),rgba(91,141,255,.06));
    border:1px solid rgba(45,212,238,.18); display:grid; place-items:center; }
  .log-ic svg { width:15px; height:15px; stroke:#7dd8ee; }
  .log-body { min-width:0; flex:1; }
  .log-msg { font-size:13.5px; font-weight:600; color:#dde4f0; letter-spacing:.2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .log-meta { display:flex; align-items:center; gap:9px; margin-top:5px; }
  .log-time { font-size:11.5px; color:var(--muted-2); font-variant-numeric:tabular-nums;
    display:inline-flex; align-items:center; gap:5px; }
  .log-time svg { width:11px; height:11px; stroke:var(--muted-2); }
  .log-status { font-size:10.5px; font-weight:600; color:var(--muted);
    padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--border); }
  .log-fee { flex:none; display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:700; color:var(--green); padding:6px 13px; border-radius:999px;
    background:rgba(52,211,153,.09); border:1px solid rgba(52,211,153,.28);
    box-shadow:0 0 14px rgba(52,211,153,.08); font-variant-numeric:tabular-nums; }
  .log-fee svg { width:12px; height:12px; }
  .log-fee.fail { color:var(--red); background:rgba(251,113,133,.09); border-color:rgba(251,113,133,.28); }

  /* ---------- 提示条 / 表单行 / 方法切换（demo knowledge-base） ---------- */
  .callout { display:flex; gap:11px; padding:13px 15px; border-radius:13px; margin-bottom:22px;
    background:linear-gradient(135deg,rgba(251,191,36,.09),rgba(251,191,36,.035));
    border:1px solid rgba(251,191,36,.22); box-shadow:0 0 22px rgba(251,191,36,.06); }
  .callout .w-ic { width:26px; height:26px; border-radius:8px; flex:none;
    background:rgba(251,191,36,.14); display:grid; place-items:center; }
  .callout .w-ic svg { width:14px; height:14px; stroke:var(--amber); }
  .callout p { color:#e6cf94; font-size:12.5px; line-height:1.75; }
  .callout b { color:#f5d488; }
  .form-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:11px 0; }
  .form-row + .form-row { border-top:1px dashed rgba(255,255,255,.06); }
  .form-row label { color:var(--muted); font-size:13px; display:flex; align-items:center; gap:9px; }
  .form-row label svg { width:14px; height:14px; stroke:var(--muted-2); }
  /* 三种建库方式固定一行：等宽平分，不换行 */
  .method-switch { display:flex; flex-wrap:nowrap; gap:8px; padding:5px; border-radius:14px;
    width:100%; max-width:100%;
    background:rgba(0,0,0,.25); border:1px solid var(--border); margin-bottom:20px; }
  .method-switch button { height:44px; border:none; border-radius:10px; cursor:pointer;
    flex:1 1 0; min-width:0; white-space:nowrap;
    background:transparent; color:var(--muted); font-family:inherit; font-size:13px; font-weight:600;
    letter-spacing:.3px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:.22s; box-shadow:none; padding:0 14px; }
  .method-switch button .n { width:18px; height:18px; border-radius:6px; font-size:11px; font-weight:700;
    display:grid; place-items:center; background:rgba(255,255,255,.08); color:var(--muted); }
  .method-switch button.on { background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
    color:var(--text); box-shadow:0 4px 14px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.08) inset; }
  .method-switch button.on .n { background:var(--grad); color:#04222c; }
  .method-panel { display:none; }
  .method-panel.show { display:block; animation:fade .3s ease; }
  @keyframes fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
  .method-desc { color:var(--muted); font-size:13px; line-height:1.8; margin-bottom:16px; }
  code { font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:#9fe9ff;
    background:rgba(45,212,238,.08); border:1px solid rgba(45,212,238,.2); padding:1.5px 7px; border-radius:6px; }
  .foot-note { display:flex; gap:9px; color:var(--muted-2); font-size:12px; line-height:1.8;
    padding-top:14px; border-top:1px solid rgba(255,255,255,.05); }
  .foot-note svg { width:13px; height:13px; stroke:var(--muted-2); flex:none; margin-top:3px; }
  .dropzone { border:1.5px dashed rgba(45,212,238,.3); border-radius:15px; padding:34px 24px; text-align:center;
    background:radial-gradient(320px 140px at 50% 0%,rgba(45,212,238,.08),transparent 70%),rgba(0,0,0,.18);
    transition:.2s; cursor:pointer; }
  .dropzone:hover { border-color:rgba(45,212,238,.55); box-shadow:0 0 30px rgba(45,212,238,.1); }
  .dz-ic { width:44px; height:44px; border-radius:13px; margin:0 auto 12px;
    background:linear-gradient(160deg,rgba(45,212,238,.18),rgba(91,141,255,.1));
    border:1px solid rgba(45,212,238,.25); display:grid; place-items:center; box-shadow:0 0 22px rgba(45,212,238,.15); }
  .dz-ic svg { width:20px; height:20px; stroke:var(--cyan); }
  .dropzone .dz-t { font-size:13.5px; font-weight:700; margin-bottom:5px; }
  .dropzone .dz-s { font-size:12px; color:var(--muted); line-height:1.7; }
  .dropzone .dz-s b { color:#9fe9ff; font-weight:600; }
  .dropzone.drag { border-color:rgba(45,212,238,.75); box-shadow:0 0 36px rgba(45,212,238,.2);
    background:radial-gradient(320px 140px at 50% 0%,rgba(45,212,238,.16),transparent 70%),rgba(0,0,0,.24); }
  .intro { color:var(--muted); font-size:13px; line-height:1.75; margin-bottom:20px; }

  /* ---------- Switch（开关） ---------- */
  .switch { display:inline-flex; align-items:center; gap:11px; margin-top:16px; cursor:pointer; user-select:none; }
  .switch input { display:none; }
  .switch .track {
    width:48px; height:27px; border-radius:99px; flex:none; position:relative; transition:.25s;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
    box-shadow:0 2px 6px rgba(0,0,0,.3) inset;
  }
  .switch .track i {
    position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%;
    background:linear-gradient(180deg,#98a2b4,#717b8d); transition:.25s;
    box-shadow:0 2px 5px rgba(0,0,0,.35);
  }
  .switch input:checked + .track {
    background:var(--grad); border-color:transparent;
    box-shadow:0 4px 14px rgba(52,182,245,.4),0 1px 0 rgba(255,255,255,.3) inset;
  }
  .switch input:checked + .track i { left:23px; background:#06242e; box-shadow:0 1px 3px rgba(4,34,44,.5); }
  .switch > span { font-size:13px; font-weight:600; letter-spacing:.2px; }
  .switch b { color:var(--amber); font-weight:600; }

  /* ---------- List（列表） ---------- */
  .list { list-style:none; margin:0; padding:0; }
  .list li { padding:15px 6px; border-bottom:1px solid rgba(255,255,255,.06); transition:.18s; }
  .list li:last-child { border-bottom:none; }
  .list li:hover { background:rgba(255,255,255,.02); margin:0 -6px; padding-left:12px; padding-right:12px; border-radius:12px; }
  .list .empty { color:var(--muted); text-align:center; padding:24px 0; }
  .li-title { font-weight:600; color:#dde4f0; letter-spacing:.2px; }
  .li-meta { color:var(--muted-2); font-size:12px; margin-top:5px; }
  .unread { color:var(--cyan); font-weight:700; }

  /* ---------- 提醒卡片（需人工处理） ---------- */
  .rem-id {
    flex:none; font-size:11.5px; font-weight:600; color:var(--muted-2);
    letter-spacing:.4px; font-variant-numeric:tabular-nums;
  }
  .rem-top .rem-id { padding-right:9px; border-right:1px solid rgba(255,255,255,.12); }
  .rem-sub { font-size:12px; color:var(--muted); }
  .rem-ticket {
    margin-top:10px; padding:13px 15px; border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    transition:border-color .18s;
  }
  .rem-ticket:hover { border-color:rgba(255,255,255,.13); }
  .rem-ticket.high {
    border-color:rgba(255,99,99,.22);
    background:linear-gradient(180deg, rgba(255,80,80,.055), rgba(255,80,80,.012));
    box-shadow:inset 3px 0 0 #ff6b6b;
  }
  .rem-top { display:flex; align-items:baseline; gap:8px; min-width:0; }
  .rem-q-label { flex:none; font-size:12px; color:var(--muted-2); }
  .rem-q-text { flex:1; min-width:0; font-size:13.5px; line-height:1.6; color:#e6ecf7; }
  .rem-item { margin-top:11px; padding-top:11px; border-top:1px dashed rgba(255,255,255,.08); }
  .rem-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .rem-cat {
    flex:none; display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; letter-spacing:.3px; color:#7fdcf0;
  }
  .rem-cat::before {
    content:""; width:6px; height:6px; border-radius:50%;
    background:currentColor; box-shadow:0 0 7px currentColor;
  }
  .rem-cat.high { color:#ff8f8f; }
  .rem-title { flex:1; min-width:180px; font-size:14px; font-weight:600; color:#e6ecf7; line-height:1.55; }
  .rem-action { margin-top:8px; font-size:12.5px; line-height:1.7; color:#b9c4d4; }
  .rem-action .k { color:var(--muted-2); margin-right:6px; }
  .rem-foot { margin-top:11px; display:flex; justify-content:flex-end; }

  /* ---------- 文本 ---------- */
  .hint { color:var(--muted); font-size:12.5px; line-height:1.75; margin-top:8px; }
  .hint b { color:#9fe9ff; font-weight:600; }
  h3 { color:#c2ccdc; font-weight:700; letter-spacing:.3px; }
  h4 { color:#c2ccdc; font-weight:700; letter-spacing:.3px; }
  code {
    font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:#9fe9ff;
    background:rgba(45,212,238,.08); border:1px solid rgba(45,212,238,.2);
    padding:1.5px 7px; border-radius:6px;
  }
  .msg { font-size:13px; margin-top:10px; }
  .msg.ok { color:var(--green); } .msg.err { color:var(--red); }
  #uploadMsg { margin-top:10px; font-size:13px; }
  #uploadMsg.ok { color:var(--green); } #uploadMsg.err { color:var(--red); }

  /* ---------- 日志 ---------- */
  .log {
    background:rgba(0,0,0,.35); color:#b7c2d4; border:1px solid var(--border);
    border-radius:12px; padding:12px; max-height:260px; overflow:auto;
    font-size:12px; line-height:1.6; white-space:pre-wrap; word-break:break-all; margin:10px 0 0;
    font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  }
  .log .l-ok { color:#7ee787; } .log .l-warn { color:var(--amber); } .log .l-err { color:var(--red); }

  /* ---------- 表单控件 ---------- */
  .text-input {
    width:100%; padding:9px 13px; border:1px solid var(--border-strong); border-radius:11px;
    background:rgba(0,0,0,.28); color:var(--text); font-family:inherit; font-size:13px;
    font-weight:600; letter-spacing:.3px; margin:8px 0; transition:.2s;
    box-shadow:0 2px 8px rgba(0,0,0,.25) inset;
  }
  .text-input:focus { outline:none; border-color:rgba(45,212,238,.55);
    box-shadow:0 0 0 3px rgba(45,212,238,.12),0 2px 8px rgba(0,0,0,.25) inset; }
  .text-input::placeholder { color:#4d5666; font-weight:500; }
  input[type=date].text-input { color-scheme:dark; }
  input[type=number].text-input { font-variant-numeric:tabular-nums; }
  select.text-input { cursor:pointer; text-overflow:ellipsis; }
  select.text-input option { background:#0d1522; color:var(--text); }
  input[type=file] { display:block; margin:10px 0; font-size:13px; color:var(--muted); }
  textarea {
    background:rgba(0,0,0,.28); color:var(--text); border:1px solid var(--border-strong);
    border-radius:11px; padding:9px 13px; font-family:inherit; font-size:13px; line-height:1.6;
    resize:vertical;
  }
  textarea:focus { outline:none; border-color:rgba(45,212,238,.55);
    box-shadow:0 0 0 3px rgba(45,212,238,.12); }
  textarea::placeholder { color:#4d5666; }
  select {
    background:rgba(0,0,0,.28); color:var(--text); border:1px solid var(--border-strong);
    border-radius:10px; padding:7px 11px; font-family:inherit; font-size:13px;
  }
  select:focus { outline:none; border-color:rgba(45,212,238,.55); }
  select option { background:var(--card-solid); color:var(--text); }

  /* 面板切换：未激活的面板隐藏（用 :not 保留各面板自身的 display，如 .grid） */
  [data-pane]:not(.pane-on) { display:none; }

  /* ============ 待回复（复刻 demo：pending-replies） ============ */
  .callout-info { display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border-radius:13px;
    margin-bottom:16px; background:linear-gradient(135deg,rgba(45,212,238,.08),rgba(91,141,255,.03));
    border:1px solid rgba(45,212,238,.22); box-shadow:0 0 22px rgba(45,212,238,.05); }
  .callout-info .c-ic { width:26px; height:26px; border-radius:8px; flex:none;
    background:rgba(45,212,238,.13); display:grid; place-items:center; }
  .callout-info .c-ic svg { width:14px; height:14px; stroke:var(--cyan); }
  .callout-info .callout-body { font-size:12.5px; line-height:1.8; color:#a9c6d6; }
  .callout-info .callout-body b { color:#8fe7f7; font-weight:700; }
  .callout-info .callout-body button { margin-left:2px; }

  .toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    padding-bottom:15px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.06); }
  .mini-stats { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .m-stat { display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
    background:rgba(255,255,255,.04); border:1px solid var(--border); font-size:12px; color:var(--muted); }
  .m-stat svg { width:13px; height:13px; stroke:#9fb0c9; }
  .m-stat b { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
  .m-stat.pending b { color:#7dd8ee; }
  .m-stat.clock { color:var(--muted-2); }
  .filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .chip { height:30px; padding:0 14px; border-radius:99px; cursor:pointer; font-family:inherit;
    font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--muted);
    background:rgba(255,255,255,.035); border:1px solid var(--border); transition:.18s;
    display:inline-flex; align-items:center; gap:6px; box-shadow:none; }
  .chip:hover { color:var(--text); border-color:rgba(255,255,255,.18); }
  .chip.on { color:#06242e; background:var(--grad); border-color:transparent; font-weight:700;
    box-shadow:0 4px 14px rgba(52,182,245,.32); }
  .chip .c-n { font-size:10.5px; font-weight:700; opacity:.75; font-variant-numeric:tabular-nums; }

  .pending-stat { color:var(--muted-2); font-size:12px; line-height:1.75; margin:0 0 4px; }
  .pending-empty { color:var(--muted); text-align:center; padding:28px 0; }

  .customer { position:relative; display:flex; gap:14px; padding:17px 18px; border-radius:15px; margin-top:12px;
    background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 60%);
    border:1px solid var(--border); transition:.2s; overflow:hidden; }
  .customer::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px;
    background:transparent; transition:.2s; }
  .customer:hover { border-color:rgba(45,212,238,.22);
    box-shadow:0 8px 26px rgba(3,10,24,.5),0 0 22px rgba(45,212,238,.06); transform:translateY(-1px); }
  .customer:hover::before { background:rgba(255,255,255,.14); }
  .customer.pinned { border-color:rgba(251,191,36,.28);
    background:radial-gradient(260px 120px at 0% 0%,rgba(251,191,36,.07),transparent 70%),
      linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 60%); }
  .customer.pinned::before { background:linear-gradient(180deg,#fbbf24,#f59e0b); box-shadow:0 0 12px rgba(251,191,36,.55); }
  .cu-avatar { position:relative; width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center;
    font-size:14px; font-weight:800; color:#dce6f5; background:linear-gradient(150deg,#324059,#1d2433);
    border:1px solid rgba(255,255,255,.12); box-shadow:0 4px 12px rgba(0,0,0,.3); }
  .country { position:absolute; right:-5px; bottom:-5px; font-size:9px; font-weight:800; letter-spacing:.4px;
    padding:1.5px 5px; border-radius:6px; color:#bfeaff; background:rgba(10,28,42,.92);
    border:1px solid rgba(125,216,238,.4); }
  .cu-main { flex:1; min-width:0; }
  .cu-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px; }
  .cu-name { font-size:14px; font-weight:700; letter-spacing:.2px; }
  .cu-company { font-size:12px; color:var(--muted); font-weight:500; display:inline-flex; align-items:center; gap:5px; }
  .cu-company::before { content:"·"; color:var(--muted-2); }
  .pin-tag { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:#f5cf7a;
    letter-spacing:.4px; padding:2.5px 8px; border-radius:999px;
    background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); }
  .pin-tag svg { width:10px; height:10px; }
  .cu-msg { position:relative; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
    border-radius:4px 13px 13px 13px; padding:10px 14px;
    font-size:13px; line-height:1.7; color:#c6d0df; letter-spacing:.15px; }
  .cu-msg .q-label { display:block; font-size:10px; font-weight:800; letter-spacing:1px; color:var(--muted-2); margin-bottom:3px; }
  .cu-meta { display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; }
  .cu-time { font-size:11.5px; color:var(--muted-2); font-variant-numeric:tabular-nums;
    display:inline-flex; align-items:center; gap:5px; }
  .cu-time svg { width:11px; height:11px; stroke:var(--muted-2); }
  .cu-unread { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#7dd8ee;
    letter-spacing:.3px; padding:2.5px 9px; border-radius:999px; background:rgba(45,212,238,.09);
    border:1px solid rgba(45,212,238,.28); box-shadow:0 0 12px rgba(45,212,238,.08); }
  .cu-unread .u-dot { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px rgba(45,212,238,.9); }
  .cu-wait { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--muted);
    padding:2.5px 9px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--border); }
  .cu-wait .w-dot { width:5px; height:5px; border-radius:50%; background:var(--amber); box-shadow:0 0 6px rgba(251,191,36,.8); }
  .cu-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; justify-content:space-between; }
  .cu-actions .grp { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  @media(max-width:760px){
    .customer { flex-direction:column; }
    .cu-actions { flex-direction:row; align-items:center; width:100%; }
  }

  /* ============ 知识库（复刻 demo：faq-list） ============ */
  .kb-stats { display:grid; grid-template-columns:repeat(5,1fr); margin:18px -4px 4px; }
  .kb-stat { display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:14px; margin:0 4px; transition:.2s; }
  .kb-stat:hover { background:rgba(255,255,255,.035); }
  .kb-stat .ks-ic { width:32px; height:32px; border-radius:10px; flex:none;
    background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.09); display:grid; place-items:center; }
  .kb-stat .ks-ic svg { width:15px; height:15px; stroke:#9fb0c9; }
  .kb-stat .ks-l { font-size:12px; color:var(--muted); margin-bottom:4px; letter-spacing:.3px; }
  .kb-stat .ks-v { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.3px;
    background:linear-gradient(180deg,#f4f8ff,#aeb9cc); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; white-space:nowrap; }
  .kb-stat .ks-v.time { font-size:13px; font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; }
  .kb-stat.hl .ks-ic { background:linear-gradient(160deg,rgba(45,212,238,.2),rgba(91,141,255,.1));
    border-color:rgba(45,212,238,.3); box-shadow:0 0 14px rgba(45,212,238,.12); }
  .kb-stat.hl .ks-ic svg { stroke:#7dd8ee; }
  .kb-stat.hl .ks-v { background:none; -webkit-text-fill-color:#7dd8ee; color:#7dd8ee; }
  .card-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    margin-top:14px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); }
  .sync-time { font-size:11.5px; color:var(--muted-2); display:flex; align-items:center; gap:7px; }
  .sync-time .live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(52,211,153,.8); }

  .seg { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
  .seg-switch { display:inline-grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:13px;
    background:rgba(0,0,0,.28); border:1px solid var(--border); }
  .seg-switch button { height:34px; padding:0 20px; border:none; border-radius:10px; cursor:pointer; background:transparent;
    color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:.4px;
    display:inline-flex; align-items:center; gap:8px; transition:.22s; white-space:nowrap; box-shadow:none; }
  .seg-switch button .cnt { font-size:10.5px; font-weight:700; padding:1.5px 7px; border-radius:99px;
    background:rgba(255,255,255,.08); color:var(--muted); font-variant-numeric:tabular-nums; }
  .seg-switch button.on { background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
    color:var(--text); box-shadow:0 4px 14px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.08) inset; }
  .seg-switch button.on .cnt { background:var(--grad); color:#04222c; }
  .search { flex:1; max-width:300px; min-width:180px; height:38px; display:flex; align-items:center; gap:9px;
    padding:0 14px; border-radius:11px; background:rgba(0,0,0,.28); border:1px solid var(--border-strong); transition:.2s; }
  .search:focus-within { border-color:rgba(45,212,238,.55); box-shadow:0 0 0 3px rgba(45,212,238,.12); }
  .search svg { width:14px; height:14px; stroke:var(--muted-2); flex:none; }
  .search input { flex:1; background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:12.5px; }
  .search input::placeholder { color:#4d5666; }

  .kb-panel { display:none; }
  .kb-panel.show { display:block; animation:fade .28s ease; }

  .faq-item { position:relative; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 60%);
    border:1px solid var(--border); border-radius:15px; padding:15px 18px; margin-bottom:10px; overflow:hidden; transition:.2s; }
  .faq-item::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px;
    background:var(--grad); opacity:0; transition:.2s; }
  .faq-item:hover { border-color:rgba(45,212,238,.25);
    box-shadow:0 8px 26px rgba(3,10,24,.5),0 0 22px rgba(45,212,238,.07); transform:translateY(-1px); }
  .faq-item:hover::before { opacity:1; }
  .q-row { display:flex; align-items:flex-start; gap:11px; }
  .q-badge, .a-badge { flex:none; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
    font-size:11.5px; font-weight:800; letter-spacing:.3px; margin-top:1px; }
  .q-badge { background:var(--grad); color:#04222c; box-shadow:0 4px 12px rgba(52,182,245,.35),0 1px 0 rgba(255,255,255,.35) inset; }
  .q-text { font-size:13.5px; font-weight:700; line-height:1.6; letter-spacing:.2px; flex:1; }
  .complete { flex:none; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--green);
    letter-spacing:.5px; padding:3px 9px; border-radius:999px; margin-top:2px;
    background:rgba(52,211,153,.09); border:1px solid rgba(52,211,153,.3); box-shadow:0 0 12px rgba(52,211,153,.08); }
  .complete.partial { color:var(--amber); background:rgba(251,191,36,.09); border-color:rgba(251,191,36,.3); }
  .complete svg { width:10px; height:10px; }
  .faq-divider { height:1px; margin:11px 0 10px 35px;
    background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 70%,transparent); }
  .a-row { display:flex; align-items:flex-start; gap:11px; }
  .a-badge { background:rgba(52,211,153,.14); color:var(--green); border:1px solid rgba(52,211,153,.35); }
  .a-text { font-size:12.5px; line-height:1.8; color:#aeb8c8; letter-spacing:.15px; flex:1; }
  .a-text.clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .faq-foot { display:flex; align-items:center; gap:10px; margin-top:2px; padding-left:35px; flex-wrap:wrap; }
  .mini-tag { font-size:10.5px; font-weight:600; color:var(--muted); padding:2.5px 9px; border-radius:999px;
    background:rgba(255,255,255,.04); border:1px solid var(--border); display:inline-flex; align-items:center; gap:5px; }
  .mini-tag svg { width:10px; height:10px; stroke:var(--muted); }
  /* 知识库人工调优：停用/人工标签 + 操作按钮 + 行内编辑 */
  .mini-tag.off { color:var(--amber); border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.08); }
  .mini-tag.human { color:#7dd8ee; border-color:rgba(45,212,238,.35); background:rgba(45,212,238,.08); }
  .faq-item.is-off, .rule-item.is-off { opacity:.55; }
  .faq-ops, .rule-ops { display:flex; align-items:center; gap:8px; margin-top:9px; padding-left:35px; flex-wrap:wrap; }
  .rule-ops { padding-left:0; }
  .kb-edit { border:1px dashed rgba(255,255,255,.16); border-radius:12px; padding:13px 15px; margin-bottom:10px; }
  .kb-edit .lbl { font-size:11.5px; font-weight:700; color:var(--muted); margin:11px 0 5px; letter-spacing:.4px; }
  .kb-edit .lbl:first-child { margin-top:0; }
  .kb-edit .text-input { width:100%; box-sizing:border-box; }

  .rule-item { position:relative; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 60%);
    border:1px solid var(--border); border-radius:15px; padding:15px 18px 15px 21px; margin-bottom:10px; overflow:hidden; transition:.2s; }
  .rule-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
  .rule-item.cat-pricing::before { background:linear-gradient(180deg,#2dd4ee,#5b8dff); box-shadow:0 0 12px rgba(45,212,238,.5); }
  .rule-item.cat-business::before { background:linear-gradient(180deg,#fbbf24,#f59e0b); box-shadow:0 0 12px rgba(251,191,36,.5); }
  .rule-item.cat-process::before { background:linear-gradient(180deg,#a78bfa,#7c6cf0); box-shadow:0 0 12px rgba(167,139,250,.5); }
  .rule-item:hover { border-color:rgba(255,255,255,.16); box-shadow:0 8px 26px rgba(3,10,24,.5); transform:translateY(-1px); }
  .rule-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:9px; }
  .cat { flex:none; font-size:10.5px; font-weight:800; letter-spacing:.8px; padding:3.5px 9px; border-radius:7px; margin-top:1px;
    color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--border); }
  .cat.cat-pricing { color:#7dd8ee; background:rgba(45,212,238,.1); border:1px solid rgba(45,212,238,.32); box-shadow:0 0 12px rgba(45,212,238,.1); }
  .cat.cat-business { color:#f5cf7a; background:rgba(251,191,36,.09); border:1px solid rgba(251,191,36,.32); box-shadow:0 0 12px rgba(251,191,36,.08); }
  .cat.cat-process { color:#c4b5fd; background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.32); box-shadow:0 0 12px rgba(167,139,250,.1); }
  .rule-title { font-size:13.5px; font-weight:700; line-height:1.55; flex:1; letter-spacing:.2px; }
  .trigger { display:flex; align-items:flex-start; gap:8px; margin:0 0 10px; padding:8px 12px; border-radius:10px;
    background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.1); }
  .trigger svg { width:13px; height:13px; stroke:var(--amber); flex:none; margin-top:2.5px; }
  .trigger .t-l { font-size:11px; font-weight:700; color:#e3c074; letter-spacing:.5px; flex:none; margin-top:.5px; }
  .trigger .t-c { font-size:12px; color:var(--muted); line-height:1.65; }
  .rule-body { display:flex; align-items:flex-start; gap:8px; }
  .rule-body .do-ic { flex:none; width:20px; height:20px; border-radius:6px; margin-top:2px;
    background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); display:grid; place-items:center; }
  .rule-body .do-ic svg { width:11px; height:11px; stroke:var(--green); }
  .rule-body p { font-size:12.5px; line-height:1.8; color:#aeb8c8; letter-spacing:.15px; }

  .pager { display:flex; align-items:center; justify-content:center; gap:12px; padding-top:18px; margin-top:4px;
    border-top:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
  .page-btn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 16px; border-radius:10px;
    font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--muted);
    background:rgba(255,255,255,.035); border:1px solid var(--border); transition:.18s; box-shadow:none; }
  .page-btn:hover:not(:disabled) { color:var(--text); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.07); }
  .page-btn:disabled { opacity:.35; cursor:not-allowed; }
  .page-btn svg { width:13px; height:13px; }
  .page-info { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.3px; }
  .page-info b { color:var(--text); font-weight:700; }
  .page-info .total { color:var(--muted-2); }
  .page-jump { display:inline-flex; align-items:center; gap:6px; margin-left:6px; font-size:12px; color:var(--muted-2); }
  .page-jump input { width:46px; height:30px; border-radius:8px; text-align:center; background:rgba(0,0,0,.28);
    border:1px solid var(--border-strong); color:var(--text); font-family:inherit; font-size:12px; font-weight:600;
    outline:none; font-variant-numeric:tabular-nums; }
  .page-jump input:focus { border-color:rgba(45,212,238,.55); box-shadow:0 0 0 3px rgba(45,212,238,.12); }
  @media(max-width:900px){ .kb-stats { grid-template-columns:1fr 1fr; } }

  /* ============ 客户跟进（分块卡片 + 客户小卡） ============ */
  .fu-intro { color:var(--muted); font-size:12.5px; line-height:1.8; margin-bottom:14px; }
  .fu-area { width:100%; margin:0; line-height:1.6; }
  .chips-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
  .ck-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
    font-size:12.5px; font-weight:600; letter-spacing:.2px;
    background:rgba(45,212,238,.08); border:1px solid rgba(45,212,238,.24); color:#a9e8f5; }
  .ck-chip.manual { background:rgba(167,139,250,.1); border-color:rgba(167,139,250,.3); color:#c4b5fd; }
  .ck-chip .ck-tag { font-size:10px; font-weight:800; letter-spacing:.5px; opacity:.75; text-transform:uppercase; }
  .ck-chip .x { cursor:pointer; color:var(--muted-2); font-weight:800; line-height:1; padding:0 1px; }
  .ck-chip .x:hover { color:var(--red); }
  .addrow { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
  .addrow .text-input { width:240px; margin:0; }

  .fu-item { position:relative; display:flex; gap:14px; padding:16px 18px; border-radius:15px; margin-top:12px;
    background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 60%);
    border:1px solid var(--border); transition:.2s; overflow:hidden; }
  .fu-item::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px;
    background:var(--grad); opacity:0; transition:.2s; }
  .fu-item:hover { border-color:rgba(45,212,238,.22);
    box-shadow:0 8px 26px rgba(3,10,24,.5),0 0 22px rgba(45,212,238,.06); transform:translateY(-1px); }
  .fu-item:hover::before { opacity:1; }
  .fu-main { flex:1; min-width:0; }
  .fu-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .fu-name { font-size:14px; font-weight:700; letter-spacing:.2px; }
  .fu-sub { font-size:12px; color:var(--muted); font-weight:500; display:inline-flex; align-items:center; gap:5px; }
  .fu-sub::before { content:"·"; color:var(--muted-2); }
  .stage-tag { display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; color:#7dd8ee;
    letter-spacing:.4px; padding:2.5px 9px; border-radius:999px;
    background:rgba(45,212,238,.09); border:1px solid rgba(45,212,238,.28); }
  .fu-prog { display:flex; align-items:center; gap:10px; margin:11px 0 4px; }
  .fu-prog .lbl { font-size:11.5px; color:var(--muted-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .fu-bar { flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; min-width:60px; }
  .fu-bar > i { display:block; height:100%; border-radius:99px; background:var(--grad);
    box-shadow:0 0 10px rgba(52,182,245,.4); }
  .fu-row { display:flex; gap:9px; align-items:flex-start; margin-top:8px; font-size:12.5px; line-height:1.7; }
  .fu-row .k { flex:none; width:44px; white-space:nowrap; color:var(--muted-2); font-weight:600; }
  .fu-row .v { color:#c6d0df; min-width:0; }
  .fu-tags { display:flex; gap:6px; flex-wrap:wrap; }
  .miss-chip { font-size:11px; font-weight:600; color:#f5cf7a; padding:2.5px 9px; border-radius:999px;
    background:rgba(251,191,36,.09); border:1px solid rgba(251,191,36,.28); }
  .fact-chip { font-size:11px; font-weight:600; color:#a9e8f5; padding:2.5px 9px; border-radius:999px;
    background:rgba(45,212,238,.07); border:1px solid rgba(45,212,238,.2); }
  .fu-uid { margin-top:10px; font-size:11px; color:var(--muted-2); word-break:break-all;
    font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; }
  .fu-empty { color:var(--muted); text-align:center; padding:28px 0; font-size:13px; }

  @media (max-width:900px) {
    body { padding:20px 14px 36px; }
    .wrap { max-width:100%; }
  }