/* ============================================================
 * screen.css — 视窗屏幕的共享样式（主屏与所有副屏共用）
 * 配色由 theme.js 注入 CSS 变量控制，布局由 layout.js 动态装配
 * 2026-09-29：从 black.html 的内联 <style> 抽出，供 4 个屏共用，
 *             避免同一套样式在多个页面里重复维护。
 * ============================================================ */
:root{
  --bg-base:#03060f;
  --bg-radial-1:#0a1d3d;
  --bg-radial-2:#050a18;
  --bg-radial-3:#03060f;
  --panel-top:rgba(10,30,60,.55);
  --panel-bottom:rgba(4,12,26,.45);
  --border:rgba(0,212,255,.30);
  --corner:#00d4ff;
  --primary:#00d4ff;
  --primary-soft:#5ce1ff;
  --primary-deep:#0066ff;
  --accent:#7b61ff;
  --text:#e6f4ff;
  --text-dim:#7d9bb8;
  --text-faint:#4a6382;
  --title-grad-1:#eaf9ff;
  --title-grad-2:#00d4ff;
  --title-grad-3:#0066ff;
  --title-glow:rgba(0,212,255,.30);
  --up:#ff4d5e;
  --down:#22d39a;
  --warn:#ffb020;
  --icon-bg-1:#0d2b4d;
  --icon-bg-2:#061428;
  --bar-from:#0066ff;
  --bar-to:#00d4ff;
  --hot:rgba(0,212,255,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-base);color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background .45s ease,color .25s ease}
#bg{position:fixed;inset:0;z-index:-2;transition:background .45s ease;
  background:radial-gradient(ellipse 1300px 700px at 50% -15%,var(--bg-radial-1) 0%,var(--bg-radial-2) 55%,var(--bg-radial-3) 100%)}
/* 科技感网格纹理 */
#grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.30;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:4rem 4rem;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 80%)}
#wrap{width:120rem;height:67.5rem;margin:auto;display:flex;flex-direction:column}
/* 屏幕根容器：承接 header 之后的剩余高度，供 .main 伸展 */
#dash{flex:1;min-height:0;display:flex;flex-direction:column}

/* ===== header ===== */
header{height:4.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 2.25rem;position:relative;flex-shrink:0}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary) 30%,var(--primary) 70%,transparent);
  box-shadow:0 0 .8rem var(--title-glow);transition:background .45s ease}
.hl,.hr{color:var(--text-dim);font-size:.8rem;display:flex;gap:1rem;align-items:center;transition:color .25s}
.hr{justify-content:flex-end}
.hl .gold,.hr .gold{color:var(--primary);font-family:"DIN Alternate",Impact,sans-serif;
  font-size:.95rem;letter-spacing:.05rem}
.ttl{font-size:2rem;font-weight:700;letter-spacing:.6rem;white-space:nowrap;position:relative;
  background:linear-gradient(180deg,var(--title-grad-1) 15%,var(--title-grad-2) 60%,var(--title-grad-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 1.2rem var(--title-glow));transition:filter .45s ease}
.ttl::before,.ttl::after{content:"";position:absolute;top:50%;width:4.5rem;height:1rem;
  border-top:1px solid var(--primary);border-bottom:1px solid var(--primary);transform:translateY(-50%);
  transition:border-color .45s ease}
.ttl::before{left:-6.2rem}.ttl::after{right:-6.2rem}

/* ===== 副屏导航（由 nav.js 渲染进 .hr） ===== */
.hr .nav{display:flex;gap:.4rem;align-items:center}
.hr .nav a{color:var(--text-dim);text-decoration:none;font-size:.76rem;letter-spacing:.04rem;
  padding:.18rem .6rem;border-radius:1rem;border:1px solid transparent;transition:all .25s}
.hr .nav a:hover{color:var(--primary-soft);border-color:var(--border)}
.hr .nav a.on{color:var(--bg-base);font-weight:600;
  background:linear-gradient(180deg,var(--primary),var(--primary-deep));border-color:transparent}

/* ===== KPI 行 ===== */
.kpis{height:6.6rem;flex-shrink:0;display:grid;gap:.875rem;padding:1rem 2.25rem .75rem}.kpi{position:relative;display:flex;align-items:center;gap:.85rem;padding:.4rem 1rem;
  background:linear-gradient(180deg,var(--panel-top),var(--panel-bottom));
  border:1px solid var(--border);border-radius:.3rem;transition:all .45s ease;
  clip-path:polygon(.75rem 0,calc(100% - .75rem) 0,100% 50%,calc(100% - .75rem) 100%,.75rem 100%,0 50%)}
.kpi::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,var(--hot) 50%,transparent 60%);
  opacity:0;transition:opacity .4s}
.kpi:hover::after{opacity:1}
.kpi .ic svg{width:1.5rem;height:1.5rem}
.kpi .ic{width:2.6rem;height:2.6rem;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;color:var(--primary-soft);
  background:radial-gradient(circle at 35% 30%,var(--icon-bg-1),var(--icon-bg-2));
  border:1px solid var(--border);
  box-shadow:0 0 .7rem var(--title-glow),inset 0 0 .8rem var(--title-glow);transition:all .45s ease}
.kpi .lb{font-size:.68rem;color:var(--text-dim);letter-spacing:.05rem;transition:color .25s}
.kpi .vl{font-size:1.55rem;font-weight:700;color:var(--primary-soft);line-height:1.15;
  letter-spacing:.03rem;font-family:"DIN Alternate","Bahnschrift",Impact,sans-serif;
  text-shadow:0 0 .7rem var(--title-glow);transition:all .45s ease}
