/* ==========================================================================
   智慧融媒体管理平台 SAAS 系统 · 可视化大屏样式表（深色科技蓝）
   本文件在本批仅提供令牌与框架样式，双大屏模块由后续批次实现。
   结构：① 令牌 ② 背景与光效 ③ 缩放容器 ④ 面板与角标 ⑤ KPI 带
        ⑥ 榜单/滚动 ⑦ 预警呼吸 ⑧ 图例与坐标 ⑨ 适配提示
   ========================================================================== */

/* ---------- ① 大屏令牌 ---------- */
:root {
  --scr-bg: #0A1A3C;
  --scr-bg-2: #0E2350;
  --scr-bg-3: #071431;
  --scr-panel: rgba(13, 42, 92, .55);
  --scr-panel-2: rgba(9, 30, 70, .78);
  --scr-line: #1B3E7A;
  --scr-line-lit: rgba(0, 229, 255, .45);
  --scr-cyan: #00E5FF;
  --scr-blue: #3D7EFF;
  --scr-text: #E6F2FF;
  --scr-text-dim: #7FA6D9;
  --scr-text-mute: #4C6E9E;
  --scr-ok: #22D3A6;
  --scr-warn: #FFB020;
  --scr-danger: #FF4D4F;
  --scr-purple: #A855F7;
  --scr-glow: 0 0 12px rgba(0, 229, 255, .45);
  --scr-glow-strong: 0 0 22px rgba(0, 229, 255, .75);
  --scr-font: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --scr-num: "Bahnschrift", "DIN Alternate", "Roboto Mono", "SF Mono", Menlo, monospace;
}

/* ---------- ② 背景与光效 ---------- */
.screen {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #12305F 0%, #0A1A3C 55%, #061026 100%);
  color: var(--scr-text);
  font-family: var(--scr-font);
  -webkit-font-smoothing: antialiased;
}
.screen__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 229, 255, .05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0, 229, 255, .05) 0 1px, transparent 1px 24px);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 92%);
}
.screen__scan {
  position: absolute; left: 0; right: 0; height: 2px; top: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .28), transparent);
  animation: scrScan 8s linear infinite;
  z-index: 3;
}
@keyframes scrScan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .9; }
  100% { transform: translateY(100vh); opacity: 0; }
}
.screen__halo {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px);
  opacity: .5; z-index: 0;
}
.screen__halo--a {
  width: 560px; height: 560px; left: -180px; top: -160px;
  background: radial-gradient(circle, rgba(61, 126, 255, .5), transparent 68%);
  animation: scrHalo 14s ease-in-out infinite alternate;
}
.screen__halo--b {
  width: 620px; height: 620px; right: -200px; bottom: -220px;
  background: radial-gradient(circle, rgba(0, 229, 255, .34), transparent 68%);
  animation: scrHalo 18s ease-in-out infinite alternate-reverse;
}
@keyframes scrHalo {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .35; }
  to { transform: translate3d(40px, 26px, 0) scale(1.12); opacity: .6; }
}

