/* ============================================================================
   长沙强基行动收入分析看板 · 全站设计系统
   Design Tokens → Base → Layout → Components → Pages → Responsive
   与「长沙广电直销员分析系统」保持同一套令牌与视觉语言
   ========================================================================== */

/* ========================= 1. 设计令牌 ========================= */
:root{
  --c-bg:#0b1220;
  --c-bg-2:#0f1a2e;
  --c-panel:#16213e;
  --c-panel-2:#1c2b4d;
  --c-line:#26365c;
  --c-line-soft:rgba(255,255,255,.06);
  --c-line-soft-2:rgba(255,255,255,.10);

  --c-text:#e6edf7;
  --c-text-2:#94a3c4;
  --c-text-3:#8494b8;

  --c-gold:#f5b942;
  --c-blue:#3b82f6;
  --c-cyan:#22d3ee;
  --c-green:#34d399;
  --c-red:#f87171;
  --c-orange:#fb923c;
  --c-purple:#a78bfa;

  --bg-gold:rgba(245,185,66,.13);
  --bg-blue:rgba(59,130,246,.12);
  --bg-green:rgba(52,211,153,.14);
  --bg-red:rgba(248,113,113,.12);
  --bg-orange:rgba(251,146,60,.14);
  --bg-cyan:rgba(34,211,238,.12);
  --bg-purple:rgba(167,139,250,.13);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(0,0,0,.24);
  --sh-2:0 8px 28px rgba(0,0,0,.34);
  --focus-ring:0 0 0 2px rgba(245,185,66,.55);

  --ff:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;

  /* ---- 字号阶梯（1440px 基准，1800/2300 两档整体放大，见文末断点） ----
     42/34  主视觉大数字（hero 达成率）
     26     指标卡主数字（KPI · 单元达标率）
     22     板块内数值（mcard）
     18     页面主标题（.ph-t）、登录标题、抽屉 KPI
     16     顶栏视图标题
     15     卡片/区块标题（.card h3 / .board-hd h3 / .hero-hd .t / 浮层标题）
     14     正文（body）
     13     表格正文、按钮、输入框、侧栏导航
     12     次要文字（表头、徽标、副标题、说明）
     11     辅助注释（.hint / .tag / .metabar / .subline）  */
  --fs-10:10px;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-26:26px; --fs-28:28px;
  --fs-34:34px; --fs-42:42px;

  --sidebar-w:214px;
  --topbar-h:54px;
  --control-h:34px;
}

/* ========================= 2. 基础重置 ========================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--ff); font-size:var(--fs-14); line-height:1.5;
  color:var(--c-text); background:var(--c-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.35}
p{margin:0}
a{color:var(--c-blue);text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
[tabindex]:focus-visible,.seg button:focus-visible,.nav a:focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm);
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--c-gold);color:#1a1300;padding:var(--sp-2) var(--sp-4);
  border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:5px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--c-panel-2);background-clip:content-box}

/* ========================= 3. 布局骨架 ========================= */
.app{display:flex;height:100vh;overflow:hidden}

.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0d1526,#0a1120);
  border-right:1px solid var(--c-line-soft);
  z-index:40;
}
.sidebar .brand{padding:var(--sp-4);border-bottom:1px solid var(--c-line-soft);flex-shrink:0}
.sidebar .brand-logo{
  width:100%;max-width:150px;background:#fff;border-radius:var(--r-sm);
  padding:5px 8px;margin-bottom:10px;
}
.sidebar .brand b{display:block;color:var(--c-gold);font-size:var(--fs-14);line-height:1.35}
.sidebar .brand span{display:block;color:var(--c-text-3);font-size:var(--fs-11);margin-top:var(--sp-1)}

.nav{flex:1;overflow-y:auto;padding:var(--sp-2)}
.nav .group{
  color:var(--c-text-3);font-size:var(--fs-11);
  padding:var(--sp-3) var(--sp-3) var(--sp-1);letter-spacing:.6px;
}
.nav a{
  display:flex;align-items:center;gap:9px;
  padding:9px var(--sp-3);margin:2px 0;border-radius:var(--r-sm);
  color:var(--c-text-2);font-size:var(--fs-13);
  transition:background .16s ease,color .16s ease;
}
.nav a:hover{background:var(--c-panel);color:var(--c-text);text-decoration:none}
.nav a.active{
  background:linear-gradient(90deg,rgba(245,185,66,.18),transparent);
  color:var(--c-gold);box-shadow:inset 3px 0 0 var(--c-gold);
}
.nav a .dot{width:7px;height:7px;border-radius:50%;background:var(--c-text-3);flex-shrink:0}
.nav a.active .dot{background:var(--c-gold)}
.nav .nav-badge{
  margin-left:auto;font-size:var(--fs-11);padding:1px 6px;border-radius:var(--r-pill);
  background:var(--bg-gold);color:var(--c-gold);font-variant-numeric:tabular-nums;
}

.sidebar-foot{
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-line-soft);
  font-size:var(--fs-11);color:var(--c-text-3);line-height:1.5;flex-shrink:0;
}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