.kpi .dt{font-size:.6rem;color:var(--text-faint)}

/* ===== 主区 ===== */
.main{flex:1;min-height:0;padding:0 1.25rem .75rem;display:grid;gap:.875rem}
.col{display:flex;flex-direction:column;gap:.875rem;min-height:0;min-width:0;overflow:hidden}
.panel{position:relative;background:linear-gradient(180deg,var(--panel-top),var(--panel-bottom));
  border:1px solid var(--border);border-radius:.3rem;padding:.55rem .8rem;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;transition:all .45s ease}
.panel::before,.panel::after{content:"";position:absolute;width:.8rem;height:.8rem;
  border:.12rem solid var(--corner);transition:border-color .45s ease}
.panel::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.panel::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.pt{font-size:.95rem;font-weight:600;letter-spacing:.1rem;margin-bottom:.4rem;
  padding-left:.7rem;border-left:2px solid var(--primary);line-height:1.25;flex-shrink:0;
  color:var(--text);display:flex;align-items:center;transition:border-color .45s ease}
.pt .tag{margin-left:auto;font-size:.62rem;color:var(--text-dim);font-weight:400;letter-spacing:.05rem;
  border:1px solid var(--border);padding:.05rem .55rem;border-radius:.8rem}
/* 排行 */
.rank{flex:1;min-height:0;overflow:hidden}
.rank .rw{display:grid;grid-template-columns:1.7rem 1fr 4rem auto;align-items:center;
  gap:.55rem;padding:.32rem 0;border-bottom:1px dashed var(--border);font-size:.78rem}
.rank .rw:last-child{border-bottom:0}
.rank .no{width:1.3rem;height:1.3rem;line-height:1.3rem;text-align:center;border-radius:50%;
  background:var(--hot);color:var(--text-dim);font-size:.68rem;font-style:normal}
.rank .rw.t3 .no{background:linear-gradient(180deg,var(--primary),var(--primary-deep));
  color:var(--bg-base);font-weight:700}
.rank .nm{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .bar{height:.42rem;background:var(--hot);border-radius:.2rem;overflow:hidden}
.rank .bar i{display:block;height:100%;border-radius:.2rem;width:0;
  background:linear-gradient(90deg,var(--bar-from),var(--bar-to));
  transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.rank .v{color:var(--primary-soft);font-family:"DIN Alternate",Impact,sans-serif;font-size:.85rem;text-align:right}
/* 滚动区 */
.scroll{flex:1;min-height:0;overflow:hidden;position:relative}
.scroll .row{display:grid;grid-template-columns:6rem 5.4rem 1fr 4rem;gap:.5rem;align-items:center;
  font-size:.78rem;padding:.34rem .4rem;border-bottom:1px dashed var(--border);
  background:linear-gradient(270deg,transparent,var(--hot) 20%,var(--hot) 80%,transparent);
  border-radius:.2rem;margin-bottom:.15rem;color:var(--text-dim)}
.scroll .row.hot{background:linear-gradient(270deg,transparent,var(--hot) 30%,var(--hot) 70%,transparent);
  border-left:2px solid var(--primary)}
.scroll .ci{color:var(--primary);font-size:.8rem;font-weight:600;white-space:nowrap}
.scroll .dt{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scroll .dt b{color:var(--text);font-weight:500}
.scroll .am{color:var(--primary-soft);font-family:"DIN Alternate",Impact,sans-serif;
  text-align:right;font-size:.85rem}
.scroll .empty{color:var(--text-faint);text-align:center;padding-top:2.5rem;font-size:.8rem;letter-spacing:.2rem}
/* 图表容器 */
.chart{flex:1;min-height:0;padding:0;width:100%}
.mapbox{padding:.4rem}
/* 网格体（KPI/stat 内部） */
.grid-body{flex:1;min-height:0;display:grid;gap:.5rem;align-content:center}
.st-cell{background:var(--hot);border:1px solid var(--border);border-radius:.3rem;
  padding:.55rem .7rem;display:flex;flex-direction:column;gap:.2rem;transition:all .3s}
.st-cell:hover{border-color:var(--primary);box-shadow:0 0 .6rem var(--title-glow)}
.st-lb{font-size:.62rem;color:var(--text-dim);letter-spacing:.03rem}
.st-vl{font-size:1.15rem;font-weight:700;color:var(--primary-soft);
  font-family:"DIN Alternate",Impact,sans-serif;text-shadow:0 0 .5rem var(--title-glow)}
/* 进度条组 */
.pg-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.pg-row{margin-bottom:.5rem}
.pg-row:last-child{margin-bottom:0}
.pg-hd{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 .25rem;font-size:.8rem;color:var(--text)}
.pg-hd em{color:var(--text-faint);font-size:.72rem;font-style:normal}
.pg-hd b{color:var(--primary-soft);font-family:"DIN Alternate",Impact,sans-serif;font-size:.95rem}
.pg-row .bar{width:100%;height:.55rem;background:var(--hot);border-radius:.2rem;overflow:hidden}
.pg-row .bar i{display:block;height:100%;border-radius:.2rem;
  background:linear-gradient(90deg,var(--bar-from),var(--bar-to));
  transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
/* 新单渐入 */
.fadein{animation:fi .8s ease}
@keyframes fi{from{opacity:0;transform:translateX(-1.2rem)}to{opacity:1;transform:none}}
.empty{color:var(--text-faint);text-align:center;padding-top:2rem;font-size:.8rem;letter-spacing:.2rem}
#conn{position:fixed;left:1.2rem;bottom:.5rem;color:var(--text-faint);font-size:.68rem;z-index:9;letter-spacing:.05rem}