/* 来客聊 LikeTalk · 运营监控大屏（暗色驾驶舱，v1.0 MVP）
   设计基准 1920×1080，transform scale 自适应（保持 16:9） */
#screenWrap{position:fixed;inset:0;background:#0B1020;z-index:50;display:none}
#screenStage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;background:
  radial-gradient(1200px 500px at 50% -10%, rgba(34,211,238,.08), transparent 60%),
  repeating-linear-gradient(0deg, rgba(34,211,238,.04) 0 1px, transparent 1px 40px),
  repeating-linear-gradient(90deg, rgba(34,211,238,.04) 0 1px, transparent 1px 40px),
  #0B1020;color:#E5E7EB;font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
#screenWrap .esc{position:absolute;top:14px;right:18px;z-index:2;background:#111A2E;border:1px solid #1E2A44;color:#8B95AD;border-radius:8px;padding:6px 14px;font-size:13px;cursor:pointer}

.sc-top{height:72px;display:flex;align-items:center;padding:0 32px;border-bottom:1px solid #1E2A44}
.sc-top .ttl{font-size:26px;font-weight:700;color:#E5E7EB;letter-spacing:2px}
.sc-top .ttl .en{font-size:13px;color:#22D3EE;margin-left:12px;letter-spacing:3px}
.sc-top .clock{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.sc-top .clock .t{font-size:24px;color:#22D3EE;text-shadow:0 0 12px rgba(34,211,238,.35)}
.sc-top .clock .d{font-size:12px;color:#8B95AD}

.sc-grid{display:grid;grid-template-columns:3fr 6fr 3fr;gap:18px;padding:18px 32px;height:calc(1080px - 72px - 44px)}
.sc-col{display:flex;flex-direction:column;gap:18px;min-height:0}
.sc-card{background:rgba(17,26,46,.85);border:1px solid #1E2A44;border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.sc-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:2px;background:#22D3EE}
.sc-card h4{margin:0 0 12px 10px;font-size:15px;color:#8B95AD;font-weight:600;letter-spacing:2px}

.sc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sc-kpi{background:rgba(17,26,46,.85);border:1px solid #1E2A44;border-radius:14px;padding:18px;text-align:center}
.sc-kpi .n{font-size:40px;font-weight:800;color:#22D3EE;text-shadow:0 0 12px rgba(34,211,238,.35);font-variant-numeric:tabular-nums}
.sc-kpi .n.dim{color:#4B5A75;text-shadow:none;font-size:30px}
.sc-kpi .l{font-size:13px;color:#8B95AD;margin-top:6px}
.sc-kpi .p2{font-size:10px;color:#4B5A75;border:1px solid #1E2A44;border-radius:4px;padding:1px 5px;margin-left:4px}

.sc-chart{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
.sc-bar{display:flex;align-items:center;gap:10px;margin:9px 0}
.sc-bar .k{width:110px;font-size:13px;color:#8B95AD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-bar .track{flex:1;height:14px;background:#0F1730;border-radius:7px;overflow:hidden}
.sc-bar .fill{height:100%;border-radius:7px;background:linear-gradient(90deg,rgba(34,211,238,.5),#22D3EE);transition:width .6s}
.sc-bar .v{width:56px;text-align:right;font-size:13px;color:#E5E7EB;font-variant-numeric:tabular-nums}

.sc-list{flex:1;overflow:hidden;font-size:13px}
.sc-list .it{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed #1E2A44;color:#B7C0D4}
.sc-list .it .tm{color:#4B5A75;font-variant-numeric:tabular-nums;flex:none}
.sc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.sc-dot.on{background:#34D399;box-shadow:0 0 8px rgba(52,211,153,.6)}
.sc-dot.off{background:#4B5A75}

.sc-bottom{height:44px;border-top:1px solid #1E2A44;display:flex;align-items:center;padding:0 32px;font-size:13px;color:#8B95AD;gap:24px}
.sc-bottom .ok{color:#34D399}
.sc-bottom b{color:#E5E7EB;font-variant-numeric:tabular-nums}

#screenGate{position:fixed;inset:0;background:#0B1020;z-index:60;display:none;align-items:center;justify-content:center;color:#E5E7EB}
#screenGate .box{background:#111A2E;border:1px solid #1E2A44;border-radius:14px;padding:28px;width:400px}
#screenGate input{width:100%;background:#0F1730;border:1px solid #1E2A44;border-radius:9px;color:#E5E7EB;padding:11px 12px;font-size:14px;font-family:monospace}
#screenGate button{width:100%;margin-top:12px;background:#22D3EE;color:#0B1020;border:none;border-radius:9px;padding:11px;font-weight:700;cursor:pointer}
#screenGate .err{color:#F87171;font-size:12px;margin-top:8px;min-height:16px}