.topbar{
  height:var(--topbar-h);flex-shrink:0;display:flex;align-items:center;gap:var(--sp-2);
  padding:0 var(--sp-5);
  background:rgba(13,21,38,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-line-soft);
}
.topbar h2{font-size:var(--fs-16);letter-spacing:.2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .badge{
  background:var(--c-panel-2);border:1px solid var(--c-line);
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-12);color:var(--c-text-2);white-space:nowrap;
}
.topbar .badge.gold{color:var(--c-gold);border-color:rgba(245,185,66,.4)}
.topbar .badge.green{color:var(--c-green);border-color:rgba(52,211,153,.4)}

/* 全屏按钮 */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--control-h);height:var(--control-h);flex-shrink:0;
  background:var(--c-panel-2);border:1px solid var(--c-line);border-radius:var(--r-sm);
  color:var(--c-text-2);font-size:var(--fs-15);line-height:1;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.icon-btn:hover{background:var(--c-panel);color:var(--c-gold);border-color:rgba(245,185,66,.45)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.view{
  flex:1;overflow-y:auto;overflow-x:hidden;width:100%;
  padding:var(--sp-5) var(--sp-6) var(--sp-6);
  scroll-behavior:smooth;
}

/* ========================= 4. 栅格 ========================= */
.grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.grid>*{min-width:0}
.cols-6{--cols:6}
.cols-5{--cols:5}
.cols-4{--cols:4}
.cols-3{--cols:3}
.cols-2{--cols:2}
.span2{grid-column:span 2;min-width:0}

.dash-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);margin-top:var(--sp-4);align-items:stretch;
}
.dash-row>*{min-width:0}
.dash-row>.card{height:100%;display:flex;flex-direction:column}
.dash-row>.card>.chart{flex:1 1 auto;height:auto;min-height:clamp(300px,32vh,400px)}
.dash-row>.card>.tablewrap{flex:1 1 auto;min-height:0;max-height:clamp(300px,32vh,400px)}

.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-4);align-items:stretch}
.row3>*{min-width:0}
.row3>.card{height:100%;display:flex;flex-direction:column}
.row3>.card>.chart{flex:1 1 auto;height:auto;min-height:clamp(280px,30vh,360px)}

/* ========================= 5. 卡片 ========================= */
.card{
  min-width:0;background:var(--c-panel);border:1px solid var(--c-line-soft);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1);
}
.card h3{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-15);font-weight:600;letter-spacing:.2px;
  padding-bottom:10px;margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--c-line-soft);
}
.card h3 .tag{margin-left:auto;padding-left:10px;font-size:var(--fs-11);font-weight:400;color:var(--c-text-3)}
.card h3 .hint{
  font-size:var(--fs-11);font-weight:400;color:var(--c-text-3);
  background:rgba(255,255,255,.04);border:1px solid var(--c-line-soft);
  padding:1px 7px;border-radius:var(--r-pill);
}
.card h3 .fsbtn{
  margin-left:auto;background:none;border:1px solid var(--c-line);
  color:var(--c-text-2);border-radius:6px;padding:2px 9px;
  font-size:var(--fs-12);font-weight:400;
  transition:color .16s ease,border-color .16s ease;
}
.card h3 .fsbtn:hover{color:var(--c-gold);border-color:rgba(245,185,66,.45)}

/* ========================= 6. KPI ========================= */
.kpi{
  min-width:0;padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--c-line-soft);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:var(--sh-1);
  transition:border-color .18s ease,transform .18s ease;
}
.kpi:hover{border-color:rgba(245,185,66,.28)}
.kpi .v{
  font-size:var(--fs-26);font-weight:600;letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;line-height:1.15;color:var(--c-gold);
  overflow-wrap:anywhere;
}
.kpi .v.blue{color:var(--c-cyan)}
.kpi .v.green{color:var(--c-green)}
.kpi .v.purple{color:var(--c-purple)}
.kpi .l{font-size:var(--fs-12);color:var(--c-text-2);margin-top:6px}
.kpi .s{font-size:var(--fs-11);color:var(--c-text-3);margin-top:var(--sp-1);opacity:.9}
.kpi .u{font-size:var(--fs-13);font-weight:400;color:var(--c-text-3);margin-left:3px}

/* ========================= 7. 战役 Hero（破五/破三） ========================= */
.hero{
  position:relative;overflow:hidden;
  border:1px solid rgba(245,185,66,.22);
  border-radius:var(--r-lg);
  background:
    radial-gradient(900px 300px at 0% -30%,rgba(245,185,66,.16),transparent 62%),
    radial-gradient(700px 300px at 62% 130%,rgba(59,130,246,.16),transparent 62%),
    linear-gradient(150deg,#182643,#121b31 62%,#141d33);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow:var(--sh-2);
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
}
.hero-hd{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;position:relative;z-index:1}
.hero-hd .t{
  font-size:var(--fs-15);font-weight:600;letter-spacing:.4px;
  display:flex;align-items:center;gap:var(--sp-2);
}
.hero-hd .t::before{content:'';width:4px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--c-gold),var(--c-orange))}
.hero-hd .sub{font-size:var(--fs-11);color:var(--c-text-3)}
.hero-hd .spacer{flex:1}
.hero-hd .pill{background:rgba(255,255,255,.05)}

