:root{--bg:#020b12;--bg2:#03131f;--panel:#061b2a;--panel2:#04131f;--border:#12394e;--border2:#194b63;--text:#f5fafd;--muted:#8daabd;--blue:#149ee4;--cyan:#19b5fe;--good:#2cde70;--moderate:#ffd21f;--high:#ff851b;--critical:#ff3b30;--down:#8a969e}.app-shell *{box-sizing:border-box}.app-shell button{font:inherit}.app-shell{min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:radial-gradient(circle at 54% 18%,rgba(20,158,228,.09),transparent 34%),linear-gradient(180deg,#020b12,#03101a 55%,#020b12)}.topbar{height:76px;display:grid;grid-template-columns:210px minmax(650px,1fr) 185px;gap:18px;padding:0 18px;border-bottom:1px solid #0d2c3e;background:#02090f;position:sticky;top:0;z-index:20}.brand,.topbar{align-items:center}.brand{display:flex;gap:10px}.brand-mark{width:51px;height:51px;border-radius:50%;border:4px solid #6bc7f5;position:relative;box-shadow:inset 0 0 0 3px #092438,0 0 14px rgba(25,181,254,.22)}.brand-eye{width:23px;height:13px;border:4px solid white;left:10px;top:15px}.brand-eye,.brand-eye:after{position:absolute;border-radius:50%}.brand-eye:after{content:"";width:5px;height:5px;background:white;left:5px;top:0}.brand-project{font-size:9px;letter-spacing:.14em}.brand-oscar{font-size:25px;font-weight:850;line-height:.9}.brand-sub{font-size:7px;color:var(--cyan);letter-spacing:.07em;margin-top:4px}.topnav{height:42px;border:1px solid #0c2e42;border-radius:7px;display:flex;background:#031521;overflow:hidden}.topnav button{border:0;border-right:1px solid #0a293b;background:transparent;color:#e3edf2;font-size:9px;padding:0 17px;cursor:pointer;white-space:nowrap}.topnav button.active{background:linear-gradient(180deg,#087fc4,#075989);box-shadow:inset 0 0 20px rgba(34,183,255,.2)}.topnav button:hover{background:#07314a}.nav-badge{background:var(--critical);border-radius:50%;padding:2px 5px;margin-left:5px;font-weight:800}.health-box{text-align:right;font-size:8px}.health-box .date{color:#b6c8d1}.health-box>div{display:flex;justify-content:flex-end;gap:7px;align-items:center;margin-top:7px}.health-box i{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good)}.health-box b{display:block;color:var(--good);font-size:9px;margin-top:1px}.body-grid{display:grid;grid-template-columns:128px minmax(0,1fr)}.sidebar{min-height:calc(100vh - 76px);background:#03131e;border-right:1px solid #0d3044;padding-top:0}.side-title{height:58px;padding:18px 12px;color:#9fb3bf;border-bottom:1px solid #103247;font-size:8px}.sidebar button{width:100%;height:52px;border:0;background:transparent;color:#d7e5ec;display:flex;align-items:center;gap:9px;padding:0 13px;cursor:pointer;font-size:10px;text-align:left;position:relative}.sidebar button.active{background:linear-gradient(90deg,#075a8d,#06314e);border-left:3px solid #19b5fe}.sidebar button:hover{background:#06283d}.sidebar em{position:absolute;right:10px;background:var(--critical);width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-style:normal;font-weight:800}.main{padding:14px 14px 20px;min-width:0}.main-head{height:104px;display:flex;justify-content:space-between;gap:20px}.main-head h1,.page-title h1{font-size:23px;margin:0;letter-spacing:.01em}.main-head p,.page-title p{margin:4px 0 0;color:var(--cyan);font-size:12px}.head-actions{display:flex;gap:34px}.view-switch{height:38px;border:1px solid #123c54;border-radius:7px;overflow:hidden;display:flex}.view-switch button{border:0;background:#041622;color:#a8bdc9;padding:0 15px;font-size:9px}.view-switch button.active{background:#0879b9;color:white}.legend{font-size:8px;line-height:17px}.legend>b{font-size:9px}.legend span,.legend>b{display:block}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.legend .good{background:var(--good)}.legend .moderate{background:var(--moderate)}.legend .high{background:var(--high)}.legend .critical{background:var(--critical)}.legend .down{background:var(--down)}.demo-tools{display:flex;align-items:center;gap:7px;margin:-4px 0 9px}.demo-tools button,.sim-badge{height:29px;border:1px solid #1b526e;border-radius:6px;background:#041724;color:#a9c5d4;padding:0 9px;display:flex;align-items:center;gap:6px;font-size:8px;font-weight:800;letter-spacing:.04em}.demo-tools button{cursor:pointer}.demo-tools .simulate{border-color:#794818;color:#ffad50}.sim-badge{color:#4dc7ff}.sim-state{font-size:9px;color:#ffd38b;margin-left:auto}.line-panel{position:relative;min-width:1150px;height:360px;background:radial-gradient(circle at 50% 55%,rgba(39,114,145,.12),transparent 42%),linear-gradient(180deg,#03111b,#02090f);border:1px solid #0d3449;border-radius:8px;overflow:hidden;padding:0 78px}.machine-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;height:100%;position:relative;z-index:5}.machine-station{--status:var(--good);position:relative;height:100%;display:flex;flex-direction:column;align-items:center}.machine-station.moderate{--status:var(--moderate)}.machine-station.high{--status:var(--high)}.machine-station.critical{--status:var(--critical)}.machine-station.down{--status:var(--down)}.machine-card{height:92px;width:100%;margin-top:7px;background:linear-gradient(180deg,#061d2c,#03131e);border:1px solid #17445b;border-radius:7px;color:white;cursor:pointer;padding:8px 9px}.machine-card:hover{border-color:#1a8ac1;transform:translateY(-1px)}.machine-card-top{display:grid;grid-template-columns:23px 1fr 6px;gap:6px;align-items:center}.seq{width:22px;height:22px;border-radius:50%;background:var(--status);color:#021016;display:grid;place-items:center;font-weight:900;font-size:10px}.machine-name{font-size:8px;line-height:10px;font-weight:750;text-transform:uppercase;text-align:left}.tiny-dot{width:5px;height:5px;border-radius:50%;background:var(--status)}.risk-value{font-size:25px;line-height:26px;font-weight:900;color:var(--status);margin-top:5px}.risk-label{font-size:9px;font-weight:800;color:var(--status)}.dash-link{height:39px;border-left:1px dashed #1ebcff}.machine-image-wrap{height:175px;width:100%;border:0;background:transparent;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;padding:0}.machine-image{max-height:165px;max-width:98%;-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(109,188,222,.08));transition:.2s}.machine-image-wrap:hover .machine-image{transform:scale(1.035);filter:drop-shadow(0 8px 8px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(25,181,254,.2))}.machine-ionized-rinser,.machine-tray-former-bundler{max-height:190px;max-width:72%}.machine-product-scale-filler,.machine-xray{max-height:135px;max-width:100%}.machine-sonoco-seamer{max-height:155px}.status-node{position:absolute;bottom:18px;width:27px;height:27px;border-radius:50%;border:3px solid white;background:var(--status);box-shadow:0 0 0 5px color-mix(in srgb,var(--status) 23%,transparent),0 0 15px var(--status);z-index:8;cursor:pointer}.status-node span{display:block;width:5px;height:5px;background:white;border-radius:50%;margin:auto}.flow-line{position:absolute;left:72px;right:72px;bottom:29px;height:3px;background:var(--good);box-shadow:0 0 6px #2cde70,0 0 14px rgba(44,222,112,.75);z-index:4}.flow-line:before{left:-17px;border-right:11px solid #55ef92}.flow-line:after,.flow-line:before{content:"";position:absolute;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent}.flow-line:after{right:-17px;border-left:11px solid #55ef92}.flow-pulse{position:absolute;width:90px;height:3px;background:linear-gradient(90deg,transparent,#e9fff1,transparent);animation:flow 2.4s linear infinite}@keyframes flow{0%{left:-90px}to{left:100%}}.finished-label,.raw-label{position:absolute;z-index:9;bottom:15px;width:64px;padding:7px 3px;border:1px solid #135176;border-radius:7px;background:#06325a;text-align:center;font-size:8px;line-height:10px}.raw-label{left:7px}.finished-label{right:7px}.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:8px}.kpi-card{height:86px;border:1px solid #10384e;border-radius:7px;background:linear-gradient(180deg,#061b29,#04121c);padding:10px 12px}.kpi-label{font-size:8px;color:#d8e5eb;margin-bottom:9px}.kpi-main{display:flex;align-items:center;gap:11px}.kpi-icon{color:#a9c0cc}.kpi-icon.green{color:var(--good)}.kpi-icon.orange{color:#c6d3da}.kpi-icon.red{color:#b7c5cd}.kpi-main b{font-size:20px;color:#2894e9}.kpi-main b.green{color:var(--good)}.kpi-main b.orange{color:var(--high)}.kpi-main b.red{color:var(--critical)}.kpi-main span{display:block;font-size:8px;color:#b6c5cd;margin-top:2px}.alarm-strip{display:grid;grid-template-columns:113px repeat(3,minmax(0,1fr)) 105px;gap:7px;margin-top:8px}.alarm-strip-title,.view-all{border:1px solid #10384e;background:#04131e;color:white;justify-content:center;gap:6px;font-size:8px}.alarm-strip-title,.alarm-tile,.view-all{height:66px;border-radius:7px;display:flex;align-items:center}.alarm-tile{padding:9px 11px;gap:10px}.alarm-tile.high{border:1px solid rgba(255,59,48,.3);background:linear-gradient(90deg,rgba(90,11,17,.34),rgba(31,8,12,.18))}.alarm-tile.moderate{border:1px solid rgba(255,210,31,.25);background:linear-gradient(90deg,rgba(95,78,0,.27),rgba(26,22,2,.16))}.alarm-bell{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.high .alarm-bell,.high b{color:var(--critical)}.moderate .alarm-bell,.moderate b{color:var(--moderate)}.alarm-tile b,.alarm-tile span{display:block;font-size:8px}.alarm-tile span{margin-top:2px}.alarm-tile small{font-size:7px;color:#a9bac3}.view-all{cursor:pointer;border:1px solid #10384e}.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:flex;justify-content:flex-end;backdrop-filter:blur(2px)}.drawer{width:min(430px,95vw);height:100vh;padding:24px;background:linear-gradient(180deg,#061c2a,#020c13);border-left:1px solid #15516f;box-shadow:-20px 0 50px rgba(0,0,0,.6);overflow:auto}.drawer-close{float:right;border:0;background:transparent;color:white;cursor:pointer}.eyebrow{font-size:9px;color:#5bbff0;letter-spacing:.12em}.drawer-title-row{display:flex;gap:10px;align-items:center;margin-top:18px}.drawer-title-row h2{margin:0;font-size:23px}.seq.big{width:36px;height:36px;font-size:14px}.seq.big.good{background:var(--good)}.seq.big.moderate{background:var(--moderate)}.seq.big.high{background:var(--high)}.seq.big.critical{background:var(--critical)}.muted{color:var(--muted);font-size:10px}.drawer-risk{font-size:50px;font-weight:900;margin-top:22px}.drawer-risk.good,.drawer-status.good{color:var(--good)}.drawer-risk.moderate,.drawer-status.moderate{color:var(--moderate)}.drawer-risk.high,.drawer-status.high{color:var(--high)}.drawer-risk.critical,.drawer-status.critical{color:var(--critical)}.drawer-status{font-size:10px;font-weight:900;letter-spacing:.08em}.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}.metric{padding:12px;border:1px solid #15394b;border-radius:8px;background:#061722}.metric span{font-size:8px;color:#89a7b8}.metric b{display:block;font-size:20px;margin-top:4px}.detail-panel,.recommendation{padding:13px;border:1px solid #15394b;border-radius:9px;background:#061722;margin-top:10px}.detail-heading{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;margin-bottom:10px}.sparkbox{height:110px;background:#04121b;border-radius:7px;overflow:hidden}.sparkbox svg{width:100%;height:100%}.driver-list div{font-size:10px;color:#c3d7e1;margin:7px 0}.driver-list span{display:inline-block;width:5px;height:5px;background:#31c6ff;border-radius:50%;margin-right:7px}.recommendation{border-color:#644418;background:rgba(85,53,8,.17);font-size:10px;line-height:1.5}.page-title{display:flex;gap:11px;align-items:center;margin-bottom:17px}.content-grid{display:grid;gap:12px}.content-grid.three{grid-template-columns:repeat(3,1fr)}.content-grid.two{grid-template-columns:1.6fr 1fr}.large-panel{min-height:300px;border:1px solid #12394e;border-radius:10px;background:linear-gradient(180deg,#061b2a,#04131f);padding:17px}.large-panel h3{font-size:13px;margin:0 0 18px}.big-number{font-size:44px;font-weight:900;color:#2a9ced}.big-number small{font-size:14px;color:#93afbe}.big-number.orange{color:var(--high)}.callout{margin-top:18px;padding:12px;border-left:3px solid var(--high);background:rgba(255,133,27,.08);font-size:11px}.sparkbox.tall{height:190px;margin-top:16px}.health-bars div{margin:10px 0}.health-bars span{font-size:9px;display:block;margin-bottom:4px}.health-bars i{height:6px;background:#123042;overflow:hidden}.health-bars b,.health-bars i{border-radius:10px;display:block}.health-bars b{height:100%;background:#2cde70}table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;color:#7fa4b8;font-size:8px;text-transform:uppercase;letter-spacing:.06em}td,th{padding:11px 8px;border-bottom:1px solid #123445}tbody tr{cursor:default}tbody tr:hover{background:#082235}.severity,.table-risk{font-weight:900}.table-risk.good{color:var(--good)}.table-risk.moderate{color:var(--moderate)}.table-risk.high{color:var(--high)}.table-risk.critical{color:var(--critical)}.severity{font-size:8px;padding:4px 7px;border-radius:999px}.severity.high{color:#ff8e87;background:#4a1715}.severity.moderate{color:#ffe06a;background:#4b4010}.placeholder{display:grid;place-items:center;text-align:center}.placeholder h3{margin:8px 0 0}.placeholder p{color:var(--muted);font-size:11px}@media(max-width:1300px){.topbar{grid-template-columns:190px 1fr}.health-box{display:none}.body-grid{grid-template-columns:105px 1fr}.sidebar span{display:none}.sidebar button{justify-content:center}.side-title{font-size:7px;text-align:center}.line-panel{overflow-x:auto}.kpi-grid{grid-template-columns:repeat(3,1fr)}.alarm-strip{grid-template-columns:1fr 1fr}.alarm-strip-title,.view-all{grid-column:span 1}.content-grid.three,.content-grid.two{grid-template-columns:1fr}}@media(max-width:850px){.topbar{grid-template-columns:160px 1fr}.topnav{overflow-x:auto}.body-grid{grid-template-columns:1fr}.sidebar{display:none}.main-head{height:auto;flex-direction:column;margin-bottom:12px}.head-actions{justify-content:space-between}.kpi-grid{grid-template-columns:repeat(2,1fr)}}