:root{--bg:#07101f;--bg2:#0a1629;--panel:#0d1b30;--panel2:#10243e;--line:#1c3554;--muted:#7890ad;--text:#e9f4ff;--cyan:#27d7ff;--blue:#3878ff;--green:#4be0a0;--amber:#ffb64b;--red:#ff5e64;--violet:#8a78ff;--shadow:0 18px 50px rgba(0,0,0,.28)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}button{font:inherit;color:inherit}.app-shell{height:100vh;display:grid;grid-template:70px 76px 1fr/1fr;background:radial-gradient(circle at 30% -20%,#17365a 0,transparent 42%),var(--bg)}.topbar{grid-area:1/1/2/2;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid rgba(114,159,205,.18);background:rgba(6,15,29,.92);backdrop-filter:blur(18px);z-index:30}.brand{width:270px;display:flex;gap:12px;align-items:center}.brand-mark{position:relative;width:34px;height:34px;transform:rotate(-18deg)}.brand-mark span{position:absolute;width:8px;border-radius:6px;background:linear-gradient(180deg,#ff2d42,#ff7956)}.brand-mark span:nth-child(1){height:22px;left:2px;top:10px}.brand-mark span:nth-child(2){height:32px;left:13px;top:1px}.brand-mark span:nth-child(3){height:18px;left:24px;top:4px}.brand b{display:block;font-size:16px}.brand small{display:block;color:#87a0bb;font-size:9px;letter-spacing:1.9px;margin-top:3px}.plant-title{flex:1;text-align:center}.plant-title strong{font-size:14px;letter-spacing:.3px}.plant-title span{display:block;font-size:10px;color:var(--muted);margin-top:4px;letter-spacing:1.2px;text-transform:uppercase}.top-actions{width:390px;display:flex;align-items:center;justify-content:flex-end;gap:12px}.live-pill,.green-pill{border:1px solid rgba(75,224,160,.28);color:var(--green);background:rgba(75,224,160,.08);border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800;letter-spacing:1px}.live-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-right:6px}.icon-btn{width:32px;height:32px;border:1px solid var(--line);background:#0c1c31;border-radius:9px;cursor:pointer}.clock b{display:block;font-size:13px}.clock span{display:block;color:var(--muted);font-size:8px;margin-top:3px}.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#234c78,#10233a);border:1px solid #315574;font-size:11px;font-weight:800}.sidebar{grid-area:2/1/3/2;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid rgba(114,159,205,.13);background:#081426;z-index:20}.sidebar nav{display:flex;gap:8px}.nav-item,.sidebar-foot button{height:42px;padding:0 18px;border:0;background:transparent;border-radius:9px;color:#8799ad;display:flex;align-items:center;gap:9px;cursor:pointer;transition:.2s}.nav-item em,.sidebar-foot em{font-style:normal;font-size:12px;font-weight:650}.nav-item.active{background:linear-gradient(180deg,rgba(39,215,255,.16),rgba(39,215,255,.07));color:#eaffff;box-shadow:inset 0 -2px 0 var(--cyan)}.nav-item.active .nav-icon{color:var(--cyan)}.nav-icon{font-size:16px}.sidebar-foot{margin-left:auto;display:flex;align-items:center;gap:20px}.sidebar-foot button{color:var(--cyan);border:1px solid rgba(39,215,255,.16)}.connectivity{display:flex;align-items:center;gap:8px;color:#8096ae;font-size:10px}.connectivity i{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 9px var(--green)}.connectivity b{color:#dcecff}main{grid-area:3/1/4/2;overflow:hidden;padding:22px 26px 26px}.page{display:none;height:100%;animation:pageIn .35s ease}.page.active{display:flex;flex-direction:column;gap:14px}@keyframes pageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.page-heading{height:54px;display:flex;align-items:center;justify-content:space-between}.page-heading p,.panel-head span{margin:0 0 5px;font-size:9px;font-weight:800;letter-spacing:1.8px;color:var(--cyan)}.page-heading h1{margin:0;font-size:24px;letter-spacing:-.5px}.page-heading h1 span{color:#8da6c0;font-weight:500}.heading-actions{display:flex;align-items:center;gap:10px}.data-stamp{font-size:10px;color:var(--muted)}.data-stamp b{color:#c6d8e9}.primary,.secondary{border-radius:8px;padding:9px 14px;font-size:11px;font-weight:750;cursor:pointer;transition:.2s}.primary{border:1px solid #33dfff;background:linear-gradient(135deg,#05aede,#1874e7);box-shadow:0 6px 18px rgba(17,154,227,.24)}.primary:hover{filter:brightness(1.12);transform:translateY(-1px)}.secondary{background:#10223b;border:1px solid #294765;color:#b9cce0}.panel{background:linear-gradient(150deg,rgba(17,37,62,.96),rgba(10,25,44,.96));border:1px solid rgba(103,151,194,.19);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;align-items:flex-start;justify-content:space-between}.panel-head h2{margin:0;font-size:14px}.legend{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:6px}.legend i{width:6px;height:6px;border-radius:50%;margin-left:8px}.legend .normal{background:var(--green)}.legend .attention{background:var(--amber)}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;height:118px}.kpi{padding:14px 16px;background:linear-gradient(145deg,#10223a,#0b1b30);border:1px solid rgba(96,150,195,.18);border-radius:11px;position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;width:85px;height:85px;border-radius:50%;right:-45px;top:-45px;background:rgba(39,215,255,.08)}.kpi-top{display:flex;justify-content:space-between;align-items:center}.kpi-top span{font-size:10px;color:#9db0c4}.kpi-top i{font-style:normal;font-size:8px;border-radius:999px;padding:3px 5px}.good{color:var(--green);background:rgba(75,224,160,.08)}.warn{color:var(--amber);background:rgba(255,182,75,.1)}.kpi>div:nth-child(2){margin-top:8px}.kpi strong{font-size:26px;letter-spacing:-1px}.kpi small{font-size:10px;color:#7f95ad}.kpi p{font-size:9px;color:#738aa3;margin:7px 0 0}.kpi p b{float:right;color:#b4c8da}.bar{height:3px;background:#162f4c;border-radius:5px;margin-top:7px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:4px}.sparkline{position:absolute;right:14px;bottom:9px;width:120px;height:27px}.sparkline path{fill:none;stroke:var(--cyan);stroke-width:2}.sparkline.green path{stroke:var(--green)}.alert-kpi{border-color:rgba(255,94,100,.25)}.alert-kpi button{background:transparent;border:0;color:var(--red);font-size:9px;padding:0;margin-top:6px;cursor:pointer}.overview-grid{height:286px;display:grid;grid-template-columns:1.75fr 1fr;gap:12px}.plant-panel,.alerts-panel,.trend-panel,.shift-panel{padding:15px}.process-map{height:224px;margin-top:10px;position:relative;border-radius:8px;overflow:hidden;background:#09182a}.process-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,14,27,.94),rgba(7,24,41,.66)),url('assets/smelter.jpg') center/cover;opacity:.55}.process-map:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(80,132,178,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(80,132,178,.06) 1px,transparent 1px);background-size:30px 30px;pointer-events:none}.flow-line{position:absolute;left:11%;right:12%;top:102px;height:2px;background:#24425d;z-index:1}.flow-line i{display:block;height:2px;width:45%;background:linear-gradient(90deg,var(--cyan),var(--amber));box-shadow:0 0 13px var(--cyan);animation:flowPulse 2.5s infinite}@keyframes flowPulse{0%{transform:translateX(0)}50%{transform:translateX(80%)}100%{transform:translateX(0)}}.unit{position:absolute;top:55px;width:126px;height:91px;border:1px solid #275172;border-radius:9px;background:rgba(12,32,52,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;cursor:pointer;transition:.2s}.unit:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 10px 25px rgba(0,0,0,.25)}.unit-icon{font-size:20px;color:var(--cyan)}.unit b{font-size:10px;margin-top:4px}.unit small{font-size:9px;color:#bed0df;margin-top:3px}.unit em{font-size:7px;color:var(--green);font-style:normal;margin-top:5px}.u1{left:6%}.u2{left:30%}.u3{left:54%}.u4{left:78%}.attention-unit{border-color:rgba(255,182,75,.7);box-shadow:0 0 20px rgba(255,182,75,.12)}.attention-unit .unit-icon,.attention-unit em{color:var(--amber)}.process-summary{position:absolute;left:12px;bottom:11px;z-index:4;border-left:2px solid var(--cyan);padding-left:9px}.process-summary span,.process-summary small{display:block;font-size:8px;color:#738ca5}.process-summary b{font-size:9px;display:block;margin:2px 0}.alerts-panel{display:flex;flex-direction:column}.text-btn{border:0;background:transparent;color:var(--cyan);font-size:9px;cursor:pointer}.alert-list{margin-top:8px;display:flex;flex-direction:column;gap:5px}.alert-row{height:38px;border:0;border-left:2px solid var(--amber);background:rgba(255,182,75,.045);border-radius:5px;display:flex;align-items:center;text-align:left;padding:0 8px;cursor:pointer}.alert-row.med{border-color:#6c88a4;background:rgba(108,136,164,.05)}.alert-row>i{font-style:normal;width:19px;height:19px;border-radius:5px;background:rgba(255,182,75,.13);color:var(--amber);display:grid;place-items:center;font-size:9px;margin-right:8px}.alert-row.med>i{color:#9cb3ca;background:rgba(123,153,181,.1)}.alert-row div{flex:1}.alert-row b{display:block;font-size:9px}.alert-row span{display:block;font-size:7px;color:#72869c;margin-top:3px}.alert-row em{font-style:normal;font-size:7px;color:var(--amber)}.ai-watch{height:40px;margin-top:auto;border:1px solid rgba(39,215,255,.16);background:linear-gradient(90deg,rgba(39,215,255,.09),rgba(55,119,255,.05));border-radius:8px;display:flex;align-items:center;padding:0 9px;cursor:pointer}.ai-watch>span{color:var(--cyan);font-size:15px;margin-right:9px}.ai-watch div{flex:1;text-align:left}.ai-watch b{font-size:8px;display:block}.ai-watch small{font-size:7px;color:#7891a9}.ai-watch em{font-size:8px;color:var(--cyan);font-style:normal}.bottom-grid{display:grid;grid-template-columns:1.75fr 1fr;gap:12px;min-height:176px;flex:1}.trend-panel,.shift-panel{min-height:160px}.segmented{display:flex;background:#09182b;padding:2px;border-radius:6px}.segmented button,.map-filters button{font-size:8px;border:0;background:transparent;color:#6f859b;padding:5px 8px;border-radius:4px;cursor:pointer}.segmented button.active,.map-filters button.active{background:#193a5a;color:#cfeeff}.chart-wrap{height:120px;position:relative;margin-top:2px;padding:0 10px 15px 28px}.line-chart{width:100%;height:92px}.grid-lines path{stroke:#1d3550;stroke-width:1}.area{fill:url(#area)}.output-line{fill:none;stroke:var(--cyan);stroke-width:2}.energy-line{fill:none;stroke:var(--amber);stroke-width:1.6;stroke-dasharray:5 4}.chart-y{position:absolute;left:0;top:2px;height:92px;display:flex;flex-direction:column;justify-content:space-between;font-size:7px;color:#60758d}.chart-x{display:flex;justify-content:space-between;font-size:7px;color:#60758d;margin-top:-2px}.chart-legend{position:absolute;right:12px;top:-13px;font-size:7px;color:#859cb2}.chart-legend i{display:inline-block;width:6px;height:2px;margin:0 4px 2px 8px}.cyan-dot{background:var(--cyan)}.amber-dot{background:var(--amber)}.shift-tag,.status-online{font-size:7px;color:var(--green);background:rgba(75,224,160,.08);padding:5px 7px;border-radius:5px}.shift-score{display:flex;align-items:center;gap:15px;margin-top:9px}.ring{width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--green) 94%,#183149 0);display:grid;place-content:center;position:relative}.ring:after{content:"";position:absolute;inset:6px;border-radius:50%;background:#0f2137}.ring span,.ring small{z-index:1;text-align:center}.ring span{font-size:21px;font-weight:800}.ring small{font-size:6px;color:#7b92a8}.shift-score h3{font-size:13px;margin:0;color:var(--green)}.shift-score p{font-size:8px;color:#7e94aa;margin:4px 0 7px}.mini-status{display:flex;gap:11px}.mini-status span{font-size:7px;color:#7c90a5}.mini-status i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:3px}.mini-status b{display:block;color:#c4d5e5;margin-top:3px}.warn-line i{background:var(--amber)!important}.crew{display:flex;align-items:center;margin-top:10px;border-top:1px solid #1b3450;padding-top:8px}.crew>span{font-size:7px;color:#71879c}.crew-avatars{display:flex;margin-left:12px}.crew-avatars i{width:20px;height:20px;border-radius:50%;background:#254662;border:2px solid #10243c;display:grid;place-items:center;font-size:6px;font-style:normal;margin-left:-4px}.crew>b{font-size:8px;margin-left:auto}.scene-grid{display:grid;grid-template-columns:1.7fr .8fr;gap:14px;height:445px}.sequence-panel,.control-panel,.energy-main,.energy-side,.inventory-panel,.recipe-panel,.constraints-panel,.map-panel,.logistics-side{padding:17px}.timeline{height:170px;margin:16px 0 9px;border-radius:9px;background:linear-gradient(90deg,rgba(18,46,72,.65),rgba(9,24,42,.8)),url('assets/control-room.png') center/cover;position:relative;overflow:hidden}.timeline:after{content:"LIVE FURNACE BAY · COMPUTER VISION ONLINE";position:absolute;left:13px;bottom:11px;padding:6px 8px;background:rgba(3,15,27,.78);border-left:2px solid var(--cyan);font-size:8px;letter-spacing:1px}.production-flow{height:150px;display:flex;align-items:center;justify-content:center}.stage{width:126px;height:106px;background:#0b1d32;border:1px solid #2b4964;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.stage i{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#183754;color:#8eabc4;font-size:9px;font-style:normal}.stage b{font-size:10px;margin-top:7px}.stage span{font-size:8px;color:#7e94aa;margin:5px 0}.stage em{font-size:8px;color:#adbdcb;font-style:normal}.stage.done{border-color:rgba(75,224,160,.35)}.stage.done i{background:rgba(75,224,160,.15);color:var(--green)}.stage.current{border-color:var(--cyan);box-shadow:0 0 22px rgba(39,215,255,.17)}.stage.current i{background:var(--cyan);color:#062138}.stage.current em{color:var(--cyan)}.connector{width:55px;height:2px;background:#28435b;position:relative}.connector i{position:absolute;right:-1px;top:-3px;border-left:5px solid #28435b;border-top:4px solid transparent;border-bottom:4px solid transparent}.connector.active{background:var(--green)}.connector.active i{border-left-color:var(--green)}.control-panel{display:flex;flex-direction:column}.ai-badge{width:30px;height:30px;border-radius:8px;background:linear-gradient(145deg,#2bdcff,#3e67ff);display:grid;place-items:center;font-size:10px;box-shadow:0 0 22px rgba(39,215,255,.25)}.recommendation{margin-top:15px;padding:16px;background:linear-gradient(145deg,rgba(39,215,255,.1),rgba(57,89,222,.07));border:1px solid rgba(39,215,255,.19);border-radius:10px}.recommend-icon{font-size:22px;color:var(--cyan)}.recommendation h3{font-size:14px;line-height:1.35;margin:10px 0 8px}.recommendation p{font-size:9px;line-height:1.55;color:#86a0b7}.impact{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:13px 0}.impact span{padding:8px;background:rgba(7,23,40,.58);border-radius:6px}.impact small{font-size:7px;color:#6f879e;display:block}.impact b{font-size:10px;color:var(--green);display:block;margin-top:4px}.action-row{display:flex;justify-content:flex-end;gap:7px}.decision-log{margin-top:14px;display:flex;flex-direction:column;gap:8px}.decision-log>b{font-size:9px}.decision-log span{font-size:8px;color:#7990a7}.decision-log i{display:inline-block;width:5px;height:5px;background:var(--cyan);border-radius:50%;margin-right:7px}.metric-row{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric-card{padding:16px;position:relative}.metric-card>span{font-size:9px;color:#8197ad}.metric-card>strong{display:block;font-size:25px;margin-top:7px}.metric-card small{font-size:10px;color:#8197ad}.metric-card p{font-size:8px;color:#8398ad}.good-text{color:var(--green)!important}.mini-bars{height:46px;display:flex;align-items:end;gap:4px;position:absolute;right:16px;bottom:15px}.mini-bars i{width:7px;background:linear-gradient(var(--cyan),#2351a3);border-radius:3px}.image-card{background-size:cover;background-position:center;padding:0}.image-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,17,29,.96),rgba(5,17,29,.25))}.image-card>div{position:relative;z-index:1;padding:17px}.image-card span{font-size:8px;color:var(--cyan)}.image-card strong{font-size:14px;margin:7px 0;display:block}.image-card button{border:0;background:transparent;color:#fff;padding:0;font-size:8px}.energy-layout{display:grid;grid-template-columns:1.75fr .75fr;gap:14px;flex:1}.energy-main{display:flex;flex-direction:column}.energy-flow{height:176px;margin-top:14px;display:flex;align-items:center;position:relative}.grid-source{width:150px;padding:15px;background:linear-gradient(145deg,#143352,#0e2036);border:1px solid #2d5979;border-radius:10px}.grid-source span{font-size:7px;color:var(--cyan)}.grid-source strong{display:block;font-size:21px;margin:7px 0}.grid-source small{font-size:7px;color:#7d93a9}.energy-line-main{width:65px;height:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);position:relative}.energy-line-main i{position:absolute;right:-4px;top:-3px;border-left:6px solid var(--cyan);border-top:4px solid transparent;border-bottom:4px solid transparent}.energy-nodes{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.energy-nodes button{height:72px;background:#0b1c30;border:1px solid #233e59;border-radius:8px;text-align:left;padding:10px;position:relative}.energy-nodes i{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);border-radius:6px}.energy-nodes .orange{--c:var(--amber)}.energy-nodes .cyan{--c:var(--cyan)}.energy-nodes .violet{--c:var(--violet)}.energy-nodes .green{--c:var(--green)}.energy-nodes span{font-size:8px;color:#839ab0}.energy-nodes b{font-size:14px;display:block;margin-top:5px}.energy-nodes em{position:absolute;right:9px;bottom:9px;font-size:7px;color:#6f859b;font-style:normal}.demand-chart{flex:1;border-top:1px solid #1a3550;padding-top:10px}.chart-caption{display:flex;justify-content:space-between;font-size:8px}.chart-caption span{color:#738aa1}.chart-caption em{font-style:normal;color:var(--red)}.demand-chart svg{width:100%;height:200px}.demand-chart svg g path{stroke:#1c344d;stroke-width:1}.limit{stroke:var(--red);stroke-width:1;stroke-dasharray:5 5}.demand-area{fill:rgba(39,215,255,.08)}.demand{fill:none;stroke:var(--cyan);stroke-width:2.2}.energy-side{display:flex;flex-direction:column}.savings{text-align:center;margin:18px 0;padding:18px;border-radius:10px;background:radial-gradient(circle at center,rgba(75,224,160,.13),transparent 70%)}.savings small{font-size:8px;color:#7890a7}.savings strong{font-size:29px;display:block;color:var(--green);margin:6px}.savings span{font-size:8px;color:#8aa0b6}.dispatch-list{list-style:none;padding:0;margin:5px 0 18px;display:flex;flex-direction:column;gap:8px}.dispatch-list li{display:flex;align-items:center;padding:10px;background:#0b1b2e;border-radius:8px}.dispatch-list li>i{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#173b59;color:var(--cyan);font-style:normal;font-size:8px;margin-right:8px}.dispatch-list div{flex:1}.dispatch-list b{font-size:8px;display:block}.dispatch-list span{font-size:7px;color:#6e849a}.dispatch-list em{font-size:8px;color:var(--green);font-style:normal}.full{width:100%}.safe-note{text-align:center;font-size:7px;color:var(--green)}.blend-layout{display:grid;grid-template-columns:.9fr 1.35fr .8fr;gap:14px;flex:1}.material-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}.material{border:1px solid #213e59;background:#0a1a2d;border-radius:9px;min-height:78px;padding:12px;display:grid;grid-template-columns:5px 1fr auto;grid-template-rows:1fr 1fr;text-align:left;column-gap:10px;cursor:pointer}.material>i{grid-row:1/3;width:4px;background:var(--c);border-radius:5px;box-shadow:0 0 8px var(--c)}.material b{font-size:9px}.material span{display:block;font-size:7px;color:#768ca2;margin-top:6px}.material strong{font-size:11px}.material em{grid-column:3;font-size:7px;color:#70869c;font-style:normal}.material.active{border-color:var(--cyan);background:rgba(39,215,255,.06)}.recipe-panel{display:flex;flex-direction:column}.blend-visual{display:flex;align-items:center;justify-content:center;gap:34px;margin:24px 0}.donut{width:190px;height:190px;border-radius:50%;background:conic-gradient(#2ad5ff 0 42%,#8b7cff 42% 68%,#ffb84d 68% 88%,#55dfaa 88%);position:relative;display:grid;place-items:center;transition:1s}.donut:after{content:"";position:absolute;inset:30px;border-radius:50%;background:#0d2036}.donut div{z-index:2;text-align:center}.donut strong{display:block;font-size:27px}.donut span{font-size:9px;color:#7f96ad}.blend-legend{display:flex;flex-direction:column;gap:13px}.blend-legend span{font-size:8px;color:#91a8bc;min-width:150px}.blend-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:8px}.blend-legend b{float:right;color:#e6f3ff}.recipe-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.recipe-goals span{background:#0a1a2d;padding:11px;border-radius:8px}.recipe-goals small{font-size:7px;color:#71879c;display:block}.recipe-goals b{font-size:10px;display:block;margin-top:6px}.sliders{display:flex;flex-direction:column;gap:22px;margin-top:22px}.sliders label span{display:flex;justify-content:space-between;font-size:8px;color:#8aa0b5}.sliders label b{color:#d5e5f2}.sliders input{width:100%;accent-color:var(--cyan);margin-top:9px;height:3px}.constraint-check{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:30px}.constraint-check span{font-size:7px;color:var(--green);background:rgba(75,224,160,.06);padding:8px;border-radius:6px}.logistics-layout{display:grid;grid-template-columns:1.75fr .75fr;gap:14px;height:470px}.map-filters{display:flex}.site-map{margin-top:13px;height:395px;background:#091827;position:relative;border-radius:9px;overflow:hidden;background-image:linear-gradient(rgba(61,97,130,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(61,97,130,.08) 1px,transparent 1px);background-size:22px 22px}.road{position:absolute;background:#1e3448;border:1px solid #29465e}.r1{left:-10%;top:47%;width:120%;height:40px;transform:rotate(-8deg)}.r2{left:36%;top:-20%;height:140%;width:35px;transform:rotate(13deg)}.r3{left:68%;top:-20%;height:140%;width:30px;transform:rotate(-18deg)}.zone{position:absolute;padding:12px;border:1px solid #2a536f;background:#0d263b;border-radius:7px;font-size:8px;font-weight:800;color:#c8deed}.zone span{display:block;color:#69869e;font-size:7px;margin-top:5px;font-weight:500}.gate{left:3%;top:61%}.scale{left:22%;top:35%}.warehouse{left:40%;top:8%}.furnace{right:7%;top:31%;border-color:rgba(255,182,75,.5)}.finished{right:13%;bottom:6%}.truck{position:absolute;background:transparent;border:0;color:#82a6c0;z-index:4;cursor:pointer}.truck i{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#163b57;border:2px solid #2b6788;font-style:normal}.truck span{font-size:6px;background:#0a1c2e;padding:3px 5px;border-radius:4px}.truck.active i{background:var(--amber);color:#132031;border-color:#ffd18c;box-shadow:0 0 18px rgba(255,182,75,.45)}.t1{left:19%;top:60%}.t2{left:48%;top:46%}.t3{right:21%;top:67%}.route-pulse{position:absolute;left:20%;top:58%;width:280px;height:2px;border-top:2px dashed var(--amber);transform:rotate(-28deg);transform-origin:left;animation:route 1s infinite}@keyframes route{to{filter:brightness(2)}}.truck-photo{height:140px;margin-top:15px;background-size:cover;background-position:center;border-radius:8px;position:relative}.truck-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(4,13,23,.8))}.truck-photo span{position:absolute;left:9px;bottom:8px;z-index:1;font-size:7px}.truck-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.truck-info span{padding:8px;background:#0a1a2c;border-radius:7px}.truck-info small{font-size:7px;color:#71869c;display:block}.truck-info b{font-size:8px;display:block;margin-top:5px}.route-alert{display:flex;padding:9px;background:rgba(255,182,75,.08);border:1px solid rgba(255,182,75,.2);border-radius:7px;margin-bottom:10px}.route-alert>i{font-style:normal;color:var(--amber);margin-right:8px}.route-alert b{font-size:8px;display:block}.route-alert span{font-size:7px;color:#8599ad}.logistics-metrics{min-height:110px}.drawer{position:fixed;right:-440px;top:0;width:420px;height:100vh;background:#0a192b;border-left:1px solid #2a4a67;z-index:100;padding:22px;box-shadow:-30px 0 80px rgba(0,0,0,.45);transition:.35s}.drawer.open{right:0}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start}.drawer-head span{font-size:8px;letter-spacing:1.5px;color:var(--cyan)}.drawer-head h2{font-size:18px;margin:6px 0}.drawer-head button{border:0;background:#132940;width:32px;height:32px;border-radius:8px;font-size:20px;cursor:pointer}.drawer-content{margin-top:20px}.detail-hero{height:170px;border-radius:10px;background-size:cover;background-position:center;position:relative;overflow:hidden}.detail-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(4,14,24,.9))}.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.detail-stats span{background:#0f2239;border:1px solid #1d3c57;padding:12px;border-radius:8px}.detail-stats small{font-size:7px;color:#7b90a5;display:block}.detail-stats b{font-size:12px;display:block;margin-top:5px}.detail-copy{font-size:10px;color:#89a0b5;line-height:1.65}.detail-action{margin-top:15px}.backdrop{position:fixed;inset:0;background:rgba(1,8,16,.58);z-index:90;opacity:0;pointer-events:none;transition:.3s}.backdrop.open{opacity:1;pointer-events:auto}.toast{position:fixed;right:28px;bottom:-100px;background:#10263d;border:1px solid rgba(75,224,160,.4);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;z-index:200;box-shadow:var(--shadow);transition:.35s}.toast.show{bottom:28px}.toast>span{width:28px;height:28px;border-radius:50%;background:rgba(75,224,160,.14);color:var(--green);display:grid;place-items:center}.toast b{font-size:10px;display:block}.toast small{font-size:8px;color:#8095a9}.demo-overlay{position:fixed;inset:0;z-index:250;background:rgba(2,9,18,.72);display:none;align-items:flex-end;justify-content:center;padding-bottom:35px;backdrop-filter:blur(2px)}.demo-overlay.open{display:flex}.demo-card{width:540px;padding:20px;background:#10233a;border:1px solid var(--cyan);border-radius:13px;box-shadow:0 0 60px rgba(39,215,255,.2)}.demo-step{font-size:8px;letter-spacing:1.5px;color:var(--cyan)}.demo-card h2{font-size:18px;margin:9px 0 6px}.demo-card p{font-size:10px;color:#8fa5b9;line-height:1.5}.demo-card>div{display:flex;justify-content:flex-end;gap:8px}.warn-tag{font-size:7px;color:var(--amber);background:rgba(255,182,75,.1);padding:5px 7px;border-radius:5px}@media(max-width:1200px){.kpi strong{font-size:22px}.unit{width:110px}.page-heading h1{font-size:20px}}@media(max-height:820px){main{padding-top:14px}.kpi-grid{height:104px}.overview-grid{height:258px}.process-map{height:196px}.bottom-grid{min-height:150px}.scene-grid{height:390px}.timeline{height:140px}.energy-flow{height:142px}.demand-chart svg{height:150px}.logistics-layout{height:410px}.site-map{height:335px}}