/* ==========================================================================
   道威斯顿 · 销售荣耀榜  —— 大屏样式（1920x1080 固定画布 + 自动缩放）
   ========================================================================== */

:root{
  --bg-0:#050b17;
  --bg-1:#0a1526;
  --panel:rgba(17,33,58,.62);
  --panel-2:rgba(13,26,46,.8);
  --line:rgba(74,144,226,.20);
  --line-strong:rgba(96,178,255,.45);
  --brand:#2f9bff;
  --brand-2:#22d3ee;
  --gold:#ffc94d;
  --gold-2:#ffe6a3;
  --txt:#eaf3ff;
  --muted:#8aa2c0;
  --muted-2:#5b7a9c;
  --up:#34d399;
  --down:#fb7a7a;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 700px at 15% -10%,#123055 0%,transparent 60%),
             radial-gradient(1000px 600px at 100% 0%,#0d3a52 0%,transparent 55%),
             linear-gradient(160deg,var(--bg-0),var(--bg-1) 60%,#061021);
  color:var(--txt);
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* 细网格纹理 */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(90,160,240,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,160,240,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 85%);
}

/* ---------- 画布缩放 ---------- */
#scaler{position:fixed;inset:0}
#stage{
  position:absolute;left:0;top:0;width:1920px;height:1080px;
  transform-origin:top left;
  padding:26px 30px;
  display:flex;flex-direction:column;gap:16px;
}

/* ============================ 顶栏 ============================ */
.topbar{
  height:88px;flex:0 0 88px;display:flex;align-items:center;gap:26px;
  padding:0 24px;border-radius:18px;
  background:linear-gradient(90deg,rgba(20,44,78,.85),rgba(12,26,46,.55));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.topbar::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:6px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:54px;height:54px;border-radius:14px;background:rgba(47,155,255,.12);
  border:1px solid var(--line-strong);display:grid;place-items:center}
.logo svg{width:36px;height:36px;filter:drop-shadow(0 0 8px rgba(76,196,255,.55))}
.brand-name{font-size:26px;font-weight:800;letter-spacing:.5px}
.brand-name span{font-size:15px;font-weight:600;color:var(--brand-2);margin-left:6px;letter-spacing:2px}
.brand-sub{font-size:13px;color:var(--muted);letter-spacing:3px;margin-top:2px}

.headline{flex:1;text-align:center}
.hl-main{font-size:30px;font-weight:800;letter-spacing:8px;
  background:linear-gradient(90deg,#bfe3ff,#4cc4ff,#bfe3ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hl-sub{font-size:13px;color:var(--muted);letter-spacing:1px;margin-top:2px}

.head-right{display:flex;align-items:center;gap:18px}
.clock{text-align:right}
.clock-time{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;
  color:#dff0ff;text-shadow:0 0 18px rgba(76,196,255,.35)}
.clock-date{font-size:13px;color:var(--muted);letter-spacing:1px}
.live{display:flex;align-items:center;gap:7px;font-size:13px;color:#7ef0c2;
  padding:6px 12px;border-radius:999px;background:rgba(52,211,153,.10);
  border:1px solid rgba(52,211,153,.35);white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;
  animation:blink 1.6s infinite}
.live.err{color:#ffd08a;background:rgba(255,190,80,.10);border-color:rgba(255,190,80,.35)}
.live.err i{background:#ffb84d;box-shadow:0 0 10px #ffb84d}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.28}}

/* ============================ 核心数字 ============================ */
.kpis{flex:0 0 196px;display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:16px}
.kpi{
  position:relative;border-radius:18px;padding:20px 22px;overflow:hidden;
  background:linear-gradient(150deg,rgba(26,52,90,.75),rgba(12,24,44,.7));
  border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:18px;
}
.kpi-ico{width:56px;height:56px;flex:0 0 56px;border-radius:14px;display:grid;place-items:center;
  background:rgba(47,155,255,.14);border:1px solid var(--line-strong)}
.kpi-ico svg{width:30px;height:30px;fill:var(--brand-2)}
.kpi-a .kpi-ico{background:rgba(47,155,255,.14)}
.kpi-a .kpi-ico svg{fill:#5cb8ff}
.kpi-b .kpi-ico{background:rgba(34,211,238,.13)}
.kpi-b .kpi-ico svg{fill:#3fe0f0}
.kpi-c .kpi-ico{background:rgba(250,204,80,.13)}
.kpi-c .kpi-ico svg{fill:#ffd76a}
.kpi-label{font-size:15px;color:var(--muted);letter-spacing:1px;margin-bottom:4px}
.kpi-num{display:flex;align-items:baseline;gap:6px}
.kpi-num b{font-size:56px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  letter-spacing:-1px;text-shadow:0 0 24px rgba(76,196,255,.35)}
.kpi-a .kpi-num b{color:#8fd0ff}
.kpi-b .kpi-num b{color:#6fe6f5}
.kpi-c .kpi-num b{color:#ffdd8a}
.kpi-num em{font-style:normal;font-size:17px;color:var(--muted)}
.kpi-sub{display:flex;align-items:baseline;gap:5px;margin-top:5px;font-size:13.5px;letter-spacing:.4px;color:var(--muted-2)}
.kpi-sub b{font-size:20px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:#9fc6ea}
.kpi-a .kpi-sub b{color:#8fd0ff}
.kpi-b .kpi-sub b{color:#6fe6f5}
.kpi-c .kpi-sub b{color:#ffdd8a}
.kpi-glow{position:absolute;right:-30px;bottom:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,196,255,.30),transparent 70%)}
.kpi-b .kpi-glow{background:radial-gradient(circle,rgba(34,211,238,.28),transparent 70%)}
.kpi-c .kpi-glow{background:radial-gradient(circle,rgba(250,204,80,.26),transparent 70%)}
.kpi.bump b{animation:bump .6s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}

/* ---------- 销冠卡 ---------- */
.champ-card{
  border-radius:18px;padding:16px 20px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(74,58,18,.85),rgba(30,24,10,.72));
  border:1px solid rgba(255,201,77,.45);box-shadow:0 8px 34px rgba(255,180,40,.16);
  display:flex;flex-direction:column;
}
.champ-card::after{content:"";position:absolute;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,201,77,.30),transparent 70%)}
.champ-head{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gold-2);letter-spacing:1px}
.champ-crown{font-size:16px;filter:drop-shadow(0 0 8px rgba(255,201,77,.8))}
.champ-en{margin-left:auto;font-size:11px;letter-spacing:2px;color:rgba(255,224,160,.55)}
.champ-hero{display:flex;align-items:center;gap:14px;margin-top:8px}
.champ-avatar{width:66px;height:66px;flex:0 0 66px;border-radius:50%;display:grid;place-items:center;
  font-size:24px;font-weight:800;color:#3a2a05;
  background:linear-gradient(140deg,#ffe6a3,#ffc94d);
  border:2px solid rgba(255,235,180,.9);box-shadow:0 0 22px rgba(255,201,77,.5)}
.champ-name{font-size:26px;font-weight:800;color:#fff5dc;letter-spacing:1px}
.champ-amount{font-size:22px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;margin-top:2px}
.champ-deals{font-size:12px;color:rgba(255,224,160,.7);margin-top:1px}
.champ-runners{display:flex;gap:10px;margin-top:auto;padding-top:8px}
.runner{flex:1;display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,201,77,.20)}
.runner .r-medal{font-size:14px}
.runner .r-name{font-size:13px;font-weight:700;color:#ffeec6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.runner .r-amt{margin-left:auto;font-size:12px;color:rgba(255,224,160,.8);font-variant-numeric:tabular-nums}

/* ============================ 双榜 ============================ */
.boards{flex:1;display:grid;grid-template-columns:1.35fr 1fr;gap:16px;min-height:0}
.panel{border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(160deg,rgba(17,33,58,.66),rgba(10,20,36,.6));
  border:1px solid var(--line);box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;
  border-bottom:1px solid var(--line);margin-bottom:10px}
.panel-title{font-size:19px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.dot-blue{background:var(--brand);box-shadow:0 0 12px var(--brand)}
.dot-cyan{background:var(--brand-2);box-shadow:0 0 12px var(--brand-2)}
.panel-meta{font-size:13px;color:var(--muted)}

/* 内贸：两列九行 */
.board-cols{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;
  grid-template-rows:repeat(9,1fr);gap:8px;min-height:0}
.row{
  display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(120,170,230,.10);
  transition:background .3s,border-color .3s,transform .4s;
}
.row .rank{width:28px;flex:0 0 28px;text-align:center;font-size:17px;font-weight:800;
  color:var(--muted);font-variant-numeric:tabular-nums}
.row .ava{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:#0b1c30;background:linear-gradient(140deg,#9fd0ff,#4a9bff)}
.row .who{flex:1;min-width:0}
.row .nm{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .st{display:flex;gap:10px;font-size:11px;color:var(--muted);margin-top:1px}
.row .st b{color:#bcd8f5;font-weight:700;font-variant-numeric:tabular-nums}
.row .sc{width:64px;flex:0 0 64px;text-align:right}
.row .sc b{font-size:19px;font-weight:800;color:#8fd0ff;font-variant-numeric:tabular-nums}
.row .sc em{display:block;font-style:normal;font-size:10px;color:var(--muted)}
.row .tr{width:14px;flex:0 0 14px;text-align:center;font-size:11px}
.tr.up{color:var(--up)} .tr.down{color:var(--down)} .tr.flat{color:#5b7a9c}

/* 名次配色 */
.row.r1{background:linear-gradient(90deg,rgba(255,201,77,.20),rgba(255,201,77,.04));
  border-color:rgba(255,201,77,.55);box-shadow:0 0 18px rgba(255,201,77,.14) inset}
.row.r1 .rank{color:var(--gold)} .row.r1 .sc b{color:var(--gold)}
.row.r2{background:linear-gradient(90deg,rgba(200,220,245,.16),transparent);border-color:rgba(200,220,245,.35)}
.row.r2 .rank{color:#dbe7f5}
.row.r3{background:linear-gradient(90deg,rgba(214,140,80,.16),transparent);border-color:rgba(214,140,80,.35)}
.row.r3 .rank{color:#e0a06a}
.row.hot{animation:hotpulse 2.2s infinite}
@keyframes hotpulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 20px rgba(255,201,77,.25)}}

/* 外贸：四张大卡 */
.board-cards{flex:1;display:grid;grid-template-rows:repeat(4,1fr);gap:10px;min-height:0}
.fcard{display:flex;align-items:center;gap:14px;padding:0 16px;border-radius:14px;
  background:linear-gradient(120deg,rgba(34,211,238,.10),rgba(255,255,255,.03));
  border:1px solid rgba(34,211,238,.20)}
.fcard .rank{font-size:22px;font-weight:800;color:var(--muted);width:34px;flex:0 0 34px;text-align:center}
.fcard .ava{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;
  font-size:20px;font-weight:800;color:#052028;background:linear-gradient(140deg,#8ef0ff,#22b8d6)}
.fcard .who{flex:1;min-width:0}
.fcard .nm{font-size:20px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .st{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:4px}
.fcard .st b{color:#a9ecf7;font-weight:700;font-variant-numeric:tabular-nums}
.fcard .sc{text-align:right}
.fcard .sc b{font-size:28px;font-weight:800;color:#6fe6f5;font-variant-numeric:tabular-nums}
.fcard .sc em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.fcard.r1{background:linear-gradient(120deg,rgba(255,201,77,.18),rgba(34,211,238,.06));
  border-color:rgba(255,201,77,.5);box-shadow:0 0 20px rgba(255,201,77,.12) inset}
.fcard.r1 .rank{color:var(--gold)} .fcard.r1 .sc b{color:var(--gold)}
.fcard.r1 .ava{background:linear-gradient(140deg,#ffe6a3,#ffc94d)}

/* ============================ 喜报 ============================ */
.ticker{flex:0 0 52px;display:flex;align-items:center;gap:14px;padding:0 18px;border-radius:14px;
  background:linear-gradient(90deg,rgba(20,44,78,.8),rgba(10,22,40,.6));
  border:1px solid var(--line);overflow:hidden}
.ticker-label{font-size:15px;font-weight:800;color:#ffd76a;white-space:nowrap;letter-spacing:1px}
.ticker-viewport{flex:1;overflow:hidden;position:relative;height:100%}
.ticker-track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:60px;
  white-space:nowrap;will-change:transform;animation:tickerScroll linear infinite}
.ticker-track span{font-size:15px;color:#cfe6ff}
.ticker-track span b{color:#8fd0ff}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-src{font-size:12px;color:var(--muted);white-space:nowrap;padding-left:12px;border-left:1px solid var(--line)}

/* ============================ 断线遮罩 ============================ */
.offline{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;
  background:rgba(60,20,20,.92);border:1px solid rgba(255,120,120,.5);color:#ffd6d6;
  font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:99}
.offline.hidden{display:none}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ 浅色主题（可选） ============================ */
body.theme-light{background:linear-gradient(160deg,#eef5ff,#dfeaf8 60%,#cfdff2);color:#0d2036}
body.theme-light::before{opacity:.30}
body.theme-light .topbar,
body.theme-light .panel,
body.theme-light .ticker{
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(240,247,255,.9));
  border-color:rgba(60,120,200,.22);
  box-shadow:0 6px 22px rgba(30,80,150,.10);
}
body.theme-light .kpi{background:linear-gradient(150deg,#fff,#eef5ff);border-color:rgba(60,120,200,.20)}
body.theme-light .clock-time{color:#0d2036;text-shadow:none}
body.theme-light .brand-sub,
body.theme-light .panel-meta,
body.theme-light .kpi-label,
body.theme-light .kpi-num em,
body.theme-light .hl-sub,
body.theme-light .ticker-src,
body.theme-light .clock-date{color:#5b7391}
body.theme-light .kpi-sub{color:#6b7f96}
body.theme-light .kpi-a .kpi-sub b{color:#0a63c4}
body.theme-light .kpi-b .kpi-sub b{color:#0885a0}
body.theme-light .kpi-c .kpi-sub b{color:#b07d05}
body.theme-light .hl-main{background:none;color:#0d3a6b;-webkit-text-fill-color:#0d3a6b}
body.theme-light .brand-name span{color:#0a7fb8}

/* KPI 数字加深 */
body.theme-light .kpi-a .kpi-num b{color:#0a63c4}
body.theme-light .kpi-b .kpi-num b{color:#0885a0}
body.theme-light .kpi-c .kpi-num b{color:#b07d05}
body.theme-light .kpi-a .kpi-ico svg{fill:#0a63c4}
body.theme-light .kpi-b .kpi-ico svg{fill:#0885a0}
body.theme-light .kpi-c .kpi-ico svg{fill:#c08a06}

/* 榜单行 */
body.theme-light .row{background:#fff;border-color:rgba(60,120,200,.14)}
body.theme-light .row .rank{color:#6b7f96}
body.theme-light .row .nm{color:#0d2036}
body.theme-light .row .st{color:#64789c}
body.theme-light .row .st b{color:#1c4a7a}
body.theme-light .row .sc b{color:#0a63c4}
body.theme-light .row .sc em{color:#64789c}
body.theme-light .row .tr.flat{color:#8fa2b8}
body.theme-light .row.r1{background:linear-gradient(90deg,rgba(255,201,77,.28),rgba(255,201,77,.06));
  border-color:rgba(212,150,20,.55)}
body.theme-light .row.r1 .rank,
body.theme-light .row.r1 .sc b{color:#b07d05}
body.theme-light .row.r2{background:linear-gradient(90deg,rgba(120,160,210,.16),transparent)}
body.theme-light .row.r2 .rank{color:#5b7391}
body.theme-light .row.r3 .rank{color:#b5722f}

/* 外贸卡片 */
body.theme-light .fcard{background:linear-gradient(120deg,rgba(34,211,238,.12),rgba(255,255,255,.6));
  border-color:rgba(20,150,180,.28)}
body.theme-light .fcard .rank{color:#6b7f96}
body.theme-light .fcard .nm{color:#0d2036}
body.theme-light .fcard .st{color:#64789c}
body.theme-light .fcard .st b{color:#0d6b7d}
body.theme-light .fcard .sc b{color:#0885a0}
body.theme-light .fcard .sc em{color:#64789c}
body.theme-light .fcard.r1{background:linear-gradient(120deg,rgba(255,201,77,.26),rgba(34,211,238,.08));
  border-color:rgba(212,150,20,.5)}
body.theme-light .fcard.r1 .rank,
body.theme-light .fcard.r1 .sc b{color:#b07d05}

/* 喜报 */
body.theme-light .ticker-label{color:#b07d05}
body.theme-light .ticker-track span{color:#1f3a5c}
body.theme-light .ticker-track span b{color:#0a63c4}
body.theme-light .dot-blue{background:#0a63c4;box-shadow:none}
body.theme-light .dot-cyan{background:#0885a0;box-shadow:none}