/* ===================================================================
   宗门大比 · 道心榜 — 数据大屏 (Grafana / Tableau 风)
   深色冷静底 · 面板卡片化 · 网格密排 · 高信息密度
   =================================================================== */
:root{
  --bg:        #0d1117;
  --bg-2:      #0e1421;
  --panel:     #131a27;
  --panel-2:   #161e2d;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --txt:       #e6ecf5;
  --txt-dim:   #9aa6ba;
  --txt-faint: #647088;

  --jian:     #38bdf8;
  --qixing:   #a78bfa;
  --wuxing:   #f59e0b;
  --duanxuan: #f43f5e;
  --random:   #e8c479;

  --up:   #34d399;
  --down: #f4665e;

  --radius:   10px;
  --radius-sm: 7px;

  --t0:#f43f5e; --t1:#f59e0b; --t2:#38bdf8; --t3:#647088;

  /* 古风装饰字体:马善政毛笔楷书(标题/标签用,数据数字仍用等宽 sans) */
  --cn:"Ma Shan Zheng","ZCOOL XiaoWei","Kaiti SC","KaiTi","楷体",serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Inter","Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(56,189,248,.05), transparent 60%),
    radial-gradient(1000px 600px at 5% 0%, rgba(167,139,250,.05), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  font-size:14px;
}
.num,.tnum{ font-variant-numeric:tabular-nums; }

/* ============ 顶栏 ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 22px;
  background:linear-gradient(180deg, rgba(13,17,23,.96), rgba(13,17,23,.82));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.tb-brand{ display:flex; align-items:center; gap:11px; }
.tb-logo{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--cn); font-weight:700; font-size:21px; color:#0a0e16;
  background:linear-gradient(135deg,#7dd3fc,#38bdf8);
  box-shadow:0 0 0 1px rgba(56,189,248,.4),0 4px 14px rgba(56,189,248,.3);
}
.tb-title{ font-family:var(--cn); font-size:18px; font-weight:700; letter-spacing:.08em; color:#fff; line-height:1.15; }
.tb-sub{ font-size:11.5px; color:var(--txt-faint); margin-top:1px; }
.tb-spacer{ flex:1 1 auto; }
.tb-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--txt-dim); padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); white-space:nowrap;
}
.tb-chip b{ color:#fff; font-weight:700; }
.tb-chip.live{ color:var(--up); border-color:rgba(52,211,153,.3); }
.tb-chip.live .dot{ width:7px;height:7px;border-radius:50%; background:var(--up);
  box-shadow:0 0 8px var(--up); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ============ 时间区间选择器 ============ */
