:root{--bg:#f0f4f8;--bg2:#e2e8f0;--card:rgba(255,255,255,.97);--card-alt:rgba(241,245,249,.7);--border:rgba(180,30,30,.10);--border2:rgba(180,30,30,.05);--border3:rgba(180,30,30,.08);--red2:#e53e56;--t1:#0f172a;--t2:#334155;--t3:#64748b;--t4:#94a3b8;--accent:#c41e3a;--accent2:#e53e56;--green:#059669;--amber:#d97706;--gold:#b45309;--red:#dc2626;--supply:#dc2626;--return:#c41e3a;--glow:rgba(180,30,30,.08);--font-tech:'Rajdhani','Inter',sans-serif;--font-data:'Rajdhani','Menlo',monospace;--font-cn:'Inter','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;--warm:#c41e3a;--ember:#e53e56;--font:'PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;--font-mono:'Rajdhani','SF Mono','Menlo','Consolas',monospace;--shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(180,30,30,.04)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;min-height:100%;background:var(--bg);color:var(--t1);font-family:var(--font);font-size:13px}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:rgba(180,30,30,.18);border-radius:3px}::-webkit-scrollbar-track{background:transparent}
#app{width:100%;min-height:100vh;display:flex;flex-direction:column}
.unified-header{position:fixed;top:0;left:0;right:0;height:64px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-bottom:1px solid rgba(196,30,58,.3);display:flex;align-items:center;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.unified-header .uh-inner{width:100%;max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.unified-header .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-size:16px;font-weight:800;letter-spacing:2px}
.unified-header .logo-icon{width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,#c41e3a,#e53e56);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff}
.unified-header .logo span{color:#e53e56;font-weight:400;font-size:12px}
.unified-header nav{display:flex;gap:4px}
.unified-header nav a{color:rgba(255,255,255,.7);text-decoration:none;font-size:11px;padding:6px 12px;border-radius:4px;transition:.2s;letter-spacing:.5px;font-weight:500}
.unified-header nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.unified-header nav a.active{color:#e53e56;background:rgba(196,30,58,.15)}
header{height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:linear-gradient(135deg,#ffffff,#f8fafc);border-bottom:1px solid var(--border);box-shadow:var(--shadow);position:relative;z-index:20}
header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,var(--warm) 50%,transparent 95%);opacity:.5}
.h-left{display:flex;align-items:center;gap:12px}
.h-logo{width:42px;height:42px;border-radius:10px;border:1px solid rgba(196,30,58,.35);background:linear-gradient(135deg,rgba(196,30,58,.1),rgba(196,30,58,.15));display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--accent);font-weight:700;line-height:1.3;text-align:center;box-shadow:0 0 20px rgba(196,30,58,.15),inset 0 0 15px rgba(196,30,58,.06)}
.h-info .h-title{font-size:14px;font-weight:700;color:var(--t1);letter-spacing:.5px}
.h-info .h-sub{font-size:10px;color:var(--t3);margin-top:1px}
.h-center{text-align:center;position:absolute;left:50%;transform:translateX(-50%)}
.h-center .main-title{font-family:var(--font);font-size:22px;font-weight:900;letter-spacing:6px;background:linear-gradient(90deg,#9b1b30,#c41e3a,#e53e56);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(196,30,58,.35))}
.h-center .sub-title{font-family:var(--font-mono);font-size:9px;color:var(--t3);letter-spacing:3px;margin-top:2px}
.h-right{display:flex;align-items:center;gap:14px}
.h-right .sys-name{font-size:10px;color:var(--t3)}
.h-right .clock{font-family:var(--font-mono);font-size:14px;color:var(--warm);font-weight:700;letter-spacing:1px}
.btn-icon{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:rgba(196,30,58,.08);color:var(--t2);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:.25s}
.btn-icon:hover{background:rgba(196,30,58,.12);color:var(--warm);box-shadow:0 0 12px rgba(196,30,58,.2)}
nav#mainNav{height:38px;flex-shrink:0;display:flex;align-items:center;gap:4px;padding:0 16px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border2)}
.nav-item{height:28px;padding:0 20px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--t3);cursor:pointer;font-size:12px;font-family:var(--font);font-weight:600;transition:.2s;letter-spacing:1px;white-space:nowrap}
.nav-item:hover{color:var(--t2);background:rgba(196,30,58,.06)}
.nav-item.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 2px 8px rgba(180,30,30,.2)}
.nav-sep{width:1px;height:16px;background:var(--border2);margin:0 4px}
.sub-nav{height:32px;flex-shrink:0;display:none;align-items:center;gap:3px;padding:0 16px;background:rgba(248,250,252,.97);border-bottom:1px solid var(--border2)}
.sub-nav.active{display:flex}
.sub-nav-item{height:24px;padding:0 14px;border-radius:3px;border:1px solid transparent;background:transparent;color:var(--t4);cursor:pointer;font-size:11px;font-family:var(--font);font-weight:600;transition:.2s;letter-spacing:.5px;white-space:nowrap}
.sub-nav-item:hover{color:var(--t2);background:rgba(196,30,58,.04)}
.sub-nav-item.active{color:var(--warm);border-color:rgba(196,30,58,.2);background:rgba(196,30,58,.06)}
#main{flex:1;min-height:0;position:relative}
.page{position:absolute;inset:0;display:none;overflow-y:auto}
.page.active{display:block}
.subpage{position:absolute;inset:0;display:none;overflow-y:auto}
.subpage.active{display:block}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;position:relative;box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,30,58,.25),transparent)}
.card-header{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:11px;font-weight:700;color:var(--t2);background:linear-gradient(135deg,#ffffff,#f8fafc);border-bottom:1px solid var(--border2);letter-spacing:1px}
.card-header .indicator{width:3px;height:14px;background:var(--warm);border-radius:2px;margin-right:8px;box-shadow:0 0 6px rgba(196,30,58,.5)}
.card-body{padding:8px 12px}
.data-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--border2);font-size:11px}
.data-row:last-child{border:none}
.data-label{color:var(--t3)}
.data-value{font-family:var(--font-mono);font-weight:700;color:var(--t1)}
.data-value.warm{color:var(--warm)}.data-value.green{color:var(--green)}.data-value.amber{color:var(--amber)}.data-value.gold{color:var(--gold)}.data-value.accent{color:var(--accent)}
.kpi-bar{display:flex;gap:6px;flex-shrink:0;padding:0 6px;min-height:80px}
.kpi{flex:1;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:6px 4px;box-shadow:var(--shadow)}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--glow),transparent)}
.kpi .kpi-icon{font-size:16px;margin-bottom:2px}
.kpi .kpi-label{font-size:9px;color:var(--t3)}
.kpi .kpi-value{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--accent);text-shadow:0 1px 3px rgba(180,30,30,.1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:flex;align-items:baseline;justify-content:center}
.kpi .kpi-unit{font-size:8px;color:var(--t4);font-weight:400;margin-left:2px;flex-shrink:0}
.kpi .kpi-desc{font-size:8px;color:var(--t4)}
.kpi.green .kpi-value{color:var(--green);text-shadow:0 0 10px rgba(102,187,106,.2)}
.kpi.gold .kpi-value{color:var(--gold);text-shadow:0 0 10px rgba(180,83,9,.2)}
.dot-live{width:8px;height:8px;border-radius:50%;display:inline-block;animation:pulse 2s ease-in-out infinite}
.dot-live.green{background:var(--green);box-shadow:0 0 8px rgba(102,187,106,.6)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(196,30,58,.25),transparent);z-index:4;animation:scanY 5s linear infinite;pointer-events:none}
@keyframes scanY{0%{top:0}100%{top:100%}}
.pump-bar{display:grid;grid-template-columns:28px 1fr 52px;align-items:center;gap:4px;padding:3px 0;border-bottom:1px solid var(--border2);font-size:10px}
.pump-bar:last-child{border:none}
.pump-bar .pn{color:var(--warm);font-weight:700;font-family:var(--font-mono)}
.pump-bar .bar-bg{height:8px;background:rgba(196,30,58,.08);border-radius:2px;overflow:hidden}
.pump-bar .bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--ember),var(--warm));transition:width .8s}
.pump-bar .pv{text-align:right;color:var(--t2);font-family:var(--font-mono);font-size:9px}
.ov-page{display:flex;flex-direction:column;gap:8px;padding:8px;min-height:100%;overflow-y:auto}
.ov-projects{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1;min-height:0}
.proj-card{background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:.3s;position:relative}
.proj-card:hover{border-color:rgba(196,30,58,.4);box-shadow:0 0 25px rgba(196,30,58,.15);transform:translateY(-3px)}
.proj-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ember),var(--warm))}
.proj-card .pc-head{padding:12px 14px;border-bottom:1px solid var(--border2)}
.proj-card .pc-name{font-size:14px;font-weight:700;color:var(--warm);letter-spacing:1px}
.proj-card .pc-sub{font-size:9px;color:var(--t3);margin-top:2px}
.proj-card .pc-body{padding:10px 14px;flex:1;display:flex;flex-direction:column;gap:3px}
.proj-card .pc-stat{display:flex;justify-content:space-between;font-size:11px;padding:3px 0;border-bottom:1px solid var(--border2)}
.proj-card .pc-stat:last-child{border:none}
.proj-card .pc-stat .lbl{color:var(--t3)}.proj-card .pc-stat .val{font-family:var(--font-mono);font-weight:700;color:var(--t1)}
.proj-card .pc-stat .val.warm{color:var(--warm)}.proj-card .pc-stat .val.green{color:var(--green)}.proj-card .pc-stat .val.gold{color:var(--gold)}
.proj-card .pc-foot{padding:8px 14px;background:rgba(196,30,58,.04);border-top:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between}
.proj-card .pc-foot .go-btn{font-size:10px;color:var(--warm);cursor:pointer;font-weight:700;letter-spacing:1px}
.proj-card .pc-foot .status{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--green)}
.detail-layout{display:flex;min-height:100%;gap:6px;padding:6px}
.detail-left,.detail-right{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;padding-right:2px}
.detail-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.scene-wrap{flex:1;min-height:360px;position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,#f0e6e6,#e8d0d0);width:100%!important}
.scene-title{position:absolute;top:8px;left:12px;z-index:6;pointer-events:none}
.scene-title .st1{font-size:13px;font-weight:700;color:var(--warm);letter-spacing:2px;text-shadow:0 0 15px rgba(196,30,58,.4)}
.scene-title .st2{font-size:9px;color:var(--t4);margin-top:2px;letter-spacing:1px}
.scene-badge{position:absolute;top:8px;right:12px;z-index:6;display:flex;gap:8px}
.scene-badge .badge{font-size:9px;padding:3px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(196,30,58,.1);color:var(--t2)}
.scene-controls{position:absolute;bottom:10px;right:12px;z-index:6;display:flex;gap:4px}
.scene-controls button{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.92);color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.2s;pointer-events:all}
.scene-controls button:hover{background:rgba(196,30,58,.15);color:var(--warm)}
.station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:6px;padding:6px}
.pump-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center;position:relative;overflow:hidden;transition:.3s;cursor:pointer}
.pump-card:hover{border-color:rgba(196,30,58,.4);box-shadow:0 0 20px rgba(196,30,58,.12);transform:translateY(-2px)}
.pump-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ember),var(--warm))}
.pump-card .pc-name{font-family:var(--font);font-size:13px;font-weight:700;color:var(--warm);margin-bottom:4px}
.pump-card .pc-status{font-size:9px;color:var(--green);margin-bottom:6px}
.pump-card .pc-cop{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--warm);text-shadow:0 0 10px var(--glow)}
.pump-card .pc-cop-label{font-size:8px;color:var(--t3);margin-bottom:4px}
.pump-card .pc-row{display:flex;justify-content:space-between;font-size:9px;padding:2px 0;border-top:1px solid var(--border2)}
.pump-card .pc-row .lbl{color:var(--t3)}.pump-card .pc-row .val{color:var(--t1);font-family:var(--font-mono);font-weight:600}
.pump-card .pc-row .val.supply{color:var(--supply)}.pump-card .pc-row .val.ret{color:var(--return)}
.trend-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:6px;padding:6px;min-height:100%}
.trend-card{background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:250px}
.trend-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,30,58,.25),transparent)}
.trend-card-header{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:linear-gradient(135deg,#ffffff,#f8fafc);border-bottom:1px solid var(--border2)}
.tch-title{font-size:11px;font-weight:700;color:var(--t2);display:flex;align-items:center;gap:6px}
.tch-dot{width:6px;height:6px;border-radius:50%;background:var(--warm)}
.tch-sub{font-size:9px;color:var(--t4);letter-spacing:1px}
.trend-chart-area{flex:1;min-height:0}
.report-layout{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:100%;overflow-y:auto}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tag-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.tag-list .tag{padding:3px 12px;border-radius:20px;font-size:10px;color:var(--warm);border:1px solid rgba(196,30,58,.2);background:rgba(196,30,58,.05)}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.ov-item{border-radius:6px;padding:8px;border:1px solid var(--border2);background:var(--card-alt)}
.ov-item .ov-label{font-size:9px;color:var(--t3)}.ov-item .ov-val{font-size:11px;color:var(--t1);font-weight:700;margin-top:2px}
.highlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hl-item{border-radius:6px;padding:8px;border:1px solid var(--border2);background:var(--card-alt)}
.hl-item .hl-t{font-size:9px;color:var(--t3)}.hl-item .hl-v{font-size:18px;font-family:var(--font-mono);font-weight:700;color:var(--accent);margin:2px 0}.hl-item .hl-d{font-size:9px;color:var(--t4)}
.conclusion-item{position:relative;padding-left:14px;color:var(--t2);font-size:11px;line-height:2}
.conclusion-item::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.ov-charts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ov-charts .card{display:flex;flex-direction:column}
.ov-charts .chart-area{flex:1;min-height:200px}
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-panel{width:520px;max-width:92vw;max-height:86vh;background:linear-gradient(165deg,rgba(255,255,255,.98),rgba(248,250,252,.99));border:1px solid rgba(196,30,58,.3);border-radius:16px;box-shadow:0 0 60px rgba(196,30,58,.12),0 20px 40px rgba(0,0,0,.15);overflow:hidden;transform:scale(.92) translateY(20px);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.modal-overlay.active .modal-panel{transform:scale(1) translateY(0)}
.modal-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(196,30,58,.15);background:rgba(196,30,58,.06)}
.modal-top h3{font-size:14px;color:var(--warm);font-weight:700;letter-spacing:1px}
.modal-close{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--t3);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:.2s}
.modal-close:hover{color:var(--warm);background:rgba(196,30,58,.12)}
.modal-content{padding:16px 18px;overflow-y:auto;max-height:calc(86vh - 54px)}
.modal-section{margin-bottom:14px}
.modal-section-title{font-size:10px;color:var(--t3);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border2)}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.modal-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.modal-stat{padding:8px;border-radius:6px;background:rgba(196,30,58,.04);border:1px solid var(--border2)}
.modal-stat .ms-label{font-size:9px;color:var(--t3)}
.modal-stat .ms-value{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--t1);margin-top:2px}
.modal-stat .ms-value.supply{color:var(--supply)}.modal-stat .ms-value.ret{color:var(--return)}.modal-stat .ms-value.warm{color:var(--warm)}.modal-stat .ms-value.green{color:var(--green)}.modal-stat .ms-value.gold{color:var(--gold)}
.modal-fan-anim{display:flex;justify-content:center;gap:30px;padding:14px 0}
.fan-unit{text-align:center}
.fan-icon{width:56px;height:56px;border-radius:50%;border:2px solid rgba(196,30,58,.3);background:rgba(196,30,58,.08);display:flex;align-items:center;justify-content:center;margin:0 auto 4px;font-size:28px;animation:fanSpin 1.5s linear infinite}
@keyframes fanSpin{to{transform:rotate(360deg)}}
.fan-label{font-size:9px;color:var(--t3)}
.invest-layout{display:flex;flex-direction:column;gap:8px;padding:8px;min-height:100%;overflow-y:auto}
.invest-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.invest-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fin-big{text-align:center;padding:14px 8px;border-radius:8px;border:1px solid var(--border2);background:var(--card-alt);min-width:0;overflow:hidden}
.fin-big .fb-icon{font-size:20px;margin-bottom:2px}
.fin-big .fb-label{font-size:9px;color:var(--t3);letter-spacing:1px}
.fin-big .fb-val{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--warm);margin:4px 0;text-shadow:0 0 12px var(--glow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-big .fb-val.green{color:var(--green);text-shadow:0 0 10px rgba(102,187,106,.2)}
.fin-big .fb-val.red{color:var(--red);text-shadow:0 0 10px rgba(255,61,0,.2)}
.fin-big .fb-val.gold{color:var(--gold);text-shadow:0 0 10px rgba(180,83,9,.2)}
.fin-big .fb-unit{font-size:10px;color:var(--t4);font-weight:400}
.fin-big .fb-desc{font-size:8px;color:var(--t4)}
.fin-summary-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--border2);font-size:11px}
.fin-summary-row:last-child{border:none}
.fin-summary-row .fs-label{color:var(--t3)}
.fin-summary-row .fs-value{font-family:var(--font-mono);font-weight:700;color:var(--t1)}
.fin-summary-row .fs-value.warm{color:var(--warm)}.fin-summary-row .fs-value.green{color:var(--green)}.fin-summary-row .fs-value.red{color:var(--red)}.fin-summary-row .fs-value.gold{color:var(--gold)}
.cost-bar{display:flex;height:22px;border-radius:4px;overflow:hidden;margin:8px 0}
.cost-bar .cb-seg{display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden}
.invest-charts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.invest-charts .card{display:flex;flex-direction:column}
.invest-charts .chart-area{flex:1;min-height:220px}
.profit-tag{display:inline-block;padding:3px 12px;border-radius:14px;font-size:11px;font-weight:700;letter-spacing:1px}
.profit-tag.positive{background:rgba(102,187,106,.12);color:var(--green);border:1px solid rgba(102,187,106,.3)}
.profit-tag.negative{background:rgba(255,61,0,.1);color:var(--red);border:1px solid rgba(255,61,0,.2)}
.payback-progress{height:10px;background:rgba(196,30,58,.08);border-radius:5px;overflow:hidden;margin:6px 0}
.payback-progress .pp-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .8s}
.ov-layout{display:flex;min-height:100%;gap:4px;padding:4px;align-items:stretch}
.ov-left,.ov-right{width:250px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto;padding-right:2px;min-height:0}
.ov-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;min-height:0}
.dr{display:flex;justify-content:space-between;align-items:center;padding:2px 0;border-bottom:1px solid var(--border3);font-size:11px}
.dr:last-child{border:none}
.dl{color:var(--t3)}.dv{font-family:var(--font-mono);font-weight:700;color:var(--t1);font-size:12px}
.dv.red{color:var(--red2)}.dv.green{color:var(--green)}.dv.amber{color:var(--amber)}.dv.gold{color:var(--gold)}.dv.supply{color:var(--supply)}.dv.ret{color:var(--return)}.dv.accent{color:var(--accent)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;animation:pulse 2s ease-in-out infinite}
.dot.green{background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.5)}
.hl-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.hl-item{border-radius:4px;padding:6px;border:1px solid var(--border3);background:rgba(180,30,30,.03);text-align:center}
.hl-item .hl-t{font-size:9px;color:var(--t3)}.hl-item .hl-v{font-size:18px;font-family:var(--font-mono);font-weight:700;color:var(--accent2);margin:1px 0}.hl-item .hl-d{font-size:9px;color:var(--t4)}
.es-layout{display:flex;min-height:100%;gap:4px;padding:4px;align-items:stretch}
.es-left{width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.es-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;min-height:0}
.es-right{width:250px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.es-scene{flex:1;min-height:360px;position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(30,30,60,.3);background:#1a1a2e;box-shadow:0 2px 16px rgba(0,0,0,.3)}
.es-scene canvas{display:block}
.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.hp-card{border-radius:5px;padding:5px 6px;border:1px solid var(--border3);background:rgba(180,30,30,.03);transition:.3s;cursor:default}
.hp-card.running{border-left:3px solid var(--green)}
.hp-card .hp-id{font-size:10px;font-weight:700;color:var(--accent);font-family:var(--font-mono)}
.hp-card .hp-val{font-size:13px;font-weight:700;color:var(--t1);font-family:var(--font-mono)}
.hp-card .hp-sub{font-size:9px;color:var(--t3)}
.wshp-flow-section{position:relative;padding:8px;margin:6px 0;border-radius:6px;background:linear-gradient(135deg,rgba(248,250,252,.9),rgba(241,245,249,.95));border:1px solid rgba(180,30,30,.10);overflow:hidden}
.wshp-flow-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(220,38,38,.25),transparent)}
.flow-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;color:var(--t3);font-family:var(--font-mono);letter-spacing:1px}
.flow-header .fh-live{color:var(--green);font-size:11px}
.wshp-pipe{height:26px;border-radius:13px;position:relative;overflow:hidden;margin:4px 0;display:flex;align-items:center;padding:0 10px}
.wshp-pipe.supply-pipe{background:linear-gradient(90deg,rgba(239,68,68,.06),rgba(239,68,68,.18),rgba(239,68,68,.06));border:1px solid rgba(239,68,68,.22)}
.wshp-pipe.return-pipe{background:linear-gradient(90deg,rgba(196,30,58,.18),rgba(196,30,58,.03),rgba(196,30,58,.18));border:1px solid rgba(196,30,58,.22)}
.wshp-pipe .pipe-particles{position:absolute;top:0;left:-100%;width:300%;height:100%;pointer-events:none}
.wshp-pipe.supply-pipe .pipe-particles{background:repeating-linear-gradient(90deg,transparent 0px,transparent 14px,rgba(239,68,68,.3) 14px,rgba(239,68,68,.5) 20px,rgba(239,68,68,.3) 22px,transparent 22px,transparent 28px);animation:flowRight 4s linear infinite}
.wshp-pipe.return-pipe .pipe-particles{background:repeating-linear-gradient(90deg,transparent 0px,transparent 14px,rgba(196,30,58,.3) 14px,rgba(196,30,58,.5) 20px,rgba(196,30,58,.3) 22px,transparent 22px,transparent 28px);animation:flowLeft 4s linear infinite}
@keyframes flowRight{0%{transform:translateX(0)}100%{transform:translateX(33.33%)}}
@keyframes flowLeft{0%{transform:translateX(0)}100%{transform:translateX(-33.33%)}}
.pipe-label{position:relative;z-index:1;font-size:12px;font-weight:600;color:var(--t2);font-family:var(--font-mono);white-space:nowrap}
.pipe-temp{position:absolute;right:10px;z-index:1;font-size:13px;font-weight:700;font-family:var(--font-mono)}
.supply-pipe .pipe-temp{color:var(--supply)}
.return-pipe .pipe-temp{color:var(--return)}
.pipe-arrow{position:relative;z-index:1;font-size:11px;margin:0 4px;opacity:.7}
.supply-pipe .pipe-arrow{color:var(--supply)}
.return-pipe .pipe-arrow{color:var(--return)}
.hp-detail-overlay{position:absolute;inset:0;z-index:50;background:#0a0e18;display:none;overflow:hidden}
.hp-detail-overlay.active{display:block}
.hp-detail-3d{position:absolute;inset:0;z-index:0}.hp-detail-3d canvas{display:block}
.hp-detail-close{position:absolute;top:8px;right:10px;z-index:60;height:28px;padding:0 12px;border-radius:4px;border:1px solid rgba(100,150,255,.25);background:rgba(10,14,24,.9);color:#88aaff;cursor:pointer;font-size:11px;font-family:var(--font);display:flex;align-items:center;gap:4px;transition:.2s;backdrop-filter:blur(8px)}
.hp-detail-close:hover{background:rgba(100,150,255,.15);border-color:rgba(100,150,255,.5)}
.hp-detail-top{position:absolute;top:8px;left:10px;z-index:60;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#ccddff;text-shadow:0 0 10px rgba(100,150,255,.3)}
.hp-float-panel{position:absolute;z-index:55;background:rgba(8,12,24,.92);border:1px solid rgba(100,150,255,.18);border-radius:6px;padding:6px 8px;backdrop-filter:blur(8px);pointer-events:none}
.hp-float-panel .fp-title{font-size:10px;font-weight:700;color:#7799cc;margin-bottom:3px;padding-bottom:2px;border-bottom:1px solid rgba(100,150,255,.12);display:flex;align-items:center;gap:3px;letter-spacing:.5px}
.hp-float-panel .fp-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hp-float-panel .fp-row{display:flex;justify-content:space-between;gap:8px;font-size:9px;padding:1px 0}
.hp-float-panel .fp-label{color:#556688;white-space:nowrap}.hp-float-panel .fp-val{font-family:var(--font-mono);font-weight:700;white-space:nowrap}
.fp-val.hot{color:#ff7766}.fp-val.cold{color:#66aaff}.fp-val.green{color:#44cc88}.fp-val.warn{color:#ffaa44}.fp-val.purple{color:#aa88ee}
.floor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:4px;padding:6px}
.floor-card{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:5px;text-align:center;font-size:11px;transition:.3s;cursor:pointer}
.floor-card:hover{border-color:rgba(220,38,38,.5);box-shadow:0 0 12px rgba(220,38,38,.1)}
.floor-card .fc-name{font-weight:700;color:var(--accent2);font-size:12px}
.floor-card .fc-temp{font-family:var(--font-mono);font-size:16px;font-weight:700;margin:2px 0}
.es-selector-wrap{flex-shrink:0;background:var(--card);border-bottom:1px solid var(--border2);padding:6px 10px}
.es-selector-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.es-selector-label{font-size:10px;color:var(--t3);font-weight:700;letter-spacing:1px;white-space:nowrap;margin-right:2px}
.es-proj-btn{height:28px;padding:0 14px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--t3);cursor:pointer;font-size:11px;font-weight:600;transition:.2s;white-space:nowrap}
.es-proj-btn:hover{color:var(--accent);background:rgba(180,30,30,.06)}
.alert-box{border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.04);border-radius:4px;padding:5px 7px;margin:3px 0;font-size:10px;color:var(--amber)}
.alert-box .alert-title{font-weight:700;margin-bottom:2px}
.cop-boost{display:flex;align-items:center;gap:4px;margin:3px 0;padding:4px 7px;border-radius:4px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.15);font-size:12px;color:var(--green)}
.cop-boost .boost-val{font-family:var(--font-mono);font-weight:700;font-size:14px}
.cop-boost .boost-arrow{font-size:13px;animation:boostPulse 2s ease-in-out infinite}
@keyframes boostPulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.5;transform:translateY(-2px)}}
@media(max-width:1200px){.ov-projects{grid-template-columns:repeat(2,1fr)}.detail-left,.detail-right{width:190px}.ov-left,.ov-right{width:220px}.trend-layout{grid-template-columns:1fr}}
@media(max-width:900px){.ov-layout{flex-direction:column;overflow-y:auto}.ov-left,.ov-right{width:100%}.trend-layout{grid-template-columns:1fr;height:auto}.report-grid{grid-template-columns:1fr}.hl-grid{grid-template-columns:1fr 1fr}.es-layout{flex-direction:column;overflow-y:auto}.es-left,.es-right{width:100%}}
@media(max-width:768px){html,body{overflow-y:auto;overflow-x:hidden;height:auto;min-height:100%}#app{height:auto;min-height:100vh}header{height:auto;min-height:48px;padding:6px 10px;flex-wrap:wrap;gap:4px}.h-center{position:static;transform:none;width:100%;order:3}.h-center .main-title{font-size:15px;letter-spacing:2px}nav#mainNav,.sub-nav{height:auto;min-height:34px;padding:4px 8px;overflow-x:auto;flex-wrap:nowrap}#main{flex:none;min-height:calc(100vh - 160px)}.page,.subpage{position:relative;inset:auto}.ov-projects{grid-template-columns:1fr}.detail-layout{flex-direction:column;height:auto}.detail-left,.detail-right{width:100%}.scene-wrap{min-height:55vw;flex:none}.trend-layout{grid-template-columns:1fr;height:auto}.trend-card{min-height:250px}.report-grid{grid-template-columns:1fr}}