:root{--bg: #070b12;--bg-2: #0a0f18;--panel: rgba(255, 255, 255, .045);--panel-2: rgba(255, 255, 255, .06);--panel-solid: #0e1521;--border: rgba(125, 200, 225, .14);--border-strong: rgba(125, 200, 225, .3);--ink: #e6eff6;--ink-soft: #8fa3b8;--ink-faint: #5a6b7e;--line: rgba(150, 180, 210, .08);--line-strong: rgba(150, 180, 210, .18);--accent: #22d3ee;--accent-2: #8b8cf8;--accent-deep: #06b6d4;--pv: #22d3ee;--sp: #34d399;--mv: #fbbf24;--jacket: #fb7185;--good: #34d399;--warn: #fbbf24;--alarm: #fb5e7e;--glow: rgba(34, 211, 238, .45);--radius: 16px;--radius-sm: 11px;--font-display: "Space Grotesk", system-ui, sans-serif;--font-ui: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font-ui);color:var(--ink);background:radial-gradient(900px 520px at 10% -10%,rgba(34,211,238,.12),transparent 60%),radial-gradient(820px 600px at 102% -5%,rgba(139,140,248,.12),transparent 55%),radial-gradient(760px 520px at 50% 118%,rgba(34,211,238,.07),transparent 60%),var(--bg);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(140,175,205,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(140,175,205,.045) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 78%)}.app{position:relative;z-index:1;max-width:1340px;margin:0 auto;padding:26px clamp(16px,3vw,34px) 52px}.panel,.card,.pill,.readout,.metric,.tune-row,.lambda-tune,.speeds,.seg{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}.header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:4px 4px 22px}.header__brand{display:flex;align-items:center;gap:16px;margin-right:auto}.header__mark{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:1px;color:#d6fbff;background:linear-gradient(150deg,#22d3ee47,#8b8cf833);border:1px solid rgba(34,211,238,.45);box-shadow:0 0 26px -4px var(--glow),inset 0 0 16px #22d3ee38}.header__title{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3.2vw,34px);line-height:1.05;margin:0;letter-spacing:.4px;color:#f2f8fc}.header__subtitle{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft);letter-spacing:.6px;text-transform:uppercase}.header__status{display:flex;flex-direction:column;align-items:flex-end;gap:9px}.clock{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);letter-spacing:.5px}.header__controls{display:flex;align-items:center;gap:10px}.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--ink)}.pill__dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent),0 0 12px currentColor;animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.pill--good{color:var(--good)}.pill--warn{color:var(--warn)}.pill--alarm{color:var(--alarm)}.btn{font-family:var(--font-ui);font-size:13px;font-weight:600;border-radius:11px;padding:10px 16px;cursor:pointer;border:1px solid transparent;letter-spacing:.2px;transition:transform .08s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}.btn:active{transform:translateY(1px)}.btn--primary{color:#04141b;background:linear-gradient(180deg,#4be3f2,var(--accent-deep));box-shadow:0 0 22px -6px var(--glow)}.btn--primary:hover{box-shadow:0 0 28px -4px var(--glow)}.btn--ghost{background:var(--panel-2);border-color:var(--border);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn--ghost:hover{border-color:var(--border-strong);box-shadow:0 0 18px -8px var(--glow)}.btn--block{width:100%}.btn:disabled,.seg__btn:disabled{opacity:.35;cursor:not-allowed}.speeds{display:inline-flex;border-radius:11px;padding:3px;gap:2px}.speeds__btn{border:none;background:transparent;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);padding:6px 11px;border-radius:8px;cursor:pointer;transition:color .15s ease,background .15s ease}.speeds__btn.is-active{background:linear-gradient(180deg,#22d3ee4d,#22d3ee29);color:#d6fbff;box-shadow:inset 0 0 10px #22d3ee40}.dashboard{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);grid-template-areas:"trend plant" "metrics plant";gap:18px}.panel{border-radius:var(--radius);box-shadow:inset 0 1px #ffffff0d,0 26px 60px -34px #000000e6;padding:16px;position:relative;overflow:hidden}.panel:before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.5),transparent)}.panel--trend{grid-area:trend;min-height:430px;display:flex}.panel--plant{grid-area:plant;display:flex;flex-direction:column;gap:14px}.panel--metrics{grid-area:metrics}.panel__title{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.3px;margin:2px 2px 13px;color:#eaf3f9}.trend{position:relative;flex:1;display:flex;flex-direction:column}.trend__canvas{width:100%;flex:1;display:block}.trend__legend{display:flex;flex-wrap:wrap;gap:16px;padding:10px 6px 2px;font-size:12px;color:var(--ink-soft)}.legend{display:inline-flex;align-items:center;gap:7px;letter-spacing:.2px}.legend:before{content:"";width:16px;height:3px;border-radius:2px;background:currentColor;box-shadow:0 0 8px currentColor}.legend--pv{color:var(--pv)}.legend--sp{color:var(--sp)}.legend--sp:before{background:repeating-linear-gradient(90deg,var(--sp) 0 5px,transparent 5px 9px);box-shadow:none}.legend--meas{color:var(--ink-faint)}.legend--mv{color:var(--mv)}.legend--tj{color:var(--jacket)}.readouts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.readout{border-radius:var(--radius-sm);padding:11px 13px}.readout__label{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-faint)}.readout__value{display:block;font-family:var(--font-mono);font-weight:600;font-size:27px;margin-top:3px;color:var(--ink)}.readout__value em{font-style:normal;font-size:13px;color:var(--ink-faint);margin-left:3px}.readout--pv .readout__value{color:var(--pv);text-shadow:0 0 20px rgba(34,211,238,.5)}.readout--sp .readout__value{color:var(--sp);text-shadow:0 0 20px rgba(52,211,153,.45)}.readout--mv .readout__value{color:var(--mv);text-shadow:0 0 20px rgba(251,191,36,.45)}.readout--jacket .readout__value{color:var(--jacket);text-shadow:0 0 20px rgba(251,113,133,.4)}.readout--good .readout__value{color:var(--good)}.readout--warn .readout__value{color:var(--warn)}.diagram{width:100%;height:auto;flex:1}.diagram__tag{font-family:var(--font-mono);font-size:10px;fill:var(--ink-soft)}.diagram__tank-label{font-family:var(--font-ui);font-size:10px;letter-spacing:2px;fill:#e6f5fce6;font-weight:600}.tank__shell{fill:#ffffff09;stroke:none}.tank__outline{fill:none;stroke:#7dc8e152;stroke-width:2}.pipe__wall{fill:#ffffff0d;stroke:#7dc8e133;stroke-width:1}.pipe__flow{stroke:#22d3eee6;stroke-width:2;stroke-dasharray:6 10;filter:drop-shadow(0 0 3px rgba(34,211,238,.8));animation:flow .7s linear infinite}@keyframes flow{to{stroke-dashoffset:-16}}.heater{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke .3s ease}.shaft{stroke:#aac8dc73;stroke-width:4;stroke-linecap:round}.stirrer{animation:spin 2.6s linear infinite}.stirrer__blade{stroke:#bedceb99;stroke-width:4;stroke-linecap:round}@keyframes spin{to{transform:rotate(360deg)}}.bubble{animation-name:bubbleRise;animation-iteration-count:infinite;animation-timing-function:ease-out;opacity:0}@keyframes bubbleRise{0%{transform:translateY(0);opacity:0}20%{opacity:var(--bo, .5)}to{transform:translateY(-150px);opacity:0}}.thermo__tube{fill:#ffffff0d;stroke:#7dc8e140;stroke-width:1}.thermo__sp{stroke:var(--sp);stroke-width:2;stroke-dasharray:3 3}.thermo__sp-arrow{fill:var(--sp)}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.metric{border-radius:var(--radius-sm);padding:12px 14px}.metric__label{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint)}.metric__value{font-family:var(--font-mono);font-weight:600;font-size:23px;margin-top:5px;color:var(--accent);text-shadow:0 0 16px rgba(34,211,238,.35)}.metric__unit{font-size:12px;color:var(--ink-faint);margin-left:3px;text-shadow:none}.metric__hint{font-size:10.5px;color:var(--ink-faint);margin-top:5px}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}.card{border-radius:var(--radius);box-shadow:inset 0 1px #ffffff0d,0 26px 60px -34px #000000e6;padding:18px;display:flex;flex-direction:column;gap:14px}.card__title{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.3px;margin:0;color:#eaf3f9}.card__note{font-size:12px;line-height:1.55;color:var(--ink-soft);margin:0}.card__note strong{color:var(--accent);font-weight:600}.slider{display:flex;flex-direction:column;gap:8px}.slider--disabled{opacity:.4}.slider__head{display:flex;justify-content:space-between;align-items:baseline}.slider__label{font-size:13px;font-weight:500;color:var(--ink)}.slider__value{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent);text-shadow:0 0 14px rgba(34,211,238,.4)}.slider__unit{font-style:normal;color:var(--ink-faint);font-size:11px;margin-left:1px;text-shadow:none}.slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill, 50%),rgba(255,255,255,.1) var(--fill, 50%),rgba(255,255,255,.1) 100%);outline:none;cursor:pointer}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#d6fbff;border:2px solid var(--accent);box-shadow:0 0 12px 1px var(--glow)}.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#d6fbff;border:2px solid var(--accent);box-shadow:0 0 12px 1px var(--glow)}.seg{display:grid;grid-template-columns:1fr 1fr;border-radius:11px;padding:3px;gap:3px}.seg__btn{border:none;background:transparent;padding:9px;border-radius:8px;font-weight:600;font-size:13px;color:var(--ink-soft);cursor:pointer;transition:color .15s ease,background .15s ease}.seg__btn.is-active{background:linear-gradient(180deg,#22d3ee47,#22d3ee24);color:#d6fbff;box-shadow:inset 0 0 12px #22d3ee38}.gain-group{display:flex;flex-direction:column;gap:14px}.gain-group+.gain-group{margin-top:2px;border-top:1px dashed var(--border);padding-top:14px}.gain-group__label{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);font-weight:600}.ff-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.ff-row__label{font-size:13px;font-weight:500}.seg--mini{width:128px;flex:none}.seg--mini .seg__btn{padding:6px 8px;font-size:12px}.lambda-tune{display:flex;flex-direction:column;gap:8px;border-radius:var(--radius-sm);padding:12px}.presets,.disturb{display:flex;flex-wrap:wrap;gap:8px}.disturb{flex-direction:column}.disturb .btn{width:100%;text-align:left}.chip{border:1px solid var(--border);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,color .2s ease}.chip:hover{border-color:var(--border-strong);color:#d6fbff;box-shadow:0 0 16px -6px var(--glow)}.tune-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tune-result{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--border);padding-top:12px}.model{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:600}.tune-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:var(--radius-sm);padding:10px 12px}.tune-row__name{font-size:12px;font-weight:600;color:var(--ink)}.tune-row__gains{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-top:2px}.link-toggle{background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;text-align:left;padding:2px}.plant-params{display:flex;flex-direction:column;gap:14px;border-top:1px dashed var(--border);padding-top:12px}.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--ink-faint);letter-spacing:.3px}.footer__sig{font-family:var(--font-display);font-size:13px;color:var(--accent);letter-spacing:.5px}@media (max-width: 1080px){.dashboard{grid-template-columns:1fr;grid-template-areas:"trend" "plant" "metrics"}.controls{grid-template-columns:1fr 1fr}}@media (max-width: 720px){.controls{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.header__brand{margin-right:0}}