.rangebar{
  position:sticky; top:59px; z-index:40;
  background:linear-gradient(180deg, rgba(13,17,23,.94), rgba(13,17,23,.78));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.rb-inner{
  max-width:1640px; margin:0 auto; padding:8px 22px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.rb-label{ font-size:12px; font-weight:700; color:var(--txt-dim); letter-spacing:.04em; }
.rb-presets{ display:flex; gap:6px; flex-wrap:wrap; }
.rb-chip{
  padding:4px 12px; border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--txt-dim); background:rgba(255,255,255,.03);
  border:1px solid var(--line); transition:.15s; font-family:inherit;
}
.rb-chip:hover{ color:#fff; border-color:var(--line-2); }
.rb-chip.active{ color:var(--jian); border-color:var(--jian); background:rgba(56,189,248,.12); }
.rb-sep{ width:1px; height:20px; background:var(--line-2); }
.rb-custom{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.rb-cap{ font-size:11.5px; color:var(--txt-faint); }
.rb-input{
  background:#0f1626; color:var(--txt); border:1px solid var(--line-2); border-radius:7px;
  padding:4px 8px; font-size:12px; font-family:inherit; outline:none;
  color-scheme:dark;
}
.rb-input:hover{ border-color:var(--jian); }
.rb-tilde{ color:var(--txt-faint); font-size:12px; }
.rb-apply{
  padding:5px 13px; border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:700;
  color:#0a0e16; background:linear-gradient(135deg,#7dd3fc,#38bdf8);
  border:1px solid transparent; transition:.15s; font-family:inherit;
}
.rb-apply:hover{ filter:brightness(1.08); }
.rb-apply.warn{ background:linear-gradient(135deg,#fb7185,#f43f5e); color:#fff; }
.rb-echo{ font-size:11.5px; color:var(--txt-faint); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ============ 容器 ============ */
.wrap{ max-width:1640px; margin:0 auto; padding:16px 20px 56px; }

/* ============ KPI 大字条 ============ */
.kpi-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px;
}
.kpi{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px 14px;
}
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,#38bdf8); }
.kpi-cap{ font-size:11.5px; color:var(--txt-faint); text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:6px; }
.kpi-main{ display:flex; align-items:baseline; gap:9px; margin-top:9px; }
.kpi-val{ font-size:26px; font-weight:800; color:#fff; letter-spacing:-.01em; line-height:1; }
.kpi-val.small{ font-size:21px; }
.kpi-unit{ font-size:12px; color:var(--txt-dim); font-weight:600; }
.kpi-sub{ margin-top:7px; font-size:11.5px; color:var(--txt-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-ava{ width:30px;height:30px;border-radius:7px; object-fit:cover; border:1px solid var(--line-2); background:#0d1320; vertical-align:middle; }

/* ============ 分区 ============ */
.zone{ margin-top:26px; }
.zone-head{
  display:flex; align-items:center; gap:12px; margin:0 0 13px; padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.zone-no{
  width:23px;height:23px;border-radius:6px; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:#0a0e16;
  background:linear-gradient(135deg,#7dd3fc,#38bdf8);
}
.zone-no.zone-delta{ background:linear-gradient(135deg,#fcd34d,#f59e0b); color:#3a2c08; font-size:14px; }
.zone-title{ font-family:var(--cn); font-size:17px; font-weight:700; color:#fff; letter-spacing:.06em; }
.zone-desc{ font-size:12px; color:var(--txt-faint); }

/* 网格 */
.grid{ display:grid; gap:14px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-12-2{ grid-template-columns:7fr 5fr; }   /* 主榜+梯队 */
.span-2{ grid-column:span 2; }

/* ============ 面板卡片 ============ */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; min-width:0;
}
.panel-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:12px 15px 10px; border-bottom:1px solid var(--line);
}
.panel-title{ font-family:var(--cn); font-size:15px; font-weight:700; color:#fff; letter-spacing:.05em; margin:0; }
.panel-desc{ font-size:11.5px; color:var(--txt-faint); margin:0; }
.panel-body{ padding:13px 14px; }
.panel-body.tight{ padding:8px 10px 10px; }

/* 图表容器 */
.chart{ width:100%; }
.h-260{ height:260px; }
.h-300{ height:300px; }
.h-340{ height:340px; }
.h-380{ height:380px; }
.h-420{ height:420px; }

/* ============ ① 强度梯队 ============ */
.tier-wrap{ display:flex; flex-direction:column; gap:9px; }
.tier-row{ display:grid; grid-template-columns:46px 1fr; gap:10px; align-items:stretch; }
.tier-badge{
  border-radius:7px; display:grid; place-items:center; font-weight:800; font-size:16px;
  color:#0a0e16; min-height:46px;
}
.tier-T0{ background:linear-gradient(135deg,#fb7185,#f43f5e); }
.tier-T1{ background:linear-gradient(135deg,#fcd34d,#f59e0b); }
.tier-T2{ background:linear-gradient(135deg,#7dd3fc,#38bdf8); }
.tier-T3{ background:linear-gradient(135deg,#94a3b8,#647088); color:#fff; }
.tier-cards{ display:flex; flex-wrap:wrap; gap:7px; align-content:center;
  background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:7px; padding:7px; }
.tcard{
  display:flex; align-items:center; gap:7px; padding:4px 9px 4px 4px; border-radius:7px;
  background:var(--panel-2); border:1px solid var(--line); border-left-width:3px;
}
.tcard img{ width:30px;height:30px;border-radius:6px; object-fit:cover; background:#0d1320; }
.tcard .tc-name{ font-size:12.5px; font-weight:600; color:#fff; line-height:1.1; }
.tcard .tc-score{ font-size:11px; color:var(--txt-dim); font-variant-numeric:tabular-nums; }
.tier-empty{ font-size:12px; color:var(--txt-faint); padding:6px; }

/* ============ ② 主榜表格 ============ */
.filters{ display:flex; gap:7px; flex-wrap:wrap; }
.filter-btn{
  padding:5px 13px; border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--txt-dim); background:rgba(255,255,255,.03);
  border:1px solid var(--line); transition:.15s; font-family:inherit;
}
.filter-btn:hover{ color:#fff; border-color:var(--line-2); }
.filter-btn.active{ color:#fff; background:rgba(255,255,255,.08); border-color:var(--line-2); }
.f-jian.active{     border-color:var(--jian);   color:var(--jian);   background:rgba(56,189,248,.12); }
.f-qixing.active{   border-color:var(--qixing); color:#c4b5fd;       background:rgba(167,139,250,.12); }
.f-wuxing.active{   border-color:var(--wuxing); color:var(--wuxing); background:rgba(245,158,11,.12); }
.f-duanxuan.active{ border-color:var(--duanxuan);color:#fb7185;      background:rgba(244,63,94,.12); }
.f-random.active{   border-color:var(--random); color:var(--random); background:rgba(232,196,121,.12); }

.board-scroll{ overflow:auto; max-height:560px; }
#board{ width:100%; border-collapse:separate; border-spacing:0; min-width:600px; }
#board thead th{
  position:sticky; top:0; z-index:2;
  padding:9px 10px; font-size:11.5px; font-weight:600; color:var(--txt-dim);
  text-align:right; white-space:nowrap; letter-spacing:.02em;
  background:#11182550; backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-2);
}
#board thead th.col-rank{ text-align:center; width:42px; }
#board thead th.col-char{ text-align:left; }
#board th.sortable{ cursor:pointer; user-select:none; transition:color .15s; }
#board th.sortable:hover{ color:#fff; }
#board th.sorted{ color:#fff; }
.caret{ display:inline-block; width:0;height:0; margin-left:4px; vertical-align:middle;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor;
  opacity:0; transition:.15s; }
#board th.sorted .caret{ opacity:1; }
#board th.sorted.asc .caret{ transform:rotate(180deg); }
#board tbody td{ padding:7px 10px; text-align:right; border-bottom:1px solid rgba(255,255,255,.045);
  font-variant-numeric:tabular-nums; font-size:13px; }
#board tbody tr:hover{ background:rgba(255,255,255,.035); }
.num.hot{ color:#fff; font-weight:700; }
.num:not(.hot){ color:var(--txt-dim); }
/* 主榜 Δ 角标(窗口态:相对窗口起点涨跌) */
.dlt{ display:inline-block; margin-left:5px; font-size:10px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; vertical-align:baseline; }
.dlt.up{ color:var(--up); } .dlt.down{ color:var(--down); }
.empty{ text-align:center !important; color:var(--txt-faint); padding:30px 0 !important; }

.col-rank{ text-align:center !important; }
.rank-badge{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:6px;
  font-size:12px; font-weight:700; color:var(--txt-dim); background:rgba(255,255,255,.05); }
.rank-1{ background:linear-gradient(135deg,#ffe9a8,#e8b94a); color:#2a210a; }
.rank-2{ background:linear-gradient(135deg,#eef2f7,#aeb7c6); color:#2a210a; }
.rank-3{ background:linear-gradient(135deg,#f0c39a,#c97c46); color:#fff; }

.col-char{ text-align:left !important; }
.cchar{ display:flex; align-items:center; gap:10px; }
.clickable-ava{ cursor:pointer; transition:transform .12s, box-shadow .12s; }
.clickable-ava:hover{ transform:scale(1.12); box-shadow:0 0 0 2px rgba(255,255,255,.5); position:relative; z-index:3; }
.ava{ width:34px; height:34px; border-radius:8px; object-fit:cover; flex:0 0 auto;
  border:1.5px solid var(--line-2); background:#0d1320; }
.sect-jian .ava{ border-color:rgba(56,189,248,.55); }
.sect-qixing .ava{ border-color:rgba(167,139,250,.55); }
.sect-wuxing .ava{ border-color:rgba(245,158,11,.55); }
.sect-duanxuan .ava{ border-color:rgba(244,63,94,.55); }
.sect-random .ava{ border-color:rgba(232,196,121,.55); }
.cmeta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cname{ font-weight:600; font-size:13px; color:#fff; white-space:nowrap; }
.stag{ display:inline-block; align-self:flex-start; font-size:10px; font-weight:600;
  padding:0 6px; border-radius:5px; letter-spacing:.03em; }
.sect-jian .stag{ color:var(--jian);   background:rgba(56,189,248,.13); }
.sect-qixing .stag{ color:#c4b5fd;      background:rgba(167,139,250,.13); }
.sect-wuxing .stag{ color:var(--wuxing);background:rgba(245,158,11,.13); }
.sect-duanxuan .stag{ color:#fb7185;    background:rgba(244,63,94,.13); }
.sect-random .stag{ color:var(--random);background:rgba(232,196,121,.13); }

/* ============ 门派对比横条 ============ */
.sect-bars{ display:flex; flex-direction:column; gap:13px; }
.sect-row{ display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:12px; }
.sect-label{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px; }
.sect-dot{ width:9px; height:9px; border-radius:50%; box-shadow:0 0 7px currentColor; }
.sect-crown{ font-size:9px; font-weight:700; padding:1px 6px; border-radius:5px; margin-left:1px;
  background:linear-gradient(135deg,#fcd34d,#f59e0b); color:#3a2c08; }
.sect-track{ height:11px; border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden; }
.sect-fill{ height:100%; border-radius:999px; transition:width 1s cubic-bezier(.22,1,.36,1); }
.sect-val{ font-variant-numeric:tabular-nums; font-weight:700; font-size:13.5px; min-width:48px; text-align:right; color:#fff; }
.sect-jian .sect-dot{color:var(--jian)} .sect-qixing .sect-dot{color:var(--qixing)}
.sect-wuxing .sect-dot{color:var(--wuxing)} .sect-duanxuan .sect-dot{color:var(--duanxuan)}
.sect-random .sect-dot{color:var(--random)}
.sect-jian .sect-fill{background:linear-gradient(90deg,rgba(56,189,248,.3),var(--jian))}
.sect-qixing .sect-fill{background:linear-gradient(90deg,rgba(167,139,250,.3),var(--qixing))}
.sect-wuxing .sect-fill{background:linear-gradient(90deg,rgba(245,158,11,.3),var(--wuxing))}
.sect-duanxuan .sect-fill{background:linear-gradient(90deg,rgba(244,63,94,.3),var(--duanxuan))}
.sect-random .sect-fill{background:linear-gradient(90deg,rgba(232,196,121,.3),var(--random))}

/* ============ ⑤ 崛起 / 衰落榜 ============ */
.mover-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mover-col h4{ margin:0 0 9px; font-size:12px; font-weight:700; letter-spacing:.03em; display:flex; align-items:center; gap:6px; }
.mover-col.up h4{ color:var(--up); }
.mover-col.down h4{ color:var(--down); }
.mover-item{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:7px;
  background:rgba(255,255,255,.025); border:1px solid var(--line); margin-bottom:6px; }
.mover-item img{ width:28px;height:28px;border-radius:6px; object-fit:cover; background:#0d1320; flex:0 0 auto; }
.mover-name{ font-size:12.5px; font-weight:600; color:#fff; }
.mover-sub{ font-size:10.5px; color:var(--txt-faint); }
.mover-delta{ margin-left:auto; font-weight:800; font-size:13.5px; font-variant-numeric:tabular-nums; }
.mover-delta.up{ color:var(--up); } .mover-delta.down{ color:var(--down); }
.mover-spark{ width:54px; height:22px; flex:0 0 auto; }

/* ============ Δ 本段变化总览 ============ */
.change-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.shift-bars{ display:flex; flex-direction:column; gap:13px; padding:4px 2px; }
.shift-row{ display:grid; grid-template-columns:64px 1fr 58px; align-items:center; gap:11px; }
.shift-label{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px; }
.shift-track{ position:relative; height:12px; border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden; }
.shift-mid{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line-2); transform:translateX(-.5px); }
.shift-fill{ position:absolute; top:0; bottom:0; border-radius:999px; transition:width 1s cubic-bezier(.22,1,.36,1); }
.shift-fill.pos{ left:50%; background:linear-gradient(90deg, rgba(52,211,153,.35), var(--up)); }
.shift-fill.neg{ right:50%; background:linear-gradient(270deg, rgba(244,102,94,.35), var(--down)); }
.shift-val{ font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; text-align:right; }
.shift-val.pos{ color:var(--up); } .shift-val.neg{ color:var(--down); }

/* 趋势单角色筛选 */
.trend-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.trend-tools select{
  background:#0f1626; color:var(--txt); border:1px solid var(--line-2); border-radius:7px;
  padding:5px 10px; font-size:12.5px; font-family:inherit; cursor:pointer; outline:none; min-width:130px;
}
.trend-tools select:hover{ border-color:var(--jian); }
.trend-tools select optgroup{ background:#0d1320; color:var(--random); }
.trend-tools select option{ background:#11182a; color:var(--txt); }
.tf-hint{ font-size:11px; color:var(--txt-faint); }

/* ============ 页脚 ============ */
.foot{ margin-top:36px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  color:var(--txt-faint); font-size:11.5px; }

/* ============ 响应式 ============ */
@media (max-width:1280px){
  .kpi-row{ grid-template-columns:repeat(5,1fr); }
  .g-12-2{ grid-template-columns:1fr; }
  .g-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:880px){
  .kpi-row{ grid-template-columns:1fr 1fr; }
  .g-2,.g-3{ grid-template-columns:1fr; }
  .span-2{ grid-column:auto; }
  .mover-wrap,.change-wrap{ grid-template-columns:1fr; }
  .wrap{ padding:14px 12px 48px; }
}
@media (max-width:560px){
  .kpi-row{ grid-template-columns:1fr; }
  .tb-sub{ display:none; }
}