/* ---------- ③ 缩放容器 ---------- */
.screen__stage {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px;
  transform-origin: top left;
  transform: scale(var(--s, 1));
  display: flex; flex-direction: column;
  padding: 18px 24px 20px;
  z-index: 2;
}
.screen__head {
  flex: 0 0 74px; display: flex; align-items: center; gap: 20px;
  position: relative; z-index: 4;
}
.screen__head-title {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 60px;
}
.screen__head-title h1 {
  font-size: 30px; font-weight: 600; letter-spacing: 6px;
  color: #EAF6FF; text-shadow: 0 0 22px rgba(0, 229, 255, .6);
  white-space: nowrap;
}
.screen__head-title::before,
.screen__head-title::after {
  content: ""; position: absolute; top: 18px; width: 90px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--scr-cyan), transparent);
}
.screen__head-title::before { left: -30px; }
.screen__head-title::after { right: -30px; }
.screen__head-sub {
  font-size: 11px; letter-spacing: 3px; color: var(--scr-text-mute);
  text-transform: uppercase;
}
.screen__head-left, .screen__head-right {
  display: flex; align-items: center; gap: 14px; font-size: 13px;
  color: var(--scr-text-dim); z-index: 5;
}
.screen__head-right { margin-left: auto; }
.screen__clock {
  font-family: var(--scr-num); font-size: 15px; color: var(--scr-text);
  letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.screen__tabs { display: flex; gap: 6px; }
.screen__tab {
  height: 28px; padding: 0 14px; border-radius: 6px; font-size: 12.5px;
  color: var(--scr-text-dim); border: 1px solid rgba(0, 229, 255, .22);
  background: rgba(13, 42, 92, .5); transition: all .16s;
}
.screen__tab:hover { color: var(--scr-text); border-color: rgba(0, 229, 255, .5); }
.screen__tab.is-active {
  color: #04121F; background: linear-gradient(135deg, var(--scr-cyan), var(--scr-blue));
  border-color: transparent; font-weight: 600; box-shadow: var(--scr-glow);
}

/* ---------- ④ 面板与角标 ---------- */
.screen__kpi-band {
  flex: 0 0 96px; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 15px; margin-bottom: 15px;
}
.screen__body {
  flex: 1; display: grid; gap: 15px; min-height: 0;
}
.screen__body--3col { grid-template-columns: 420px minmax(0, 1fr) 560px; }
.screen__col { display: flex; flex-direction: column; gap: 15px; min-height: 0; }

.s-panel {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, rgba(13, 42, 92, .72), rgba(7, 20, 49, .86));
  border: 1px solid rgba(0, 229, 255, .18);
  border-radius: 2px; padding: 12px 14px 10px;
  opacity: 0; animation: scrFadeUp .6s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes scrFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.s-panel::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 12px; height: 12px;
  border-left: 2px solid var(--scr-cyan); border-top: 2px solid var(--scr-cyan);
}
.s-panel::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-right: 2px solid var(--scr-cyan); border-bottom: 2px solid var(--scr-cyan);
}
.s-panel__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding-bottom: 9px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 229, 255, .12);
  position: relative;
}
.s-panel__head::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 52px; height: 2px;
  background: linear-gradient(90deg, var(--scr-cyan), transparent);
}
.s-panel__title {
  font-size: 15px; font-weight: 600; letter-spacing: 1px; color: #DCF1FF;
  display: flex; align-items: center; gap: 7px;
}
.s-panel__title::before {
  content: ""; width: 3px; height: 13px; border-radius: 1px;
  background: linear-gradient(180deg, var(--scr-cyan), var(--scr-blue));
  box-shadow: 0 0 8px rgba(0, 229, 255, .8);
}
.s-panel__sub { font-size: 11px; color: var(--scr-text-mute); letter-spacing: .6px; }
.s-panel__extra { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--scr-text-dim); }
.s-panel__body { flex: 1; min-height: 0; position: relative; }
.s-panel__body--pad { padding: 2px 0; }

