:root{--bg:#06131f;--panel:#0b1f2e;--panel2:#0e293a;--line:#19394d;--text:#eef8fb;--muted:#8eabba;--accent:#73df9f;--accent2:#55c6ff;--ok:#44d17a;--warn:#ffc857;--down:#ff5b68;--maint:#57a6ff;--idle:#718799;--radius:18px;--shadow:0 20px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0%,#0f3142 0,transparent 36%),var(--bg);color:var(--text);font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif}button,input{font:inherit}.app-shell{min-height:100vh}.topbar{height:74px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:rgba(5,21,32,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:22px;background:linear-gradient(135deg,#dff922,#37d68e);color:#062a27}.brand-title{font-weight:850}.brand-title span{color:#a6edc1}.brand-subtitle{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-top:2px}.top-actions{display:flex;gap:12px;align-items:center}.sync-pill{display:flex;gap:8px;align-items:center;color:#b7d2dd;font-size:12px;background:#0b2534;border:1px solid #234659;border-radius:999px;padding:8px 12px}.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 6px rgba(68,209,122,.09)}.clock{text-align:right;display:flex;flex-direction:column}.clock strong{font-size:15px}.clock span{font-size:10px;color:var(--muted)}
.facility-tabs{padding:10px 28px;background:#071a27;border-bottom:1px solid var(--line);display:flex;gap:8px;overflow:auto}.facility{border:1px solid transparent;background:transparent;color:#7f9eac;padding:8px 14px;border-radius:9px;font-weight:700;text-decoration:none}.facility.active{background:#123445;color:white;border-color:#2d6077}.facility.disabled{opacity:.42}
main{max-width:1700px;margin:auto;padding:26px 28px 42px}.hero-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:800;color:#72e3a4}.hero-row h1{font-size:clamp(27px,3vw,42px);margin:5px 0 7px}.hero-row p{color:var(--muted);max-width:900px;margin:0;font-size:14px}.health-score{display:flex;align-items:center;gap:12px;background:#0a2231;border:1px solid var(--line);padding:10px 15px;border-radius:15px;min-width:190px}.health-score b,.health-score small{display:block}.health-score small{color:var(--muted);font-size:10px;margin-top:3px}.gauge{--p:calc(var(--score)*1%);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ok) var(--p),#173546 0);position:relative}.gauge:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#0a2231}.gauge span{position:relative;font-size:13px;font-weight:850}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}.kpi{background:linear-gradient(145deg,#0c2636,#091c2a);border:1px solid var(--line);border-radius:15px;padding:15px 16px;position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;right:-18px;top:-25px;width:74px;height:74px;border-radius:50%;background:var(--kpi-color,#36cf78);opacity:.07}.kpi-top{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.kpi-value{font-size:28px;font-weight:850;margin-top:5px}.kpi small{color:#6f93a3}.kpi-chip{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px;background:#153548;color:#b8d7e4}
.card{background:linear-gradient(145deg,rgba(12,36,51,.97),rgba(8,26,39,.99));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px;margin-bottom:14px;gap:12px}.segmented{display:flex;padding:4px;background:#071a27;border-radius:11px;gap:3px}.segmented button{border:0;background:transparent;color:#7f9dab;padding:8px 12px;border-radius:8px;cursor:pointer}.segmented button.active{background:#153a4d;color:#fff}.toolbar-actions{display:flex;gap:8px}.search-box{width:310px;display:flex;align-items:center;gap:7px;border:1px solid #23485b;background:#071c29;border-radius:10px;padding:0 10px;color:#6d95a6}.search-box input{width:100%;border:0;outline:0;background:transparent;color:white;padding:9px 0}.ghost-btn{border:1px solid #2b5367;background:#0b2434;color:#c9e3ed;border-radius:10px;padding:9px 13px;cursor:pointer}
.plant-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.overview-card,.side-panel{padding:17px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.section-head h2{margin:3px 0 0;font-size:18px}.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:#9db4bf}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.down{background:var(--down)}.dot.maint{background:var(--maint)}
.train-grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px}.train-card{position:relative;border:1px solid #1d4255;background:linear-gradient(145deg,#0d293a,#081b29);border-radius:16px;padding:14px;cursor:pointer;transition:.18s transform,.18s border-color,.18s box-shadow;overflow:hidden}.train-card:hover{transform:translateY(-2px);border-color:#3b7188;box-shadow:0 14px 40px rgba(0,0,0,.2)}.train-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--state-color)}.train-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.train-name{font-weight:850}.train-family{font-size:10px;color:var(--muted);margin-top:2px}.status-badge{font-size:9px;font-weight:850;padding:5px 7px;border-radius:999px;background:color-mix(in srgb,var(--state-color) 17%,transparent);color:var(--state-color);border:1px solid color-mix(in srgb,var(--state-color) 35%,transparent)}.train-graphic{height:118px;margin:10px 0 8px;border-radius:12px;background:#071a27;border:1px solid #163a4d;display:flex;align-items:center;justify-content:center;overflow:hidden}.train-graphic svg{width:100%;height:100%}.train-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mini-metric{background:#0a2231;border:1px solid #183d50;border-radius:9px;padding:7px}.mini-metric span{font-size:9px;color:var(--muted);display:block}.mini-metric b{font-size:12px}.train-equipments{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.equip-chip{font-size:9px;color:#bdd7e2;background:#0a2231;border:1px solid #183d50;border-radius:999px;padding:4px 7px}.equip-chip.more{color:#72e3a4}
.alert-list{display:flex;flex-direction:column;gap:8px}.alert-item{border:1px solid #1a4052;background:#0a2231;border-radius:12px;padding:10px;cursor:pointer}.alert-item:hover{border-color:#3c7189}.alert-head{display:flex;justify-content:space-between;gap:8px}.alert-tag{font-weight:800;font-size:12px}.alert-train{font-size:10px;color:var(--muted);margin-top:2px}.alert-note{font-size:10px;color:#a9c1ca;margin-top:7px}.empty{padding:28px 14px;text-align:center;color:var(--muted);font-size:12px}
.modal{position:fixed;inset:0;display:none;z-index:100}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(7px)}.modal-card{position:relative;width:min(1400px,94vw);max-height:92vh;overflow:auto;margin:4vh auto;background:#081a27;border:1px solid #255065;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.45);padding:22px}.modal-close{position:sticky;top:0;float:right;width:38px;height:38px;border-radius:50%;border:1px solid #315d72;background:#0d2a3a;color:white;font-size:23px;cursor:pointer;z-index:2}.modal-title h2{font-size:27px;margin:4px 0}.modal-title p{color:var(--muted);margin:0}.process-board{margin-top:18px;border:1px solid #173c4e;background:radial-gradient(circle at 20% 10%,#103148,transparent 38%),#061722;border-radius:18px;padding:18px;overflow:auto}.process-flow{min-width:1040px;display:grid;grid-template-columns:120px repeat(7,1fr);align-items:center;gap:12px}.flow-label{font-size:10px;color:#7e9eab;text-align:center}.flow-line{height:4px;background:linear-gradient(90deg,#1e708e,#53c5de);border-radius:999px;position:relative}.flow-line:after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid #53c5de;border-top:6px solid transparent;border-bottom:6px solid transparent}.machine{min-height:112px;border:1px solid #21485a;background:#0b2534;border-radius:14px;padding:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;position:relative}.machine:hover{border-color:#4f8096}.machine.alert{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--state-color) 65%,transparent)}.machine-tag{font-size:9px;font-weight:800;text-align:center;margin-top:6px}.machine-type{font-size:8px;color:var(--muted);text-align:center}.icon-svg{width:60px;height:47px}.equipment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.equipment-row{border:1px solid #173e51;background:#0a2231;border-radius:11px;padding:10px;cursor:pointer}.equipment-row b{display:block;font-size:11px}.equipment-row span{font-size:9px;color:var(--muted)}.detail-drawer{margin-top:14px;border:1px solid #1b465a;background:#0b2636;border-radius:14px;padding:14px;display:none}.detail-drawer.show{display:block}.detail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}.detail-metric{background:#071c29;border:1px solid #173c4d;border-radius:10px;padding:9px}.detail-metric span{font-size:9px;color:var(--muted);display:block}.detail-metric b{font-size:11px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);background:#122f3f;border:1px solid #31586b;color:white;border-radius:10px;padding:10px 14px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:200}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1250px){.train-grid{grid-template-columns:repeat(3,1fr)}.plant-grid{grid-template-columns:1fr}.side-panel{order:-1}.alert-list{display:grid;grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){main{padding:18px}.topbar{padding:0 18px}.facility-tabs{padding:9px 18px}.hero-row{align-items:flex-start}.health-score{display:none}.kpi-grid{grid-template-columns:repeat(2,1fr)}.train-grid{grid-template-columns:repeat(2,1fr)}.toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{width:100%}.search-box{width:100%}.legend{display:none}.alert-list{grid-template-columns:1fr 1fr}.equipment-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.sync-pill{display:none}.brand-subtitle{display:none}.hero-row{display:block}.train-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}.segmented{overflow:auto}.segmented button{white-space:nowrap}.alert-list{grid-template-columns:1fr}.modal-card{width:96vw;padding:14px}.equipment-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr 1fr}.clock{display:none}}