/* ============================================================
   画像数据大屏（深色科技风）
   ============================================================ */
.screen-page {
  position: fixed; inset: 0; background: #061226; overflow: hidden; color: #d8e7ff;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.screen-scale {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform-origin: center center; background:
    radial-gradient(ellipse 1100px 600px at 50% -10%, rgba(0, 116, 217, .16), transparent),
    radial-gradient(ellipse 700px 420px at 8% 110%, rgba(0, 212, 255, .07), transparent),
    radial-gradient(ellipse 700px 420px at 92% 100%, rgba(63, 108, 255, .08), transparent),
    #061226;
}
/* 网格底纹 */
.screen-scale::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(70, 130, 220, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 130, 220, .045) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* 顶部标题栏 */
.sc-header {
  position: relative; height: 92px; display: flex; align-items: center; padding: 0 30px; z-index: 5;
}
.sc-title {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); text-align: center; width: 420px; pointer-events: none; z-index: 1; transition: opacity .3s;
}
.sc-title.hidden { display: none; }
.sc-title h1 {
  font-size: 34px; font-weight: 800; letter-spacing: 5px; color: #eaf4ff;
  background: linear-gradient(180deg, #ffffff 20%, #6fb9ff 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 16px rgba(0, 150, 255, .35));
}
.sc-title .st-sub { margin-top: 5px; font-size: 13px; letter-spacing: 7px; color: #5b8fc9; }
.sc-title::before, .sc-title::after {
  content: ""; position: absolute; top: 34px; width: 100px; height: 12px;
  background: linear-gradient(90deg, transparent, rgba(0, 180, 255, .5));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.sc-title::before { left: -60px; transform: rotate(180deg); }
.sc-title::after { right: -60px; }
.sc-header-left { display: flex; gap: 10px; align-items: center; position: relative; z-index: 6; }
.sc-header-right { margin-left: auto; display: flex; gap: 10px; align-items: center; position: relative; z-index: 6; }
.sc-select {
  background: rgba(12, 40, 78, .75); border: 1px solid rgba(64, 140, 235, .45); color: #bcd8ff;
  border-radius: 7px; padding: 7px 12px; font-size: 13px; min-width: 260px; max-width: 400px;
  box-shadow: inset 0 0 12px rgba(0, 120, 255, .12); position: relative; z-index: 7; cursor: pointer;
}
.sc-select option { color: #d8e7ff; background: #0c284e; }
.sc-clock { font-size: 14px; color: #7fd4ff; letter-spacing: 1px; }
.sc-online { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #9fe8c8; }
.sc-online .ol-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ee6a8; box-shadow: 0 0 10px #2ee6a8; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.sc-view-tabs { display: flex; gap: 8px; }
.sc-vtab {
  padding: 7px 18px; font-size: 13.5px; color: #8fb4e6; border: 1px solid rgba(64, 140, 235, .4);
  border-radius: 8px; background: rgba(12, 40, 78, .6); cursor: pointer; transition: all .2s; letter-spacing: 2px;
}
.sc-vtab:hover { color: #fff; border-color: rgba(0, 180, 255, .8); }
.sc-vtab.on {
  color: #061226; font-weight: 700; background: linear-gradient(120deg, #29c3ff, #16a4ff);
  border-color: transparent; box-shadow: 0 0 20px rgba(0, 170, 255, .5);
}
.sc-btn-full {
  padding: 7px 14px; font-size: 13px; color: #9fd0ff; border: 1px solid rgba(64, 140, 235, .4);
  border-radius: 8px; background: rgba(12, 40, 78, .6); cursor: pointer;
}
.sc-btn-full:hover { color: #fff; }

/* 主体三栏 */
.sc-body {
  position: relative; height: 868px; display: flex; flex-direction: column; padding: 6px 22px 0; z-index: 4;
}
.sc-cols { flex: 1; display: flex; gap: 18px; min-height: 0; }
.sc-col { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sc-col.mid { flex: 1.35; }

/* 面板 */
.sc-panel {
  position: relative; border-radius: 12px; padding: 14px 16px 12px;
  background: linear-gradient(160deg, rgba(14, 42, 84, .72), rgba(8, 24, 52, .86));
  border: 1px solid rgba(58, 124, 220, .32);
  box-shadow: inset 0 0 26px rgba(8, 60, 140, .22), 0 4px 18px rgba(2, 10, 30, .5);
  display: flex; flex-direction: column; overflow: hidden;
}
.sc-panel::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(0, 190, 255, .75), transparent 96%);
}
.sc-panel .scp-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.scp-corner.c1 { left: 4px; top: 4px; border-left: 2px solid #37c6ff; border-top: 2px solid #37c6ff; }
.scp-corner.c2 { right: 4px; top: 4px; border-right: 2px solid #37c6ff; border-top: 2px solid #37c6ff; }
.scp-corner.c3 { left: 4px; bottom: 4px; border-left: 2px solid #37c6ff; border-bottom: 2px solid #37c6ff; }
.scp-corner.c4 { right: 4px; bottom: 4px; border-right: 2px solid #37c6ff; border-bottom: 2px solid #37c6ff; }
.sc-panel-title {
  display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 700; color: #d9edff;
  letter-spacing: 2px; margin-bottom: 10px; flex-shrink: 0;
}
.sc-panel-title::before {
  content: ""; width: 8px; height: 17px; background: linear-gradient(180deg, #29c3ff, #1070ff);
  border-radius: 2px; box-shadow: 0 0 12px rgba(0, 180, 255, .8);
}
.sc-panel-title .scp-tag { margin-left: auto; font-size: 11px; color: #5f8fc4; letter-spacing: 1px; font-weight: 400; }
.sc-chart { flex: 1; min-height: 0; position: relative; }

/* 数字指标 */
.kpi-strip { display: flex; gap: 12px; margin-bottom: 14px; flex-shrink: 0; }
.kpi-box {
  flex: 1; position: relative; border-radius: 10px; padding: 12px 8px 10px; text-align: center;
  background: linear-gradient(180deg, rgba(0, 100, 210, .16), rgba(0, 60, 140, .07));
  border: 1px solid rgba(60, 130, 230, .3); overflow: hidden;
}
.kpi-box::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #29c3ff, transparent); }
.kpi-box .kv { font-size: 30px; font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums; line-height: 1.15; text-shadow: 0 0 18px rgba(0, 180, 255, .45); }
.kpi-box .kv em { font-style: normal; font-size: 13px; color: #7fbaf0; margin-left: 3px; font-weight: 400; }
.kpi-box .kl { margin-top: 5px; font-size: 12.5px; color: #8fb4e6; letter-spacing: 2px; }
.kpi-box.hl .kv { color: #3cf0c4; text-shadow: 0 0 18px rgba(46, 230, 168, .5); }
.kpi-box.wn .kv { color: #ffb949; text-shadow: 0 0 18px rgba(255, 185, 73, .5); }

/* 底部预警滚动 */
.sc-footer {
  height: 78px; margin: 14px 22px 14px; flex-shrink: 0; display: flex; align-items: stretch; gap: 14px; z-index: 5;
}
.warn-board {
  flex: 1; position: relative; overflow: hidden; border-radius: 11px;
  background: linear-gradient(160deg, rgba(58, 24, 60, .55), rgba(20, 14, 46, .8));
  border: 1px solid rgba(255, 120, 90, .35); display: flex; align-items: center;
}
.warn-board::before {
  content: "预警中心"; position: absolute; left: 0; top: 0; bottom: 0; width: 108px;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  background: linear-gradient(90deg, rgba(255, 80, 60, .3), transparent); font-size: 15px; font-weight: 700;
  color: #ff9d7e; letter-spacing: 3px; border-right: 1px solid rgba(255, 120, 90, .25);
}
.warn-board .wb-ic { font-size: 20px; animation: blink 1.2s infinite; }
.warn-scroll { flex: 1; height: 100%; margin-left: 122px; overflow: hidden; position: relative; }
.warn-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: 0; white-space: nowrap; animation: marquee 26s linear infinite; }
.warn-scroll:hover .warn-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.warn-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 22px; font-size: 14px; color: #ffd3c2;
  white-space: nowrap;
}
.warn-chip .wc-lv { padding: 2px 10px; border-radius: 5px; font-size: 12px; font-weight: 700; }
.wc-lv.high { background: rgba(245, 72, 61, .32); color: #ff8f80; border: 1px solid rgba(245, 72, 61, .55); }
.wc-lv.mid { background: rgba(255, 159, 28, .25); color: #ffc26b; border: 1px solid rgba(255, 159, 28, .5); }
.wc-lv.low { background: rgba(0, 180, 255, .2); color: #7fd4ff; border: 1px solid rgba(0, 180, 255, .45); }

/* 标签云 */
.wc-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 10px; height: 100%; padding: 4px 6px; }
.wc-word { font-weight: 700; letter-spacing: 1px; text-shadow: 0 0 12px currentColor; opacity: .92; }

/* 图例 */
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: #8fb4e6; margin-top: 6px; }
.chart-legend .lg-item { display: flex; align-items: center; gap: 6px; }
.chart-legend .lg-dot { width: 9px; height: 9px; border-radius: 3px; }

/* 学校/企业驾驶舱 */
.driver-sub { font-size: 12px; color: #7fa8d8; margin-top: 2px; letter-spacing: 1px; }
.rank-list { display: flex; flex-direction: column; gap: 8px; height: 100%; overflow: hidden; }
.rank-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rank-no { width: 20px; height: 20px; border-radius: 5px; background: rgba(0, 140, 255, .18); color: #6fc7ff; font-size: 11.5px; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.rank-no.top1 { background: linear-gradient(135deg, #ff9d3c, #ff6b3c); color: #fff; }
.rank-no.top2 { background: linear-gradient(135deg, #ffd86b, #ffb03a); color: #7a4a00; }
.rank-no.top3 { background: linear-gradient(135deg, #c9d6ff, #9fb4e6); color: #33456e; }
.rank-name { flex: 1; color: #c3dcff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar { flex: 1.15; height: 8px; background: rgba(20, 60, 120, .5); border-radius: 4px; overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #1070ff, #29c3ff); box-shadow: 0 0 8px rgba(0, 180, 255, .55); }
.rank-val { width: 52px; text-align: right; color: #e8f4ff; font-weight: 700; font-variant-numeric: tabular-nums; }