* { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#050D1A;
    font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif; }
  #stage { position:absolute; left:50%; top:50%; width:1920px; height:1080px;
    transform-origin:center center; background:
      radial-gradient(1200px 620px at 12% -8%, rgba(34,211,238,.16), transparent 62%),
      radial-gradient(1000px 560px at 92% 108%, rgba(56,189,248,.13), transparent 60%),
      linear-gradient(160deg,#071427 0%,#0A1B33 48%,#061223 100%);
    display:flex; flex-direction:column; padding:24px; gap:16px; color:#E6F1FF; }

  /* ---------- 顶部标题 ---------- */
  .topbar { height:88px; display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; border-radius:12px; position:relative;
    background:linear-gradient(90deg, rgba(34,211,238,.20), rgba(12,32,58,.55) 42%, rgba(34,211,238,.14));
    border:1px solid rgba(34,211,238,.32); box-shadow:0 0 30px rgba(8,145,178,.22) inset; }
  .topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:linear-gradient(90deg,transparent,#22D3EE,transparent); opacity:.85; }
  .brand { display:flex; align-items:baseline; gap:16px; }
  .brand h1 { font-size:38px; letter-spacing:3px; font-weight:800;
    background:linear-gradient(180deg,#FFFFFF,#7FE3F5); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; }
  .brand .sub { font-size:15px; color:#7FA8C9; letter-spacing:2px; }
  .brand .dot { width:10px; height:10px; border-radius:50%; background:#22C55E;
    box-shadow:0 0 12px #22C55E; display:inline-block; margin-right:6px;
    animation:pulse 1.6s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.28;} }
  .clock { text-align:right; }
  .clock .t { font-size:34px; font-weight:700; letter-spacing:2px; color:#EAF6FF;
    font-variant-numeric:tabular-nums; }
  .clock .d { font-size:14px; color:#7FA8C9; letter-spacing:1px; margin-top:2px; }

  /* ---------- 数据新鲜度 / 异常告警（2026-10-10 加固） ----------
     事故背景：大屏"数据截至"停在 09-30 长达 10 天无人察觉。
     新增：① 状态灯补样式（原来 .clock .d .dot 无 CSS，是个 0×0 隐形元素）
           ② 数据滞后 / 刷新连续失败时，顶栏副标题变黄变红并给出处置指引 */
  .clock .d .dot { width:9px; height:9px; border-radius:50%; background:#22C55E;
    box-shadow:0 0 10px #22C55E; display:inline-block; margin-right:6px;
    animation:pulse 1.6s infinite; }
  .clock .d.fresh-warn { color:#FBBF24; }
  .clock .d.fresh-bad { color:#FF6B6B; font-weight:700; }
  .clock .d.fresh-warn .dot { background:#FBBF24; box-shadow:0 0 10px #FBBF24; }
  .clock .d.fresh-bad .dot { background:#FF6B6B; box-shadow:0 0 10px #FF6B6B; }
  .brand .sub.warn { color:#FBBF24; }
  .brand .sub.bad { color:#FF6B6B; font-weight:700; }
  .topbar.alert-warn { border-color:rgba(251,191,36,.55);
    box-shadow:0 0 30px rgba(251,191,36,.16) inset; }
  .topbar.alert-bad { border-color:rgba(255,107,107,.7);
    box-shadow:0 0 34px rgba(255,107,107,.26) inset; }

  /* ---------- KPI ---------- */
  .kpis { height:140px; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
  .kpi { position:relative; border-radius:12px; padding:16px 18px;
    background:linear-gradient(155deg, rgba(21,48,80,.92), rgba(10,26,48,.86));
    border:1px solid rgba(56,189,248,.24); overflow:hidden; }
  .kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:var(--c,#22D3EE); box-shadow:0 0 18px var(--c,#22D3EE); }
  .kpi .label { font-size:15px; color:#8FB4D4; letter-spacing:1px; }
  .kpi .val { font-size:46px; font-weight:800; line-height:1.12; margin-top:4px;
    font-variant-numeric:tabular-nums; color:#FFFFFF; }
  .kpi .val small { font-size:17px; font-weight:600; color:#9EC6E2; margin-left:5px; letter-spacing:0; }
  .kpi .foot { font-size:13px; margin-top:6px; color:#7FA8C9; letter-spacing:.5px; }
  .kpi .foot .up { color:#FF6B6B; font-weight:700; }
  .kpi .foot .down { color:#22C55E; font-weight:700; }
  .kpi .foot .warn { color:#FBBF24; font-weight:700; }

  /* ---------- 面板 ---------- */
  .panel { position:relative; border-radius:12px; padding:12px 14px 8px;
    background:linear-gradient(160deg, rgba(19,44,74,.86), rgba(8,22,42,.80));
    border:1px solid rgba(56,189,248,.20); display:flex; flex-direction:column; min-width:0; }
  .panel h3 { font-size:17px; font-weight:700; letter-spacing:1.5px; color:#CFE9FA;
    display:flex; align-items:center; gap:8px; padding-bottom:6px; flex:0 0 auto; }
  .panel h3 i { width:4px; height:16px; border-radius:2px; background:#22D3EE;
    box-shadow:0 0 10px #22D3EE; display:inline-block; }
  .panel h3 span { font-size:12px; font-weight:400; color:#6E93B4; letter-spacing:0; margin-left:auto; }
  .chart { flex:1 1 auto; min-height:0; }

  .row-main { height:356px; display:grid; grid-template-columns:5fr 4fr 3fr; gap:16px; }
  .row-bot  { height:400px; display:grid; grid-template-columns:4fr 4fr 4fr; gap:16px; }

  /* ---------- 未闭环列表 ---------- */
  .listwrap { flex:1 1 auto; overflow:hidden; position:relative; }
  .listwrap::after { content:""; position:absolute; left:0; right:0; bottom:0; height:44px;
    background:linear-gradient(180deg,transparent,rgba(8,22,42,.96)); pointer-events:none; }
  table.roll { width:100%; border-collapse:collapse; font-size:13.5px; }
  table.roll th { font-size:12.5px; color:#7FA8C9; font-weight:600; text-align:left;
    padding:7px 6px; border-bottom:1px solid rgba(56,189,248,.24); position:sticky; top:0;
    background:rgba(11,28,50,.96); letter-spacing:.5px; z-index:2; }
  table.roll td { padding:7px 6px; color:#D7E8F7; border-bottom:1px dashed rgba(56,189,248,.12);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  table.roll tr:nth-child(even) td { background:rgba(56,189,248,.045); }
  .tag { display:inline-block; padding:1px 8px; border-radius:9px; font-size:12px; font-weight:700; }
  .tag.red   { background:rgba(239,68,68,.20); color:#FF8A8A; border:1px solid rgba(239,68,68,.5); }
  .tag.amber { background:rgba(245,158,11,.20); color:#FBBF24; border:1px solid rgba(245,158,11,.5); }
  .tag.blue  { background:rgba(56,189,248,.18); color:#7FD8EE; border:1px solid rgba(56,189,248,.45); }
  .age-hot { color:#FF6B6B; font-weight:700; }
  .rollhead { display:flex; padding:7px 6px; font-size:12.5px; color:#7FA8C9; font-weight:600;
    border-bottom:1px solid rgba(56,189,248,.24); letter-spacing:.5px; }
  .rollrow { display:flex; padding:7px 6px; font-size:13.5px; color:#D7E8F7;
    border-bottom:1px dashed rgba(56,189,248,.12); }
  .rollrow:nth-child(even) { background:rgba(56,189,248,.045); }
  .rollhead span, .rollrow span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .c-date { flex:0 0 76px; } .c-station { flex:1 1 auto; min-width:0; }
  .c-cat { flex:0 0 80px; } .c-res { flex:0 0 94px; } .c-age { flex:0 0 62px; }
  .rollclip { flex:1 1 auto; overflow:hidden; position:relative; }
  #openBody { will-change:transform; }
  .age-mid { color:#FBBF24; font-weight:700; }

  /* ---------- 底部提示 ---------- */
  .footer { height:0; }
  .datatip { position:absolute; left:24px; right:24px; bottom:6px; display:flex; gap:20px;
    justify-content:space-between; font-size:12px; color:#5F86A8; letter-spacing:.5px; }
  .datatip b { color:#FBBF24; font-weight:700; }

  /* ---------- 时钟日期 ---------- */
  .clock .cd { font-size:13px; color:#6E93B4; letter-spacing:1.5px; margin-top:-2px; }

  /* ---------- 数据更新提示 ---------- */
  .update-toast {
    position:absolute; right:24px; top:104px; z-index:50;
    padding:8px 16px; border-radius:8px; font-size:13px; letter-spacing:.5px;
    background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.45); color:#4ADE80;
    opacity:0; transform:translateY(-8px); transition:opacity .25s, transform .25s;
    pointer-events:none;
  }
  .update-toast.show { opacity:1; transform:translateY(0); }

  /* ---------- 全屏按钮 ---------- */
  .clockwrap { display:flex; align-items:center; gap:18px; }
  .fsbtn {
    flex:0 0 auto; width:46px; height:46px; border-radius:11px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.38);
    color:#7FE3F5; transition:background .18s, color .18s, box-shadow .18s, border-color .18s;
  }
  .fsbtn:hover { background:rgba(34,211,238,.24); border-color:rgba(34,211,238,.75);
    color:#EAF6FF; box-shadow:0 0 18px rgba(34,211,238,.5); }
  .fsbtn:active { transform:translateY(1px); }
  .fsbtn:focus-visible { outline:2px solid #22D3EE; outline-offset:2px; }
  .fsbtn .ico-exit { display:none; }
  .fsbtn.on { background:rgba(34,211,238,.22); border-color:rgba(34,211,238,.8); color:#EAF6FF; }
  .fsbtn.on .ico-enter { display:none; }
  .fsbtn.on .ico-exit { display:block; }
  .fsbtn[hidden] { display:none; }