/* =========================================================================
   YMIT · 数据大屏 / 监管视图
   1920×1080 固定画布，等比缩放到视口；深色数据风
   ========================================================================= */

.screen-stage {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(900px 620px at 50% -10%, rgba(22, 160, 160, .16), transparent 62%),
    radial-gradient(700px 500px at 100% 100%, rgba(11, 79, 108, .35), transparent 60%),
    #04121A;
  display: grid; place-items: center;
}
.screen-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(22, 160, 160, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 160, 160, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(1200px 800px at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(1200px 800px at 50% 50%, #000 30%, transparent 90%);
}

#screen-root {
  width: 1920px; height: 1080px; flex: none;
  position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%;
  color: #D8EEF2; font-family: var(--font);
  display: flex; flex-direction: column;
}

/* 顶栏 */
.sc-header {
  height: 92px; flex: none; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px;
  background: linear-gradient(180deg, rgba(10, 44, 58, .92), rgba(4, 18, 26, 0));
}
.sc-header::after {
  content: ''; position: absolute; left: 34px; right: 34px; bottom: 6px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 160, 160, .5), transparent);
}
.sc-brand { display: flex; align-items: center; gap: 14px; }
.sc-brand .mk {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(22, 160, 160, .9), rgba(11, 79, 108, .9));
  color: #EAFBFB; box-shadow: 0 0 24px rgba(22, 160, 160, .35);
}
.sc-brand b { display: block; font-size: 14px; letter-spacing: .18em; color: #9FE0DE; font-weight: 500; }
.sc-brand span { display: block; font-size: 12px; color: #6E93A0; margin-top: 2px; letter-spacing: .1em; }

.sc-title {
  position: absolute; left: 50%; top: 20px; transform: translateX(-50%);
  font-size: 34px; font-weight: 600; letter-spacing: .2em; white-space: nowrap;
  background: linear-gradient(180deg, #F2FFFF 30%, #6FD3D2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px rgba(22, 160, 160, .35);
}
.sc-title-sub {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .26em; color: #5E8794; white-space: nowrap;
}

.sc-right { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; }
.sc-clock { text-align: right; font-family: var(--mono); }
.sc-clock .t { font-size: 30px; font-weight: 600; color: #EAFBFF; letter-spacing: .04em; text-shadow: 0 0 20px rgba(22, 160, 160, .4); }
.sc-clock .d { font-size: 12.5px; color: #6E93A0; letter-spacing: .08em; margin-top: 2px; }
.sc-back {
  font-size: 12px; color: #6E93A0; white-space: nowrap;
  border: 1px solid rgba(127, 209, 207, .2); padding: 3px 10px; border-radius: 99px;
}
.sc-back:hover { color: #9FE0DE; border-color: rgba(127, 209, 207, .5); }

.sc-body { flex: 1; min-height: 0; padding: 8px 26px 24px; display: flex; flex-direction: column; gap: 14px; }

/* KPI 条 */
.sc-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; flex: none; }
.sc-kpi {
  position: relative; padding: 13px 18px 12px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, rgba(15, 56, 72, .82), rgba(6, 26, 36, .82));
  border: 1px solid rgba(22, 160, 160, .18);
  box-shadow: inset 0 1px 0 rgba(127, 209, 207, .12);
}
.sc-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, #16A0A0, transparent);
}
.sc-kpi.gold::before { background: linear-gradient(180deg, #E8B44F, transparent); }
.sc-kpi.red::before { background: linear-gradient(180deg, #D05548, transparent); }
.sc-kpi .k { font-size: 13px; color: #83A9B5; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; }
.sc-kpi .k .ico { color: #4E8B99; }
.sc-kpi .v {
  margin-top: 4px; font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -.01em;
  color: #F0FDFF; text-shadow: 0 0 22px rgba(22, 160, 160, .5);
}
.sc-kpi .v .u { font-family: var(--font); font-size: 12.5px; color: #7FA6B2; margin-left: 3px; text-shadow: none; }
.sc-kpi .d { margin-top: 3px; font-size: 12px; color: #6E93A0; display: flex; align-items: center; gap: 6px; }
.sc-kpi .d .up { color: #5FD9B0; font-family: var(--mono); }
.sc-kpi .d .down { color: #FF9C90; font-family: var(--mono); }

/* 主体三列 */
.sc-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 448px minmax(0, 1fr) 448px; gap: 14px; }
.sc-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.sc-col.center { gap: 14px; }

.panel {
  position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding: 12px 16px 14px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(12, 46, 60, .78), rgba(5, 22, 31, .86));
  border: 1px solid rgba(22, 160, 160, .16);
  box-shadow: inset 0 1px 0 rgba(127, 209, 207, .08);
}
.panel::before, .panel::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: rgba(22, 160, 160, .8); border-style: solid;
}
.panel::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.panel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.panel.grow { flex: 1; min-height: 0; }
.panel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 9px; margin-bottom: 10px; flex: none;
  border-bottom: 1px solid rgba(22, 160, 160, .14);
}
.panel-hd h3 { font-size: 16px; font-weight: 500; letter-spacing: .1em; color: #CFEAEE; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.panel-hd h3 .ico { color: #16A0A0; flex: none; }
.panel-hd .ph-sub { font-size: 12px; color: #5E8794; letter-spacing: .04em; white-space: nowrap; flex: none; }
.panel-bd { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 大数字块 */
.gmv-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 4px 2px 10px; }
.gmv-hero .gh-l .lbl { font-size: 13px; color: #7FA6B2; letter-spacing: .08em; }
.gmv-hero .gh-l .big {
  font-family: var(--mono); font-size: 58px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em;
  color: #F2FFFF; text-shadow: 0 0 36px rgba(22, 160, 160, .55);
}
.gmv-hero .gh-l .big small { font-size: 20px; color: #7FA6B2; margin-right: 4px; }
.gmv-hero .gh-r { text-align: right; }
.gmv-hero .gh-r .row2 { font-size: 12.5px; color: #6E93A0; }
.gmv-hero .gh-r .row2 b { font-family: var(--mono); color: #5FD9B0; font-size: 15px; font-weight: 600; }

/* 图例（深色） */
.sc-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.sc-legend .li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #9BB8C2; }
.sc-legend .li i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.sc-legend .li b { font-family: var(--mono); color: #E6F6F8; font-weight: 500; }

/* 横向占比条 */
.sc-bars { display: flex; flex-direction: column; gap: 11px; }
.sc-bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sc-bar-row .nm { width: 74px; color: #9BB8C2; flex: none; }
.sc-bar-row .tr { flex: 1; height: 8px; border-radius: 99px; background: rgba(127, 209, 207, .1); overflow: hidden; }
.sc-bar-row .tr i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #16A0A0, #7FD1CF); }
.sc-bar-row .vl { width: 46px; text-align: right; font-family: var(--mono); font-size: 13px; color: #E6F6F8; }

/* 环形图 + 图例 */
.donut-wrap { display: flex; align-items: center; gap: 16px; min-height: 0; }
.donut-wrap .dw-ring { flex: none; }
.donut-wrap .dw-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.dw-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9BB8C2; }
.dw-item i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dw-item .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-item b { font-family: var(--mono); color: #EAFBFF; font-weight: 500; }

/* 滚动流水 */
.feed { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.feed-in { display: flex; flex-direction: column; }
.feed-row {
  display: grid; grid-template-columns: 64px 1fr 72px 78px; gap: 8px; align-items: center;
  padding: 8px 6px; border-bottom: 1px solid rgba(127, 209, 207, .08); font-size: 13px;
  animation: feedIn .5s ease;
}
@keyframes feedIn { from { opacity: 0; transform: translateY(-10px); background: rgba(22, 160, 160, .16); } to { opacity: 1; transform: none; } }
.feed-row .t { font-family: var(--mono); font-size: 12px; color: #5E8794; }
.feed-row .m { color: #CFEAEE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .m small { color: #5E8794; font-size: 12px; margin-left: 5px; }
.feed-row .a { font-family: var(--mono); text-align: right; color: #7FD1CF; font-size: 13.5px; }
.feed-row .s { font-size: 12px; color: #5FD9B0; text-align: right; }

/* 热力 */
.heat-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.heat-grid i { aspect-ratio: 1.35; border-radius: 2px; display: block; }
.heat-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5E8794; margin-top: 8px; }
.heat-legend .sw { display: flex; gap: 2px; }
.heat-legend .sw i { width: 12px; height: 8px; border-radius: 2px; display: block; }

/* 预警灯 */
.alert-levels { display: flex; flex-direction: column; gap: 7px; }
.al-row {
  display: grid; grid-template-columns: 52px 1fr 92px; gap: 10px; align-items: center;
  padding: 5px 10px; border-radius: 4px; border: 1px solid rgba(127, 209, 207, .1);
  background: rgba(9, 38, 50, .5); font-size: 13px; color: #9BB8C2;
}
.al-row .lvl {
  width: 30px; height: 24px; border-radius: 4px; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: #fff;
}
.al-row .lvl.blue { background: rgba(62, 143, 176, .85); }
.al-row .lvl.amber { background: rgba(232, 180, 79, .92); color: #3B2A05; }
.al-row .lvl.orange { background: rgba(214, 118, 46, .9); }
.al-row .lvl.red { background: rgba(192, 57, 43, .92); }
.al-row .nm { min-width: 0; }
.al-row .nm b { display: block; color: #DDF3F6; font-weight: 500; font-size: 13px; line-height: 1.45; }
.al-row .nm span { display: block; color: #5E8794; font-size: 12px; line-height: 1.45; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-row .cnt { text-align: right; font-family: var(--mono); font-size: 12px; color: #6E93A0; }
.al-row.current { border-color: rgba(232, 180, 79, .55); background: rgba(74, 58, 18, .35); box-shadow: 0 0 0 1px rgba(232, 180, 79, .12) inset; }
.al-row.current .cnt { color: #F3C877; }

/* 工单列表 */
.wo-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid rgba(127, 209, 207, .08); font-size: 13px; }
.wo-row:last-child { border-bottom: 0; }
.wo-row .wo-flag { width: 4px; align-self: stretch; border-radius: 2px; background: #16A0A0; flex: none; }
.wo-row .wo-flag.red { background: #D05548; }
.wo-row .wo-main { flex: 1; min-width: 0; }
.wo-row .wo-main b { font-weight: 500; color: #DDF3F6; font-size: 13.5px; }
.wo-row .wo-main span { display: block; font-size: 12px; color: #5E8794; margin-top: 2px; }
.wo-row .wo-time { font-family: var(--mono); font-size: 12px; color: #5E8794; }

/* 业态面板底部补充指标 */
.sc-minis { display: flex; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(22, 160, 160, .12); }
.sc-minis .mi { flex: 1; min-width: 0; }
.sc-minis .mi span { display: block; font-size: 12px; color: #5E8794; white-space: nowrap; }
.sc-minis .mi b { display: block; margin-top: 2px; font-family: var(--mono); font-size: 16px; font-weight: 600; color: #9FE0DE; }

/* TOP 商家 */
.top-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(127, 209, 207, .07); }
.top-row:last-child { border-bottom: 0; }
.top-row .no { width: 20px; font-family: var(--mono); font-size: 12px; color: #5E8794; }
.top-row .no.top3 { color: #E8B44F; }
.top-row .tn { flex: 1; min-width: 0; font-size: 13px; color: #CFEAEE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-row .tn small { font-size: 12px; color: #5E8794; margin-left: 6px; }
.top-row .tv { font-family: var(--mono); font-size: 13.5px; color: #7FD1CF; }

/* 值班点 */
.duty-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(127, 209, 207, .07); font-size: 13px; }
.duty-row:last-child { border-bottom: 0; }
.duty-row .dn { flex: 1; color: #DDF3F6; }
.duty-row .dn small { display: block; color: #5E8794; font-size: 12px; }
.duty-row .ds { font-family: var(--mono); color: #5FD9B0; font-size: 13px; }
.duty-row .ds.warn { color: #F3C877; }

/* 联系人 */
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(127, 209, 207, .07); font-size: 13px; }
.contact-row:last-child { border-bottom: 0; }
.contact-row .cn { color: #9BB8C2; }
.contact-row .cv { font-family: var(--mono); color: #E6F6F8; }

/* 大屏底部提示 */
.sc-foot {
  flex: none; height: 26px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px; font-size: 12px; color: #476E7C; letter-spacing: .05em;
}

@keyframes flashNum { 0% { color: #7FFFE0; text-shadow: 0 0 30px rgba(127, 255, 224, .8); } 100% { color: #F0FDFF; } }
.flash { animation: flashNum .9s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}