:root{
  --bg:#03080f;
  --panel-a:rgba(15,36,72,.82);
  --panel-b:rgba(7,18,38,.90);
  --line:rgba(56,189,248,.20);
  --text:#e6f3ff;
  --sub:#7ea6c8;
  --cyan:#22d3ee;
  --blue:#3b82f6;
  --orange:#fb923c;
  --purple:#a78bfa;
  --green:#34d399;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--bg);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  color:var(--text);
  overflow:hidden;
}
.mono{font-family:"Bahnschrift","DIN Alternate",Consolas,monospace;font-variant-numeric:tabular-nums;}

/* ============ 画布：1920x1080 等比缩放 ============ */
#screen{
  position:absolute;left:50%;top:50%;
  width:1920px;height:1080px;
  margin-left:-960px;margin-top:-540px;
  transform-origin:center center;
  display:flex;flex-direction:column;
  padding:22px 30px 20px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(34,211,238,.13), transparent 65%),
    radial-gradient(900px 500px at 6% 106%, rgba(59,130,246,.13), transparent 62%),
    radial-gradient(900px 500px at 96% 106%, rgba(167,139,250,.11), transparent 62%),
    linear-gradient(180deg,#040b17 0%,#02070d 100%);
}
#screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(56,189,248,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 92% 85% at 50% 45%,#000 35%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 92% 85% at 50% 45%,#000 35%,transparent 100%);
}

/* ============ 顶部标题 ============ */
header{
  position:relative;z-index:2;
  height:92px;flex:0 0 92px;
  display:flex;align-items:center;justify-content:space-between;
}
.h-side{
  display:flex;align-items:center;gap:10px;
  font-size:15px;color:var(--sub);letter-spacing:.5px;
  min-width:400px;
}
.h-side .dot-live{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.82);}}

