/* 大屏共用外壳 —— 六屏统一风格，所有 screen/*.html 必须引用 */
:root{
--cyan:#38BDF8; --teal:#2DD4BF; --amber:#FBBF24; --orange:#FB923C; --red:#F87171; --green:#34D399;
--text:#E2F0FA; --muted:#7FA3BD; --panel:rgba(16,42,66,.72); --line:rgba(56,189,248,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#050D16;
font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--text)}
#viewport{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;
background:radial-gradient(ellipse at 50% 28%,#0D2540 0%,#081522 58%,#050D16 100%)}
/* 背景细网格底纹（40px · 极淡） */
#viewport::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(56,189,248,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.025) 1px,transparent 1px);
background-size:40px 40px}
/* 径向暗角 vignette（克制，仅压暗四缘） */
#viewport::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:40;
background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(2,7,13,.28) 82%,rgba(2,7,13,.5) 100%)}
/* 极淡扫描线（8s 循环，纯 transform/opacity） */
body::after{content:"";position:fixed;left:0;right:0;top:0;height:150px;pointer-events:none;z-index:60;opacity:.04;
background:linear-gradient(180deg,transparent,rgba(56,189,248,.55) 55%,rgba(125,211,252,.8) 62%,rgba(56,189,248,.35) 70%,transparent);
animation:scanline 8s linear infinite;will-change:transform}
@keyframes scanline{0%{transform:translateY(-160px)}100%{transform:translateY(110vh)}}
/* 顶栏 */
.sc-header{position:relative;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;
background:linear-gradient(180deg,rgba(56,189,248,.10),transparent);
border-bottom:1px solid var(--line)}
.sc-header::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
width:640px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.sc-title{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-size:26px;font-weight:700;letter-spacing:6px;
background:linear-gradient(100deg,#8FD8FB 0%,#FFFFFF 14%,#7FD4FC 30%,#BDE7FD 50%,#FFFFFF 66%,#7FD4FC 84%,#8FD8FB 100%);
background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 0 24px rgba(56,189,248,.35);white-space:nowrap;
animation:titleShine 3.8s linear infinite;will-change:background-position}
@keyframes titleShine{0%{background-position:125% 0}100%{background-position:-125% 0}}
.sc-sub{position:absolute;left:50%;top:48px;transform:translateX(-50%);font-size:11px;letter-spacing:6px;color:var(--muted);
text-shadow:0 0 10px rgba(56,189,248,.25)}
.sc-clock{font-family:Consolas,monospace;font-size:15px;color:var(--cyan);line-height:1.5;
text-shadow:0 0 6px rgba(56,189,248,.6),0 0 18px rgba(56,189,248,.28)}
.sc-clock small{color:var(--muted);font-size:11px;text-shadow:none}
.sc-net{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--green)}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:breath 2s infinite}
@keyframes breath{50%{opacity:.35}}
/* 六屏导航 */
.sc-nav{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:4px;z-index:50}
.sc-nav a{position:relative;padding:6px 18px;font-size:12px;letter-spacing:2px;color:var(--muted);text-decoration:none;
border:1px solid transparent;transition:.2s}
.sc-nav a:hover{color:var(--cyan)}
.sc-nav a.on{color:var(--cyan);border:1px solid var(--line);background:rgba(56,189,248,.10);
clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%)}
/* 当前页签底部发光条 */
.sc-nav a.on::after{content:"";position:absolute;left:16px;right:16px;bottom:1px;height:2px;
background:linear-gradient(90deg,transparent,var(--cyan),transparent);
box-shadow:0 0 8px rgba(56,189,248,.85),0 0 16px rgba(56,189,248,.4);
transform-origin:center;animation:navGlow 2.4s ease-in-out infinite}
@keyframes navGlow{0%,100%{opacity:.45;transform:scaleX(.72)}50%{opacity:1;transform:scaleX(1)}}
/* 面板：顶部高光线 + 极轻内阴影 */
.panel{position:relative;border:1px solid var(--line);backdrop-filter:blur(2px);
background-color:var(--panel);
background-image:linear-gradient(90deg,transparent,rgba(125,211,252,.55),transparent);
background-size:58% 1px;background-position:top center;background-repeat:no-repeat;
box-shadow:inset 0 1px 0 rgba(125,211,252,.08),inset 0 0 30px rgba(4,12,20,.5)}
/* 四角括号 · 外层（呼吸发光） */
.panel::before{content:"";position:absolute;inset:-2px;pointer-events:none;
background:
linear-gradient(var(--cyan),var(--cyan)) left top/16px 2px,
linear-gradient(var(--cyan),var(--cyan)) left top/2px 16px,
linear-gradient(var(--cyan),var(--cyan)) right top/16px 2px,
linear-gradient(var(--cyan),var(--cyan)) right top/2px 16px,
linear-gradient(var(--cyan),var(--cyan)) left bottom/16px 2px,
linear-gradient(var(--cyan),var(--cyan)) left bottom/2px 16px,
linear-gradient(var(--cyan),var(--cyan)) right bottom/16px 2px,
linear-gradient(var(--cyan),var(--cyan)) right bottom/2px 16px;
background-repeat:no-repeat;
filter:drop-shadow(0 0 4px rgba(56,189,248,.6));
animation:cornerBreath 3.6s ease-in-out infinite;will-change:opacity}
/* 四角括号 · 内层微光 */
.panel::after{content:"";position:absolute;inset:3px;pointer-events:none;
background:
linear-gradient(rgba(125,211,252,.4),rgba(125,211,252,.4)) left top/9px 1px,
linear-gradient(rgba(125,211,252,.4),rgba(125,211,252,.4)) left top/1px 9px,
linear-gradient(rgba(125,211,252,.4),rgba(125,211,252,.4)) right top/9px 1px,
linear-gradient(rgba(125,211,252,.4),rgba(125,211,252,.4)) right top/1px 9px,
linear-gradient(rgba(125,211,252,.4),rgba(125,211,252,.4)) left bottom/9px 1px,
linear-gradient(rgba(125,211,252,.4),rgba(125,211,252,.4)) left bottom/1px 9px,
linear-gradient(rgba(125,211,252,.4),rgba(125,211,252,.4)) right bottom/9px 1px,
linear-gradient(rgba(125,211,252,.4),rgba(125,211,252,.4)) right bottom/1px 9px;
background-repeat:no-repeat;
filter:drop-shadow(0 0 3px rgba(56,189,248,.45))}
@keyframes cornerBreath{0%,100%{opacity:.5}50%{opacity:1}}
.panel-h{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;font-size:14px;font-weight:700;letter-spacing:2px}
.panel-h::before{content:"";width:4px;height:14px;border-radius:1px;
background:linear-gradient(180deg,var(--cyan),rgba(56,189,248,.12));
box-shadow:0 0 8px rgba(56,189,248,.85),0 0 3px rgba(125,211,252,.9)}
.panel-b{padding:6px 14px 12px}
/* 数字（近光 + 远光两层） */
.num{font-family:Consolas,"DIN Alternate",monospace;color:var(--cyan);
text-shadow:0 0 6px rgba(56,189,248,.65),0 0 22px rgba(56,189,248,.3)}
.num.amber{color:var(--amber);text-shadow:0 0 6px rgba(251,191,36,.65),0 0 22px rgba(251,191,36,.3)}
.num.red{color:var(--red);text-shadow:0 0 6px rgba(248,113,113,.65),0 0 22px rgba(248,113,113,.3)}
.num.green{color:var(--green);text-shadow:0 0 6px rgba(52,211,153,.65),0 0 22px rgba(52,211,153,.3)}
/* 滚动列表 */
.scroll-wrap{overflow:hidden;position:relative}
.scroll-inner{animation:scy linear infinite}
@keyframes scy{to{transform:translateY(-50%)}}
/* 告警脉冲点 */
.pulse{position:absolute;width:10px;height:10px;border-radius:50%}
.pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;animation:pl 1.6s infinite}
@keyframes pl{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.4);opacity:0}}