:root{color-scheme:dark;--bg: #0b0f17;--bg-2: #0f1520;--panel: #131a26;--panel-2: #182131;--line: #243044;--line-soft: #1c2636;--text: #eef2f8;--text-2: #b4bfd0;--text-3: #7d8aa0;--accent: #2f7fe0;--series-feed: #3987e5;--series-product: #199e70;--target: #e8e6df;--good: #0ca30c;--good-bg: #78c23a;--warning: #fab219;--critical: #d03b3b;--critical-bg: #f8b4b4;--planned-bg: #2a9be8;--unknown: #8a94a6;--card-feed: linear-gradient(160deg, #4f46e5 0%, #3730a3 100%);--card-product: linear-gradient(160deg, #22a34a 0%, #15803d 100%);--card-module: linear-gradient(160deg, #4f5bd5 0%, #3b3fb0 100%);--card-grey: linear-gradient(160deg, #c9d1dc 0%, #a9b4c3 100%);--card-slate: linear-gradient(160deg, #56657a 0%, #3d495b 100%);--card-blue: linear-gradient(160deg, #2b7de9 0%, #1d5fc4 100%);--card-teal: linear-gradient(160deg, #22c3d9 0%, #0e9fb6 100%);--radius: 10px;--font: "Inter", "Segoe UI Variable", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;--mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}button,select,input{font:inherit;color:inherit}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:58px;padding:0 18px;border-bottom:1px solid var(--line-soft);background:#0a0e15;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:14px;min-width:0}.logo{display:flex;align-items:center;gap:9px}.logo img{display:block;user-select:none}.logo-lion{height:38px;width:auto}.logo-word{height:19px;width:auto;margin-top:3px}.title{font-size:19px;font-weight:700;letter-spacing:.01em;white-space:nowrap}.title small{font-weight:500;color:var(--text-3);font-size:12px;margin-left:10px}.controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}.seg button{border:0;background:transparent;padding:6px 12px;border-radius:6px;cursor:pointer;color:var(--text-2);white-space:nowrap;transition:background .15s,color .15s}.seg button:hover{color:var(--text);background:#1d2738}.seg button.on{background:var(--accent);color:#fff;box-shadow:0 1px 6px #2f7fe059}.seg.small button{padding:5px 9px;font-size:12px}.select{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer}.select:focus-visible,.seg button:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.custom-range{display:inline-flex;gap:6px;align-items:center;color:var(--text-3)}.custom-range input{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 8px;color-scheme:dark}.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;color:var(--text-2)}.icon-btn:hover{color:var(--text);background:#1d2738}.icon-btn.spin svg{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.main{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:16px;padding:16px;align-items:start}.left{display:flex;flex-direction:column;gap:16px;min-width:0}.right{display:flex;flex-direction:column;gap:12px}.stage{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);background:#05070b;box-shadow:0 10px 40px #00000059}.stage-badge{position:absolute;right:14px;top:12px;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:#080c14c7;border:1px solid rgba(255,255,255,.12);font-size:11.5px;color:var(--text-2);backdrop-filter:blur(6px)}.chip b{color:var(--text);font-weight:600}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}.dot.online{background:#22c55e;box-shadow:0 0 0 2px #22c55e40,0 0 8px #22c55e}.dot.offline{background:#ef4444;box-shadow:0 0 0 2px #ef444440,0 0 8px #ef4444;animation:blink 1.2s steps(2,start) infinite}.dot.unknown{background:var(--unknown)}@keyframes blink{to{opacity:.35}}.loading-veil{position:absolute;inset:0;display:grid;place-items:center;z-index:8;background:#05070b73;backdrop-filter:blur(2px);font-weight:600;color:var(--text-2)}.error-bar{background:#3a1517;border:1px solid #7f1d1d;color:#fecaca;padding:10px 14px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:12px}.error-bar button{background:#7f1d1d;border:0;padding:6px 12px;border-radius:7px;cursor:pointer}.main.fit{height:calc(100vh - 58px);align-items:stretch}.main.fit .left{min-height:0}.main.fit .stage{flex:1;min-height:0;container-type:size;display:grid;place-items:center}.main.fit .photo{width:min(100cqw,100cqh * 2119 / 742)}.main.fit .eng{width:min(100cqw,100cqh * 1600 / 570)}.main.fit .right{overflow-y:auto;min-height:0}.main.fit .stage:before{content:"";position:absolute;inset:-40px;z-index:0;pointer-events:none}.main.fit .stage-photo:before{background:url(../plant-photo.jpg) center / cover no-repeat;filter:blur(22px) brightness(.42) saturate(1.1)}.main.fit .stage-eng:before{background:linear-gradient(180deg,#050a16,#0d1b33 55%,#141416)}.main.fit .photo,.main.fit .eng{position:relative;z-index:1;box-shadow:0 0 40px #0000008c}.main.fit+.footer{display:none}.photo{position:relative;width:100%;aspect-ratio:2119 / 742;container-type:inline-size}.photo img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}.pbox{position:absolute;display:flex;align-items:center;justify-content:center;gap:.3em;background:#fff;color:#0b1a3a;border-radius:.25cqw;font-weight:700;font-size:max(9px,.66cqw);line-height:1;white-space:nowrap;cursor:default;padding:0 .2em;transition:transform .15s,box-shadow .15s}.pbox:hover{transform:scale(1.06);box-shadow:0 0 0 2px #60a5fa,0 6px 18px #00000080;z-index:3}.pbox .u{font-weight:500;color:#475569;font-size:.85em}.pbox.warn{background:#fff7e0;color:#8a5300}.pbox .warn-ico{color:#c77700}.pbox .val-in{display:inline-block;animation:valIn .5s ease-out}@keyframes valIn{0%{opacity:0;transform:translateY(40%)}}.pdot{position:absolute;transform:translate(-50%,-50%);width:max(5px,.36cqw);height:max(5px,.36cqw)}.pdot.online,.pdot.offline,.pdot.unknown{animation:none}.pdot.online{box-shadow:0 0 0 max(2px,.13cqw) #22c55e52,0 0 max(5px,.35cqw) #22c55ebf}.pdot.offline{box-shadow:0 0 0 max(2px,.13cqw) #ef444452,0 0 max(5px,.35cqw) #ef4444bf}.flowpin{position:absolute;transform:translate(-50%,-50%);width:max(10px,.8cqw);height:max(10px,.8cqw);border-radius:50%;pointer-events:none}.flowpin:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #38bdf8;animation:ping 2.2s ease-out infinite}.flowpin.off:after{border-color:#ef4444;animation:none;opacity:.7}@keyframes ping{0%{transform:scale(.6);opacity:.9}to{transform:scale(2.4);opacity:0}}.tip{position:fixed;z-index:100;pointer-events:none;min-width:200px;max-width:300px;background:#0d121cf7;border:1px solid #2c3a52;border-radius:10px;padding:10px 12px;box-shadow:0 12px 30px #00000080;font-size:12px;color:var(--text-2)}.tip h4{margin:0 0 6px;font-size:13px;color:var(--text);display:flex;align-items:center;gap:6px}.tip .row{display:flex;justify-content:space-between;gap:14px;padding:2px 0}.tip .row b{color:var(--text);font-weight:600}.tip .formula{margin-top:6px;padding-top:6px;border-top:1px solid #263248;color:var(--text-3);font-family:var(--mono);font-size:11px}.tip .warnline{margin-top:6px;color:#fcd34d}.tip .sw{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.card{border-radius:var(--radius);padding:10px 12px 11px;color:#fff;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px #ffffff1f}.card.grey{color:#1b2433}.card-h{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px;padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid rgba(255,255,255,.22)}.card.grey .card-h{border-color:#00000026}.card-h svg{opacity:.9;flex:none}.card-h .tag{margin-left:auto;font-size:10.5px;font-weight:600;opacity:.8;font-family:var(--mono)}.cell-grid{display:grid;grid-template-columns:1fr 1fr;row-gap:8px}.cell{padding-right:8px;min-width:0}.cell:nth-child(2n){border-left:1px solid rgba(255,255,255,.28);padding-left:9px}.card.grey .cell:nth-child(2n){border-color:#0000002e}.cell .v{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:4px}.cell .l{font-size:10.5px;opacity:.78;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell .v .warn-ico{color:#fde68a;font-size:13px}.card.grey .cell .v .warn-ico{color:#a16207}.delta-up{color:#bbf7d0}.delta-down{color:#fecaca}.card.grey .delta-up{color:#166534}.card.grey .delta-down{color:#991b1b}.hero{border-radius:var(--radius);padding:12px;background:var(--card-teal);color:#04252c;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.25);min-height:148px}.hero .card-h{border-color:#04252c33;color:#04323b}.hero .big{font-size:40px;font-weight:800;letter-spacing:-.02em;text-align:center;margin-top:auto;color:#022a31}.hero .cap{text-align:center;font-size:11.5px;opacity:.85;font-family:var(--mono)}.hero .sub{display:flex;justify-content:center;gap:12px;margin:8px 0 auto;font-size:12px;font-weight:600}.hero .sub span{background:#ffffff59;padding:2px 8px;border-radius:999px}.panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:12px 14px}.panel-h{font-size:13.5px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:8px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#ffffff59}.panel-h .aside{margin-left:auto;text-decoration:none;font-weight:500;color:var(--text-3);font-size:11.5px}.info{display:grid;grid-template-columns:auto 1fr;row-gap:8px;column-gap:10px;font-size:12.5px}.info dt{color:var(--text-3)}.info dd{margin:0;text-align:right;font-weight:600;display:flex;justify-content:flex-end;align-items:center;gap:6px}.info dd.warn{color:#fcd34d}.km{width:100%;border-collapse:separate;border-spacing:0 6px}.km th{color:var(--text-3);font-weight:500;font-size:11.5px;text-align:center;padding-bottom:2px}.km th:first-child{text-align:left}.km td{padding:0}.km td:first-child{font-weight:600;font-size:12.5px}.km td:first-child small{display:block;color:var(--text-3);font-weight:400;font-size:10.5px;font-family:var(--mono)}.pill{display:flex;align-items:center;justify-content:center;gap:4px;margin-left:8px;height:26px;border-radius:5px;font-weight:700;font-size:13px;min-width:92px}.pill.good{background:var(--good-bg);color:#0d2a06}.pill.bad{background:var(--critical-bg);color:#7f1212}.pill.plan{background:var(--planned-bg);color:#04203a}.pill.none{background:#2a3446;color:var(--text-2)}.pill.warn{background:#fde68a;color:#6b4300}.pill small{font-size:10px;font-weight:600}.strip{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.2fr);gap:12px}.strip .panel{min-height:236px;display:flex;flex-direction:column}.legend{display:flex;gap:12px;font-size:11.5px;color:var(--text-2);text-decoration:none;margin-left:auto;font-weight:500}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}.legend i.line{height:2px;border-radius:1px;vertical-align:3px;width:14px}.chart{flex:1;min-height:170px;position:relative}.chart svg{display:block;width:100%;height:100%;overflow:visible}.chart .axis text{fill:var(--text-3);font-size:10px}.chart .grid line{stroke:#1f2a3c;stroke-width:1}.chart .hit{fill:transparent;cursor:crosshair}.chart .hit:hover{fill:#ffffff0a}.shift-row{display:grid;grid-template-columns:74px 1fr 1fr;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:12px}.shift-row:last-child{border-bottom:0}.shift-row .k{color:var(--text-3)}.shift-row .h{color:var(--text-2);font-weight:600;display:flex;align-items:center;gap:6px}.shift-row .n{font-weight:700;font-size:13.5px}.bar-mini{height:4px;background:#222d40;border-radius:3px;margin-top:4px;overflow:hidden}.bar-mini>span{display:block;height:100%;border-radius:3px;background:var(--series-feed);transition:width .6s}.outlook .big{font-size:26px;font-weight:800;letter-spacing:-.01em}.outlook .muted{color:var(--text-3);font-size:11.5px}.progress{position:relative;height:12px;border-radius:6px;background:#222d40;margin:12px 0 18px}.progress .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--series-product);transition:width .8s}.progress .proj{position:absolute;top:0;bottom:0;border-radius:6px;background:repeating-linear-gradient(135deg,#199e708c 0 4px,#199e702e 4px 8px)}.progress .goal{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--target)}.progress .goal:after{content:attr(data-l);position:absolute;top:18px;left:50%;transform:translate(-50%);font-size:10px;color:var(--text-3);white-space:nowrap}.kv{display:grid;grid-template-columns:1fr auto;row-gap:5px;font-size:12px}.kv span:nth-child(odd){color:var(--text-3)}.kv span:nth-child(2n){text-align:right;font-weight:600}.dens{display:grid;grid-template-columns:1fr 70px auto;align-items:center;gap:4px 10px;padding:5px 0;border-bottom:1px solid var(--line-soft)}.dens:last-child{border-bottom:0}.dens .nm{font-size:12px;font-weight:600}.dens .nm small{display:block;font-weight:400;color:var(--text-3);font-size:10.5px}.dens .val{text-align:right;font-weight:700;font-size:14px}.dens svg{width:70px;height:26px;display:block}.empty{color:var(--text-3);font-size:12px;margin:auto;text-align:center}.footer{color:var(--text-3);font-size:11px;text-align:right;padding:0 16px 14px}.belts{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}.belt-tile{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:8px;padding:8px 9px;cursor:default;transition:border-color .15s}.belt-tile:hover{border-color:#3b5b8a}.belt-tile.warn{border-color:#7a5a12}.belt-tile .bt-h{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px}.belt-tile .bt-n{color:var(--text-3);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.belt-tile .bt-v{font-size:16px;font-weight:800;margin-top:6px;white-space:nowrap}.belt-tile.warn .bt-v{color:#fcd34d}.belt-tile .bt-v small{font-size:11px;font-weight:500;color:var(--text-3)}.belt-tile .bt-l{color:var(--text-2);font-size:10.5px;margin-bottom:4px}.belt-tile svg{width:100%;height:26px;display:block}@media (max-width: 1700px){.belts{grid-template-columns:repeat(5,minmax(0,1fr))}}.eng{position:relative;width:100%;aspect-ratio:1600 / 570}.eng svg{position:absolute;inset:0;width:100%;height:100%;display:block}.eng text{font-family:var(--font)}.belt-surface{stroke-dasharray:6 10;animation:beltRun var(--dur, 1s) linear infinite}.belt-load{animation:loadRun var(--dur, 1s) linear infinite}.stopped .belt-surface,.stopped .belt-load,.stopped .fall,.stopped .vib{animation-play-state:paused!important}@keyframes beltRun{to{stroke-dashoffset:-16}}@keyframes loadRun{to{transform:translate(var(--tile, 48px))}}.fall{animation:fall var(--fdur, .7s) linear infinite}@keyframes fall{0%{transform:translateY(0);opacity:1}to{transform:translateY(var(--drop, 30px));opacity:.2}}.pipe-flow{stroke-dasharray:10 14;animation:pipeRun 1.1s linear infinite}@keyframes pipeRun{to{stroke-dashoffset:-24}}.vib{animation:vib .14s linear infinite alternate;transform-box:fill-box}@keyframes vib{0%{transform:translate(0)}to{transform:translate(1.2px,-.8px)}}.rotor{animation:rot 3s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes rot{to{transform:rotate(360deg)}}.swirl{animation:rot 1.4s linear infinite;transform-box:fill-box;transform-origin:center}.twinkle{animation:tw 3s ease-in-out infinite alternate}@keyframes tw{0%{opacity:.25}to{opacity:1}}.glow{animation:glow 2.4s ease-in-out infinite alternate}@keyframes glow{0%{opacity:.55}to{opacity:1}}.truck{animation:truckDrive 16s ease-in-out infinite}.truck-bed{transform-box:fill-box;transform-origin:100% 100%;animation:truckTip 16s ease-in-out infinite}.truck-dump{animation:dump 16s linear infinite}@keyframes truckDrive{0%{transform:translate(-180px)}22%{transform:translate(0)}70%{transform:translate(0)}to{transform:translate(-180px)}}@keyframes truckTip{0%,28%{transform:rotate(0)}40%,56%{transform:rotate(32deg)}66%,to{transform:rotate(0)}}@keyframes dump{0%,36%{opacity:0}40%,58%{opacity:1}62%,to{opacity:0}}.lbl-card{cursor:default}.spiral-flow{stroke-dasharray:3 8;animation:pipeRun 1.6s linear infinite}.rake{animation:rot 9s linear infinite;transform-box:fill-box;transform-origin:center}.stopped .rake,.stopped .spiral-flow{animation-play-state:paused}.eq-small{fill:#94a3b8;font-size:8.5px;font-weight:700;letter-spacing:.08em;pointer-events:none}.lbl-card:hover rect.bg{stroke:#60a5fa}.eq-name{fill:#c7d2e3;font-size:12px;font-weight:600;letter-spacing:.06em}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:0s!important;animation-iteration-count:1!important}}@media (max-width: 1500px){.main{grid-template-columns:minmax(0,1fr) 400px}.strip{grid-template-columns:1fr 1fr}}@media (max-width: 1150px){.main{grid-template-columns:1fr}.topbar{grid-template-columns:1fr;height:auto;padding:10px 14px}.controls{justify-content:flex-start}}