/* ============================================================
   数治台账系统 · 指挥中心大屏设计系统 (Dark)
   ui-ux-pro-max: Smart-Home/IoT Dashboard + Glassmorphism
   用于 dashboard.html (BI 大屏 + 数字孪生)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&family=Orbitron:wght@500;700;900&display=swap');

:root{
  --scr-bg:#08120D;
  --scr-bg2:#0C1A12;
  --scr-panel:rgba(18,32,24,.62);
  --scr-panel-line:rgba(86,200,120,.18);
  --scr-ink:#E8F5EC;
  --scr-mute:#7FA890;
  --scr-green:#2BE07A;
  --scr-green-soft:#3DBE6B;
  --scr-cyan:#28E0D0;
  --scr-gold:#F2C75A;
  --scr-red:#FF5B6E;
  --scr-blue:#4FB7F5;
  --scr-glow:0 0 14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
.screen-root{
  font-family:'Noto Sans SC',sans-serif;color:var(--scr-ink);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(43,224,122,.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(40,224,208,.06), transparent 60%),
    linear-gradient(160deg,#08120D,#0A1710 55%,#07100B);
  min-height:100vh;overflow-x:hidden;
}
.num-font{font-family:'Orbitron',sans-serif;}
.screen-root::-webkit-scrollbar{width:9px;height:9px;}
.screen-root::-webkit-scrollbar-thumb{background:rgba(43,224,122,.3);border-radius:6px;}

/* —— 大屏头 —— */
.scr-header{
  display:flex;align-items:center;justify-content:space-between;padding:14px 28px;
  border-bottom:1px solid var(--scr-panel-line);position:relative;
  background:linear-gradient(180deg,rgba(20,40,28,.6),transparent);
}
.scr-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--scr-green),transparent);opacity:.5;}
.scr-title-main{font-size:24px;font-weight:700;letter-spacing:2px;text-align:center;flex:1;
  background:linear-gradient(180deg,#fff,#9be8b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 22px rgba(43,224,122,.3);}
.scr-title-main small{display:block;font-size:11px;letter-spacing:4px;color:var(--scr-mute);-webkit-text-fill-color:var(--scr-mute);margin-top:2px;font-weight:400;}
.scr-header .hd-side{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--scr-mute);min-width:230px;}
.scr-header .hd-side.r{justify-content:flex-end;}
.scr-clock{font-family:'Orbitron';color:var(--scr-green);font-size:15px;text-shadow:var(--scr-glow) rgba(43,224,122,.5);}
.scr-back{padding:6px 13px;border:1px solid var(--scr-panel-line);border-radius:20px;color:var(--scr-mute);cursor:pointer;font-size:12px;transition:all .25s;}
.scr-back:hover{border-color:var(--scr-green);color:var(--scr-green);}

/* —— Tab —— */
.scr-tabs{display:flex;justify-content:center;gap:8px;padding:12px 0 4px;flex-wrap:wrap;}
.scr-tab{padding:8px 22px;border:1px solid var(--scr-panel-line);border-radius:22px;color:var(--scr-mute);cursor:pointer;font-size:13.5px;font-weight:500;transition:all .25s;background:rgba(18,32,24,.4);}
.scr-tab:hover{color:var(--scr-ink);border-color:var(--scr-green-soft);}
.scr-tab.on{background:linear-gradient(135deg,rgba(43,224,122,.22),rgba(40,224,208,.12));color:var(--scr-green);border-color:var(--scr-green);box-shadow:var(--scr-glow) rgba(43,224,122,.25);}

/* —— 网格布局 —— */
.scr-wrap{padding:14px 22px 26px;}
.scr-grid{display:grid;gap:14px;}
.scr-3{grid-template-columns:1fr 1.6fr 1fr;}
.scr-4{grid-template-columns:repeat(4,1fr);}
.scr-col{display:flex;flex-direction:column;gap:14px;}

/* —— 玻璃面板 —— */
.scr-panel{
  background:var(--scr-panel);border:1px solid var(--scr-panel-line);border-radius:12px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;overflow:hidden;
}
.scr-panel::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(43,224,122,.5),transparent);}
.scr-panel .ph{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid rgba(86,200,120,.12);}
.scr-panel .ph h3{font-size:14px;font-weight:600;color:var(--scr-ink);display:flex;align-items:center;gap:8px;letter-spacing:.5px;}
.scr-panel .ph h3::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--scr-green);box-shadow:var(--scr-glow) var(--scr-green);}
.scr-panel .ph .more{font-size:11px;color:var(--scr-mute);}
.scr-panel .pb{padding:14px 16px;}
.corner{position:absolute;width:12px;height:12px;border:2px solid var(--scr-green);opacity:.55;}
.corner.tl{top:5px;left:5px;border-right:0;border-bottom:0;} .corner.tr{top:5px;right:5px;border-left:0;border-bottom:0;}
.corner.bl{bottom:5px;left:5px;border-right:0;border-top:0;} .corner.br{bottom:5px;right:5px;border-left:0;border-top:0;}

/* —— 大屏 KPI —— */
.scr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.scr-kpi{background:linear-gradient(135deg,rgba(43,224,122,.1),rgba(18,32,24,.2));border:1px solid rgba(86,200,120,.16);border-radius:10px;padding:12px;text-align:center;position:relative;}
.scr-kpi .v{font-family:'Orbitron';font-size:25px;font-weight:700;color:var(--scr-green);text-shadow:var(--scr-glow) rgba(43,224,122,.35);line-height:1;}
.scr-kpi .v small{font-size:12px;color:var(--scr-mute);font-family:'Noto Sans SC';}
.scr-kpi .l{font-size:11.5px;color:var(--scr-mute);margin-top:7px;}
.scr-kpi.cyan .v{color:var(--scr-cyan);text-shadow:var(--scr-glow) rgba(40,224,208,.35);}
.scr-kpi.gold .v{color:var(--scr-gold);text-shadow:var(--scr-glow) rgba(242,199,90,.35);}
.scr-kpi.blue .v{color:var(--scr-blue);}