.hero-body{
  position:relative;z-index:1;margin-top:var(--sp-4);
  display:grid;grid-template-columns:minmax(230px,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-4);align-items:stretch;
}
.hero-cell{
  min-width:0;padding:var(--sp-4);
  border:1px solid var(--c-line-soft-2);border-radius:var(--r-md);
  background:rgba(255,255,255,.028);
  display:flex;flex-direction:column;
}
.hero-cell.accent{
  border-color:rgba(245,185,66,.34);
  background:linear-gradient(150deg,rgba(245,185,66,.14),rgba(245,185,66,.03));
}
.hero-cell .cl{font-size:var(--fs-12);color:var(--c-text-2);display:flex;align-items:center;gap:6px}
.hero-cell .cl b{color:var(--c-text);font-weight:600}
.big{
  display:flex;align-items:baseline;gap:3px;margin-top:6px;
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
}
.big .n{font-size:var(--fs-42);font-weight:700;line-height:1.05;color:var(--c-gold)}
.big .p{font-size:var(--fs-18);font-weight:600;color:var(--c-gold);opacity:.85}
.big.green .n,.big.green .p{color:var(--c-green)}
.big.blue .n,.big.blue .p{color:var(--c-cyan)}
.big.red .n,.big.red .p{color:var(--c-red)}
.big .u2{font-size:var(--fs-13);font-weight:400;color:var(--c-text-3);margin-left:2px}