.h-center{position:relative;text-align:center;flex:1;}
.h-center .deco-line{
  position:absolute;top:50%;width:250px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.75));
}
.h-center .deco-line.l{right:calc(50% + 290px);}
.h-center .deco-line.r{left:calc(50% + 290px);transform:scaleX(-1);}
.h-center h1{
  margin:0;font-size:38px;font-weight:800;letter-spacing:6px;
  background:linear-gradient(180deg,#ffffff 8%,#7fe3ff 52%,#2b9fd6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 28px rgba(34,211,238,.35);
}
.h-center .sub{
  margin-top:6px;font-size:13px;letter-spacing:5px;color:rgba(126,166,200,.85);
}
.h-right{justify-content:flex-end;}

/* 全屏开关 */
.fs-btn{
  height:30px;padding:0 14px;border-radius:15px;
  font-size:12.5px;letter-spacing:1px;color:#9fc4da;font-family:inherit;
  background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.35);
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.fs-btn:hover{
  color:#dff3ff;background:rgba(56,189,248,.18);
  box-shadow:0 0 12px rgba(56,189,248,.35);
}

/* ============ 主体：顶部汇总条 + 左右两栏 ============ */
main{
  position:relative;z-index:2;
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:138px 1fr;
  gap:16px;
}
.col{display:flex;flex-direction:column;gap:16px;min-height:0;min-width:0;}

/* ============ 汇总条：贯穿左右两栏 ============ */
.summary{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,rgba(15,36,72,.72),rgba(7,18,38,.86));
  overflow:hidden;position:relative;
}
.summary::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.85),rgba(167,139,250,.6),transparent);
}
.s-item{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
}
.s-item + .s-item::before{
  content:"";position:absolute;left:0;top:20%;height:60%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(56,189,248,.34),transparent);
}
.s-v{
  font-size:40px;font-weight:700;color:#fff;line-height:1;
  text-shadow:0 0 20px rgba(34,211,238,.44);
  display:inline-block;
}
.s-v.sm{font-size:26px;color:#8fd7f0;text-shadow:none;}
.s-l{font-size:13.5px;color:var(--sub);letter-spacing:1.4px;}

/* ============ 面板通用 ============ */
.panel{
  position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(155deg,var(--panel-a),var(--panel-b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 10px 30px rgba(0,0,0,.4);
  overflow:hidden;
}
.panel::before,.panel::after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;z-index:3;
}
.panel::before{left:-1px;top:-1px;border-left:2px solid var(--pc,#22d3ee);border-top:2px solid var(--pc,#22d3ee);border-radius:12px 0 0 0;opacity:.9;}
.panel::after{right:-1px;bottom:-1px;border-right:2px solid var(--pc,#22d3ee);border-bottom:2px solid var(--pc,#22d3ee);border-radius:0 0 12px 0;opacity:.5;}
.panel .topline{
  position:absolute;left:20px;right:20px;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--pc,#22d3ee),transparent 72%);opacity:.85;
}
.panel-hd{
  flex:0 0 48px;height:48px;
  display:flex;align-items:center;gap:12px;
  padding:0 20px;
  border-bottom:1px solid rgba(56,189,248,.14);
}
.panel-hd .bar{width:4px;height:18px;border-radius:2px;background:var(--pc,#22d3ee);box-shadow:0 0 12px var(--pc,#22d3ee);}
.panel-hd .tt{font-size:18px;font-weight:700;letter-spacing:1.6px;}
.panel-hd .sub{margin-left:auto;font-size:12px;color:rgba(126,166,200,.7);letter-spacing:1px;}

/* ============ 左栏：系统实用化情况列表 ============ */
.list{flex:1;min-height:0;display:flex;flex-direction:column;}

.list-hd{
  flex:0 0 38px;height:38px;
  display:grid;grid-template-columns:repeat(5, 1fr);
  align-items:center;column-gap:18px;
  padding:0 20px;
  font-size:12.5px;color:rgba(126,166,200,.72);letter-spacing:1.4px;
  background:rgba(56,189,248,.05);
  border-bottom:1px solid rgba(56,189,248,.12);
}
.list-hd span:nth-child(2),.list-hd span:nth-child(3),.list-hd span:nth-child(4){text-align:center;}
.list-hd span:last-child{text-align:center;}

.row{
  position:relative;
  flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(5, 1fr);
  align-items:center;column-gap:18px;
  padding:0 20px;
  border-bottom:1px solid rgba(56,189,248,.10);
}
.row:last-child{border-bottom:none;}
.row::before{
  content:"";position:absolute;left:0;top:18%;height:64%;width:3px;border-radius:0 3px 3px 0;
  background:var(--c);box-shadow:0 0 14px var(--c);opacity:.85;
}
/* 被抽中跳动时整行脉冲 */
@keyframes rowFlash{
  0%  {background:color-mix(in srgb,var(--c) 13%,transparent);}
  100%{background:transparent;}
}
.row.flash{animation:rowFlash 1.1s ease-out;}

.c-name{display:flex;align-items:center;gap:8px;min-width:0;}
.c-name .nm{font-size:15.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap;}
.c-name .tag{
  font-size:10.5px;padding:2px 7px;border-radius:20px;letter-spacing:.5px;white-space:nowrap;
  color:var(--c);border:1px solid color-mix(in srgb,var(--c) 42%,transparent);
  background:color-mix(in srgb,var(--c) 12%,transparent);
}
.c-name .st{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulse 1.9s infinite;flex:0 0 auto;
}

.c-num{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;min-width:0;}
.c-num b{
  display:inline-block;position:relative;
  font-family:"Bahnschrift","DIN Alternate",Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:32px;font-weight:700;line-height:1;color:#fff;
  letter-spacing:.5px;
  text-shadow:0 0 20px color-mix(in srgb,var(--c) 55%,transparent);
}
/* 【已移除】.c-num .u 数字右侧悬挂单位（人/次/万次），列含义由表头承载 */
/* 【已移除】.c-num i 数字下方小标签（与表头重复），列含义由表头承载 */
.c-num.on b{color:#c8ffe9;text-shadow:0 0 20px rgba(52,211,153,.5);}

/* 【已移除】业务系统在线率环图样式（原 .c-rate 系列） */

.c-tags{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;justify-content:center;
  width:100%;
}
.chip{
  display:inline-flex;align-items:baseline;gap:4px;
  padding:4px 7px;border-radius:6px;white-space:nowrap;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.085);
  font-size:10.5px;color:var(--sub);letter-spacing:.2px;
}
.chip b{
  font-family:"Bahnschrift","DIN Alternate",Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:700;color:#eaf7ff;letter-spacing:0;
  display:inline-block;
}

/* ============ 右栏：上=AI 大模型使用情况 / 下=GitLab 研发数据中心 ============ */
.col-right{gap:14px;}
.panel-ai{flex:0 0 auto;height:312px;}
.panel-gl{flex:1 1 auto;min-height:0;--pc:#22d3ee;}

/* 卡片行：左 = 全站额度消耗卡；右 = 模型调用排行 */
.ai-body{
  flex:1;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.05fr);gap:14px;
  padding:14px 18px 16px;
}
.kpi{
  position:relative;overflow:hidden;border-radius:10px;
  display:flex;flex-direction:column;justify-content:center;gap:11px;
  padding:0 20px;
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--c) 13%,rgba(10,26,50,.6)),rgba(6,16,32,.72));
  border:1px solid color-mix(in srgb,var(--c) 26%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c);box-shadow:0 0 14px var(--c);opacity:.9;
}
.kpi::after{
  content:"";position:absolute;right:-34px;top:-34px;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%);
  pointer-events:none;
}
@keyframes kpiFlash{
  0%  {box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 90%,transparent),0 0 30px color-mix(in srgb,var(--c) 46%,transparent);}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 transparent;}
}
.kpi.flash{animation:kpiFlash 1.1s ease-out;}

.kpi-hd{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#bcd8ee;letter-spacing:1.1px;white-space:nowrap;}
.kpi-hd svg{width:18px;height:18px;flex:0 0 auto;color:var(--c);}
.kpi-v{
  display:inline-block;
  font-family:"Bahnschrift","DIN Alternate",Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:46px;font-weight:700;line-height:1;color:#fff;letter-spacing:.5px;
  text-shadow:0 0 24px color-mix(in srgb,var(--c) 58%,transparent);
}
.kpi-v .u{font-size:14px;font-weight:400;color:var(--sub);margin-left:4px;letter-spacing:0;text-shadow:none;font-family:inherit;}
.kpi-v.sm{font-size:31px;}

/* ---- KPI 副行：今日消耗额度（额度换算/实时吞吐副行已下线，不复用旧文案） ---- */
.kpi-sub{
  font-size:14px;color:var(--sub);letter-spacing:.3px;line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.kpi-sub b{color:#7ee0b8;font-weight:700;font-size:20px;margin-left:2px;}

/* ---- 模型调用排行 ---- */
.ai-rank{
  --c:#a78bfa;
  min-height:0;display:flex;flex-direction:column;
  padding:10px 16px 11px;border-radius:10px;
  border:1px solid rgba(56,189,248,.16);
  background:linear-gradient(180deg,rgba(10,26,52,.5),rgba(5,14,28,.64));
}
.ai-rank.flash{animation:kpiFlash 1.1s ease-out;}
.ai-rank .ch-hd .ch-bar{background:#a78bfa;box-shadow:0 0 10px #a78bfa;}
/* 数值列描述表头：与行网格同宽，仅标注次数 / token 两列 */
.rank-hd{
  flex:0 0 auto;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr) 48px 84px;
  gap:14px;padding-bottom:2px;
  font-size:11px;color:rgba(126,166,200,.6);letter-spacing:.5px;
}
.rank-hd span:nth-child(n+3){text-align:right;}
/* 【已移除】.rank-sum 合计行（口径与「当日消耗token」卡重复） */
.rank-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;}
.rank-row{
  flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr) 48px 84px;
  align-items:center;gap:14px;
}
/* 参考 MODEL MIX 行式排版：模型名称 + 圆角进度条（条长即占比）+ 右对齐次数 + token 消耗 */
.rank-row .md{
  font-size:14px;font-weight:400;color:#d5e9fa;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rank-row .ct{
  font-family:"Bahnschrift",Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:400;color:#c6dbe4;text-align:right;
}
.rank-row .qt{
  font-family:"Bahnschrift",Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:13.5px;font-weight:700;color:#7ee0b8;text-align:right;white-space:nowrap;
}
.rank-row .bar{height:10px;border-radius:5px;background:rgba(148,184,206,.12);overflow:hidden;}
.rank-row .bar i{
  display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,#39bdcf,#65e6d0);
  box-shadow:0 0 10px rgba(83,225,237,.45);
  transition:width .9s cubic-bezier(.22,1,.36,1);
}
/* 【已移除】.rk 排名角标与 top1~top3 高亮、.rank-total 合计行（参考样式无合计） */
.rank-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:rgba(126,166,200,.7);letter-spacing:1px;
}

/* ---- 图表/列表通用标题行 ---- */
.ch-hd{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.ch-hd .ch-bar{width:3px;height:14px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex:0 0 auto;}
.ch-hd .ch-t{font-size:14.5px;font-weight:700;letter-spacing:1.4px;color:#cfeaff;white-space:nowrap;}
/* 【已移除】.ch-sub 副标题；参考 MODEL MIX 右侧改为「近 30 分钟 · N 条」胶囊标签 */
.ch-hd .ch-peak{
  margin-left:auto;padding:3px 12px;border-radius:16px;
  font-size:11.5px;color:#9fc4da;letter-spacing:.6px;white-space:nowrap;
  border:1px solid rgba(56,189,248,.28);background:rgba(56,189,248,.08);
}
.ch-hd .ch-peak em{
  font-style:normal;font-family:"Bahnschrift",Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:700;color:#7fe3ff;
}

/* ============ GitLab 研发数据中心 · 项目矩阵 ============ */
.gl-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:11px 18px 14px;}
.gl-hd{
  flex:0 0 32px;height:32px;
  display:grid;
  grid-template-columns:minmax(0,2.6fr) .82fr 1fr .92fr .98fr;
  align-items:center;gap:14px;padding:0 12px;
  font-size:11.5px;color:rgba(126,166,200,.62);letter-spacing:1.2px;
  background:rgba(56,189,248,.05);
  border-bottom:1px solid rgba(56,189,248,.12);
}
.gl-hd span:nth-child(2){text-align:center;}
.gl-hd span:nth-child(3){text-align:center;}
.gl-hd span:nth-child(n+4){text-align:right;}

.gl-list{flex:1;min-height:0;display:flex;flex-direction:column;}
.gl-row{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:minmax(0,2.6fr) .82fr 1fr .92fr .98fr;
  align-items:center;gap:14px;padding:0 12px;
  border-bottom:1px solid rgba(56,189,248,.08);
}
.gl-row:last-child{border-bottom:none;}

.gl-row .p-name{display:flex;align-items:center;gap:10px;min-width:0;}
.gl-row .p-ico{
  width:24px;height:24px;border-radius:7px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#04131f;
  background:linear-gradient(135deg,#7fe3ff,#22d3ee);
  box-shadow:0 0 12px rgba(34,211,238,.34);
}
.gl-row .p-txt{min-width:0;display:flex;flex-direction:column;gap:2px;}
.gl-row .p-txt .n1{
  font-size:13.5px;font-weight:700;color:#e6f3ff;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gl-row .p-txt .n2{
  font-size:10.5px;font-style:normal;color:rgba(126,166,200,.6);letter-spacing:.2px;
  font-family:"Bahnschrift",Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.gl-badge{
  justify-self:center;white-space:nowrap;
  font-family:"Bahnschrift",Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px;
  color:#7dd3fc;border:1px solid rgba(56,189,248,.40);background:rgba(56,189,248,.13);
}
.gl-badge.hot{color:#fca5a5;border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.15);}
.gl-badge.idle{color:rgba(126,166,200,.78);border-color:rgba(126,166,200,.24);background:rgba(126,166,200,.08);}

.gl-row .t{
  text-align:center;white-space:nowrap;
  font-family:"Bahnschrift",Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:12.5px;color:#9fd8ef;letter-spacing:.3px;
}
.gl-row .st,
.gl-row .ln{
  text-align:right;white-space:nowrap;
  font-family:"Bahnschrift",Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:13.5px;font-weight:700;
}
.gl-row .st{color:#bfe6ff;}
.gl-row .ln{color:#a9e9c9;}
.gl-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:rgba(126,166,200,.7);letter-spacing:1px;
}

/* ============ 跳动动画 ============ */
@keyframes tickUp{
  0%  {transform:translateY(7px);opacity:.35;filter:brightness(2);}
  55% {transform:translateY(0);opacity:1;filter:brightness(1.4);}
  100%{transform:translateY(0);opacity:1;filter:brightness(1);}
}
@keyframes tickDown{
  0%  {transform:translateY(-7px);opacity:.35;filter:brightness(2);}
  55% {transform:translateY(0);opacity:1;filter:brightness(1.4);}
  100%{transform:translateY(0);opacity:1;filter:brightness(1);}
}
.tick-up{animation:tickUp .85s cubic-bezier(.22,1,.36,1);}
.tick-down{animation:tickDown .85s cubic-bezier(.22,1,.36,1);}