/* ---------- ⑤ KPI 带 ---------- */
.s-kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(16, 48, 104, .7), rgba(8, 24, 56, .88));
  border: 1px solid rgba(0, 229, 255, .2);
  display: flex; flex-direction: column; justify-content: center;
  padding: 10px 16px; opacity: 0; animation: scrFadeUp .6s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.s-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--scr-cyan), transparent);
  box-shadow: var(--scr-glow);
}
.s-kpi__label {
  font-size: 12.5px; color: var(--scr-text-dim); letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px;
}
.s-kpi__row { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.s-kpi__value {
  font-family: var(--scr-num); font-size: 34px; font-weight: 600; line-height: 1;
  color: #EAF7FF; letter-spacing: -1px;
  text-shadow: 0 0 14px rgba(0, 229, 255, .55);
  font-variant-numeric: tabular-nums;
}
.s-kpi__unit { font-size: 12px; color: var(--scr-text-mute); }
.s-kpi__trend {
  margin-left: auto; font-size: 11.5px; font-family: var(--scr-num);
  padding: 1px 6px; border-radius: 3px; letter-spacing: .3px;
}
.s-kpi__trend--up { color: var(--scr-ok); background: rgba(34, 211, 166, .12); }
.s-kpi__trend--down { color: var(--scr-danger); background: rgba(255, 77, 79, .12); }
.s-kpi--warn::before { background: linear-gradient(180deg, var(--scr-warn), transparent); }
.s-kpi--danger::before { background: linear-gradient(180deg, var(--scr-danger), transparent); }

/* 数字字体统一 */
.screen [data-num], .s-flip, .s-panel .num {
  font-family: var(--scr-num); font-variant-numeric: tabular-nums;
}

/* ---------- ⑥ 榜单与滚动 ---------- */
.s-scroll { position: relative; height: 100%; overflow: hidden; }
.s-scroll__inner { will-change: transform; }
.s-scroll__row {
  display: flex; align-items: center; gap: 10px; height: 36px;
  padding: 0 6px; font-size: 13px; color: var(--scr-text-dim);
  border-bottom: 1px dashed rgba(0, 229, 255, .1);
}
.s-scroll__row:hover { background: rgba(0, 229, 255, .06); color: var(--scr-text); }
.s-rank-badge {
  width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center;
  font-family: var(--scr-num); font-size: 11px; font-weight: 600;
  border-radius: 3px; background: rgba(0, 229, 255, .14); color: var(--scr-cyan);
}
.s-rank-badge--1 { background: linear-gradient(135deg, #FF4D4F, #FFB020); color: #1A0B0B; }
.s-rank-badge--2 { background: linear-gradient(135deg, #FFB020, #FDE68A); color: #1A1206; }
.s-rank-badge--3 { background: linear-gradient(135deg, #FDE68A, #A3E635); color: #12190A; }
.s-bar-line {
  flex: 1; height: 6px; border-radius: 3px; background: rgba(0, 229, 255, .1);
  overflow: hidden; position: relative;
}
.s-bar-line__fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--scr-blue), var(--scr-cyan));
  box-shadow: 0 0 10px rgba(0, 229, 255, .55);
  transition: width 1s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- ⑦ 预警呼吸 ---------- */
.s-alert-card {
  position: relative; overflow: hidden; border-radius: 2px;
  border: 1px solid rgba(255, 77, 79, .3);
  background: linear-gradient(180deg, rgba(80, 16, 22, .5), rgba(30, 8, 12, .72));
  padding: 10px 12px;
}
.s-alert-card--red { animation: scrPulseRed 2s ease-in-out infinite; }
@keyframes scrPulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, .5); }
  50% { box-shadow: 0 0 0 12px rgba(255, 77, 79, 0); }
}
.s-alert-card--orange { border-color: rgba(255, 176, 32, .32); background: linear-gradient(180deg, rgba(78, 46, 8, .5), rgba(30, 18, 4, .72)); }
.s-alert-card--yellow { border-color: rgba(234, 179, 8, .32); background: linear-gradient(180deg, rgba(70, 58, 6, .5), rgba(26, 22, 4, .72)); }
.s-alert-card--blue { border-color: rgba(61, 126, 255, .34); background: linear-gradient(180deg, rgba(12, 42, 96, .55), rgba(6, 18, 44, .75)); }
.s-alert-card__level { font-size: 12px; letter-spacing: 1px; color: var(--scr-text-dim); }
.s-alert-card__value {
  font-family: var(--scr-num); font-size: 30px; font-weight: 600; line-height: 1.1;
  color: #FFF; text-shadow: 0 0 14px rgba(255, 77, 79, .55);
}

/* ---------- ⑧ 图例与坐标 ---------- */
.s-legend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--scr-text-dim);
}
.s-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.s-legend__dot { width: 8px; height: 8px; border-radius: 2px; }
.s-axis-label { fill: var(--scr-text-mute); font-size: 11px; font-family: var(--scr-num); }
.s-grid-line { stroke: rgba(0, 229, 255, .1); stroke-width: 1; }
.s-chart-glow { filter: drop-shadow(0 0 6px rgba(0, 229, 255, .55)); }

/* 大屏内 SVG 自适应 */
.screen svg { display: block; max-width: 100%; }
.screen .chart-box svg { width: 100%; height: auto; }

/* ---------- ⑨ 适配提示与错误态 ---------- */
.screen__tip {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: none; align-items: center; gap: 8px; z-index: 40;
  padding: 7px 16px; border-radius: 10px; font-size: 12.5px;
  color: var(--scr-warn); background: rgba(30, 20, 4, .86);
  border: 1px solid rgba(255, 176, 32, .34); box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
@media (max-width: 1279px), (max-height: 719px) {
  .screen__tip { display: flex; }
}
.screen__error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; height: 100vh; text-align: center; color: var(--scr-text-dim);
  background: radial-gradient(ellipse at 50% 0%, #12305F, #061026);
}
.screen__error-box {
  padding: 30px 40px; border: 1px solid rgba(255, 77, 79, .3);
  border-radius: 3px; background: rgba(30, 8, 12, .6);
  box-shadow: 0 0 30px rgba(255, 77, 79, .18);
}
.screen__error-title {
  font-size: 19px; font-weight: 600; color: #FFD9DA; letter-spacing: 1px;
}
.screen__error-desc { font-size: 13px; margin-top: 8px; color: var(--scr-text-mute); }

/* 减少动效 */
@media (prefers-reduced-motion: reduce) {
  .screen__scan, .screen__halo--a, .screen__halo--b,
  .s-alert-card--red { animation: none !important; }
  .s-panel, .s-kpi { opacity: 1; animation: none !important; }
}