.bar{height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden;margin-top:var(--sp-3)}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);transition:width .8s cubic-bezier(.22,1,.36,1)}
.bar>i.gold{background:linear-gradient(90deg,#f5b942,#f59e0b)}
.bar>i.green{background:linear-gradient(90deg,#34d399,#10b981)}
.bar>i.red{background:linear-gradient(90deg,#f87171,#ef4444)}
.bar>i.blue{background:linear-gradient(90deg,#22d3ee,#3b82f6)}
.bar>i.purple{background:linear-gradient(90deg,#a78bfa,#8b5cf6)}

.subline{font-size:var(--fs-11);color:var(--c-text-3);margin-top:var(--sp-2);display:flex;gap:var(--sp-3);flex-wrap:wrap}
.subline b{color:var(--c-text-2);font-weight:600;font-variant-numeric:tabular-nums}

.hero-mini{display:flex;gap:var(--sp-4);margin-top:auto;padding-top:var(--sp-3)}
.hero-mini div{font-size:var(--fs-11);color:var(--c-text-3)}
.hero-mini div b{display:block;font-size:var(--fs-15);color:var(--c-text);font-variant-numeric:tabular-nums;margin-top:1px}

/* ========================= 8. 板块（业务分类） ========================= */
.board{margin-top:var(--sp-6)}
.board-hd{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);
}
.board-hd .bar-ico{width:3px;height:14px;border-radius:2px;background:var(--c-blue)}
.board-hd h3{font-size:var(--fs-15);letter-spacing:.3px}
.board-hd .desc{font-size:var(--fs-11);color:var(--c-text-3)}
.board-hd .spacer{flex:1}
.board-hd .k{font-size:var(--fs-11);color:var(--c-text-2)}
.board-hd .k b{color:var(--c-gold);font-variant-numeric:tabular-nums}

.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3)}
.mcard{
  min-width:0;padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--c-line-soft);border-radius:var(--r-md);
  background:rgba(255,255,255,.022);
  transition:border-color .16s ease,background .16s ease;
}
.mcard:hover{border-color:var(--c-line-soft-2);background:rgba(255,255,255,.04)}
.mcard .m-l{font-size:var(--fs-12);color:var(--c-text-2);display:flex;align-items:center;gap:5px}
.mcard .m-v{
  font-size:var(--fs-22);font-weight:600;color:var(--c-text);margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px;overflow-wrap:anywhere;
}
.mcard .m-v.gold{color:var(--c-gold)}
.mcard .m-v.blue{color:var(--c-cyan)}
.mcard .m-v.green{color:var(--c-green)}
.mcard .m-v.purple{color:var(--c-purple)}
.mcard .m-s{font-size:var(--fs-11);color:var(--c-text-3);margin-top:3px}
.mcard .m-s b{color:var(--c-text-2);font-weight:600}
.mcard .m-s .up{color:var(--c-green)}
.mcard .m-s .down{color:var(--c-red)}

/* ========================= 9. 单元卡 ========================= */
.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:var(--sp-3)}
.ucard{
  min-width:0;padding:var(--sp-4);border:1px solid var(--c-line-soft);
  border-radius:var(--r-md);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  cursor:pointer;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
  position:relative;overflow:hidden;
}
.ucard:hover{border-color:rgba(245,185,66,.4);transform:translateY(-2px);box-shadow:var(--sh-2)}
.ucard .u-hd{display:flex;align-items:center;gap:var(--sp-2)}
.ucard .u-hd b{font-size:var(--fs-15)}
.ucard .u-hd .rank{
  font-size:var(--fs-11);font-variant-numeric:tabular-nums;
  padding:1px 6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);color:var(--c-text-3);
}
.ucard .u-hd .rank.top{background:var(--bg-gold);color:var(--c-gold)}
.ucard .u-rate{
  display:flex;align-items:baseline;gap:3px;margin-top:var(--sp-3);
  font-variant-numeric:tabular-nums;
}
.ucard .u-rate .n{font-size:var(--fs-26);font-weight:700;color:var(--c-green);letter-spacing:-.5px}
.ucard .u-rate .n.warn{color:var(--c-orange)}
.ucard .u-rate .n.bad{color:var(--c-red)}
.ucard .u-rate .p{font-size:var(--fs-13);color:var(--c-text-3)}
.ucard .u-rate .cap{margin-left:auto;font-size:var(--fs-11);color:var(--c-text-3)}
.ucard .u-kv{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-3)}
.ucard .u-kv div{font-size:var(--fs-11);color:var(--c-text-3)}
.ucard .u-kv div b{display:block;font-size:var(--fs-13);color:var(--c-text);font-variant-numeric:tabular-nums;margin-top:1px}

/* 强基行动达标（月收入 ≥ 3000 元） */
.ucard .u-xj{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:var(--sp-3);padding:6px 9px;border-radius:8px;
  background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.16);
  font-variant-numeric:tabular-nums;
}
.ucard .u-xj .xl{font-size:var(--fs-11);color:var(--c-text-2)}
.ucard .u-xj .xl em{font-style:normal;color:var(--c-text-3);font-size:var(--fs-11)}
.ucard .u-xj b{font-size:var(--fs-14);color:var(--c-green)}
.ucard .u-xj b.mid{color:var(--c-orange)}
.ucard .u-xj b.off{color:var(--c-red)}
.ucard .u-xj .xu{font-size:var(--fs-11);color:var(--c-text-3)}
.ucard .u-xj .dlt{margin-left:auto}

.dlt{font-size:var(--fs-11);font-variant-numeric:tabular-nums;color:var(--c-text-3)}
.dlt.up{color:var(--c-green)}
.dlt.down{color:var(--c-red)}
.dlt.none{color:var(--c-text-3);opacity:.7}
.dlt.flat{color:var(--c-text-3);opacity:.85}
td.up{color:var(--c-green)}
td.down{color:var(--c-red)}

/* ========================= 10. 图表容器 ========================= */
.chart{width:100%;height:300px;min-width:0}
.chart.tall{height:360px}
.chart.sm{height:240px}
.chart.xs{height:190px}

/* ========================= 11. 表格 ========================= */
.tablewrap{border:1px solid var(--c-line-soft);border-radius:var(--r-md);overflow:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-13);white-space:nowrap}
table.tbl th{
  position:sticky;top:0;z-index:1;text-align:left;
  font-size:var(--fs-12);font-weight:500;letter-spacing:.3px;
  padding:10px 12px;background:var(--c-bg-2);color:var(--c-text-2);
  border-bottom:1px solid var(--c-line-soft-2);
}
table.tbl td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
table.tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
table.tbl tbody tr:hover td{background:var(--bg-blue)}
table.tbl th.num,table.tbl td.num{text-align:right}
table.tbl th.sortable{cursor:pointer;user-select:none}
table.tbl th.sortable:hover{color:var(--c-gold)}
table.tbl th .ar{opacity:.4;margin-left:3px;font-size:var(--fs-10)}
table.tbl th.on .ar{opacity:1;color:var(--c-gold)}
tr[data-drill]{cursor:pointer}
tr.tot td{background:rgba(245,185,66,.07)!important;font-weight:600}

/* ========================= 12. 控件 ========================= */
.controls{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-4)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--control-h);padding:0 14px;background:var(--c-panel-2);
  border:1px solid var(--c-line-soft-2);border-radius:var(--r-sm);
  color:var(--c-text);font-size:var(--fs-13);white-space:nowrap;
  transition:border-color .16s ease,background .16s ease,opacity .16s ease;
}
.btn:hover{border-color:rgba(245,185,66,.45)}
.btn.primary{background:linear-gradient(90deg,var(--c-gold),#f59e0b);color:#1a1300;border-color:transparent;font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:none}
.btn.danger{color:var(--c-red);border-color:rgba(248,113,113,.4)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{height:28px;padding:0 10px;font-size:var(--fs-12)}

input,select,textarea{
  height:var(--control-h);padding:0 11px;background:var(--c-bg-2);
  border:1px solid var(--c-line);border-radius:var(--r-sm);
  color:var(--c-text);font-size:var(--fs-13);
  transition:border-color .16s ease,box-shadow .16s ease;
}
input::placeholder{color:var(--c-text-3)}
input:hover,select:hover{border-color:var(--c-line-soft-2)}
input:focus,select:focus{border-color:var(--c-gold);outline:none;box-shadow:var(--focus-ring)}
select{cursor:pointer}
input[type=file]{height:auto;padding:6px 8px;cursor:pointer}

.seg{display:inline-flex;background:var(--c-bg-2);border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden}
.seg button{
  height:calc(var(--control-h) - 2px);background:none;border:none;
  color:var(--c-text-2);padding:0 12px;font-size:var(--fs-13);
  transition:background .16s ease,color .16s ease;
}
.seg button:hover{color:var(--c-text)}
.seg button.on{background:var(--c-gold);color:#1a1300;font-weight:600}

.tabs{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-4);border-bottom:1px solid var(--c-line);overflow-x:auto}
.tabs button{
  background:none;border:none;color:var(--c-text-2);font-size:var(--fs-13);white-space:nowrap;
  padding:9px 14px;border-bottom:2px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.tabs button:hover{color:var(--c-text)}
.tabs button.on{color:var(--c-gold);border-bottom-color:var(--c-gold)}

/* ========================= 13. 徽标 / 标签 ========================= */
.pill{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:var(--fs-11);border:1px solid var(--c-line);color:var(--c-text-2);white-space:nowrap}
.pill.severe{background:var(--bg-red);color:var(--c-red);border-color:rgba(248,113,113,.4)}
.pill.focus{background:var(--bg-orange);color:var(--c-orange);border-color:rgba(251,146,60,.4)}
.pill.tip{background:var(--bg-cyan);color:var(--c-cyan);border-color:rgba(34,211,238,.35)}
.pill.ok{background:var(--bg-green);color:var(--c-green);border-color:rgba(52,211,153,.35)}
.pill.warn{background:var(--bg-gold);color:var(--c-gold);border-color:rgba(245,185,66,.4)}
.pill.mute{background:rgba(255,255,255,.05);color:var(--c-text-3)}
.tag{font-size:var(--fs-11);color:var(--c-text-3);font-weight:400}

/* ========================= 14. 元信息条 ========================= */
.metabar{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px var(--sp-4);
  margin-top:var(--sp-4);padding:9px 14px;background:var(--bg-blue);
  border:1px solid rgba(59,130,246,.16);border-radius:var(--r-md);
  font-size:var(--fs-11);color:var(--c-text-2);
}
.metabar .meta-item{white-space:nowrap}
.metabar .meta-item b{color:var(--c-text);font-weight:600;font-variant-numeric:tabular-nums}
.metabar .meta-sep{width:1px;height:12px;background:var(--c-line-soft-2)}

.pagehd{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.pagehd .ph-t{font-size:var(--fs-18);letter-spacing:.3px}
.pagehd .ph-s{font-size:var(--fs-12);color:var(--c-text-3);margin-top:3px}
.pagehd .spacer{flex:1}

/* ========================= 15. 反馈态 ========================= */
.busy-bar{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--c-gold),var(--c-blue),transparent);
  background-size:40% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .2s ease;
}
.busy-bar.on{opacity:1}
.busy-bar::after{content:'';display:block;height:100%;background:inherit;background-size:40% 100%;animation:busySlide 1.1s linear infinite}
@keyframes busySlide{from{background-position:-40% 0}to{background-position:140% 0}}

.errbar{
  display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-4);
  padding:11px 14px;border:1px solid rgba(248,113,113,.32);
  background:var(--bg-red);color:#fecaca;border-radius:var(--r-md);font-size:var(--fs-13);
}
.errbar span{flex:1}

.empty-state{padding:38px 20px;text-align:center;color:var(--c-text-3)}
.empty-ico{font-size:var(--fs-26);opacity:.45;margin-bottom:var(--sp-2)}
.empty-t{font-size:var(--fs-13);color:var(--c-text-2)}
.empty-s{font-size:var(--fs-12);margin-top:6px;opacity:.85}
.card .empty-state{padding:26px 12px}

.toast{
  position:fixed;bottom:var(--sp-6);left:50%;transform:translateX(-50%);z-index:180;
  background:var(--c-panel-2);border:1px solid var(--c-line);
  padding:11px 20px;border-radius:var(--r-md);box-shadow:var(--sh-2);
  font-size:var(--fs-13);max-width:min(90vw,520px);
}

/* ========================= 16. 登录页 ========================= */
.login-wrap{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);
  background:radial-gradient(1200px 600px at 50% -10%,#1b2c50,var(--c-bg));
  overflow:auto;z-index:150;
}
.login-card{
  width:372px;max-width:100%;background:var(--c-panel);
  border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--sh-2);
}
.login-logo{width:216px;margin:0 auto 14px;background:#fff;border-radius:10px;padding:8px 12px}
.login-card h1{font-size:var(--fs-18);margin:0 0 4px;color:var(--c-gold);text-align:center}
.login-card .sub{color:var(--c-text-2);font-size:var(--fs-12);margin-bottom:var(--sp-5);text-align:center}
.login-card label{display:block;font-size:var(--fs-12);color:var(--c-text-2);margin:var(--sp-3) 0 5px}
.login-card input{width:100%}
.login-card button.go{
  width:100%;margin-top:var(--sp-5);height:44px;
  background:linear-gradient(90deg,var(--c-gold),#f59e0b);
  border:none;border-radius:var(--r-sm);color:#1a1300;font-weight:700;font-size:var(--fs-15);
}
.login-card button.go:hover{filter:brightness(1.06)}
.login-card button.sso{
  width:100%;margin-top:10px;height:40px;
  background:var(--bg-blue);border:1px solid rgba(59,130,246,.5);
  border-radius:var(--r-sm);color:#bcd4ff;font-weight:600;font-size:var(--fs-13);
}
.login-card button.sso:hover{background:rgba(59,130,246,.2);color:#dbe8ff}
.login-card button.sso[disabled]{opacity:.5;cursor:not-allowed}
.login-card .guest{
  width:100%;margin-top:10px;height:36px;background:none;
  border:1px solid var(--c-line);border-radius:var(--r-sm);
  color:var(--c-text-2);font-size:var(--fs-12);
}
.login-err{color:var(--c-red);font-size:var(--fs-12);min-height:16px;margin-top:10px}

/* ========================= 17. 抽屉 ========================= */
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:640px;max-width:94vw;
  display:flex;flex-direction:column;background:var(--c-panel);
  border-left:1px solid var(--c-line);z-index:101;
  box-shadow:-8px 0 30px rgba(0,0,0,.4);
  animation:slideIn .22s ease;
}
@keyframes slideIn{from{transform:translateX(28px);opacity:.6}to{transform:none;opacity:1}}
.drawer .dh{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--c-line);flex-shrink:0}
.drawer .dh b{font-size:var(--fs-15)}
.drawer .dh .x{
  margin-left:auto;background:none;border:none;color:var(--c-text-2);
  font-size:20px;line-height:1;padding:2px 8px;border-radius:var(--r-sm);
}
.drawer .dh .x:hover{color:var(--c-text);background:rgba(255,255,255,.06)}
.drawer .db{padding:var(--sp-4) var(--sp-5) var(--sp-5);overflow-y:auto;flex:1}
.drawer .kpi{padding:var(--sp-3)}
.drawer .kpi .v{font-size:var(--fs-18);letter-spacing:0;white-space:nowrap}
.drawer .kpi .l{font-size:var(--fs-11)}
.drawer .mgrid{grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}
.drawer .mcard .m-v{font-size:var(--fs-18)}

/* ========================= 18. 上传区 ========================= */
.drop{
  border:2px dashed var(--c-line);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-4);text-align:center;
  background:rgba(255,255,255,.015);
  transition:border-color .16s ease,background .16s ease;
  cursor:pointer;
}
.drop:hover,.drop.over{border-color:rgba(245,185,66,.6);background:var(--bg-gold)}
.drop .ico{font-size:30px;opacity:.6;margin-bottom:var(--sp-2)}
.drop .t{font-size:var(--fs-14);color:var(--c-text)}
.drop .s{font-size:var(--fs-12);color:var(--c-text-3);margin-top:6px}

.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.step{
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--c-line-soft);
  border-radius:var(--r-md);background:rgba(255,255,255,.02);
}
.step .si{font-size:var(--fs-11);color:var(--c-gold);letter-spacing:1px}
.step .st{font-size:var(--fs-13);margin-top:4px}
.step .ss{font-size:var(--fs-11);color:var(--c-text-3);margin-top:3px;line-height:1.5}

.dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-4);font-size:var(--fs-12);color:var(--c-text-2)}
.dl dt{color:var(--c-text-3)}
.dl dd{margin:0;color:var(--c-text)}

/* ========================= 19. 工具类 ========================= */
.mt1{margin-top:var(--sp-1)}.mt2{margin-top:var(--sp-2)}.mt3{margin-top:var(--sp-3)}
.mt4{margin-top:var(--sp-4)}.mt5{margin-top:var(--sp-5)}
.mb2{margin-bottom:var(--sp-2)}.mb3{margin-bottom:var(--sp-3)}.mb4{margin-bottom:var(--sp-4)}
.flex{display:flex}.between{justify-content:space-between}.acenter{align-items:center}
.gap8{gap:var(--sp-2)}.gap12{gap:var(--sp-3)}.wrap{flex-wrap:wrap}
.flex1{flex:1;min-width:0}
.muted{color:var(--c-text-2)}
.muted2{color:var(--c-text-3)}
.f11{font-size:var(--fs-11)}.f12{font-size:var(--fs-12)}.f13{font-size:var(--fs-13)}
.gold{color:var(--c-gold)}.green{color:var(--c-green)}.red{color:var(--c-red)}
.cyan{color:var(--c-cyan)}.orange{color:var(--c-orange)}.purple{color:var(--c-purple)}

