:root{--ink: #1a1a1a;--ink-soft: #2a2a2a;--amber: #ef9f27;--amber-dark: #ba7517;--ok: #3fb27f;--warn: #ef9f27;--danger: #e2533b;--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sans: "Inter", "Helvetica Neue", system-ui, sans-serif;--radius: 8px;--radius-sm: 4px;--bg: #f8f9fa;--panel: #ffffff;--panel-2: #f3f4f6;--line: #e5e7eb;--text: #1a1a1a;--text-dim: #6f6e67}[data-theme=light]{--bg: #f8f9fa;--panel: #ffffff;--panel-2: #f3f4f6;--line: #e5e7eb;--text: #1a1a1a;--text-dim: #6f6e67}[data-theme=dark]{--bg: #14161a;--panel: #1d2026;--panel-2: #23272f;--line: #313742;--text: #e6e8ec;--text-dim: #9aa0ab}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55}.wrap{max-width:1180px;margin:0 auto;padding:clamp(20px,5vw,40px)}.topbar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding-top:0;padding-bottom:0}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:28px;height:3px;background:var(--amber);border-radius:2px}.brand-name{font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--text)}.topbar-controls{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px}.hero{background:var(--ink);color:#d8d7d2;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px}.hero-inner{position:relative;max-width:760px;padding-top:clamp(32px,6vw,64px);padding-bottom:clamp(32px,6vw,64px)}.hero h1{color:#fff;font-size:clamp(28px,4.5vw,46px);margin:14px 0 16px}.hero-sub{font-size:clamp(15px,2vw,18px);color:#b6b5b0;max-width:620px;margin:0;line-height:1.55}.hero .eyebrow,.amber{color:var(--amber)}.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:8px}.eyebrow:before{content:"";width:28px;height:3px;background:var(--amber)}h1{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.015em;line-height:1.08;margin:12px 0 8px}.lead{color:var(--text-dim);max-width:60ch;margin:0}.tf-status{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:12px}.dot{display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.1em}.dot:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--text-dim)}.dot.live:before{background:var(--ok);box-shadow:0 0 0 3px #3fb27f33}.dot.offline:before{background:var(--danger)}.dot.connecting:before{background:var(--warn)}.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}.lang-toggle button{background:transparent;color:var(--text-dim);border:0;padding:5px 10px;font-family:var(--mono);font-size:12px;cursor:pointer}.lang-toggle button.active{background:var(--amber);color:var(--ink)}.tf-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;margin-top:28px}.tf-col{display:flex;flex-direction:column;gap:20px}@media (max-width: 880px){.tf-grid{grid-template-columns:1fr}}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.card.accent{border-top:3px solid var(--amber)}.card h2{font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);margin:0 0 14px}.hmi{display:flex;flex-direction:column;align-items:center}.phase-badge{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--amber);border-radius:var(--radius-sm);padding:4px 12px;margin-bottom:6px}.opcua-note{color:var(--text-dim);font-size:12.5px;text-align:center;margin:10px 0 0;max-width:46ch}.opcua-note code{font-family:var(--mono);color:var(--amber)}.control-row{margin-bottom:18px}.control-row label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.control-row label b{font-family:var(--mono);color:var(--amber)}input[type=range]{width:100%;accent-color:var(--amber)}input[type=range]:disabled{opacity:.4}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.btn{font-family:var(--sans);font-weight:600;font-size:14px;border-radius:var(--radius-sm);padding:8px 14px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer}.btn-primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}.btn-primary:hover{background:var(--amber-dark);border-color:var(--amber-dark)}.btn:hover{border-color:var(--amber)}.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}.seg button{background:transparent;color:var(--text-dim);border:0;padding:7px 14px;cursor:pointer;font-size:13px;font-family:var(--sans)}.seg button.active{background:var(--amber);color:var(--ink)}.fault-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.fault-btn{text-align:left;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);color:var(--text);cursor:pointer}.fault-btn.active{border-color:var(--danger);background:#e2533b24;color:var(--danger);font-weight:600}.alarm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.alarm{display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 12px;border-radius:var(--radius-sm);border-left:3px solid var(--line);background:var(--panel-2)}.alarm.warning{border-left-color:var(--warn)}.alarm.critical{border-left-color:var(--danger);background:#e2533b1a}.alarm .sev{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.alarm-empty{color:var(--text-dim);font-size:14px}.tf-footer{margin-top:28px;color:var(--text-dim);font-size:12.5px;font-family:var(--mono)}.tf-footer a{color:var(--amber);text-decoration:none}.icon-btn{background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text-dim);padding:5px 10px;cursor:pointer;font-family:var(--mono);font-size:12px;line-height:1}.icon-btn:hover{border-color:var(--amber);color:var(--text)}.faceplates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}@media (max-width: 540px){.faceplates{grid-template-columns:1fr}}.faceplate{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;background:var(--panel-2)}.faceplate h4{margin:0 0 8px;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.fp-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin:3px 0}.fp-row .lbl{color:var(--text-dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em}.fp-row .val{font-family:var(--mono);font-weight:600}.fp-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:8px}.fp-bar>span{display:block;height:100%;background:var(--amber);transition:width .25s linear}.batch-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin-top:16px}.batch-stat{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);padding:8px 10px;display:flex;flex-direction:column;gap:3px}.batch-stat .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.batch-stat .val{font-family:var(--mono);font-weight:600;font-size:15px}.batch-stat .val.quality.ok{color:var(--ok)}.batch-stat .val.quality.bad{color:var(--danger)}.process-nav{position:sticky;top:60px;z-index:49;background:var(--panel);border-bottom:1px solid var(--line)}.process-nav-inner{display:flex;gap:2px;overflow-x:auto;padding-top:0;padding-bottom:0}.process-link{position:relative;background:transparent;border:0;color:var(--text-dim);font-family:var(--sans);font-weight:600;font-size:14px;padding:13px 16px;cursor:pointer;white-space:nowrap}.process-link:hover,.process-link.active{color:var(--text)}.process-link.active:after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;background:var(--amber)}.generic-view{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.value-tile{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.vt-label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.vt-value{font-family:var(--mono);font-weight:600;font-size:22px}.vt-unit{font-size:13px;color:var(--text-dim);font-weight:400}.vt-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.vt-bar>span{display:block;height:100%;background:var(--amber);transition:width .25s linear}.vt-pill{align-self:flex-start;font-family:var(--mono);font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}.vt-pill.on{background:#3fb27f2e;color:var(--ok)}.vt-pill.off{background:var(--line);color:var(--text-dim)}.vt-badge{align-self:flex-start;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);background:var(--amber);padding:3px 10px;border-radius:var(--radius-sm)}.control-note{color:var(--text-dim);font-size:13px;margin:4px 0 0}.batch-info-card{margin-top:16px}.batch-info-head{display:flex;align-items:baseline;justify-content:space-between}.bi-title{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}.bi-id{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--amber)}.batch-info-card .batch-info{margin-top:8px}.pid-row{margin-bottom:14px}.pid-row:last-child{margin-bottom:0}.pid-loop{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:6px}.pid-fields{display:flex;gap:10px}.pid-field{display:flex;flex-direction:column;gap:3px;flex:1;font-size:11px;font-family:var(--mono);color:var(--text-dim)}.pid-field input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-family:var(--mono);font-size:14px;padding:6px 8px}.pid-field input:focus{outline:none;border-color:var(--amber)}@keyframes tf-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tf-belt{0%{transform:translate(0)}to{transform:translate(60px)}}@keyframes tf-flow{to{stroke-dashoffset:-24}}.cv-bottles{animation-name:tf-belt;animation-timing-function:linear;animation-iteration-count:infinite}.flow-pipe{stroke-dasharray:8 6;animation:tf-flow .8s linear infinite}@keyframes tf-press{0%,to{transform:translateY(0)}45%,55%{transform:translateY(12px)}}.capper-head{animation:tf-press 2.2s ease-in-out infinite}.faceplates.fp-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}