:root{--bg:#091016;--surface:#101a22;--surface2:#14212b;--line:#273642;--text:#f2f6f8;--muted:#8fa1ad;--cyan:#19d3c5;--green:#65d66e;--amber:#ffb547;--red:#ff5c61;--steel:#b8c4cb;--mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;--sans:Inter,"Segoe UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% 0,#102d34 0,transparent 30%),var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh}.topbar{height:72px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(9,16,22,.88);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:38px;height:38px;border:1px solid var(--cyan);color:var(--cyan);display:grid;place-items:center;font-weight:800;letter-spacing:-1px;transform:skew(-6deg)}.brand div{display:flex;flex-direction:column}.brand strong{letter-spacing:.08em}.brand small{color:var(--muted);font:10px var(--mono);letter-spacing:.12em;margin-top:2px}.top-status{display:flex;gap:10px;align-items:center;color:var(--muted);font:12px var(--mono)}.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(101,214,110,.1)}.divider{height:14px;width:1px;background:var(--line);margin:0 6px}main{width:min(1440px,calc(100% - 40px));margin:auto;padding:56px 0 40px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:42px}.eyebrow,.kicker{font:11px var(--mono);color:var(--cyan);letter-spacing:.14em;text-transform:uppercase}.hero h1{font-size:clamp(38px,5vw,72px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 18px}.hero h1 span{color:transparent;-webkit-text-stroke:1px #91a4ad}.hero-copy{color:var(--muted);font-size:17px;margin:0;max-width:640px;line-height:1.8}.hero-metrics{display:flex;border:1px solid var(--line);background:rgba(16,26,34,.65);min-width:420px}.hero-metrics div{padding:22px 28px;display:flex;flex-direction:column;min-width:130px}.hero-metrics div+div{border-left:1px solid var(--line)}.hero-metrics strong{font:28px var(--mono);color:var(--cyan)}.hero-metrics span{font-size:11px;color:var(--muted);margin-top:6px}.panel{background:linear-gradient(145deg,rgba(20,33,43,.96),rgba(12,21,28,.96));border:1px solid var(--line);box-shadow:0 18px 55px rgba(0,0,0,.18)}.process-panel{padding:28px;margin-bottom:18px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.panel-heading.compact{margin-bottom:20px}.panel-heading h2{font-size:20px;margin:5px 0 0;letter-spacing:-.02em}.run-state{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--line);font:12px var(--mono);color:var(--muted)}.run-state span{width:8px;height:8px;border-radius:50%;background:var(--muted)}.run-state.ready span{background:var(--green)}.run-state.running{color:var(--cyan);border-color:rgba(25,211,197,.35)}.run-state.running span{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.run-state.alarm{color:var(--red);border-color:rgba(255,92,97,.5)}.run-state.alarm span{background:var(--red);animation:blink .65s infinite}.process-rail{display:grid;grid-template-columns:repeat(9,1fr);position:relative;margin:12px 0 28px}.process-rail:before{content:"";position:absolute;top:25px;left:5%;right:5%;height:2px;background:var(--line)}.station{position:relative;text-align:center;z-index:1;padding:0 5px}.station-node{width:52px;height:52px;border-radius:50%;margin:auto;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;font:700 14px var(--mono);transition:.3s}.station span{display:block;font-size:12px;color:var(--muted);margin-top:9px;white-space:nowrap}.station.done .station-node{background:var(--cyan);border-color:var(--cyan);color:#06201e}.station.active .station-node{border-color:var(--amber);color:var(--amber);box-shadow:0 0 0 7px rgba(255,181,71,.09)}.station.active span{color:var(--text)}.station.alarm .station-node{border-color:var(--red);color:var(--red);box-shadow:0 0 0 7px rgba(255,92,97,.1)}.step-detail{border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px}.detail-index{font:11px var(--mono);color:var(--amber);letter-spacing:.1em}.step-detail h3{margin:7px 0 6px;font-size:19px}.step-detail p{margin:0;color:var(--muted);font-size:13px}.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:10px}.progress-label strong{font:13px var(--mono);color:var(--text)}.progress{height:8px;background:#071016;overflow:hidden}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),#73f2d9);transition:width .1s linear}.control-grid,.monitor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.controls,.plc-panel,.io-panel,.alarm-panel{padding:26px}.mode-row,.speed-row{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding:16px 0}.segmented{display:flex;background:#091218;padding:3px}.segmented button{border:0;background:transparent;color:var(--muted);padding:8px 19px;cursor:pointer}.segmented button.active{background:var(--surface2);color:var(--cyan)}.button-bank{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 18px}.machine-btn{height:86px;border:1px solid var(--line);background:#0c151c;color:var(--text);cursor:pointer;font-size:12px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;transition:.2s}.machine-btn:hover{transform:translateY(-2px);border-color:#50616d}.machine-btn span{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--mono);border:2px solid}.machine-btn.start span{color:var(--green)}.machine-btn.stop span{color:var(--amber)}.machine-btn.reset span{color:#7bb8ff}.machine-btn.estop{background:#45151a;border-color:#7a222b}.machine-btn.estop span{background:var(--red);color:white;border-color:#ff9498;box-shadow:0 4px 0 #8e2128}.machine-btn.estop.active{box-shadow:inset 0 0 0 2px var(--red);animation:alarmGlow 1s infinite}.manual-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.manual-actions button,.text-btn,.logic-actions button,.logic-actions a{border:1px solid var(--line);background:transparent;color:var(--muted);padding:10px 12px;cursor:pointer;text-decoration:none;font:12px var(--sans)}.manual-actions button:hover,.text-btn:hover,.logic-actions button:hover,.logic-actions a:hover{border-color:var(--cyan);color:var(--cyan)}.manual-actions button:disabled{opacity:.35;cursor:not-allowed}.speed-row input{accent-color:var(--cyan);width:45%}.speed-row span{font:14px var(--mono);color:var(--cyan);width:28px}.plc-rack{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:5px;background:#29343a;padding:8px;border-radius:2px;box-shadow:7px 9px 0 #060b0f}.cpu-face,.io-module{min-height:216px;background:linear-gradient(100deg,#a9b3b7,#d2d9da 45%,#9aa6aa);color:#172027;padding:18px;position:relative;border-right:2px solid #707c81}.cpu-label{display:flex;justify-content:space-between;align-items:start}.cpu-label strong{font-size:13px}.cpu-label span{font:10px var(--mono)}.led-list{margin-top:36px;display:grid;gap:9px}.led-list div{display:flex;gap:8px;align-items:center}.led-list i,.mini-leds i{width:7px;height:7px;background:#536066;border:1px solid #374247;border-radius:50%;box-shadow:inset 0 1px 2px #222}.led-list i.green,.mini-leds i.on{background:#35ec72;box-shadow:0 0 8px #35ec72}.led-list i.red{background:#ff3642;box-shadow:0 0 8px #ff3642}.led-list span{font:9px var(--mono)}.port{position:absolute;bottom:18px;width:calc(100% - 36px);background:#3a4448;color:#d8e0e1;padding:8px;font:9px var(--mono);display:flex;justify-content:space-between}.io-module{padding:16px 10px}.io-module strong{font:11px var(--mono);display:block}.io-module>span{font:8px var(--mono)}.mini-leds{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 7px;margin-top:28px}.mini-leds i{display:block;margin:auto}.plc-note{text-align:right;color:var(--muted);font:10px var(--mono);margin:18px 0 0}.cpu-state{font:11px var(--mono);padding:7px 10px;background:rgba(101,214,110,.12);color:var(--green);border:1px solid rgba(101,214,110,.25)}.cpu-state.stop{color:var(--amber);background:rgba(255,181,71,.1);border-color:rgba(255,181,71,.3)}.cpu-state.error{color:var(--red);background:rgba(255,92,97,.1);border-color:rgba(255,92,97,.3)}.scan-badge{font:10px var(--mono);color:var(--muted)}.io-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.io-columns h3{font-size:12px;color:var(--muted);font-weight:500;margin:0 0 12px}.signal-list{display:grid;gap:7px}.signal{display:grid;grid-template-columns:42px 12px 1fr auto;align-items:center;gap:8px;padding:7px 9px;background:#0b141a;font:11px var(--mono)}.signal .address{color:#6f828e}.signal i{width:7px;height:7px;border-radius:50%;background:#36464f}.signal.on i{background:var(--green);box-shadow:0 0 7px var(--green)}.signal strong{font-weight:500;color:#c2cdd3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.signal b{font-weight:400;color:#52646f}.signal.on b{color:var(--green)}.alarm-summary{display:flex;align-items:center;gap:14px;padding:14px;background:rgba(101,214,110,.07);border-left:3px solid var(--green);margin-bottom:14px}.alarm-summary>span{color:var(--green);font-size:20px}.alarm-summary div{display:flex;flex-direction:column;gap:3px}.alarm-summary strong{font-size:13px}.alarm-summary small{font-size:11px;color:var(--muted)}.alarm-summary.bad{background:rgba(255,92,97,.08);border-color:var(--red)}.alarm-summary.bad>span{color:var(--red)}.event-log{height:214px;overflow:auto;border-top:1px solid var(--line)}.event{display:grid;grid-template-columns:72px 62px 1fr;gap:10px;padding:10px 4px;border-bottom:1px solid rgba(39,54,66,.6);font:11px var(--mono)}.event time{color:#667986}.event em{font-style:normal;color:var(--cyan)}.event em.warn{color:var(--red)}.event span{color:#b3c0c6}.logic-panel{padding:28px}.logic-actions{display:flex;align-items:center;gap:8px}.logic-actions .tab.active{border-color:var(--cyan);color:var(--cyan)}.logic-actions a{margin-left:10px;color:var(--cyan)}.logic-view{display:none}.logic-view.active{display:block}.rung{height:62px;border-top:1px solid #35505b;display:grid;grid-template-columns:3px 1fr 3px;align-items:center}.rung:last-child{border-bottom:1px solid #35505b}.rung .rail{height:100%;background:#59717b}.rung code{color:#bcebe6;font:13px var(--mono);padding:0 20px;white-space:nowrap;overflow:auto}.logic-panel pre{background:#071016;padding:24px;overflow:auto;color:#bcebe6;font:13px/1.75 var(--mono);border-left:3px solid var(--cyan);margin:0}footer{width:min(1440px,calc(100% - 40px));margin:auto;padding:20px 0 38px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#627580;font-size:11px}@keyframes blink{50%{opacity:.25}}@keyframes alarmGlow{50%{box-shadow:inset 0 0 0 2px var(--red),0 0 20px rgba(255,92,97,.18)}}@media(max-width:980px){.hero{align-items:flex-start;flex-direction:column}.hero-metrics{min-width:0;width:100%}.hero-metrics div{flex:1;min-width:0}.process-rail{grid-template-columns:repeat(5,1fr);row-gap:25px}.process-rail:before{display:none}.control-grid,.monitor-grid{grid-template-columns:1fr}.step-detail{grid-template-columns:1fr}.logic-actions{flex-wrap:wrap}}@media(max-width:640px){main{width:min(100% - 24px,1440px);padding-top:34px}.topbar{padding:0 16px}.top-status .divider,.top-status #clock{display:none}.hero h1{font-size:38px}.hero-metrics div{padding:16px 10px;text-align:center}.hero-metrics strong{font-size:23px}.process-panel,.controls,.plc-panel,.io-panel,.alarm-panel,.logic-panel{padding:18px}.process-rail{grid-template-columns:repeat(3,1fr)}.station span{white-space:normal}.button-bank{grid-template-columns:repeat(2,1fr)}.io-columns{grid-template-columns:1fr}.plc-rack{grid-template-columns:1.4fr .8fr .8fr}.cpu-face,.io-module{min-height:190px;padding:12px}.logic-actions{align-items:stretch}.logic-actions>*{flex:1;text-align:center}.logic-actions a{margin-left:0}.panel-heading{align-items:flex-start;flex-direction:column}footer{flex-direction:column;gap:8px}}