/* 移动端菜单按钮 */
.menu-btn{
  display:none;background:none;border:1px solid var(--c-line);
  border-radius:var(--r-sm);width:34px;height:34px;
  align-items:center;justify-content:center;color:var(--c-text-2);flex-shrink:0;
}
.sidebar-mask{display:none}

/* ========================= 20. 响应式（降序） ========================= */
@media (max-width:1500px){
  .view{padding:var(--sp-4) var(--sp-5) var(--sp-6)}
  .hero-body{grid-template-columns:minmax(200px,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr)}
}
@media (max-width:1280px){
  .cols-5{--cols:3}
  .cols-6{--cols:3}
  .hero-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  .big .n{font-size:var(--fs-34)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .cols-4{--cols:2}
  .cols-3{--cols:2}
  .cols-2{--cols:1}
  .dash-row{grid-template-columns:1fr}
  .row3{grid-template-columns:1fr}
  :root{--sidebar-w:64px}
  .sidebar .brand{padding:var(--sp-3) var(--sp-2);text-align:center}
  .sidebar .brand-logo{max-width:44px;padding:3px}
  .sidebar .brand b,.sidebar .brand span{display:none}
  .nav a{justify-content:center;padding:10px 4px}
  .nav a .dot{display:none}
  .nav a .txt2{display:none}
  .nav .group{text-align:center;padding:var(--sp-2) 0 2px;font-size:0}
  .nav .group::after{content:'···';font-size:12px}
  .nav .nav-badge{display:none}
  .sidebar-foot{display:none}
}
@media (max-width:860px){
  .topbar .badge.opt{display:none}
  .view{padding:var(--sp-3) var(--sp-3) var(--sp-5)}
  .menu-btn{display:inline-flex}
  :root{--sidebar-w:220px}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:var(--sh-2);
  }
  .sidebar.open{transform:none}
  .sidebar .brand{text-align:left;padding:var(--sp-4)}
  .sidebar .brand-logo{max-width:150px;padding:5px 8px}
  .sidebar .brand b,.sidebar .brand span{display:block}
  .nav a{justify-content:flex-start;padding:9px var(--sp-3)}
  .nav a .dot{display:block}
  .nav .group{text-align:left;padding:var(--sp-3) var(--sp-3) var(--sp-1);font-size:var(--fs-11)}
  .nav .group::after{content:none}
  .sidebar-foot{display:block}
  .sidebar-mask{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:39}
  .cols-4,.cols-3,.cols-5,.cols-6{--cols:1}
  .hero-body{grid-template-columns:1fr}
  .mgrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .ugrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .drawer{width:100%}
  .metabar{gap:4px var(--sp-3)}
  .metabar .meta-sep{display:none}
}
@media (max-width:520px){
  .pagehd .ph-t{font-size:var(--fs-16)}
  .card{padding:var(--sp-4)}
  .hero{padding:var(--sp-4)}
  .big .n{font-size:var(--fs-34)}
  .mgrid{grid-template-columns:1fr 1fr}
  .controls{gap:var(--sp-2)}
  .card h3{flex-wrap:wrap;row-gap:5px}
  .card h3 .hint{display:none}
  .card h3 .tag{margin-left:auto;padding-left:0}
  .ucard .u-xj{row-gap:3px}
}
@media print{
  .sidebar,.topbar,.menu-btn,.controls{display:none!important}
  .view{overflow:visible;padding:0}
  body{background:#fff;color:#000}
}

/* ========================= 21. 板块级全屏（每个卡片独立全屏） =========================
   交互与直销员分析系统一致：每个 .card 右上角有「⛶ 全屏」，点开后仅该板块铺满整屏，
   侧栏/顶栏保留可用（退出即回到原位置）。优先浏览器原生 Fullscreen API，
   被拒/不支持时自动降级为窗口内铺满浮层，两条路径视觉与退出方式一致。 */
/* 全屏按钮用 .fsx，避免与卡片里既有的 .fsbtn（导出 CSV）撞类名 */
.fsx{
  margin-left:auto;
  background:none;border:1px solid var(--c-line);
  color:var(--c-text-2);border-radius:6px;
  padding:2px 9px;font-size:var(--fs-12);font-weight:400;
  font-family:inherit;line-height:1.6;
  cursor:pointer;white-space:nowrap;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.fsx:hover{color:var(--c-gold);border-color:rgba(245,185,66,.45)}
.fsx.on{color:var(--c-gold);border-color:rgba(245,185,66,.6);background:rgba(245,185,66,.08)}
/* 无标题卡片的按钮承载条 */
.card-h{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);
  padding-bottom:8px;margin-bottom:var(--sp-3);
  border-bottom:1px solid var(--c-line-soft);
}

/* 浮层：铺满可视区，四周不留白、不出现页面滚动条 */
.panel-mask{
  position:fixed;inset:0;padding:0;margin:0;
  /* 必须高于统一平台注入的顶部导航 #csgd-nav（z-index:2147483000），否则它会盖住标题栏 */
  background:#05080f;z-index:2147483001;
  display:flex;align-items:stretch;justify-content:center;
  overflow:hidden;
}
.panel-full{
  /* 一律百分比 + flex 撑开，天然适配任意分辨率与 125%/150% 系统缩放 */
  width:100%;height:100%;max-width:none;min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--c-panel);border:0;border-radius:0;box-shadow:none;
}
.panel-full:fullscreen,.panel-full:-webkit-full-screen{
  width:100vw;height:100vh;max-width:none;border-radius:0;background:var(--c-panel);
}
.panel-full::backdrop,.panel-full:-webkit-full-screen::backdrop{background:#05080f}
.panel-full .pf-head{
  display:flex;align-items:center;gap:10px;
  padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--c-line);flex-shrink:0;
}
.panel-full .pf-head b{font-size:var(--fs-15);color:var(--c-gold)}
.panel-full .pf-head .tag{font-size:var(--fs-11);color:var(--c-text-3)}
.panel-full .pf-head .fs-tip{font-size:var(--fs-11);color:var(--c-text-3)}
.panel-full .pf-head .fsx{margin-left:0}
.panel-full .pf-head .x{
  margin-left:var(--sp-3);cursor:pointer;color:var(--c-text-2);
  font-size:22px;padding:0 6px;line-height:1;
  background:none;border:0;font-family:inherit;
}
.panel-full .pf-head .x:hover{color:var(--c-red)}
/* 全屏时卡片自带标题（与外层标题栏重复）与自带按钮都不再显示 */
.panel-full .fs-head-dup{display:none}
.panel-full .card .fsx{display:none}
/* 内容区：自身不滚动，高度全部让给图表/表格 */
.panel-full .pf-body{
  padding:var(--sp-4) var(--sp-5);
  flex:1 1 0;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
}
/* 节点模式：卡片本体被搬进浮层，去掉重复边框并撑满 */
.panel-full .pf-body>.card{
  flex:1 1 0;min-height:0;width:100%;height:100%;
  display:flex;flex-direction:column;overflow:hidden;
  border:0;box-shadow:none;padding:0;background:transparent;
}
/* 卡片里的图表多为内联高度（style="height:420px"），全屏时须强制让出全部空间 */
.panel-full .pf-body>.card>.chart{
  flex:1 1 0;width:100%;height:auto!important;min-height:0!important;
}
.panel-full .pf-body>.card>.tablewrap{
  /* 表格容器多为内联 max-height（如 style="max-height:420px"），全屏时须强制解除 */
  flex:1 1 0;min-height:0;max-height:none!important;width:100%;overflow:auto;
}
.panel-full .pf-body>.card>.toolbar,
.panel-full .pf-body>.card>.controls,
.panel-full .pf-body>.card>.metabar{flex:0 0 auto}
.panel-full .pf-body>.card>.mgrid,
.panel-full .pf-body>.card>.grid{flex:0 0 auto}
.card.fs-active{box-shadow:none}
/* 全屏期间锁掉页面滚动，避免背景出现第二条滚动条 */
html.fs-lock,html.fs-lock body{overflow:hidden!important}