/* —— 状态点 —— */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;}
.st .d{width:8px;height:8px;border-radius:50%;}
.st.on .d{background:var(--scr-green);box-shadow:var(--scr-glow) var(--scr-green);animation:bl 2s infinite;}
.st.off .d{background:#566;} .st.warn .d{background:var(--scr-gold);box-shadow:var(--scr-glow) var(--scr-gold);animation:bl 1.2s infinite;}
.st.alarm .d{background:var(--scr-red);box-shadow:var(--scr-glow) var(--scr-red);animation:bl .8s infinite;}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.35}}

/* —— 列表行 —— */
.scr-rows{display:flex;flex-direction:column;}
.scr-row{display:flex;align-items:center;justify-content:space-between;padding:9px 4px;border-bottom:1px dashed rgba(86,200,120,.12);font-size:12.5px;}
.scr-row:last-child{border-bottom:none;}
.scr-row .lab{color:var(--scr-mute);display:flex;align-items:center;gap:7px;}
.scr-row .val{font-family:'Orbitron';color:var(--scr-ink);}
.scr-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;flex:1;margin:0 10px;}
.scr-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--scr-green-soft),var(--scr-green));border-radius:6px;}

/* —— 滚动告警 —— */
.scr-feed{max-height:188px;overflow:hidden;position:relative;}
.scr-feed .fi{display:flex;gap:9px;padding:8px 4px;border-bottom:1px dashed rgba(86,200,120,.1);font-size:12px;align-items:center;}
.scr-feed .fi .t{color:var(--scr-mute);font-family:'Orbitron';font-size:11px;}

/* —— 数字孪生沙盘 —— */
.twin-stage{position:relative;width:100%;height:520px;border-radius:12px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%,rgba(20,50,32,.6),#06100A);perspective:1400px;}
.twin-ground{position:absolute;left:50%;top:54%;width:760px;height:520px;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(0deg);transform-style:preserve-3d;}
.twin-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(43,224,122,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(43,224,122,.22) 1px,transparent 1px);background-size:38px 38px;border:1px solid rgba(43,224,122,.35);box-shadow:inset 0 0 60px rgba(43,224,122,.12);}
.twin-plot{position:absolute;border-radius:3px;background:linear-gradient(135deg,rgba(43,224,122,.32),rgba(40,160,90,.16));border:1px solid rgba(43,224,122,.5);}
.twin-pin{position:absolute;transform:translate(-50%,-100%);z-index:5;cursor:pointer;}
.twin-pin .pic{width:13px;height:13px;border-radius:50%;border:2px solid #fff;}
.twin-pin .stalk{position:absolute;left:50%;top:13px;width:2px;height:26px;transform:translateX(-50%);background:linear-gradient(180deg,currentColor,transparent);}
.twin-pin.g{color:var(--scr-green);} .twin-pin.g .pic{background:var(--scr-green);box-shadow:var(--scr-glow) var(--scr-green);}
.twin-pin.c{color:var(--scr-cyan);} .twin-pin.c .pic{background:var(--scr-cyan);box-shadow:var(--scr-glow) var(--scr-cyan);}
.twin-pin.r{color:var(--scr-red);} .twin-pin.r .pic{background:var(--scr-red);box-shadow:var(--scr-glow) var(--scr-red);animation:bl .9s infinite;}
.twin-pin.gd{color:var(--scr-gold);} .twin-pin.gd .pic{background:var(--scr-gold);box-shadow:var(--scr-glow) var(--scr-gold);}
.twin-scan{position:absolute;left:50%;top:54%;width:760px;height:760px;transform:translate(-50%,-50%) rotateX(58deg);border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(43,224,122,.16) 40deg,transparent 80deg);animation:radar 7s linear infinite;pointer-events:none;}
@keyframes radar{to{transform:translate(-50%,-50%) rotateX(58deg) rotate(360deg)}}
.twin-legend{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;background:rgba(8,18,12,.7);border:1px solid var(--scr-panel-line);border-radius:9px;padding:11px 14px;font-size:12px;z-index:10;}
.twin-hud{position:absolute;right:16px;top:16px;background:rgba(8,18,12,.72);border:1px solid var(--scr-panel-line);border-radius:9px;padding:12px 15px;z-index:10;min-width:160px;}

/* —— 视频墙 —— */
.video-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.vw-cell{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid rgba(86,200,120,.2);background:#0a140e;}
.vw-cell img{width:100%;height:100%;object-fit:cover;opacity:.92;}
.vw-cell .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:6px 8px;font-size:10.5px;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 30%,transparent 70%,rgba(0,0,0,.5));}
.vw-cell .ov .top{display:flex;justify-content:space-between;color:#cfe;}
.vw-cell .rec{color:var(--scr-red);display:flex;align-items:center;gap:4px;}
.vw-cell .rec::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--scr-red);animation:bl 1.3s infinite;}
.vw-cell .ts{font-family:'Orbitron';color:#bfe;align-self:flex-end;}

/* —— 响应式 —— */
@media(max-width:1180px){.scr-3{grid-template-columns:1fr;}.scr-4{grid-template-columns:repeat(2,1fr);}.video-wall{grid-template-columns:repeat(2,1fr);}.twin-ground,.twin-scan{width:90vw;}}
@media(max-width:720px){.scr-header{flex-wrap:wrap;gap:8px;}.scr-header .hd-side{min-width:auto;}.scr-title-main{order:-1;flex-basis:100%;font-size:18px;}}