*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root,[data-theme=dark]{--bg-0: #0a0c10;--bg-1: #0f1218;--bg-2: #151922;--bg-3: #1c2130;--bg-4: #232a3a;--border: rgba(255,255,255,.06);--border-md: rgba(255,255,255,.1);--border-bright: rgba(255,255,255,.18);--cyan: #00D4FF;--cyan-d: #0099BB;--cyan-glow: rgba(0,212,255,.15);--amber: #F59E0B;--amber-d: #B45309;--amber-glow: rgba(245,158,11,.15);--red: #EF4444;--red-d: #991B1B;--red-glow: rgba(239,68,68,.15);--green: #22C55E;--green-d: #15803D;--green-glow: rgba(34,197,94,.15);--muted: #4a5568;--text-dim: #6b7280;--text-mid: #9ca3af;--text-hi: #e5e7eb;--text-bright: #f9fafb;--chart-cyan: #00D4FF;--chart-amber: #F59E0B;--chart-green: #22C55E;--chart-track: #1c2130}[data-theme=light]{--bg-0: #f0f2f5;--bg-1: #ffffff;--bg-2: #f7f8fa;--bg-3: #eef0f4;--bg-4: #e4e7ed;--border: rgba(0,0,0,.07);--border-md: rgba(0,0,0,.11);--border-bright: rgba(0,0,0,.2);--cyan: #0099BB;--cyan-d: #007a96;--cyan-glow: rgba(0,153,187,.1);--amber: #B45309;--amber-d: #92400e;--amber-glow: rgba(180,83,9,.1);--red: #DC2626;--red-d: #991B1B;--red-glow: rgba(220,38,38,.1);--green: #16A34A;--green-d: #15803D;--green-glow: rgba(22,163,74,.1);--muted: #94a3b8;--text-dim: #64748b;--text-mid: #475569;--text-hi: #1e293b;--text-bright: #0f172a;--chart-cyan: #0099BB;--chart-amber: #B45309;--chart-green: #16A34A;--chart-track: #e4e7ed}html,body,#root{height:100%;background:var(--bg-0);color:var(--text-hi);font-family:Barlow,sans-serif;font-size:14px;line-height:1.5;overflow-x:hidden}html{transition:background .25s ease}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:2px}.app{display:grid;grid-template-rows:52px 1fr;grid-template-columns:260px 1fr;min-height:100vh}.topbar{grid-column:1 / -1;background:var(--bg-1);border-bottom:1px solid var(--border-md);display:flex;align-items:center;padding:0 20px;gap:16px;position:sticky;top:0;z-index:100;transition:background .25s ease,border-color .25s ease}.topbar-logo{font-family:Barlow Condensed,sans-serif;font-size:18px;font-weight:700;letter-spacing:.05em;color:var(--text-bright);display:flex;align-items:center;gap:8px}.topbar-divider{width:1px;height:24px;background:var(--border-md)}.topbar-label{font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}.topbar-machine{font-family:Barlow Condensed,sans-serif;font-size:16px;font-weight:600;color:var(--text-bright);letter-spacing:.03em}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}.topbar-clock{font-family:JetBrains Mono,monospace;font-size:13px;color:var(--text-mid)}.conn-badge{display:flex;align-items:center;gap:5px;font-family:Barlow Condensed,sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px;border:1px solid var(--border-md)}.conn-badge.live{background:var(--green-glow);border-color:#22c55e4d;color:var(--green)}.conn-badge.offline{background:var(--red-glow);border-color:#ef44444d;color:var(--red)}.conn-pip{width:5px;height:5px;border-radius:50%;background:currentColor}.conn-badge.live .conn-pip{animation:pulse-pip 2s ease-in-out infinite}@keyframes pulse-pip{0%,to{opacity:1}50%{opacity:.4}}.status-pill{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:background .3s ease,border-color .3s ease,color .3s ease}.status-pip{width:6px;height:6px;border-radius:50%;background:currentColor}.theme-toggle{display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:20px;border:1px solid var(--border-md);background:var(--bg-3);color:var(--text-mid);font-family:Barlow Condensed,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease;white-space:nowrap}.theme-toggle:hover{background:var(--bg-4);color:var(--text-hi)}.toggle-track{width:28px;height:15px;border-radius:8px;background:var(--bg-4);border:1px solid var(--border-bright);position:relative;transition:background .25s ease;flex-shrink:0}[data-theme=light] .toggle-track{background:var(--cyan);border-color:var(--cyan)}.toggle-thumb{width:11px;height:11px;border-radius:50%;background:var(--text-dim);position:absolute;top:1px;left:1px;transition:transform .25s ease,background .25s ease}[data-theme=light] .toggle-thumb{transform:translate(13px);background:#fff}.sidebar{background:var(--bg-1);border-right:1px solid var(--border);padding:20px 16px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;transition:background .25s ease,border-color .25s ease}.sidebar-section-label{font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:4px}.tower-light{display:flex;flex-direction:column;align-items:center;gap:0;background:var(--bg-2);border:1px solid var(--border-md);border-radius:12px;padding:20px 16px;transition:background .25s ease}.tower-pole{width:14px;background:var(--bg-4);border-radius:3px 3px 0 0;min-height:8px}.tower-base{width:50px;height:12px;background:var(--bg-4);border-radius:0 0 6px 6px}.tower-lamp{width:48px;height:36px;border-radius:6px;border:1px solid var(--border-md);background:var(--bg-0);position:relative;display:flex;align-items:center;justify-content:center;transition:background .3s ease,box-shadow .3s ease;margin:1px 0}.tower-lamp.red-on{background:#ef444440;box-shadow:0 0 20px #ef444480,inset 0 0 10px #ef44444d}.tower-lamp.yellow-on{background:#f59e0b40;box-shadow:0 0 20px #f59e0b80,inset 0 0 10px #f59e0b4d}.tower-lamp.green-on{background:#22c55e40;box-shadow:0 0 20px #22c55e80,inset 0 0 10px #22c55e4d}.tower-lamp-inner{width:24px;height:24px;border-radius:50%;background:#ffffff0a;transition:background .3s ease,box-shadow .3s ease}.tower-lamp.red-on .tower-lamp-inner{background:#ef4444;box-shadow:0 0 12px #ef4444}.tower-lamp.yellow-on .tower-lamp-inner{background:#f59e0b;box-shadow:0 0 12px #f59e0b;animation:blink-amber 1s ease-in-out infinite}.tower-lamp.green-on .tower-lamp-inner{background:#22c55e;box-shadow:0 0 12px #22c55e}@keyframes blink-amber{0%,to{opacity:1}50%{opacity:.4}}.tower-label{font-family:Barlow Condensed,sans-serif;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;text-align:center}.sidebar-auto-tag{display:inline-block;margin-left:8px;font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg-3);border:.5px solid var(--border-md);padding:1px 5px;border-radius:3px;vertical-align:middle}.state-indicators{display:flex;flex-direction:column;gap:5px}.state-indicator{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:4px;border:1px solid var(--border);background:var(--bg-2);transition:background .25s,border-color .25s;cursor:default;-webkit-user-select:none;user-select:none}.si-label{font-family:Barlow Condensed,sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);flex:1;transition:color .25s}.si-tags{display:flex;gap:3px;flex-shrink:0}.si-tag{font-family:Barlow Condensed,sans-serif;font-size:8px;font-weight:700;letter-spacing:.08em;padding:2px 5px;border-radius:3px;color:#fff;transition:opacity .25s}.state-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--muted);transition:background .25s,box-shadow .25s}.reset-btn{margin-top:4px;padding:8px 14px;border-radius:4px;border:1px solid var(--border-md);background:transparent;color:var(--text-dim);font-family:Barlow Condensed,sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;width:100%;transition:background .2s,color .2s}.reset-btn:hover{background:var(--bg-3);color:var(--text-mid)}.event-log{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}.event-entry{display:flex;gap:8px;padding:6px 10px;background:var(--bg-2);border-radius:3px;border-left:2px solid transparent;font-family:JetBrains Mono,monospace;font-size:10px;line-height:1.4;animation:slide-in .2s ease}@keyframes slide-in{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:none}}.event-time{color:var(--text-dim);flex-shrink:0}.event-state{color:var(--text-mid);font-weight:500}.main{overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;background:var(--bg-0);transition:background .25s ease}.section-label{font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}.tab-bar{display:flex;gap:8px;margin-bottom:4px}.tab-btn{padding:6px 16px;border-radius:20px;border:1px solid var(--border-md);background:var(--bg-3);color:var(--text-mid);font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}.tab-btn:hover{background:var(--bg-4);color:var(--text-hi)}.tab-btn.active{background:var(--cyan-glow);border-color:var(--cyan);color:var(--cyan)}.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi-card{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:16px;position:relative;overflow:hidden;transition:background .25s ease,border-color .25s ease}.kpi-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-color,var(--muted));opacity:.7}.kpi-label{font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}.kpi-value{font-family:JetBrains Mono,monospace;font-size:28px;font-weight:500;line-height:1;color:var(--text-bright);letter-spacing:-.02em}.kpi-unit{font-size:14px;font-weight:300;color:var(--text-dim);margin-left:2px}.kpi-sub{font-size:11px;color:var(--text-dim);margin-top:4px}.kpi-delta{display:inline-flex;align-items:center;gap:3px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;padding:2px 6px;border-radius:3px;margin-top:6px}.kpi-delta.good{background:var(--green-glow);color:var(--green)}.kpi-delta.fair{background:var(--amber-glow);color:var(--amber)}.kpi-delta.low{background:var(--red-glow);color:var(--red)}.kpi-delta.idle{background:var(--bg-3);color:var(--text-dim)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.panel{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:16px;transition:background .25s ease,border-color .25s ease}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-title{font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-hi)}.panel-badge{font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;padding:3px 8px;border-radius:20px;background:var(--bg-3);color:var(--text-dim);border:1px solid var(--border-md)}.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}.gauge-svg-wrap{width:220px;height:140px}.gauge-sub{font-family:Barlow Condensed,sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);text-align:center}.time-breakdown{display:flex;flex-direction:column;gap:8px}.time-row{display:flex;align-items:center;gap:8px}.time-label{font-family:Barlow Condensed,sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);width:88px;flex-shrink:0}.time-bar-track{flex:1;height:4px;background:var(--bg-3);border-radius:2px;overflow:hidden}.time-bar-fill{height:100%;border-radius:2px;transition:width .6s ease}.time-value{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-mid);width:70px;text-align:right;flex-shrink:0}.time-divider{border:none;border-top:1px solid var(--border);margin:4px 0}.energy-meter{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;background:var(--bg-3);border-radius:4px;border:1px solid var(--border);transition:background .25s ease}.energy-label{font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}.energy-value{font-family:JetBrains Mono,monospace;font-size:22px;font-weight:500;color:var(--text-bright);line-height:1}.energy-unit{font-size:11px;color:var(--text-dim);font-weight:300}.env-card{background:var(--bg-3);border:1px solid var(--border);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:8px;transition:background .25s ease}.env-label{font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}.env-value{font-family:JetBrains Mono,monospace;font-size:24px;font-weight:500;line-height:1;color:var(--text-bright)}.env-unit{font-size:12px;font-weight:300;color:var(--text-dim)}.env-bar-track{height:4px;background:var(--bg-0);border-radius:2px;overflow:hidden}.env-bar-fill{height:100%;border-radius:2px;transition:width .8s ease}.env-range{display:flex;justify-content:space-between;font-family:JetBrains Mono,monospace;font-size:9px;color:var(--muted)}.chart-legend{display:flex;gap:14px;margin-top:6px;flex-wrap:wrap}.chart-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);font-family:JetBrains Mono,monospace}.chart-legend-swatch{width:10px;height:2px;border-radius:1px;display:inline-block}.perf-stat{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg-3);border-radius:4px;border:1px solid var(--border);transition:background .25s ease}.perf-stat-label{font-family:Barlow Condensed,sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.perf-stat-value{font-family:JetBrains Mono,monospace;font-size:16px;font-weight:500;color:var(--text-hi)}.perf-stat-unit{font-size:11px;color:var(--text-dim)}.perf-input{width:60px;padding:2px 6px;background:var(--bg-0);border:1px solid var(--border-md);border-radius:3px;color:var(--text-hi);font-family:JetBrains Mono,monospace;font-size:14px;text-align:right}.gpio-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-3);border-radius:4px;border:1px solid var(--border);transition:background .25s ease}.gpio-label{font-family:Barlow Condensed,sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.gpio-val{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--text-mid)}.gpio-btns{display:flex;gap:6px}.gpio-btn{padding:4px 10px;border-radius:3px;font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:1px solid var(--border-md);background:var(--bg-4);color:var(--text-dim);transition:all .15s}.gpio-btn.on{background:var(--green-glow);border-color:#22c55e66;color:var(--green)}.gpio-btn.off{background:var(--red-glow);border-color:#ef44444d;color:var(--red)}.lamp-timer-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}.lamp-timer-row:last-of-type{border-bottom:none}.lamp-color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.lamp-timer-label{font-family:Barlow Condensed,sans-serif;font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--text-mid);flex:1}.lamp-timer-input{width:60px;padding:4px 8px;background:var(--bg-0);border:1px solid var(--border-md);border-radius:3px;color:var(--text-hi);font-family:JetBrains Mono,monospace;font-size:13px;text-align:right}.lamp-timer-unit{font-family:JetBrains Mono,monospace;font-size:10px;color:var(--text-dim);width:22px}.lamp-ctrl-btns{display:flex;gap:8px;margin-top:12px}.lamp-ctrl-btn{flex:1;padding:9px;border-radius:4px;border:1px solid var(--border-md);background:var(--bg-3);color:var(--text-mid);font-family:Barlow Condensed,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s}.lamp-ctrl-btn.start{background:var(--green-glow);border-color:#22c55e66;color:var(--green)}.lamp-ctrl-btn.stop{background:var(--red-glow);border-color:#ef444459;color:var(--red)}.chart-wrap{position:relative;width:100%;height:180px}.chart-wrap-sm{position:relative;width:100%;height:130px}.gauge-center-label{position:absolute;top:72%;left:50%;transform:translate(-50%,-50%);font-family:JetBrains Mono,monospace;font-size:24px;font-weight:600;letter-spacing:-.02em;pointer-events:none}@media (max-width:1200px){.kpi-row,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:900px){.app{grid-template-columns:1fr}.sidebar{display:none}.kpi-row{grid-template-columns:1fr 1fr}}