/* TRIKICKS 会员后台 · 深海军蓝侧栏 + 青蓝强调，与官网同一套 LOGO 色板 */
#consoleShell{display:grid;grid-template-columns:236px 1fr;min-height:100vh;background:#f5f8fd;color:#1b2340}
#consoleSide{background:#091638;color:#c8cee4;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.cs-brand{display:flex;align-items:center;gap:9px;padding:18px 14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.cs-brand .logo-plate img{height:30px}
.cs-brand b{color:#fff;font-size:13.5px;letter-spacing:.06em;white-space:nowrap}
.cs-brand small{display:block;color:#8790ae;font-size:10px;letter-spacing:.04em}
.cs-group{padding:18px 12px 6px;font-size:10.5px;color:#727d9e;letter-spacing:.16em;font-weight:700}
.cs-nav{padding:0 10px;display:grid;gap:3px}
.cs-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-size:13.5px;color:#b9c1da;transition:.16s}
.cs-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.cs-nav a.on{background:linear-gradient(100deg,rgba(28,159,227,.30),rgba(13,31,92,.30));color:#fff;font-weight:600}
.cs-nav a .ci{width:19px;text-align:center;font-size:14px;opacity:.9}
.cs-nav a .cnt{margin-left:auto;background:rgba(255,255,255,.14);border-radius:100px;font-size:10px;padding:1px 7px}
.cs-foot{margin-top:auto;padding:16px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#78829f;line-height:1.7;flex-shrink:0}
/* 桌面端这层不产生盒子，菜单项仍直接参与 #consoleSide 的纵向布局 */
.cs-scroll{display:contents}

#consoleBody{min-width:0;display:flex;flex-direction:column}
#consoleHeader{height:64px;background:#fff;border-bottom:1px solid #e7eaf3;display:flex;align-items:center;gap:16px;padding:0 26px;position:sticky;top:0;z-index:40}
.ch-title{font-size:16px;font-weight:700}
.ch-title small{display:block;font-size:11.5px;color:#8b93ac;font-weight:400;margin-top:1px}
.ch-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ch-pill{font-size:11.5px;color:#5a6488;background:#f2f4fb;border-radius:100px;padding:6px 12px}
.ch-avatar{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#0d1f5c,#1c9fe3);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
#consoleMain{padding:26px;max-width:1420px;width:100%;margin:0 auto}

.cs-card{background:#fff;border:1px solid #e7eaf3;border-radius:14px;padding:22px;margin-bottom:20px}
.cs-card h2{font-size:16px;margin:0 0 4px;font-weight:700}
.cs-card .cs-sub{font-size:12.5px;color:#8b93ac;margin:0 0 18px}
.cs-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cs-row.end{justify-content:flex-end}
.cs-grid{display:grid;gap:16px}
.g2c{grid-template-columns:repeat(2,1fr)}
.g3c{grid-template-columns:repeat(3,1fr)}
.g4c{grid-template-columns:repeat(4,1fr)}
.kpi{background:#fff;border:1px solid #e7eaf3;border-radius:14px;padding:20px 22px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;right:-26px;top:-26px;width:90px;height:90px;border-radius:50%;background:rgba(28,159,227,.10)}
.kpi .lb{font-size:12.5px;color:#8b93ac}
.kpi b{display:block;font-size:29px;font-weight:800;line-height:1.35;color:#1b2340}
.kpi .dt{font-size:11.5px;color:#127a52}
.kpi .dt.dn{color:#c0483a}

.btn-c{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;border:1px solid #e0e4f0;background:#fff;color:#39426a;transition:.16s;white-space:nowrap}
.btn-c:hover{border-color:#1c9fe3;color:#0d3a86;background:#f5faff}
.btn-c.pri{background:linear-gradient(100deg,#0d1f5c,#1c8fd8);color:#fff;border-color:transparent}
.btn-c.pri:hover{filter:brightness(1.06)}
.btn-c.sm{padding:6px 11px;font-size:12px;border-radius:7px}
.btn-c.danger{color:#b4462f;border-color:#f0d5cf}
.btn-c:disabled{opacity:.5;cursor:not-allowed}
.inp,.sel,.txa{width:100%;padding:9px 12px;border:1px solid #e0e4f0;border-radius:9px;background:#fff;color:#1b2340;outline:none;font-size:13.5px}
.inp:focus,.sel:focus,.txa:focus{border-color:#1c9fe3;box-shadow:0 0 0 3px rgba(28,159,227,.13)}
.txa{min-height:96px;resize:vertical;line-height:1.7}
.lab{display:block;font-size:12.5px;font-weight:600;color:#4a5375;margin-bottom:6px}
.fld-c{margin-bottom:14px}
.fld-c .hint{font-size:11.5px;color:#929ab3;margin-top:5px}

table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{text-align:left;padding:11px 12px;background:#f8f9fd;color:#7a83a2;font-weight:600;font-size:12px;border-bottom:1px solid #e7eaf3;white-space:nowrap}
table.tb td{padding:11px 12px;border-bottom:1px solid #f0f2f8;color:#39426a;vertical-align:middle}
table.tb tr:hover td{background:#fafbff}
table.tb td strong{color:#1b2340}
.tb-wrap{overflow-x:auto;border:1px solid #e7eaf3;border-radius:12px}
.tag{display:inline-block;font-size:11px;padding:3px 9px;border-radius:100px;font-weight:600;white-space:nowrap}
.t-blue{background:#e8f3fc;color:#0d3a86}
.t-green{background:#e7f6ee;color:#127a52}
.t-orange{background:#fff3e2;color:#b57613}
.t-gray{background:#f0f2f7;color:#78829c}
.t-red{background:#fdeeea;color:#b4462f}
.t-purple{background:#f2ecfb;color:#6b3fb5}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.on{background:#127a52}.dot.off{background:#c6ccdc}.dot.err{background:#c0483a}.dot.wait{background:#d79b26}

.empty{text-align:center;padding:52px 20px;color:#929ab3;font-size:13.5px}
.empty .ei{font-size:32px;display:block;margin-bottom:12px;opacity:.5}
.tabs{display:flex;gap:4px;border-bottom:1px solid #e7eaf3;margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:9px 15px;font-size:13px;color:#7a83a2;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:#0d3a86;border-bottom-color:#1c9fe3;font-weight:700}
.tabs a:hover{color:#0d3a86}

.bar{height:7px;background:#eef0f7;border-radius:100px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#0d1f5c,#1c9fe3)}
.score{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:800;font-size:12.5px;color:#fff}
.s-hi{background:linear-gradient(135deg,#0d1f5c,#1c9fe3)}
.s-md{background:linear-gradient(135deg,#3f7fd8,#7bb8e8)}
.s-lo{background:linear-gradient(135deg,#a9b0c6,#c6ccdc)}

/* 渠道卡 */
.ch-card{background:#fff;border:1px solid #e7eaf3;border-radius:13px;padding:18px;display:flex;flex-direction:column;gap:12px}
.ch-card .top{display:flex;align-items:center;gap:12px}
.ch-card .lg{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0}
.ch-card .nm b{display:block;font-size:14px}
.ch-card .nm span{font-size:11.5px;color:#929ab3}
.ch-card .meta{font-size:11.5px;color:#8b93ac;line-height:1.8}
.ch-card .acts{display:flex;gap:7px;margin-top:auto;flex-wrap:wrap}
.ch-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#f8f9fd;border-radius:10px;padding:10px}
.ch-stat div{text-align:center}
.ch-stat b{display:block;font-size:15px;color:#1b2340}
.ch-stat span{font-size:10.5px;color:#929ab3}

/* 时间线 / 日志 */
.tl{display:grid;gap:0;margin:0;padding:0;list-style:none}
.tl li{position:relative;padding:0 0 18px 26px;border-left:2px solid #e7eaf3;margin-left:7px}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li:before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:#1c9fe3;border:2px solid #fff}
.tl li b{font-size:13px;display:block}
.tl li span{font-size:11.5px;color:#929ab3}
.log{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.9;color:#4a5375;
  background:#f8f9fd;border-radius:10px;padding:14px 16px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-all}

/* 图表 */
.chart{width:100%;height:190px;display:flex;align-items:flex-end;gap:10px;padding:10px 4px 0;border-bottom:1px solid #e7eaf3}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.chart .col i{width:100%;max-width:42px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#1c9fe3,rgba(13,31,92,.45));display:block}
.chart .col span{font-size:10.5px;color:#929ab3}
.chart-labels{display:flex;gap:10px;padding:8px 4px 0}
.chart-labels span{flex:1;text-align:center;font-size:10.5px;color:#929ab3}
.funnel{display:grid;gap:9px}
.funnel .fr{display:flex;align-items:center;gap:12px;font-size:12.5px}
.funnel .fr .fn{width:88px;color:#7a83a2;flex-shrink:0}
.funnel .fr .fb{flex:1;height:22px;background:#f0f2f8;border-radius:6px;overflow:hidden}
.funnel .fr .fb i{display:block;height:100%;background:linear-gradient(90deg,#0d1f5c,#1c9fe3);border-radius:6px}
.funnel .fr b{width:56px;text-align:right;color:#1b2340}

/* 商机阶段条 */
.path{display:flex;gap:4px;flex-wrap:wrap}
.path span{flex:1;min-width:76px;text-align:center;font-size:11px;padding:7px 4px;border-radius:7px;background:#f0f2f8;color:#929ab3}
.path span.done{background:#e7f6ee;color:#127a52;font-weight:600}
.path span.cur{background:linear-gradient(100deg,#0d1f5c,#1c9fe3);color:#fff;font-weight:700}

.callout{background:#f4f9fe;border:1px solid #e2ecf8;border-left:3px solid #1c9fe3;border-radius:0 12px 12px 0;padding:14px 18px;font-size:12.5px;color:#4a5375;line-height:1.8;margin-bottom:18px}
.callout.warn{background:#fff9ef;border-color:#f6e6c8;border-left-color:#d79b26;color:#7a5a1c}
.callout b{color:#1b2340}
.split-c{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
.mini{font-size:11.5px;color:#929ab3}
.hr{height:1px;background:#e7eaf3;margin:18px 0}
.pill-list{display:flex;gap:7px;flex-wrap:wrap}
.pill-list span{font-size:11.5px;background:#f2f4fb;color:#5a6488;border-radius:100px;padding:4px 11px}

@media(max-width:1100px){
  .g4c{grid-template-columns:repeat(2,1fr)}
  .g3c{grid-template-columns:repeat(2,1fr)}
  .split-c{grid-template-columns:1fr}
}
@media(max-width:820px){
  #consoleShell{grid-template-columns:1fr}
  #consoleSide{display:none}
  #consoleMain{padding:16px}
  .g2c,.g3c,.g4c{grid-template-columns:1fr}
  #consoleHeader{padding:0 16px}
}

/* HubSpot 式扩展板块：七个实体 + AEO + 助手 */
.hub-wrap{display:flex;flex-direction:column;gap:18px}
.hub-note{font-size:13px;line-height:1.8;color:#5c6b86;background:#f5f8fd;border-left:3px solid #1c9fe3;padding:11px 14px;border-radius:0 8px 8px 0}
.hub-mini{font-size:11.5px;color:#7d8aa1;margin:10px 0 0;line-height:1.6}
.hub-table-wrap{overflow-x:auto;margin-top:12px}
.hub-table{width:100%;border-collapse:collapse;font-size:13px;min-width:620px}
.hub-table th{text-align:left;font-size:11.5px;letter-spacing:.03em;color:#7d8aa1;font-weight:700;padding:10px 12px;border-bottom:1px solid #e7ecf4;white-space:nowrap}
.hub-table td{padding:11px 12px;border-bottom:1px solid #f0f2f8;color:#26324a;vertical-align:middle;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-table tbody tr:hover{background:#f8fbff}
.hub-table a{color:#1c9fe3;text-decoration:none}
.hub-table a:hover{text-decoration:underline}
.hub-ops{display:flex;gap:6px;flex-wrap:wrap;white-space:nowrap}
.hub-ops .btn-c{padding:5px 9px;font-size:11.5px}
.btn-c.danger{color:#c2473d;border-color:#f0c9c5}
.btn-c.danger:hover{background:#fff3f2}
.hub-inline-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end;margin-top:16px;padding-top:16px;border-top:1px dashed #e2e8f2}
.hub-inline-form .btn-c{justify-self:start;padding:9px 18px}
.hub-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;font-size:12.5px;color:#6b7890}
.hub-candidates{margin-top:18px;border:1px solid #dfe7f4;border-radius:10px;padding:14px;background:#fafcff}
.hub-candidates h3{font-size:14px;margin:0 0 10px;color:#0d1f5c}
.hub-cand{display:block;padding:9px 10px;border-bottom:1px solid #edf1f8;font-size:13px;color:#26324a;cursor:pointer}
.hub-cand:hover{background:#f2f8ff}
.hub-cand input{margin-right:9px}
.hub-cand span{color:#1c9fe3;display:inline-block;max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.hub-cand .mini{display:block;margin:4px 0 0 24px;color:#8492a8;word-break:break-all}
/* 证据链接一律单行省略：原样展示会把候选卡撑成三行，长 URL 还读不出重点 */
.hub-cand .mini a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom;color:#2b7fd4;word-break:normal}
.hub-kpis{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.hub-kpis>div{background:#f5f8fd;border-radius:9px;padding:10px 16px;min-width:120px}
.hub-kpis span{display:block;font-size:11px;color:#7d8aa1}
.hub-kpis b{display:block;font-size:17px;color:#0d1f5c;margin-top:3px}
.hub-assistant .sub{font-size:12.5px;color:#7d8aa1;line-height:1.7;margin:6px 0 14px}
.hub-msg{margin:8px 0;padding:10px 13px;border-radius:10px;font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-word;max-width:88%}
.hub-msg.ai{background:#f1f6fd;color:#26324a}
.hub-msg.me{background:#0d1f5c;color:#fff;margin-left:auto}
.hub-fab{position:fixed;right:24px;bottom:24px;z-index:60;width:52px;height:52px;border-radius:50%;border:0;
  background:linear-gradient(135deg,#1c9fe3,#0d1f5c);color:#fff;font-size:22px;cursor:pointer;
  box-shadow:0 10px 26px rgba(13,31,92,.28);transition:transform .2s,box-shadow .2s}
.hub-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 32px rgba(13,31,92,.36)}
@media(max-width:820px){.hub-fab{right:14px;bottom:14px}.hub-inline-form{grid-template-columns:1fr}}

/* ── 上手引导（入门指南浮层 + 概览里的上手清单） ─────────────────
   参考 HubSpot 的后台引导：左边一份指南目录，右边按阶段列任务卡。
   差别在这儿的进度是算出来的：渠道接了几个、表里有几个人、商机推到第几步。 */
.ob-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid #e0e4f0;background:#fff;color:#39426a;
  border-radius:100px;padding:6px 13px 6px 8px;font-size:12px;font-weight:600;cursor:pointer;transition:.18s}
.ob-btn:hover{border-color:#1c9fe3;color:#0d3a86;background:#f5faff}
.ob-btn.on{border-color:#cfe6f8;background:#f2f9ff;color:#0d3a86}
.ob-btn b{color:#1c9fe3;font-weight:800}
.ob-btn-dot{width:15px;height:15px;border-radius:50%;background:conic-gradient(#1c9fe3 calc(var(--p)*1%),#e6ecf6 0);
  position:relative;flex-shrink:0}
.ob-btn-dot:after{content:"";position:absolute;inset:3px;background:#fff;border-radius:50%}

.ob-host{position:fixed;right:22px;top:80px;width:322px;z-index:70;display:none}
.ob-host.on{display:block;animation:obIn .22s ease-out}
@keyframes obIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ob-p{background:#fff;border:1px solid #e3e9f4;border-radius:16px;padding:16px;
  box-shadow:0 18px 44px rgba(13,31,92,.16);max-height:calc(100vh - 110px);overflow:auto}
.ob-p-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ob-p-head b{font-size:15px;color:#1b2340}
.ob-x{border:0;background:transparent;font-size:20px;line-height:1;color:#9aa3bb;cursor:pointer;padding:0 2px}
.ob-x:hover{color:#39426a}
.ob-p-total{display:flex;align-items:center;gap:12px;padding:12px;background:#f7faff;border-radius:12px;margin-bottom:14px}
.ob-ring{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:conic-gradient(#1c9fe3 calc(var(--p)*1%),#e6ecf6 0)}
.ob-ring i{width:34px;height:34px;border-radius:50%;background:#f7faff;display:grid;place-items:center;
  font-style:normal;font-size:11px;font-weight:800;color:#0d3a86}
.ob-p-sum b{display:block;font-size:13px;color:#1b2340}
.ob-p-sum span{font-size:11.5px;color:#8b93ac}
.ob-p-list{display:grid;gap:2px;margin-bottom:6px}
.ob-g{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;transition:.15s}
.ob-g:hover{background:#f5f9ff}
.ob-g-ico{width:22px;text-align:center;color:#1c9fe3;font-size:13px}
.ob-g-main{flex:1;min-width:0}
.ob-g-main b{display:block;font-size:12.5px;color:#26324a;font-weight:600;margin-bottom:5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ob-g-num{font-size:11px;color:#8b93ac;font-variant-numeric:tabular-nums}
.ob-bar{display:block;height:5px;background:#eef2f9;border-radius:100px;overflow:hidden}
.ob-bar.big{height:7px;margin:10px 0 4px}
.ob-bar > i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#0d1f5c,#1c9fe3);
  transition:width .4s ease}
.ob-p-links{display:flex;gap:16px;padding:12px 8px;border-top:1px solid #eef1f8;margin-top:6px}
.ob-p-links a{font-size:12px;color:#2b7fd4}
.ob-p-connwrap{border-top:1px solid #eef1f8;padding-top:12px}
.ob-p-lab{font-size:11px;color:#8b93ac;margin-bottom:9px}
.ob-p-connrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ob-conn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  border:1px dashed #d9e0ee;color:#97a1ba;background:#fbfcff}
.ob-conn.on{border:1px solid var(--c);background:var(--c);color:#fff}
.ob-conn.add{color:#1c9fe3;border-color:#bfdcf5;font-size:16px;font-weight:600}
.ob-conn.add:hover{background:#f0f8ff}
.ob-p-connrow .mini{margin-left:2px}

.ob-sec{background:#fff;border:1px solid #e7eaf3;border-radius:14px;padding:20px 22px;margin-bottom:20px}
.ob-sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ob-sec-head h2{font-size:16px;margin:0;font-weight:700;color:#1b2340}
.ob-sec-head span{font-size:12.5px;color:#8b93ac}
.ob-sec-head b{margin-left:auto;font-size:12.5px;color:#0d3a86;background:#f2f9ff;border-radius:100px;padding:4px 12px}
.ob-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ob-card{border:1px solid #e9eef7;border-radius:12px;padding:14px 15px;background:#fbfcff}
.ob-c-head{display:flex;align-items:center;gap:10px}
.ob-c-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:13px;
  background:linear-gradient(135deg,#0d1f5c,#1c9fe3);flex-shrink:0}
.ob-c-tt{flex:1;min-width:0}
.ob-c-tt b{display:block;font-size:13px;color:#1b2340}
.ob-c-tt span{font-size:11.5px;color:#8b93ac}
.ob-c-pct{font-size:12.5px;font-weight:800;color:#0d3a86}
.ob-t{display:flex;align-items:flex-start;gap:9px;padding:8px 4px;border-radius:8px;transition:.14s}
.ob-t:hover{background:#f2f8ff}
.ob-ck{width:17px;height:17px;border-radius:50%;border:1.5px solid #cfd7e7;flex-shrink:0;margin-top:1px;
  display:grid;place-items:center;font-size:10px;color:#fff;line-height:1}
.ob-t.done .ob-ck{border-color:transparent;background:linear-gradient(135deg,#127a52,#2bb37c)}
.ob-t-main{flex:1;min-width:0}
.ob-t-main b{display:block;font-size:12.5px;color:#26324a;font-weight:600}
.ob-t-main span{display:block;font-size:11.5px;color:#8b93ac;margin-top:2px}
.ob-t.done .ob-t-main b{color:#6b7890}
.ob-t-meta{font-size:11px;color:#8b93ac;white-space:nowrap;padding-top:1px}
.ob-t.done .ob-t-meta{color:#127a52}
.ob-more{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid #eef1f8;margin-top:14px;padding-top:13px}
.ob-more b{font-size:12.5px;color:#4a5375}
.ob-more a{font-size:12.5px;color:#2b7fd4}
.ob-sec.done{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#f6fcf9;border-color:#dcefe6}
.ob-sec.done b{font-size:13.5px;color:#127a52}
.ob-sec.done span{font-size:12.5px;color:#6b7890}
.ob-sec.done .btn-c{margin-left:auto}

@media(max-width:1180px){ .ob-cards{grid-template-columns:1fr} }
@media(max-width:900px){
  .ob-host{left:12px;right:12px;width:auto;top:70px}
  .ob-p{max-height:calc(100vh - 90px)}
}

/* ── 后台弹窗 ─────────────────────────────────────────────────────
   后台各板块的弹窗只返回内容片段，没有遮罩层；#modalHost 也没有定位样式，
   于是弹窗被当成普通块排在 #consoleShell 之后，掉到浏览区之外的最底部，
   且换板块也不会消失。现在由 app.js 的 modal() 统一套上 .modal-mask + .modal.modal-cs。 */
.modal.modal-cs{max-width:760px}
.modal-cs h2{font-size:19px}
.modal-cs .sub{margin-bottom:16px}
/* 弹窗打开时锁住背后页面滚动，避免滚轮把弹窗底下那层一起带走 */
body.modal-open{overflow:hidden}
@media(max-width:720px){
  .modal.modal-cs{max-width:100%;padding:22px 18px}
}

/* ── 手机端后台：抽屉侧栏 + 单行顶栏 ────────────────────────────────
   症状（390px 实测）：顶栏死高 64px，里面塞了标题、两个 pill、引导、头像、
   语言下拉、退出；放不下就整体溢出，标题被挤成 23px 宽的一列竖排字
   （截图里左边那串「件，／一眼／看清表里多少人」），右侧控件压到屏幕外。
   做法：≤820px 顶栏改为「汉堡键 + 标题 + 引导 + 头像」，其余进抽屉；
        侧栏变成左侧抽屉（原来直接 display:none，手机上根本没有导航）。 */
#consoleMask{display:none}
.ch-burger{display:none}
.cs-x{display:none}
.cs-acct{display:none}
.cs-out{display:none}

@media(max-width:820px){
  /* 侧栏：从 0 宽隐藏改为可滑出的抽屉 */
  /* 上面 820 断点里原有的 #consoleSide{display:none} 必须在这里改回来，
     否则抽屉宽度恒为 0（滑进来也是一条空线）。 */
  #consoleSide{display:flex;position:fixed;left:0;top:0;bottom:0;width:min(82vw,300px);height:100%;
    z-index:80;transform:translateX(-100%);transition:transform .24s cubic-bezier(.32,.72,.3,1);
    padding-bottom:calc(16px + env(safe-area-inset-bottom));will-change:transform}
  body.cs-open #consoleSide{transform:none;box-shadow:0 24px 60px rgba(3,10,32,.46)}
  #consoleMask{display:block;position:fixed;inset:0;z-index:75;background:rgba(6,16,44,.44);
    opacity:0;pointer-events:none;transition:opacity .22s}
  body.cs-open #consoleMask{opacity:1;pointer-events:auto}
  body.cs-open{overflow:hidden}

  /* 抽屉里只让菜单滚，品牌与底部（返回官网 / 语言 / 退出）始终可见 */
  .cs-scroll{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .cs-brand{flex-shrink:0}
  .cs-x{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:30px;height:30px;
    border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#c8cee4;font-size:19px;line-height:1}
  .cs-acct{display:block}
  .cs-out{display:block;margin-top:10px;width:100%;padding:10px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);color:#c8cee4;font-size:12.5px;text-align:center}
  .cs-out:hover{background:rgba(255,255,255,.12);color:#fff}
  .cs-nav a{padding:12px 12px}          /* 触摸目标 44px 高 */
  .cs-group{padding-top:14px}

  /* 顶栏：高度自适应，标题单行省略，其余收进抽屉 */
  #consoleHeader{height:auto;min-height:56px;padding:8px 12px;gap:10px;flex-wrap:nowrap}
  .ch-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;
    padding:0 9px;border:1px solid #e0e4f0;border-radius:10px;background:#f7f9fe;flex-shrink:0}
  .ch-burger i{display:block;height:2px;border-radius:2px;background:#39426a}
  .ch-title{font-size:15.5px;line-height:1.25;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 副标题在手机上隐藏：标题区只有 85–160px 宽，长句一律被截成「Everyone from…」，
     截断比不显示更难看，也不比页面里的第一张卡多说什么。桌面端照常显示。 */
  .ch-title small{display:none}
  .ch-right{margin-left:auto;gap:8px;flex-shrink:0}
  .ch-pill,.ch-right .btn-c[data-act="logout"]{display:none}
  .ob-btn{padding:6px 9px 6px 6px;font-size:11.5px;gap:5px}
  .ob-btn .ob-lb{display:none}
  .cs-lang{height:34px;min-width:0;width:78px;padding:0 2px;font-size:11px}
  .ch-avatar{width:32px;height:32px;border-radius:9px}

  #consoleMain{padding:14px 14px calc(30px + env(safe-area-inset-bottom))}
  .cs-card{padding:16px 15px;border-radius:12px}
  .cs-card .cs-sub{margin-bottom:14px}
  .kpi{padding:16px 15px;border-radius:12px}
  .kpi b{font-size:26px}

  /* 栅格：KPI 两列，其余单列 */
  .cs-grid{gap:12px}
  .g2c{grid-template-columns:1fr}
  .g3c,.g4c{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-c{gap:14px}

  /* 表单控件 16px：iOS 上小于 16px 会在聚焦时自动放大页面 */
  .inp,.sel,.txa{font-size:16px}
  .lab{font-size:13px}
  .btn-c{min-height:38px}
  .btn-c.sm{min-height:34px}

  /* 标签页改为横向滚动，避免 5 个 tab 折成三行 */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap;flex:0 0 auto}

  .chart{height:158px;gap:7px}
  .funnel .fr .fn{width:74px;font-size:11.5px}
  .funnel .fr b{width:46px}
  .path span{min-width:64px}
  .hub-kpis{gap:8px}
  .hub-kpis>div{flex:1 1 46%;min-width:0;padding:9px 12px}
  .hub-table{min-width:540px}
  .log{max-height:200px}

  /* 弹窗：贴边留 12px，内容自己滚 */
  .modal-mask{padding:12px}
  .modal{max-height:90vh}
  .modal.modal-cs{padding:20px 16px}
  /* 引导浮层在手机上做到底部整宽 */
  .ob-host{left:10px;right:10px;width:auto;top:auto;bottom:10px}
  .ob-p{max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px)}
  .hub-fab{right:12px;bottom:calc(14px + env(safe-area-inset-bottom))}
  /* 助手球挂在抽屉内部，抽屉一开它会浮在遮罩上，与抽屉抢焦点 */
  body.cs-open .hub-fab{display:none}
}
@media(max-width:430px){
  .g3c,.g4c{grid-template-columns:1fr}
  .ch-title{font-size:14.5px}
  #consoleMain{padding:12px 12px calc(28px + env(safe-area-inset-bottom))}
}