/* ≥1800px（2K 显示器）：字号、间距、图表同步放大，避免内容显得过小。
   注意：11 与大号数字（26/34/42）必须一起放大，否则大屏上「辅助字特别小、数字没变化」，
   与图表字号（app.js 的 fontScale 同一批断点）也会对不上。 */
@media (min-width:1800px){
  :root{
    --sp-4:18px;--sp-5:25px;--sp-6:34px;
    --fs-10:11px;--fs-11:12px;--fs-12:13px;--fs-13:14px;--fs-14:15px;
    --fs-15:16px;--fs-16:17px;--fs-18:19px;--fs-22:24px;
    --fs-26:28px;--fs-28:30px;--fs-34:37px;--fs-42:46px;
    --sidebar-w:230px;--topbar-h:58px;
  }
  .chart{height:330px}
  .chart.tall{height:400px}
  .chart.sm{height:262px}
  .chart.xs{height:210px}
  /* 侧栏变宽了，品牌 LOGO 与登录页 LOGO 同步放大，避免大屏上显得缩成一角 */
  .sidebar .brand-logo{max-width:176px}
  .login-logo{width:248px}
}
/* ≥2300px（4K 无缩放）：再放大一档，栅格仍按原列数铺满 */
@media (min-width:2300px){
  :root{
    --sp-4:22px;--sp-5:32px;--sp-6:44px;
    --fs-10:12px;--fs-11:14px;--fs-12:15px;--fs-13:16px;--fs-14:18px;
    --fs-15:19px;--fs-16:21px;--fs-18:23px;--fs-22:30px;
    --fs-26:35px;--fs-28:38px;--fs-34:46px;--fs-42:57px;
    --sidebar-w:262px;--topbar-h:66px;
  }
  .chart{height:390px}
  .chart.tall{height:480px}
  .chart.sm{height:310px}
  .chart.xs{height:250px}
  .sidebar .brand-logo{max-width:196px}
  .login-logo{width:280px}
}

/* ========================= 22. 固定查看链接（分享） ========================= */
.share-form{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(0,1.6fr) auto;gap:var(--sp-3);align-items:end}
.share-form label{display:block;font-size:var(--fs-12);color:var(--c-text-2);margin-bottom:5px}
.share-list{display:flex;flex-direction:column;gap:9px;margin-top:var(--sp-4)}
.share-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px 12px;background:var(--c-bg-2);
  border:1px solid var(--c-line-soft);border-radius:var(--r-sm);
}
.share-item .si-main{flex:1;min-width:0}
.share-item .si-url{
  font-family:var(--ff-mono);font-size:var(--fs-12);color:var(--c-gold);
  word-break:break-all;line-height:1.45;
}
.share-item .si-meta{font-size:var(--fs-11);color:var(--c-text-3);margin-top:4px}
.share-item.off{opacity:.5}
.share-item .si-acts{display:flex;gap:6px;flex-shrink:0}
.share-empty{font-size:var(--fs-12);color:var(--c-text-3);padding:var(--sp-4) 0}
@media (max-width:860px){
  .share-form{grid-template-columns:1fr}
  .share-item{flex-wrap:wrap}
  .share-item .si-acts{width:100%;justify-content:flex-end}
}