/* 矿端本地资源；业务状态来自接口，播放状态来自当前浏览器。 */
:root { --accent:#3ecdf8; --blue:#2988ff; }
body { background:radial-gradient(ellipse at 60% 0%,#102d4c 0,transparent 65%),#070f1d; }
.sidebar { background:#081322; }
.nav button { padding:11px 12px; }
.nav button.active { background:linear-gradient(90deg,#12446a,#102238); box-shadow:inset 3px 0 var(--accent); }
.topbar { background:linear-gradient(90deg,#0c2037,#0a1526); }
.platform-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.platform-header h3 { margin:0; font-size:20px; letter-spacing:2px; }
.platform-header .eyebrow { color:var(--accent); font-size:10px; letter-spacing:3px; margin-bottom:6px; }
.platform-actions { display:flex;gap:8px;flex-wrap:wrap; }
.metric-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px; }
.metric { border:1px solid #234563;background:linear-gradient(120deg,#102d49,#0b1a2c);padding:16px 18px;position:relative;overflow:hidden;border-radius:6px; }
.metric:after { content:'';position:absolute;bottom:0;left:18px;width:40px;height:2px;background:var(--accent); }
.metric .metric-label { color:#91abc2;font-size:12px; }
.metric .metric-value { font-size:30px;line-height:1.5;font-family:Consolas,monospace;font-weight:600; }
.metric .metric-note { color:#6d91ae;font-size:10px; }
.metric.warn .metric-value { color:#ffba65; }
.monitor-layout { display:grid;grid-template-columns:minmax(190px,.85fr) minmax(380px,2.5fr) minmax(210px,1fr);gap:14px;align-items:start; }
.panel { border:1px solid #203e5a;background:rgba(10,25,43,.94);border-radius:5px;min-width:0;overflow:hidden; }
.panel-title { padding:12px 14px;border-bottom:1px solid #203e5a;display:flex;align-items:center;gap:8px;font-size:12px;color:#bcdff5;letter-spacing:1px; }
.panel-title:before { content:'';height:12px;width:3px;background:var(--accent); }
.panel-content { padding:12px 14px; }
.stack { display:flex;flex-direction:column;gap:14px;min-width:0; }
.video-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.video-tile { border:1px solid #28587c;border-radius:4px;background:#030a13;position:relative;overflow:hidden;min-width:0; }
.video-head { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;background:#0d233b;font-size:11px;min-height:34px; }
.video-head span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.video-status { color:#7ea7c6;font-size:10px; }
.video-tile video { width:100%;height:100%;object-fit:contain;display:block; }
.video-surface { aspect-ratio:16/10;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0b2136,#030a13); }
.video-placeholder { text-align:center;color:#6285a3;font-size:11px;padding:16px;line-height:1.9; }
.video-placeholder .camera-symbol { font-size:30px;color:#295477;display:block;margin-bottom:8px; }
.video-message { position:absolute;bottom:5px;left:5px;right:5px;padding:5px 8px;background:#061323db;color:#ffcb84;font-size:10px;pointer-events:none; }
.camera-list { display:flex;flex-direction:column;gap:6px;max-height:410px;overflow:auto; }
.camera-item { display:flex;justify-content:space-between;align-items:center;gap:6px;padding:10px;border:1px solid #1b3b55;background:#0b1e32;border-radius:3px;text-align:left;color:var(--text);cursor:pointer;width:100%; }
.camera-item small { display:block;color:#6586a2;margin-top:3px; }
.camera-item:hover { border-color:#4cc6ed; }
.tiny-table { width:100%;font-size:10px; }
.tiny-table td,.tiny-table th { padding:9px 7px;white-space:normal; }
.tiny-table tbody tr { cursor:pointer; }
.tiny-table .muted { font-size:10px; }
.trend { height:110px;display:flex;gap:8px;align-items:flex-end;padding:10px 0 18px; }
.trend-column { flex:1;min-width:0;position:relative;height:100%;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:4px; }
.trend-bar { width:60%;min-height:2px;background:linear-gradient(#3ddaf9,#175ac9);border-radius:2px; }
.trend-column small { position:absolute;bottom:-16px;font-size:9px;color:#7192ac; }
.trend-column b { font-size:10px;color:#8cdcff; }
.camera-strip { display:flex;gap:10px;overflow-x:auto;margin-top:14px;padding-bottom:4px; }
.camera-strip .camera-item { flex:0 0 180px; }
.platform-table-card { border:1px solid #24435d;border-radius:5px;background:#0a192b;overflow:hidden; }
.platform-table-card thead { background:#102f50; }
.platform-table-card th { color:#92b9d5; }
.platform-table-card tr:nth-child(even) { background:#0d2036; }
.platform-table-card td { font-size:12px; }
.platform-filters { display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;background:#0b2138;border:1px solid #203e5a;padding:14px;margin-bottom:14px;border-radius:5px; }
.platform-filters label { display:flex;flex-direction:column;gap:5px;color:#7ea7c6;font-size:11px; }
.platform-filters input,.platform-filters select { max-width:200px;min-width:120px; }
.platform-filters .btn { height:34px; }
.row-actions { display:flex;gap:6px;align-items:center; }
.row-actions .btn { padding:4px 8px;font-size:11px; }
.state-dot { display:inline-block;width:6px;height:6px;border-radius:50%;background:#5a7892;margin-right:6px; }
.state-dot.on { background:#35d8a7;box-shadow:0 0 8px #35d8a750; }
.entrance-layout { display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:14px;margin-bottom:16px; }
.recognition-summary { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0; }
.recognition-summary .metric { padding:12px; }
.recognition-summary .metric-value { font-size:26px; }
.notice { padding:12px 14px;background:#102338;border-left:3px solid #3b89c7;color:#8fadc4;font-size:11px;line-height:1.8;margin:12px 0; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.form-grid .form-row { margin:0; }
.form-row select { width:100%; }
.config-toolbar { display:flex;gap:8px;margin:10px 0;flex-wrap:wrap; }
.fullscreen-monitor { position:fixed;inset:0;z-index:30;background:#071321;overflow:auto;padding:20px; }
.fullscreen-monitor .monitor-layout { grid-template-columns:minmax(210px,.8fr) minmax(500px,2.7fr) minmax(230px,1fr); }
.platform-empty { padding:28px 18px;text-align:center;color:#7394af;font-size:12px;line-height:1.9; }
@media(min-width:1600px) { .video-surface { aspect-ratio:16/9; } }
@media(max-width:1200px) { .monitor-layout { grid-template-columns:minmax(0,2fr) minmax(210px,1fr); } .monitor-layout > .stack:first-child { grid-column:1/-1; } .camera-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-height:150px; } .metric { padding:12px; } .metric .metric-value { font-size:25px; } }
@media(max-width:850px) { .monitor-layout,.entrance-layout { grid-template-columns:1fr; } .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .platform-header { align-items:flex-start; } .platform-header h3 { font-size:16px; } }
@media(max-width:560px) { .video-grid,.form-grid { grid-template-columns:1fr; } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .camera-list { grid-template-columns:1fr 1fr; } }