:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#e0e0e0;background-color:#0f172a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-content:center;min-width:320px;min-height:100vh}#root{width:100%;max-width:1280px;padding:2rem}.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.card{background:#1e293bb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:transform .2s}.card:hover{transform:translateY(-5px)}.status-indicator{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}.status-run{background-color:#10b981;box-shadow:0 0 10px #10b981}.status-stop{background-color:#64748b}.status-fault{background-color:#ef4444;box-shadow:0 0 10px #ef4444;animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.value-display{font-size:2.5rem;font-weight:700;margin:10px 0;background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.unit{font-size:1rem;color:#94a3b8;margin-left:5px}h2{font-size:1.1rem;color:#94a3b8;margin:0;text-transform:uppercase;letter-spacing:.05em}.header{margin-bottom:2rem;display:flex;justify-content:space-between;align-items:center}.header h1{margin:0;font-size:1.5rem;font-weight:700}.container{max-width:1200px;margin:0 auto}.connection-status{padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:600;letter-spacing:.05em}.online{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.2)}.offline{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.history-section h2{margin-bottom:1rem}table th{color:#94a3b8;font-weight:600;font-size:.85rem;text-transform:uppercase}table td{font-size:.95rem}.valve-b.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.header-left{display:flex;align-items:center;gap:1.5rem}.sharing-toggle{padding:.5rem 1rem;border-radius:20px;border:1px solid rgba(255,255,255,.2);background:#ffffff0d;color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.8rem}.sharing-toggle.on{border-color:#10b981;background:#10b9811a;color:#10b981}.sharing-toggle.off{border-color:#ef4444;background:#ef44441a;color:#ef4444}.sharing-toggle:hover{background:#ffffff1a}.valve-banner{padding:1rem;border-radius:8px;margin-bottom:2rem;text-align:center;font-weight:700;font-size:1.2rem;letter-spacing:.1em}.valve-banner.open{background:#10b9811a;color:#10b981;border:1px solid #10b981}.valve-banner.closed{background:#64748b1a;color:#94a3b8;border:1px solid #64748b}.valve-banner.interlock{background:#ef444433;color:#ef4444;border:1px solid #ef4444;animation:pulse 1s infinite}.gas-status{font-weight:700;font-size:1.8rem}.gas-status.normal{color:#10b981}.gas-status.warning{color:#f59e0b}.gas-status.alarm{color:#ef4444}.sub-value{color:#94a3b8;font-size:.9rem;margin-top:5px}.card.highlight{border:2px solid rgba(96,165,250,.3)}.safety-note{margin-top:10px;font-size:.8rem;color:#ef4444;font-style:italic}