/* ==========================================================================
   小红书投放控制中心 · 全站样式
   参照：投放控制中心设计稿（深色侧边栏 + 渐变主卡 + KPI + SVG 图表 + 账号卡片）
   ① 变量  ② 侧边栏  ③ 顶栏  ④ 概览/图表  ⑤ 数据来源  ⑥ 账号与聚光户
   ⑦ 浮层  ⑧ 旧页面（登录/扫码/诊断）  ⑨ 响应式
   ========================================================================== */

/* ---------- ① 变量与基础 ---------- */
:root{
  --blue:#1876fc; --blue-dark:#0f60d6; --blue-soft:#e8f1ff;
  --ink:#101a2e; --ink-2:#41527a; --muted:#7b8aa5; --faint:#9aa8bf;
  --line:#e9eef8; --line-soft:#f1f5fb; --bg:#f2f6fd; --card:#fff;
  --red:#f31850; --purple:#6d4cf3; --green:#05b763; --amber:#e27a01; --cyan:#0f9bb0;
  --navy:#1a212e; --navy-2:#232c3c; --navy-text:#a8b1c4;
  --radius:16px; --shadow:0 6px 24px rgba(24,52,110,.06);
  --font:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
input,button,summary,select,textarea{font:inherit}
a{color:inherit}
h1{font-size:28px;margin:0}
h2{margin:0;font-size:17px}
p{color:#66789b;margin:6px 0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d7e0ee;border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#c1cee2;background-clip:content-box}

button{border:1px solid #dfe7f4;background:#fff;border-radius:9px;padding:8px 12px;cursor:pointer;
  color:var(--ink-2);transition:background .15s,border-color .15s,color .15s}
button:hover{border-color:#c3d7f5;background:#f7faff}
button:disabled{opacity:.55;cursor:default}
button.primary,.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
button.primary:hover,.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
button.danger{color:#e01b45;background:#fff5f7;border-color:#ffdde5}
button.danger:hover{background:#ffecef;border-color:#ffc9d6}
button.probe{color:#0f7a8a;background:#eefbfd;border-color:#d6f2f7}
.chip-purple{color:#6d4cf3;background:#f4efff;border-color:#e6dbff}
.chip-pink{color:#e01b45;background:#fff0f4;border-color:#ffd9e3}
.danger-text{color:#e01b45}

/* ---------- ② 深色侧边栏 ---------- */
.app{display:flex;align-items:flex-start;min-height:100vh}
.sidebar{
  width:216px;flex:none;position:sticky;top:0;height:100vh;background:var(--navy);
  display:flex;flex-direction:column;padding:20px 14px 16px;gap:18px;
}
.side-brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:2px 6px}
.side-logo{
  width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff2d55,#e00c39);color:#fff;font-size:11px;font-weight:700;
  line-height:1.05;text-align:center;letter-spacing:.5px;box-shadow:0 6px 16px rgba(224,12,57,.4);
}
.side-brand b{color:#fff;font-size:15px;letter-spacing:-.2px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  font-size:14.5px;color:var(--navy-text);text-decoration:none;transition:background .15s,color .15s;
}
.side-nav a i{display:grid;place-items:center;width:19px;height:19px;flex:none}
.side-nav a svg{width:18px;height:18px;fill:currentColor;opacity:.85}
.side-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.side-nav a.active{background:var(--blue);color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(24,118,252,.4)}
.side-foot{margin-top:auto;display:grid;gap:10px}
.quota{background:rgba(255,255,255,.06);border-radius:13px;padding:12px 13px}
.quota-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:#9aa4ba}
.quota-head b{color:#fff;font-size:14px}
.quota-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.14);margin:9px 0 7px;overflow:hidden}
.quota-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#1876fc,#8b5cf6)}
.quota small{font-size:11.5px;color:#7f8a9f}
.side-add{position:relative}
.side-add>summary{
  display:flex;align-items:center;justify-content:center;height:42px;border-radius:11px;
  font-size:14px;font-weight:600;list-style:none;cursor:pointer;
}
.side-add>summary::-webkit-details-marker{display:none}

/* ---------- ③ 顶栏 ---------- */
.content{flex:1;min-width:0;padding:16px 26px 60px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.tb-left{display:flex;align-items:center;gap:13px;min-width:0}
.tb-logo{
  width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff2d55,#e00c39);color:#fff;font-size:11px;font-weight:700;
  text-align:center;line-height:1.05;box-shadow:0 8px 20px rgba(224,12,57,.28);
}
.tb-left h1{font-size:23px;letter-spacing:-.5px;line-height:1.2}
.tb-left p{font-size:12.5px;color:var(--muted);margin:4px 0 0}
.tb-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.date-pill{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:10px;
  background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink-2);
}
.date-pill svg{width:15px;height:15px;fill:var(--blue)}
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg a{padding:6px 13px;border-radius:8px;font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.seg a:hover{background:#f3f7ff}
.seg a.on{background:var(--blue);color:#fff;font-weight:600}
.icon-btn{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#fff;
  border:1px solid var(--line);color:var(--ink-2);text-decoration:none;position:relative;
}
.icon-btn:hover{border-color:#c3d7f5;color:var(--blue)}
.icon-btn svg{width:17px;height:17px;fill:currentColor}
.icon-btn.bell i{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:var(--red);
  color:#fff;font-size:10.5px;font-style:normal;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg);
}
.user{position:relative}
.user summary{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:11px;
  cursor:pointer;list-style:none;font-size:13.5px;color:var(--ink-2);background:#fff;border:1px solid var(--line)}
.user summary::-webkit-details-marker{display:none}
.user summary:hover{border-color:#c3d7f5}
.uavatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);flex:none}
.uavatar svg{width:16px;height:16px;fill:currentColor}
.uchev{color:#a9b7cd;font-style:normal;font-size:11px}
.umenu{position:absolute;right:0;top:46px;z-index:50;min-width:170px;padding:7px;background:#fff;
  border:1px solid #e2eaf7;border-radius:13px;box-shadow:0 16px 38px rgba(26,65,125,.15);display:grid;gap:2px}
.umenu a{padding:9px 12px;border-radius:9px;font-size:13.5px;color:var(--ink-2);text-decoration:none}
.umenu a:hover{background:#f4f8ff;color:var(--blue)}
.umenu a.uout{color:#e01b45}
.umenu a.uout:hover{background:#fff2f4}

/* ---------- ④ 概览与图表 ---------- */
.overview-grid{display:grid;grid-template-columns:minmax(300px,1.5fr) repeat(4,minmax(140px,1fr));gap:14px}
.hero-card{
  position:relative;overflow:hidden;border-radius:18px;padding:20px 22px;color:#fff;
  background:linear-gradient(118deg,#061e5c 0%,#0d2f9e 40%,#3a2fd0 74%,#7c3aed 100%);
  box-shadow:0 14px 32px rgba(18,40,120,.32);
}
.hero-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 78% 118%,rgba(255,255,255,.22),transparent 58%),
             radial-gradient(ellipse at 12% -22%,rgba(255,255,255,.16),transparent 55%);
}
.hero-card>*{position:relative;z-index:1}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start}
.hero-title{font-size:14.5px;opacity:.95}
.hero-badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.22);backdrop-filter:blur(4px)}
.hero-badge svg{width:22px;height:22px;fill:#fff}
.hero-value{font-size:36px;font-weight:700;letter-spacing:-1px;margin:12px 0 6px;font-variant-numeric:tabular-nums}
.hero-delta{display:flex;align-items:center;gap:8px;font-size:12.5px}
.hero-delta b{font-weight:600;color:#7cf3b6}
.hero-delta b.bad{color:#ffb3c1}
.hero-delta b.flat{color:rgba(255,255,255,.6)}
.hero-delta span{color:rgba(255,255,255,.72)}
.hero-split{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}
.hero-split span{display:block;font-size:12px;color:rgba(255,255,255,.75)}
.hero-split b{display:block;margin-top:4px;font-size:16px;font-variant-numeric:tabular-nums}

.kpi-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 17px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.kpi-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px}
.kpi-icon svg{width:21px;height:21px;fill:currentColor}
.k-red .kpi-icon{background:#ffe9ef;color:#f31850}
.k-purple .kpi-icon{background:#efeaff;color:#6d4cf3}
.k-blue .kpi-icon{background:#e7f0ff;color:#1876fc}
.k-amber .kpi-icon{background:#fff2e0;color:#e27a01}
.kpi-label{font-size:13px;color:var(--muted)}
.kpi-value{font-size:25px;font-weight:700;color:var(--ink);margin:7px 0 8px;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-delta{margin-top:auto;font-size:12px;color:var(--faint)}
.kpi-delta b{margin-left:5px;font-weight:600}
.kpi-delta b.good{color:var(--green)}
.kpi-delta b.bad{color:var(--red)}
.kpi-delta b.flat{color:#b6c2d5}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;
  display:flex;flex-direction:column}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.card-head h2{font-size:16px;letter-spacing:-.2px}
.card-sub{font-size:12.5px;color:var(--faint)}
.card-link{font-size:12.5px;color:var(--blue);text-decoration:none;font-weight:600;white-space:nowrap}
.card-link:hover{text-decoration:underline}
.chart-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:14px;margin-top:14px}
.chart-grid.second{grid-template-columns:1fr 1.15fr 1fr}

.legend{display:flex;gap:14px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.legend i{width:8px;height:8px;border-radius:50%;flex:none}
.legend b{color:var(--ink);font-weight:600}
.lg-amount i{background:#1876fc}
.lg-spend i{background:#8b5cf6}
.lg-profit i{background:#16c47f}

.plot{display:flex;gap:8px}
.y-ticks{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;
  color:var(--faint);text-align:right;min-width:44px;height:190px;padding:0}
.plot-area{position:relative;flex:1;min-width:0;height:190px}
.line-chart{width:100%;height:190px;display:block;overflow:visible}
.line-chart .grid{stroke:#eef2f9;stroke-width:1;vector-effect:non-scaling-stroke}
.line-chart polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.line-chart polygon{stroke:none}
.line-amount{stroke:#1876fc}
.line-spend{stroke:#8b5cf6}
.line-profit{stroke:#16c47f}
.area-amount{fill:#1876fc;opacity:.06}
.area-spend{fill:#8b5cf6;opacity:.05}
.area-profit{fill:#16c47f;opacity:.05}
.x-ticks{position:absolute;left:0;right:0;bottom:-18px;height:14px}
.x-ticks span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--faint);white-space:nowrap}
.chart-note{margin:26px 0 0;font-size:11.5px;color:var(--faint)}

.donut-wrap{position:relative;width:150px;height:150px;margin:2px auto 12px}
.donut{width:150px;height:150px;display:block}
.donut-track{stroke:#eef2f8}
.donut-seg{transition:stroke-dasharray .3s}
.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.donut-center span{font-size:11.5px;color:var(--faint)}
.donut-center b{font-size:22px;color:var(--ink)}
.donut-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1;align-content:center}
.donut-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.donut-legend i{width:8px;height:8px;border-radius:50%;flex:none}
.donut-legend span{flex:1}
.donut-legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.donut-legend em{font-style:normal;color:var(--faint);min-width:38px;text-align:right}

.risk-card{transition:background .2s}
.risk-card.has-risk{background:#fff7f8;border-color:#ffe0e6}
.risk-card .card-head h2{display:flex;align-items:center;gap:8px;color:#d81b45}
.risk-card.has-risk .card-head h2{color:#e01b45}
.risk-count{background:#e01b45;color:#fff;font-size:11.5px;border-radius:8px;padding:1px 7px}
.risk-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.risk-list li{display:grid;grid-template-columns:26px auto 1fr auto;align-items:center;
  column-gap:9px;font-size:13px}
.risk-icon{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:#fff2e0;color:#e27a01;flex:none}
.risk-icon svg{width:15px;height:15px;fill:currentColor}
.risk-mute .risk-icon{background:#ffe9ef;color:#f31850}
.risk-login .risk-icon{background:#fff2e0;color:#e27a01}
.risk-error .risk-icon{background:#ffe9ef;color:#e01b45}
.risk-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.risk-text{font-size:12px;color:#d81b45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.risk-ago{font-size:11.5px;color:var(--faint);white-space:nowrap;text-align:right}

.rank-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1;align-content:space-between}
.rank-list li{display:flex;align-items:center;gap:10px;font-size:13px}
.rank-no{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;
  font-weight:700;background:#f1f4f9;color:var(--faint);flex:none}
.rank-1{background:#fff2d8;color:#c47a08}
.rank-2{background:#eef1f6;color:#6b7a90}
.rank-3{background:#fdece2;color:#b4652a}
.rank-name{flex:1;min-width:0;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-track{width:74px;height:6px;border-radius:6px;background:#f0f4fa;overflow:hidden;flex:none}
.rank-track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#4d9bff,#1876fc)}
.rank-val{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}

.bar-chart{display:flex;align-items:flex-end;gap:8px;height:200px;padding-top:4px;flex:none}
.bar-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;height:100%}
/* flex:none 很关键：数值/标签绝不能被压缩，否则文字会被 overflow:hidden 切掉半截 */
.bar-val{flex:none;font-size:10.5px;color:var(--faint);white-space:nowrap}
.bar-track{flex:1 1 auto;min-height:0;width:100%;max-width:34px;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,#f7faff,#fff);border-radius:8px}
.bar-track i{display:block;width:100%;border-radius:8px;background:linear-gradient(180deg,#5aa4ff,#1876fc);min-height:3px}
.bar-label{flex:none;font-size:11px;line-height:1.4;color:var(--faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.alertbar{margin:0 0 16px;padding:14px 18px;border-radius:14px;background:#fff6f7;border:1px solid #ffd9dd;color:#c0343f;font-size:13.5px}
.alertbar ul{margin:8px 0 0;padding-left:20px}
.alertbar li{margin:3px 0}

/* ---------- ⑤ 数据来源 ---------- */
.section-label{display:flex;align-items:center;gap:11px;margin:26px 0 14px}
.section-label::before{content:"";width:4px;height:20px;border-radius:3px;background:var(--blue);flex:none}
.section-label>b{font-size:18px;letter-spacing:-.3px}
.section-label>span{font-size:13px;color:var(--muted)}
.sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}
.src-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 20px}
.src-card::before{content:"";position:absolute;inset:0;pointer-events:none}
.src-boc::before{background:linear-gradient(90deg,#fff1f5,rgba(255,255,255,0) 46%)}
.src-wecom::before{background:linear-gradient(90deg,#ecfdf3,rgba(255,255,255,0) 46%)}
.src-card>*{position:relative}
.sc-left{display:flex;align-items:center;gap:13px;min-width:0}
.sc-logo{width:50px;height:50px;border-radius:15px;flex:none;display:grid;place-items:center;color:#fff}
.sc-logo svg{width:25px;height:25px;fill:currentColor}
.src-boc .sc-logo{background:linear-gradient(135deg,#ff5c86,#fb1f5c);box-shadow:0 10px 22px rgba(251,31,92,.28)}
.src-wecom .sc-logo{background:linear-gradient(135deg,#31e08d,#01ce6f);box-shadow:0 10px 22px rgba(1,206,111,.26)}
.sc-info{min-width:0}
.sc-title{display:flex;align-items:center;gap:8px}
.sc-title b{font-size:15.5px}
.tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:7px;white-space:nowrap}
.tag-green{background:#e4f9ee;color:#0aa15c}
.tag-amber{background:#fff4e2;color:#c47a08}
.tag-red{background:#ffecef;color:#e01b45}
.sc-info small{display:block;margin-top:5px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.sc-metrics{display:flex;gap:22px;margin-left:auto;padding-left:20px;border-left:1px solid var(--line-soft)}
.sc-metric{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:4px;row-gap:3px}
.sc-metric span{grid-column:1/-1;font-size:12px;color:var(--muted);white-space:nowrap}
.sc-metric b{font-size:21px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sc-metric i{font-size:12px;font-style:normal;color:var(--muted)}
.sc-actions{display:flex;flex-direction:column;gap:8px;margin-left:20px;flex:none}
.sc-actions button,.sc-actions summary{height:36px;padding:0 16px;border-radius:10px;font-size:13px;
  display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;white-space:nowrap}
.sc-actions summary::-webkit-details-marker{display:none}
.fillbox{position:relative}
.fillbox .config{top:42px;right:0}

/* ---------- ⑥ 账号管理 / 聚光户 ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);margin:22px 0;overflow:visible}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;padding:20px 22px;border-bottom:1px solid var(--line)}
.panel-head .ph-left{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.panel-head h2{font-size:18px;letter-spacing:-.3px}
.panel-head p{font-size:12.5px;color:var(--muted);margin:4px 0 0}
.status-chips{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.status-chips li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  background:#f6f9ff;border:1px solid var(--line);border-radius:9px;padding:5px 10px}
.status-chips li b{font-weight:700}
.status-chips .ok b{color:var(--green)}
.status-chips .mute b{color:var(--red)}
.status-chips .out b{color:var(--amber)}
.status-chips .err b{color:#8494ad}
.panel-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.searchbox{position:relative;display:flex;align-items:center}
.searchbox i{position:absolute;left:12px;display:grid;color:#9fb0c9;pointer-events:none}
.searchbox i svg{width:15px;height:15px;fill:none}
.searchbox input{width:230px;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;
  padding:0 13px 0 35px;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s}
.searchbox input::placeholder{color:#a9b7cd}
.searchbox input:focus{border-color:#b9d4fb;box-shadow:0 0 0 3px rgba(24,118,252,.12)}
.panel-tools select{height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink-2);
  padding:0 32px 0 13px;font-size:13px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a9b7cd'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.view-toggle{display:flex;background:#f4f7fd;border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.view-toggle button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-size:13px;color:var(--ink-2)}
.view-toggle button.on{background:var(--blue);color:#fff;font-weight:600}
.export{height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;padding:0 14px;font-size:13px}
.export svg{width:16px;height:16px;fill:var(--blue)}
.add-inline{display:flex;gap:8px;flex-wrap:wrap}
.add-inline input,.add-inline select{height:40px;border:1px solid var(--line);border-radius:11px;padding:0 12px;font-size:13px;min-width:170px;background:#fff;color:var(--ink)}
.add-inline button{height:40px;border-radius:11px;padding:0 16px;font-size:13.5px}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;padding:20px 22px}
#accounts[data-view="list"] .card-grid{display:none}
#accounts[data-view="cards"] .table-wrap{display:none}
.acct-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;
  flex-direction:column;gap:13px;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.acct-card:hover{border-color:#dbe6f7;box-shadow:0 12px 26px rgba(24,52,110,.08)}
.acct-card.st-normal{background:linear-gradient(180deg,#f5fcf8,#fff 46%)}
.acct-card.st-muted{background:linear-gradient(180deg,#fff5f7,#fff 46%);border-color:#ffe0e6}
.acct-card.st-logged_out{background:linear-gradient(180deg,#fffaf0,#fff 46%);border-color:#ffedd0}
.acct-card.st-error{background:linear-gradient(180deg,#fff5f7,#fff 46%);border-color:#ffdde5}
.acct-card.is-low{background:linear-gradient(180deg,#fff5f7,#fff 46%);border-color:#ffdde5}
.ac-head{display:flex;align-items:flex-start;gap:11px}
.ac-avatar{
  width:52px;height:52px;border-radius:14px;flex:none;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff4d6d,#f31850);color:#fff;font-size:19px;font-weight:700;
}
.ac-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ac-avatar .av-text{line-height:1}
.jc-avatar{background:linear-gradient(135deg,#7c5cff,#5b3ce0)}
.ac-title{flex:1;min-width:0}
.ac-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ac-name b{font-size:16px;letter-spacing:-.2px}
.ac-sub{display:block;margin-top:4px;font-size:12px;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-card .more{position:relative}
.acct-card .more summary{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;list-style:none;font-size:15px;line-height:1
}
.acct-card .more summary::-webkit-details-marker{display:none}
.acct-card .more summary:hover{border-color:#c3d7f5;color:var(--blue)}
/* 「更多」菜单：打开时会被 JS 传送到 body 下（避免被 sticky 层叠上下文盖住），
   所以规则必须是顶层的，绝不能写成 .acct-card .menu——那样一移走样式就全丢了。 */
.menu{position:absolute;right:0;top:36px;z-index:55;min-width:176px;background:#fff;
  border:1px solid #e2eaf7;border-radius:13px;box-shadow:0 16px 38px rgba(26,65,125,.18);
  padding:7px;display:grid;gap:2px}
.menu form{display:block;margin:0}
.menu button{width:100%;text-align:left;border:0;background:transparent;padding:9px 11px;
  border-radius:9px;font-size:13px;color:var(--ink-2);cursor:pointer}
.menu button:hover{background:#f4f8ff;color:var(--blue)}
.menu button.danger-text{color:#e01b45;margin-top:5px;position:relative}
.menu button.danger-text::before{content:"";position:absolute;left:6px;right:6px;top:-4px;
  height:1px;background:var(--line-soft)}
.menu button.danger-text:hover{background:#fff2f4;color:#e01b45}
.ac-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft)}
.ac-metrics span{display:block;font-size:12px;color:var(--faint)}
.ac-metrics b{display:block;margin-top:4px;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ac-mini.four{grid-template-columns:repeat(4,1fr)}
.ac-mini span{display:block;font-size:11.5px;color:var(--faint)}
.ac-mini b{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-note{font-size:11.5px;padding:7px 10px;border-radius:9px;background:#f7f9fd;color:var(--ink-2)}
.ac-note.warn{background:#fff8e8;color:#b8730a}
.ac-note.err{background:#fff2f4;color:#c0343f}
.ac-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto}
.ac-actions form{display:inline;margin:0}
.ac-actions button,.ac-actions summary{
  height:34px;padding:0 13px;border-radius:9px;border:1px solid #e2e9f5;background:#fff;color:var(--ink-2);
  font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;list-style:none;text-decoration:none;
}
.ac-actions summary::-webkit-details-marker{display:none}
.ac-actions button:hover,.ac-actions summary:hover{border-color:#c5d8f5;background:#f7faff}
.ac-actions .soft{background:#f2f7ff;border-color:#e2ecfb;color:#2c6fd8}
.ac-actions .soft:hover{background:#e8f1ff;border-color:#cfe1fb}
.ac-actions button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.ac-actions button.primary:hover{background:var(--blue-dark)}
.ac-actions button.danger{color:#e01b45;background:#fff5f7;border-color:#ffdde5}

.table-wrap{overflow:auto}
table.acct-table{width:100%;min-width:1120px;border-collapse:separate;border-spacing:0}
.acct-table thead th{padding:13px 12px;text-align:left;font-size:12.5px;font-weight:600;color:#8494ad;
  background:#fbfcfe;border-bottom:1px solid var(--line);white-space:nowrap}
.acct-table tbody td{padding:13px 12px;border-bottom:1px solid var(--line-soft);font-size:14px;
  color:var(--ink-2);vertical-align:middle;background:#fff}
.acct-table tbody tr:last-child td{border-bottom:0}
.acct-table tbody tr:hover td{background:#fafcff}
.acct-table th.num,.acct-table td.num{text-align:right}
.acct-table th:first-child,.acct-table td:first-child{min-width:150px}
.acct-table td.num b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.acct-table td.num small{display:block;margin-top:3px;font-size:11.5px;color:var(--faint);font-weight:400}
.acct-table td.t{font-size:13px;color:var(--ink-2);white-space:nowrap}
.acct-table td.t small{display:block;margin-top:3px;font-size:11.5px;color:#e01b45;max-width:190px;white-space:normal}
.acc-cell{display:flex;align-items:center;gap:11px}
.acc-avatar{width:36px;height:36px;border-radius:11px;flex:none;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff4d6d,#f31850);color:#fff;font-size:14px;font-weight:700}
.acc-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.acc-cell b{font-size:14px;color:var(--ink);display:block;white-space:nowrap}
.acc-cell small{display:block;margin-top:2px;font-size:12px;color:var(--faint);white-space:nowrap}
.acct-table th.act-col,.acct-table td.act-col{position:sticky;right:0;z-index:2;background:#fff;
  box-shadow:-12px 0 16px -12px rgba(36,74,132,.2)}
.acct-table thead th.act-col{background:#fbfcfe;z-index:3}
.acct-table tbody tr:hover td.act-col{background:#fafcff}
.actions{display:flex;align-items:center;gap:5px;white-space:nowrap}
.actions form{display:inline;margin:0}
.actions button,.actions .btn,.actions summary{height:33px;padding:0 10px;border-radius:9px;border:1px solid #e2e9f5;
  background:#fff;color:var(--ink-2);font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;
  list-style:none;text-decoration:none}
.actions summary::-webkit-details-marker{display:none}
.actions button:hover,.actions .btn:hover,.actions summary:hover{border-color:#c5d8f5;background:#f7faff}
.actions button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.actions button.danger{color:#e01b45;background:#fff5f7;border-color:#ffdde5}
.actions summary.chip-purple{color:#6d4cf3;background:#f4efff;border-color:#e6dbff}
.actions summary.chip-pink,.actions .btn.chip-pink{color:#e01b45;background:#fff0f4;border-color:#ffd9e3}

.badge{display:inline-block;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;background:#eef2f8;color:#70809b;white-space:nowrap}
.badge.normal{background:#e4f9ee;color:#0aa15c}
.badge.muted,.badge.error{background:#ffecef;color:#e01b45}
.badge.logged_out{background:#fff4e2;color:#c47a08}
.badge.not_logged_in{background:#eef2f8;color:#70809b}
.pill{display:inline-block;min-width:26px;padding:3px 9px;border-radius:9px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pill-grey{background:#f2f5fa;color:var(--faint)}
.pill-red{background:#ffecef;color:#e01b45}
.v-green{color:var(--green)}
.v-red{color:var(--red)}
.v-amber{color:var(--amber)}
.v-mute{color:#aab6c9}

.juguang-head{align-items:center}
.jg-totals{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--line);background:#fdfeff}
.jt-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 17px;min-width:170px}
.jt-item span{display:block;font-size:12.5px;color:var(--muted)}
.jt-item b{display:block;margin-top:5px;font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.jt-item small{display:block;margin-top:4px;font-size:12px;color:var(--faint)}
.jt-item.now{background:#f4f8ff;border-color:#dbe8fd}
.jt-item.spend b{color:var(--amber)}
.jt-action{margin-left:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.jt-action button{height:42px;border-radius:11px;padding:0 20px;font-size:14px}
.jt-action small{font-size:12px;color:var(--faint)}
.entity-empty{grid-column:1/-1;text-align:center;padding:40px;color:#8896ad;font-size:14px}
.empty{text-align:center;padding:34px;color:#8896ad;font-size:13.5px;margin:0}

/* ---------- ⑦ 浮层 ---------- */
details{position:relative}
/* .config 与 .cfg 都是浮层面板：JS 打开时会把它们传送到 body 并改成 fixed 定位。
   两者必须样式一致，否则会出现「配置表单内联展开把卡片撑坏」的问题。 */
.config,.cfg{
  position:absolute;right:0;top:40px;width:350px;max-height:min(72vh,560px);overflow-y:auto;
  padding:16px;background:#fff;border:1px solid #dce6f5;border-radius:14px;
  box-shadow:0 18px 40px rgba(26,65,125,.18);z-index:9999;display:grid;gap:11px;
}
/* 侧边栏的「添加账号」表单不用 JS 接管，自己锚定在按钮上方 */
.side-form{
  position:absolute;bottom:calc(100% + 8px);left:0;width:270px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;
  box-shadow:0 18px 40px rgba(10,20,50,.28);display:grid;gap:11px;
}
.config label,.cfg label,.side-form label{display:grid;gap:5px;font-size:12px;color:#657797}
.config input,.config select,.cfg input,.cfg select,.side-form input,.side-form select{
  width:100%;min-width:0;height:38px;border:1px solid #dbe4f2;
  border-radius:9px;padding:0 11px;font-size:13.5px;color:var(--ink);background:#fff;
}
.config input:focus,.config select:focus,.cfg input:focus,.cfg select:focus,
.side-form input:focus,.side-form select:focus{
  border-color:#b9d4fb;outline:none;box-shadow:0 0 0 3px rgba(24,118,252,.1);
}
.config button.primary,.cfg button.primary,.side-form button.primary{height:38px;border-radius:9px;font-size:13.5px}
.config .hint,.cfg .hint,.side-form .hint{font-size:12px;color:var(--faint);margin:0}
details[open]>summary{position:relative;z-index:1}

/* ---------- ⑧ 旧页面：登录 / 扫码 / 诊断 ---------- */
main{padding:44px 38px 64px}
.content{padding:16px 26px 60px}
.hero{display:flex;justify-content:space-between;align-items:center;margin:0 0 26px;gap:18px;flex-wrap:wrap}
.hero>div{display:flex;align-items:center;gap:15px}
.brand{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;
  background:linear-gradient(135deg,#4d99ff,#2866eb);color:#fff;font-size:32px;box-shadow:0 10px 24px rgba(40,114,221,.33)}
.backlink{color:var(--blue);text-decoration:none;font-weight:600;font-size:14px}
.backlink:hover{text-decoration:underline}
.hint{font-size:13px;color:var(--muted);margin:0}
.probe-body{padding:20px 22px;display:grid;gap:14px}
.probe-shot{width:100%;max-width:760px;border:1px solid #e1eafa;border-radius:12px;background:#fff}
.probe-text{max-height:460px;overflow:auto;padding:16px;background:#fbfcff;border:1px solid #e8eef8;
  border-radius:10px;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:#42536f}
.boc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.boc-row .hint b{color:var(--ink)}
.money-low{color:#e34a58}
.money-ok{color:var(--green)}
.codebox{border:1px solid #ffe0b8;background:#fffaf1;border-radius:14px;padding:16px 18px;display:grid;gap:10px}
.codebox>b{font-size:15px;color:#b8730a}
.codeform{display:flex;gap:10px;align-items:center}
.codeform input{height:42px;border:1px solid #e2d6c2;border-radius:10px;padding:0 13px;font-size:15px;letter-spacing:.1em}
.boc-qr{max-width:360px}
main.login{max-width:600px;margin:60px auto;text-align:center;padding:0 24px}
main.login a{color:var(--blue);text-decoration:none;font-weight:600;font-size:14px}
main.login h1{font-size:26px;margin:18px 0 8px}
main.login p{font-size:14px}
.qr-box{position:relative;width:340px;max-width:100%;margin:22px auto 8px}
.qr-wait{position:absolute;inset:0;display:grid;place-items:center;color:#9aa8bf;font-size:13px}
main.login .login-qr{width:340px;max-width:100%;margin:0 auto;display:block;border:1px solid var(--line);
  border-radius:16px;padding:12px;background:#fff;position:relative}
.qr-full{margin:16px auto 0;max-width:600px;text-align:left}
.qr-full summary{display:inline-flex;align-items:center;cursor:pointer;font-size:13px;color:var(--blue);
  list-style:none;font-weight:600}
.qr-full summary::-webkit-details-marker{display:none}
main.login .qr-full img{width:100%;margin:12px auto 0;display:block;border:1px solid var(--line);
  border-radius:14px;padding:6px;background:#fff}
body.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(circle at 8% 15%,#dbeaff,transparent 31%),radial-gradient(circle at 92% 90%,#e4dcff,transparent 30%),var(--bg)}
body.auth-page main{padding:0}
.auth-card{width:min(930px,100%);min-height:500px;display:grid;grid-template-columns:1.1fr .9fr;background:#fff;
  border:1px solid #e1eafa;border-radius:22px;overflow:hidden;box-shadow:0 25px 70px rgba(36,86,164,.15)}
.auth-copy{padding:58px 52px;background:linear-gradient(145deg,#135fe4,#3f93ff);color:#fff}
.auth-copy h1{font-size:34px;margin:20px 0 8px}
.auth-copy p{color:#dcecff;font-size:16px}
.logo-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:#fff;color:#2878f2;font-size:34px}
.auth-points{display:grid;gap:15px;margin-top:65px;color:#eff6ff}
.auth-points span{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.17)}
.auth-form{padding:66px 50px}
.auth-form h2{font-size:27px;margin:8px 0}
.auth-form>small{color:var(--blue);font-weight:700}
.auth-form form{display:grid;gap:16px;margin-top:30px}
.auth-form label{display:grid;gap:7px;font-size:13px;color:#526486}
.auth-form input{width:100%;min-width:0;padding:13px;border:1px solid #d8e2f2;border-radius:10px;background:#fff;
  font-size:14px;color:var(--ink);outline:none}
.auth-form input:focus{border-color:#b9d4fb;box-shadow:0 0 0 3px rgba(24,118,252,.12)}
.auth-form button{padding:13px;font-weight:700;margin-top:7px;border-radius:10px}
.login-error{padding:10px;background:#fff0f1;color:#d33e4c;border-radius:9px;margin-top:14px;font-size:13.5px}
.add{display:flex;gap:9px}
input{border:1px solid #d8e2f2;border-radius:8px;padding:10px 12px;background:#fff;min-width:190px}
select{border:1px solid #d8e2f2;border-radius:8px;padding:10px 12px;background:#fff;color:var(--ink-2)}
.overview{display:flex;justify-content:space-between;align-items:center;padding:18px 21px;margin:18px 0;gap:16px;flex-wrap:wrap}

/* ---------- ⑨ 响应式 ---------- */
@media(max-width:1500px){
  .overview-grid{grid-template-columns:minmax(280px,1.4fr) repeat(2,1fr)}
  .overview-grid .kpi-card:nth-child(4){grid-column:span 1}
  .chart-grid,.chart-grid.second{grid-template-columns:1fr 1fr}
  .chart-card.wide{grid-column:1/-1}
}
@media(max-width:1180px){
  .content{padding:14px 16px 50px}
  .overview-grid{grid-template-columns:1fr 1fr}
  .hero-card{grid-column:1/-1}
  .chart-grid,.chart-grid.second{grid-template-columns:1fr}
  .searchbox input{width:180px}
}
@media(max-width:900px){
  .app{flex-direction:column}
  .sidebar{position:static;height:auto;width:100%;flex-direction:row;align-items:center;gap:12px;
    padding:10px 14px;overflow-x:auto}
  .side-brand b{display:none}
  .side-logo{width:36px;height:36px;font-size:9.5px;border-radius:11px}
  .side-nav{flex-direction:row;gap:3px}
  .side-nav a{padding:8px 11px;font-size:13.5px;white-space:nowrap}
  .side-foot{margin:0 0 0 auto;display:flex;gap:8px}
  .quota{display:none}
  .side-add .cfg{left:auto;right:0}
  .card-grid{grid-template-columns:1fr;padding:16px}
  .overview-grid{grid-template-columns:1fr 1fr}
  .hero-split{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .tb-left h1{font-size:19px}
  .tb-left p{display:none}
  .overview-grid{grid-template-columns:1fr}
  .ac-mini.four{grid-template-columns:1fr 1fr}
  .sources{grid-template-columns:1fr}
  .src-card{flex-direction:column;align-items:flex-start}
  .sc-metrics{margin-left:0;padding-left:0;border-left:0}
  .sc-actions{margin-left:0;flex-direction:row;flex-wrap:wrap}
  .auth-card{grid-template-columns:1fr}
  .auth-copy{padding:35px}
  .auth-points{margin-top:25px}
  .auth-form{padding:36px}
}

/* ==========================================================================
   专业号精简卡片：头像 + 名字 + 状态点 + 配置按钮（一行搞定）
   ========================================================================== */
#acct-cards{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px}
.acct-card.slim{display:flex;flex-direction:row;align-items:center;gap:11px;padding:10px 12px;
  border-radius:14px;min-height:0;height:auto;box-shadow:0 4px 14px #1a234006}
.acct-card.slim .ac-head,.acct-card.slim .ac-metrics,.acct-card.slim .ac-mini,
.acct-card.slim .ac-actions,.acct-card.slim .ac-note{display:none}
.slim-av{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:12px;overflow:visible}
.slim-av img,.slim-av .av-text{width:44px;height:44px;border-radius:12px;object-fit:cover;
  display:grid;place-items:center}
.slim-av .dot-st{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 1px 3px #1a234022}
.dot-st.normal{background:#12a06a}
.dot-st.muted{background:#d3333f}
.dot-st.logged_out{background:#c2841a}
.dot-st.error{background:#8a94a6}
.dot-st.not_logged_in{background:#c8d0dd}
.slim-title{flex:1;min-width:0}
.slim-title .ac-name b{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.slim-title .ac-sub{font-size:11px;color:#8a94a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.slim-cfg{position:relative;flex:0 0 auto}
.cfg-btn{list-style:none;cursor:pointer;padding:7px 14px;border-radius:9px;border:1px solid #e9eef6;
  background:#fff;color:#5b6678;font-size:12.5px;white-space:nowrap;user-select:none}
.cfg-btn::-webkit-details-marker{display:none}
.slim-cfg[open] .cfg-btn{background:#2f6fed;color:#fff;border-color:#2f6fed}
.slim-cfg .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:262px;background:#fff;
  border:1px solid #e9eef6;border-radius:14px;padding:7px;box-shadow:0 18px 44px #1a23401f}
.slim-cfg .menu form{margin:0}
.slim-cfg .menu>form>button{width:100%;text-align:left;padding:9px 11px;border-radius:9px;border:0;
  background:transparent;color:#3a4560;font-size:13px;cursor:pointer}
.slim-cfg .menu>form>button:hover{background:#f4f7fd}
.slim-cfg .menu fieldset{border:0;margin:0;padding:6px 4px;display:grid;gap:7px}
.slim-cfg .menu label{font-size:11.5px;color:#8a94a6;display:grid;gap:4px}
.slim-cfg .menu input{width:100%;padding:7px 9px;border:1px solid #e3e9f3;border-radius:8px;font-size:12.5px}

/* 「获取最新数据并发邮件」按钮：白底蓝字，和检测按钮区分开 */
.jt-action button.mail{background:#fff;color:#2f6fed;border:1px solid #cfe0ff;box-shadow:none}
.jt-action button.mail:hover{background:#f5f9ff}
#users .acct-table td small{display:block;color:#96a2b8;font-size:11px;margin-top:2px}

/* 发送结果提示条 */
.alertbar.toast-ok{background:#f1fbf6;border-color:#cdeedd;color:#0f7a52}
.alertbar.toast-dup{background:#fffaf0;border-color:#f2e0b6;color:#a9741a}
.alertbar.toast-fail{background:#fff5f6;border-color:#f7d7db;color:#cf3444}
.alertbar.toast-info{background:#f5f9ff;border-color:#dbe7ff;color:#2f6fed}

/* 聚光户归属标签 + 员工筛选 */
.ac-owner{margin-top:5px}
.owner-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1;
  padding:4px 9px;border-radius:99px;background:#eef4ff;color:#2f6fed;border:1px solid #dbe7ff}
.owner-pill::before{content:"👤";font-size:10px}
.owner-pill.none{background:#f4f6fa;color:#9aa6bd;border-color:#e7ecf5}
.owner-pill.none::before{content:"—"}
.jg-filter{padding:8px 12px;border-radius:9px;border:1px solid #e3e9f3;background:#fff;
  font-size:13px;color:#3a4560;max-width:190px}

/* 关键：卡片有 display:flex/grid，会盖掉 [hidden] 的默认 display:none。
   搜索筛选 / 员工筛选都靠 el.hidden，所以这里必须强制生效。 */
[hidden]{display:none !important}

/* 聚光户头像状态点 */
.jc-avatar{position:relative;overflow:visible}
.jc-avatar .dot-jg{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 1px 3px #1a234022}
.dot-jg.ok{background:#12a06a}
.dot-jg.warn{background:#f0a92a}
.dot-jg.idle{background:#c8d0dd}

/* 员工卡片 */
.staff-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));padding:18px}
.staff-card{background:#fff;border:1px solid #e9eefa;border-radius:16px;padding:16px;
  box-shadow:0 6px 20px #1a234008;display:flex;flex-direction:column;gap:12px}
.sc-head{display:flex;align-items:center;gap:11px}
.sc-avatar{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#2f6fed,#4f8bff);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;flex:0 0 auto}
.sc-title{flex:1;min-width:0}
.sc-title b{display:block;font-size:15px}
.sc-title small{display:block;color:#8a94a6;font-size:11.5px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-pct{font-size:13px;font-weight:700;color:#c2841a;background:#fffaf0;border:1px solid #f2e0b6;
  padding:5px 10px;border-radius:99px}
.sc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sc-stats>div{background:#f8fafd;border-radius:10px;padding:8px 10px}
.sc-stats span{display:block;font-size:11px;color:#8794ad;white-space:nowrap}
.sc-stats b{display:block;font-size:15px;margin-top:3px;font-variant-numeric:tabular-nums}
.sc-wage{display:flex;justify-content:space-between;align-items:center;
  background:#f2f6ff;border:1px solid #dbe6ff;border-radius:12px;padding:10px 13px}
.sc-wage span{font-size:12px;color:#5b6b8c}
.sc-wage b{font-size:19px;font-weight:800;color:#2f6fed;font-variant-numeric:tabular-nums}
.sc-actions{display:flex;gap:8px;margin-top:auto;padding-top:10px;border-top:1px dashed #eef2f9}
.sc-actions form{margin:0}
.sc-actions details{position:relative}
.sc-actions .config{position:absolute;right:0;top:calc(100% + 6px);z-index:50;width:250px;
  background:#fff;border:1px solid #e9eefa;border-radius:14px;padding:12px;box-shadow:0 18px 44px #1a23401f}

/* ---------- 手机自适应补充 ---------- */
@media(max-width:900px){
  .panel-head{flex-direction:column;align-items:flex-start;gap:12px}
  .panel-tools{width:100%;flex-wrap:wrap;gap:8px}
  .panel-tools .add,.panel-tools .add-inline{flex-wrap:wrap;width:100%}
  .panel-tools .add input,.panel-tools .add select,
  .panel-tools .add-inline input,.panel-tools .add-inline select{flex:1 1 140px;min-width:0}
  .jg-totals{grid-template-columns:1fr}
  .status-chips{flex-wrap:wrap}
  .seg{max-width:100%;overflow-x:auto}
  .staff-grid{padding:14px}
  .topbar{flex-direction:column;align-items:flex-start;gap:12px}
  .tb-right{width:100%;flex-wrap:wrap;gap:8px}
}
@media(max-width:640px){
  .sc-stats{grid-template-columns:repeat(2,1fr)}
  .ac-head{gap:9px}
  .ac-name b{font-size:15px}
  .jg-card .ac-mini.four{grid-template-columns:1fr 1fr}
  .source-grid,.sources{grid-template-columns:1fr}
  .chart-card{padding:14px}
  .hero-card{padding:16px}
  .hero-split{grid-template-columns:1fr 1fr}
  .content{padding:12px 12px 40px}
}
@media(max-width:420px){
  .sc-stats{grid-template-columns:1fr}
  .hero-split{grid-template-columns:1fr}
  .side-nav a span,.side-nav a{font-size:12.5px}
}

/* 手机：侧边栏只留导航（添加账号移到账号管理页），避免下拉框撑破页面 */
@media(max-width:900px){
  .side-foot{display:none}
  .sidebar{min-width:0}
  .side-nav{flex:1 1 auto;min-width:0;overflow-x:auto;flex-wrap:nowrap}
  .side-nav::-webkit-scrollbar{display:none}
  .content{min-width:0;overflow-x:hidden}
  .add-acct{position:relative}
  .add-acct .config{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:250px;
    background:#fff;border:1px solid #e9eefa;border-radius:14px;padding:12px;box-shadow:0 18px 44px #1a23401f}
}
@media(min-width:901px){ .add-acct{display:none} }

/* 手机：竖排时让内容区撑满（.app 默认 align-items:flex-start 会按内容宽度撑开） */
@media(max-width:900px){
  .app{align-items:stretch}
  .content{width:100%;max-width:100vw;overflow-x:hidden}
  .chart-card svg,.hero-card svg,.chart-card table{max-width:100%}
  .hero-split,.hero-top{min-width:0}
  .tb-right{max-width:100%}
}
/* 兜底：任何图表/图片都不许把页面撑宽 */
.chart-card svg,.hero-card svg{max-width:100%;height:auto}
html,body{max-width:100%;overflow-x:hidden}

/* 小计说明行不要断行（"10 个聚光户 · 时间" 会被拆开） */
.jt-item small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 员工卡片操作行 */
.staff-grid{align-items:start}
.sc-actions{margin-top:0;align-items:center}
.sc-actions>details>summary{list-style:none;cursor:pointer;padding:6px 14px;border-radius:9px;
  border:1px solid #e9eef6;background:#fff;color:#5b6678;font-size:12.5px;display:inline-block}
.sc-actions>details>summary::-webkit-details-marker{display:none}
.sc-actions>details[open]>summary{background:#2f6fed;color:#fff;border-color:#2f6fed}
.sc-actions form{margin:0;flex:0 0 auto}
.sc-actions form button{padding:6px 14px;border-radius:9px;font-size:12.5px}
.sc-actions .config{top:calc(100% + 8px)}

/* 员工卡操作行（独立类名，避免和数据来源卡片的 .sc-actions 冲突） */
.sc-foot{display:flex;flex-direction:row;align-items:center;gap:8px;flex:none;
  margin:0;padding-top:10px;border-top:1px dashed #eef2f9}
.sc-foot details{position:relative}
.sc-foot>details>summary{list-style:none;cursor:pointer;height:auto;padding:6px 14px;border-radius:9px;
  border:1px solid #e9eef6;background:#fff;color:#5b6678;font-size:12.5px;display:inline-block}
.sc-foot>details>summary::-webkit-details-marker{display:none}
.sc-foot>details[open]>summary{background:#2f6fed;color:#fff;border-color:#2f6fed}
.sc-foot form{margin:0;flex:0 0 auto}
.sc-foot form button{height:auto;padding:6px 14px;border-radius:9px;font-size:12.5px}
.sc-foot .config{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:250px;
  background:#fff;border:1px solid #e9eefa;border-radius:14px;padding:12px;box-shadow:0 18px 44px #1a23401f}

/* ==========================================================================
   首页 KPI 区：6 列（hero 占 2 + 4 个 KPI），保证永远一排排满
   ========================================================================== */
.overview-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.overview-grid>.hero-card{grid-column:span 2}
@media(max-width:1400px){
  .overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .overview-grid>.hero-card{grid-column:span 2}
}
@media(max-width:1100px){
  .overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-grid>.hero-card{grid-column:span 2}
}
@media(max-width:640px){
  .overview-grid{grid-template-columns:1fr}
  .overview-grid>.hero-card{grid-column:span 1}
}

/* ==========================================================================
   聚光户小计：三块外观统一（去掉中间那块的特殊底色）
   ========================================================================== */
.jg-totals{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.jt-item.now,.jt-item.spend{background:#fff;border-color:#e9eefa}
.jt-item.now b{color:#16233f}
.jt-item.spend b{color:#16233f}
.jt-item.now b,.jt-item.spend b{font-size:24px}
.jt-item small{white-space:nowrap}

/* ==========================================================================
   配置弹窗（替代下拉菜单）
   ========================================================================== */
dialog.cfg-modal{border:0;border-radius:18px;padding:0;width:min(420px,calc(100vw - 32px));
  box-shadow:0 28px 70px #0f172a44;background:#fff;color:#1e2633}
dialog.cfg-modal::backdrop{background:#0f172a66;backdrop-filter:blur(2px)}
.cm-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid #eef2f9}
.cm-head b{font-size:15px}
.cm-head small{display:block;color:#8a94a6;font-size:11.5px;margin-top:2px}
.cm-close{border:0;background:#f4f6fb;color:#5b6678;width:30px;height:30px;border-radius:9px;
  font-size:16px;cursor:pointer;line-height:1}
.cm-body{padding:14px 18px 18px;display:grid;gap:10px;max-height:min(66vh,520px);overflow:auto}
.cm-body form{display:grid;gap:9px;margin:0}
.cm-body label{display:grid;gap:5px;font-size:12px;color:#8794ad}
.cm-body input,.cm-body select{width:100%;padding:9px 11px;border:1px solid #e3e9f3;border-radius:10px;
  font-size:13.5px;color:#1e2633;background:#fff}
.cm-body button{padding:9px 14px;border-radius:10px;border:1px solid #e9eef6;background:#fff;
  color:#3a4560;font-size:13px;cursor:pointer;text-align:center}
.cm-body button:hover{background:#f5f8fd}
.cm-body button.primary{background:#2f6fed;border-color:#2f6fed;color:#fff;font-weight:600}
.cm-body button.danger-text{color:#d3333f;border-color:#f7d7db;background:#fff5f6}
.cm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* 小计三块：强制等高等宽、文字不换行 */
.jg-totals{align-items:stretch}
.jt-item{display:flex;flex-direction:column;justify-content:flex-start;height:100%;
  min-height:106px;gap:6px}
.jt-item b{line-height:1.15}
.jt-item small{margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt-action{height:100%}

/* 小计说明：强制单行（span 被当成块级会换行） */
.jt-item small{display:block;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis}
.jt-item small span,#jt-count{display:inline !important;white-space:nowrap !important}

/* ==========================================================================
   弹窗内的表单：旧的 .cfg/.config 是下拉面板样式（absolute/350px），
   放进弹窗后会脱离文档流导致弹窗塌陷 —— 这里全部还原成普通流。
   ========================================================================== */
dialog.cfg-modal .cm-body .cfg,
dialog.cfg-modal .cm-body .config{
  position:static !important;right:auto !important;top:auto !important;left:auto !important;
  width:100% !important;max-width:none !important;max-height:none !important;overflow:visible !important;
  padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;z-index:auto !important;
}
dialog.cfg-modal{max-height:calc(100vh - 48px);overflow:visible}

/* html/body 用 clip 而不是 hidden：hidden 会创建滚动容器，让侧边栏的 sticky 失效 */
html,body{overflow-x:clip}

/* 添加账号/添加聚光户的表单在各页面常驻（侧边栏的按钮已移除） */
.add-acct{position:relative}
@media(min-width:901px){ .add-acct{display:inline-block} }

/* 「＋ 添加账号」按钮：summary 默认带三角标，且没有按钮样式 */
.add-acct>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  padding:9px 16px;border-radius:10px;background:#2f6fed;color:#fff;border:0;
  font-size:13.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 16px rgba(47,111,237,.28);transition:background .15s}
.add-acct>summary::-webkit-details-marker{display:none}
.add-acct>summary::marker{content:""}
.add-acct>summary:hover{background:#2560d8}
.add-acct[open]>summary{background:#1f52bb}
.add-acct .config{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:250px;
  background:#fff;border:1px solid #e9eefa;border-radius:14px;padding:12px;
  box-shadow:0 18px 44px #1a23401f;display:grid;gap:9px}

/* 图表卡片：内容一律裁在卡片内，底部留足空间给坐标轴和说明文字 */
.chart-card{overflow:hidden;padding-bottom:20px}
.chart-card svg{display:block;max-width:100%;height:auto}
.chart-card .chart-note{margin-top:10px}
.hero-card{overflow:hidden}

/* 图表：坐标轴标签与说明文字之间留出呼吸空间 */
.chart-card svg{margin-bottom:12px}
.chart-card .chart-note{margin:0 0 2px;line-height:1.5}

/* 图表 SVG 必须保持 190px 固定高（坐标轴标签是绝对定位在它下方 18px 的），
   任何 height:auto 都会把它撑高、盖住标签。这里强制还原。 */
.chart-card .plot-area{height:190px}
.chart-card svg.line-chart{width:100%;height:190px !important;max-width:none;margin:0;display:block}
.chart-card .plot{margin-bottom:20px}
.chart-card .x-ticks{bottom:-18px}
.chart-card .chart-note{margin:0}
.hero-card svg{max-width:100%}

/* 用户下拉：只留退出登录，顶部显示当前账号 */
.um-who{padding:8px 12px 10px;border-bottom:1px solid #eef2f9;margin-bottom:4px}
.um-who b{display:block;font-size:13.5px;color:#1e2633}
.um-who small{display:block;font-size:11.5px;color:#8a94a6;margin-top:2px}

/* 聚光户卡片：计划巡检结果那一行 */
.plan-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px dashed #e9eefa;font-size:12px;color:#6b7688}
.plan-line .pl-total{font-weight:600;color:#3a4453}
.plan-line .pl-mode{font-size:11px;padding:1px 7px;border-radius:999px;background:#eef3fd;color:#4a6fa5}
.plan-line .pl-ok{color:#1f9d6b}
.plan-line .pl-bad{font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid #ffd7bd;
  background:#fff6ef;color:#e07b39;cursor:pointer;font-weight:600}
.plan-line .pl-bad:hover{background:#ffeee2}
.plan-line small{margin-left:auto;color:#a4adbd;font-size:11px}

/* 专业号卡片：网络线路 */
.line-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;padding-top:8px;
  border-top:1px dashed #e9eefa;font-size:11.5px;color:#6b7688}
.line-row .ip{font-family:ui-monospace,Menlo,monospace;background:#f1f5fc;border:1px solid #e4ecfa;
  padding:1px 7px;border-radius:6px;color:#3a4a63}
.line-row .none{color:#a4adbd}
.line-row .days{margin-left:auto;font-size:11px;padding:1px 8px;border-radius:99px;background:#e7f8f0;color:#12a06a;font-weight:600}
.line-row .days.warn{background:#fff5e8;color:#e0812d}
.line-row .days.dead{background:#fdeeee;color:#e05252}

/* 弹窗里的线路表单 */
.pf-title{font-size:11.5px;color:#96a2b8;font-weight:700;letter-spacing:.3px;margin:0 0 8px}
.pf-paste{width:100%;height:52px;border:1px dashed #b9cdf3;border-radius:10px;padding:8px 10px;
  font-size:11.5px;font-family:ui-monospace,Menlo,monospace;background:#f8fbff;resize:none;color:#3a4a63;line-height:1.5}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pf-grid label{display:grid;gap:4px;font-size:11.5px;color:#6b7688}
.pf-grid input{height:34px;border:1px solid #dce6f5;border-radius:8px;padding:0 9px;font-size:12.5px;font-family:inherit}
.pf-acts{display:flex;gap:8px;margin-top:11px}
.pf-acts button{flex:1;height:36px;border-radius:9px;font-size:13px;cursor:pointer;font-family:inherit}
.pf-hint{margin-top:8px;font-size:11.5px;color:#96a2b8}
.pf-hint.ok{color:#12a06a;font-weight:600}
.pf-hint.bad{color:#e05252;font-weight:600}

/* ===== 专业号大卡片（不省略信息、更舒展） ===== */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.acct-card.big{display:block;padding:18px 20px;border-radius:18px}
.acct-card.big .bg-head{display:flex;align-items:center;gap:14px}
.acct-card.big .big-av{width:54px;height:54px;border-radius:15px;flex:none;position:relative}
.acct-card.big .big-av img{width:100%;height:100%;border-radius:15px;object-fit:cover}
.acct-card.big .big-av .dot-st{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border:2.5px solid #fff}
.acct-card.big .bg-meta{flex:1;min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.acct-card.big .bg-meta b{font-size:16px;letter-spacing:-.3px}
.acct-card.big .bg-meta small{font-size:11.5px;color:#9aa6ba}
.acct-card.big .bg-st{font-size:11px;padding:2px 9px;border-radius:99px;font-weight:600;
  background:#e7f8f0;color:#12a06a}
.acct-card.big .bg-st.muted,.acct-card.big .bg-st.logged_out,.acct-card.big .bg-st.error,.acct-card.big .bg-st.not_logged_in{
  background:#fdeeee;color:#e05252}
.acct-card.big .cfg-btn{margin-left:auto;height:32px;padding:0 14px;border-radius:9px;
  border:1px solid #dce6f5;background:#fff;color:#5b6b82;font-size:12.5px;cursor:pointer;font-family:inherit}
.acct-card.big .cfg-btn:hover{border-color:#c9d9f5;color:#2f6fed}
.acct-card.big .line-row{margin-top:15px;padding-top:13px;font-size:12px;gap:9px}
.acct-card.big .line-row .ip{font-size:12px;padding:2px 9px}
.acct-card.big .line-row .days{font-size:11.5px}
@media(max-width:640px){.acct-grid{grid-template-columns:1fr}.acct-card.big{padding:15px 16px}}

/* 专业号卡片容器：大一点，一行 3 个左右 */
#accounts .card-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;padding:22px 24px}
@media(max-width:1280px){#accounts .card-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
@media(max-width:760px){#accounts .card-grid{grid-template-columns:1fr;padding:14px}}

/* 线路的出口 IP */
.line-row .pip{font-size:11px;padding:1px 7px;border-radius:99px;background:#eef7f1;border:1px solid #cfe9d9;
  color:#1f8a5e;white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis}

/* ===================== 专业号：线路卡 ===================== */
.acct-card.lc{padding:0;overflow:hidden;border-radius:20px;display:block;
  box-shadow:0 2px 4px #0d15260a,0 18px 40px #0d152614;transition:transform .22s,box-shadow .22s;border:0}
.acct-card.lc:hover{transform:translateY(-4px);box-shadow:0 4px 8px #0d15260f,0 28px 56px #0d15261c}
.acct-card.lc .hd{position:relative;padding:15px 18px 14px;overflow:hidden;
  background:linear-gradient(135deg,#1aa975,#0c9c64 55%,#0a8a58)}
.acct-card.lc.bad .hd{background:linear-gradient(135deg,#e0605a,#d4453f 55%,#bf3a35)}
.acct-card.lc.none .hd{background:linear-gradient(135deg,#a9b7cb,#8e9db5 55%,#7e8ea8)}
.acct-card.lc .hd:before{content:"";position:absolute;right:-50px;top:-60px;width:170px;height:170px;
  border-radius:50%;background:#ffffff1f}
.acct-card.lc .hdrow{position:relative;display:flex;align-items:center;gap:11px}
.acct-card.lc .av{width:44px;height:44px;border-radius:14px;flex:none;position:relative;
  display:grid;place-items:center;overflow:hidden;background:#ffffff2e;border:1px solid #ffffff40}
.acct-card.lc .av img{width:100%;height:100%;object-fit:cover}
.acct-card.lc .av .dot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px #ffffff35}
.acct-card.lc .av .dot.bad{background:#ffd9d7}
.acct-card.lc .nm{flex:1;min-width:0}
.acct-card.lc .nm b{display:block;color:#fff;font-size:15.5px;font-weight:700;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-card.lc .nm small{display:block;color:#ffffffc4;font-size:11px;margin-top:3px}
.acct-card.lc .cfg{height:31px;padding:0 13px;border-radius:10px;border:1px solid #ffffff45;
  background:#ffffff26;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.acct-card.lc .cfg:hover{background:#ffffff3d}
.acct-card.lc .bd{padding:15px 18px 16px}
.acct-card.lc .city{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.acct-card.lc .city b{font-size:23px;font-weight:800;letter-spacing:-1px;color:#101a2c;line-height:1.05}
.acct-card.lc .city em{font-style:normal;font-size:10.5px;font-weight:600;color:#6b7d95;
  background:#f1f5fb;border:1px solid #e5ecf7;border-radius:6px;padding:2px 7px}
.acct-card.lc .ipline{display:flex;align-items:center;gap:8px;margin-top:10px}
.acct-card.lc .ipline .k{font-size:10px;color:#a3aec0;letter-spacing:.6px;font-weight:600}
.acct-card.lc .ipline .v{font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:700;
  color:#0c9c64;letter-spacing:-.3px}
.acct-card.lc.bad .ipline .v{color:#d4453f}
.acct-card.lc .host{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#aeb9c9;
  margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-card.lc.none .city b{font-size:16px;color:#8b98ab}
.acct-card.lc .ft{position:relative;border-top:1px dashed #e6ecf6;margin:0 18px;
  display:flex;align-items:center;justify-content:space-between;padding:10px 0 13px}
.acct-card.lc .ft:before,.acct-card.lc .ft:after{content:"";position:absolute;top:-7px;width:14px;height:14px;
  border-radius:50%;background:#f2f6fd}
.acct-card.lc .ft:before{left:-25px}
.acct-card.lc .ft:after{right:-25px}
.acct-card.lc .ft .lab{font-size:9.5px;color:#a8b3c4;letter-spacing:1.1px;font-weight:700}
.acct-card.lc .ft .val{font-size:12.5px;font-weight:700;color:#2a3a52;margin-top:2px}
.acct-card.lc .ft .val b{font-size:18px;color:#0c9c64;letter-spacing:-.6px}
.acct-card.lc .ft .val.w b{color:#dd7d17}
.acct-card.lc .ft .val.d b{color:#d4453f}
.acct-card.lc .ft .st{font-size:11px;font-weight:700;color:#0c9c64;background:#e9f8f1;border-radius:7px;padding:4px 10px}
.acct-card.lc.bad .ft .st{color:#d4453f;background:#fdeeee}
.acct-card.lc.none .ft .st{color:#94a1b5;background:#f2f5fa}
#accounts .card-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;padding:22px 24px}
@media(max-width:1280px){#accounts .card-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
@media(max-width:760px){#accounts .card-grid{grid-template-columns:1fr;padding:14px}}

/* 专业号卡片：复用聚光户卡片结构，4 列紧凑 */
#accounts .card-grid{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;padding:20px 22px}
.acct-card.pcard{padding:16px 16px 13px}
.acct-card.pcard .ac-metrics{margin-top:12px;gap:8px}
.acct-card.pcard .ac-metrics span{font-size:11px}
.acct-card.pcard .ac-mini{margin-top:10px}
.acct-card.pcard .ac-mini span{font-size:10.5px}
.acct-card.pcard .ac-actions{margin-top:12px}
@media(max-width:760px){#accounts .card-grid{grid-template-columns:1fr;padding:14px}}

/* 专业号卡片：再压缩一档 */
#accounts .card-grid{gap:12px;padding:18px 20px}
.acct-card.pcard{padding:14px 14px 11px}
.acct-card.pcard .ac-head{gap:10px}
.acct-card.pcard .jc-avatar{width:38px;height:38px}
.acct-card.pcard .ac-name b{font-size:14.5px}
.acct-card.pcard .ac-sub{font-size:11px}
.acct-card.pcard .ac-owner{margin-top:5px}
.acct-card.pcard .ac-metrics{margin-top:11px;padding-top:0}
.acct-card.pcard .ac-metrics span{font-size:10.5px}
.acct-card.pcard .ac-metrics b{font-size:15px!important;letter-spacing:-.3px}
.acct-card.pcard .ac-actions{margin-top:11px;gap:7px}
.acct-card.pcard .ac-actions button{height:32px;font-size:12.5px}
/* 天数 + 线路地址单行 */
.acct-card.pcard .pline{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border-top:1px dashed #eef2f9;font-size:11.5px;color:#9aa6ba;min-width:0}
.acct-card.pcard .pline .d{flex:none;font-weight:700;font-size:13px;letter-spacing:-.3px}
.acct-card.pcard .pline .d i{font-style:normal;font-size:10px;font-weight:500;color:#b3bdcb;margin-left:1px}
.acct-card.pcard .pline .d.g{color:#12a06a}
.acct-card.pcard .pline .d.a{color:#dd7d17}
.acct-card.pcard .pline .d.r{color:#d4453f}
.acct-card.pcard .pline .h{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
  color:#a9b6c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 专业号卡片（紧凑行式 · 3 列） ===== */
#accounts .card-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px;padding:22px 24px}
.acct-card.s2{padding:16px 18px 14px;border-radius:16px;display:block;background:#fff;border:1px solid #e9eff8;
  box-shadow:0 1px 2px #0d152608,0 6px 18px #0d15260a;transition:.16s}
.acct-card.s2:hover{box-shadow:0 3px 6px #0d15260a,0 14px 30px #0d152612;border-color:#d9e5f7;transform:translateY(-2px)}
.acct-card.s2 .s2-head{display:flex;align-items:center;gap:13px}
.acct-card.s2 .s2-av{width:46px;height:46px;border-radius:13px;flex:none;position:relative;overflow:hidden}
.acct-card.s2 .s2-av img{width:100%;height:100%;object-fit:cover}
.acct-card.s2 .s2-av .dot-jg{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border:2.5px solid #fff}
.acct-card.s2 .s2-meta{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acct-card.s2 .s2-meta b{font-size:15px;font-weight:700;letter-spacing:-.3px}
.acct-card.s2 .s2-st{font-size:10.5px;padding:2px 8px;border-radius:99px;font-weight:700;
  background:#e7f8f0;color:#0c9c64}
.acct-card.s2 .s2-st.bad{background:#fdeeee;color:#d4453f}
.acct-card.s2 .s2-meta small{font-size:11px;color:#a4b0c2}
.acct-card.s2 .cfg-btn{height:30px;padding:0 13px;border-radius:9px;border:1px solid #e6ecf7;background:#fff;
  color:#6b7d95;font-size:12px;cursor:pointer;font-family:inherit;flex:none}
.acct-card.s2 .cfg-btn:hover{border-color:#bcd2f5;color:#2f6fed;background:#f7faff}

.acct-card.s2 .s2-body{margin-top:13px;padding-top:12px;border-top:1px dashed #eef2f9}
.acct-card.s2 .s2-row1{display:flex}
.acct-card.s2 .s2-host{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#5a6b85;
  background:#f4f8fd;border:1px solid #e7effb;border-radius:8px;padding:4px 10px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-card.s2 .s2-host:before{content:"🌐 ";opacity:.7}
.acct-card.s2 .s2-host.off{color:#9aa6ba;background:#f7f9fc;border-color:#eef2f8}
.acct-card.s2 .s2-host.off:before{content:""}
.acct-card.s2 .s2-row2{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
.acct-card.s2 .s2-ip{font-size:11.5px;color:#1f8a5e;background:#eefaf4;border:1px solid #cdeedf;
  border-radius:8px;padding:3px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-card.s2 .s2-days{margin-left:auto;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;
  background:#e7f8f0;color:#0c9c64;white-space:nowrap}
.acct-card.s2 .s2-days.a{background:#fff5e8;color:#dd7d17}
.acct-card.s2 .s2-days.r{background:#fdeeee;color:#d4453f}
@media(max-width:820px){#accounts .card-grid{grid-template-columns:1fr;padding:14px}}

/* 专业号卡片：强制 3 列（覆盖前面的 minmax） */
#accounts .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px;padding:22px 24px}
@media(max-width:1200px){#accounts .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:820px){#accounts .card-grid{grid-template-columns:1fr!important;padding:14px}}
.acct-card.s2{min-width:0}

/* 专业号卡片 · 线路区：上下两行左对齐，天数右侧垂直居中 */
.acct-card.s2 .s2-body{margin-top:13px;padding-top:12px;border-top:1px dashed #eef2f9;
  display:flex;align-items:center;gap:12px}
.acct-card.s2 .s2-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.acct-card.s2 .s2-left .s2-host,
.acct-card.s2 .s2-left .s2-ip{align-self:flex-start;max-width:100%}
.acct-card.s2 .s2-right{flex:none;display:flex;align-items:center}
.acct-card.s2 .s2-days{margin-left:0}