@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap";:root{--bg: #f0f4ff;--bg-card: #ffffff;--bg-card-2: #f8faff;--bg-glass: rgba(255,255,255,.72);--border: rgba(99,120,255,.12);--border-strong:rgba(99,120,255,.22);--shadow-sm: 0 1px 4px rgba(30,50,120,.07), 0 0 0 1px rgba(99,120,255,.06);--shadow-md: 0 4px 24px rgba(30,50,120,.1), 0 0 0 1px rgba(99,120,255,.07);--shadow-lg: 0 12px 48px rgba(30,50,120,.14), 0 0 0 1px rgba(99,120,255,.08);--shadow-glow-green: 0 0 24px rgba(22,197,94,.28);--shadow-glow-red: 0 0 24px rgba(239,68,68,.28);--shadow-glow-amber: 0 0 24px rgba(245,158,11,.28);--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--text-accent: #4f46e5;--accent: #4f46e5;--accent-light: #e0e7ff;--accent-hover: #4338ca;--green: #16a34a;--green-bg: #f0fdf4;--green-border:#bbf7d0;--yellow: #d97706;--yellow-bg: #fffbeb;--red: #dc2626;--red-bg: #fef2f2;--red-border: #fecaca;--orange: #ea580c;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--transition: .22s cubic-bezier(.4,0,.2,1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(99,102,241,.1) 0%,transparent 70%),url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234f46e5' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased}.dashboard{max-width:1340px;margin:0 auto;padding:20px 20px 40px;display:flex;flex-direction:column;gap:20px}.dash-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:18px 26px;background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-strong);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.dash-title{display:flex;align-items:center;gap:16px}.logo-wrap{width:54px;height:54px;background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 4px 18px #6366f166;flex-shrink:0}.dash-title h1{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,#4f46e5,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dash-title p{font-size:.72rem;color:var(--text-muted);margin-top:2px;font-weight:500}.header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mqtt-badge{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;padding:5px 14px;border-radius:30px;border:1.5px solid;letter-spacing:.03em;text-transform:uppercase}.mqtt-badge.connected{color:var(--green);border-color:var(--green-border);background:var(--green-bg)}.mqtt-badge.disconnected{color:var(--red);border-color:var(--red-border);background:var(--red-bg)}.mqtt-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.4s ease-in-out infinite}@keyframes blink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.device-select{display:flex;gap:8px;align-items:center}.device-input{background:var(--bg-card-2);border:1.5px solid var(--border-strong);color:var(--text-primary);border-radius:var(--radius-sm);padding:7px 12px;font-size:.78rem;font-family:JetBrains Mono,monospace;width:200px;transition:border-color var(--transition),box-shadow var(--transition)}.device-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #4f46e51f}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition)}.card:hover{box-shadow:var(--shadow-md)}.card h3{font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}.status-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 28px;text-align:center;border-width:1.5px;position:relative;overflow:hidden}.status-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--status-bg, transparent);opacity:.45;pointer-events:none;transition:background var(--transition)}.status-normal{--status-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);border-color:#86efac;box-shadow:var(--shadow-glow-green),var(--shadow-sm)}.status-borderline{--status-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);border-color:#fbbf24;box-shadow:var(--shadow-glow-amber),var(--shadow-sm)}.status-impaired{--status-bg: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%);border-color:#fca5a5;box-shadow:var(--shadow-glow-red),var(--shadow-sm)}.status-waiting{border-color:var(--border);--status-bg: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%)}.status-icon{font-size:3rem;line-height:1;position:relative;z-index:1}.status-card h2{font-size:2.2rem;font-weight:900;letter-spacing:.05em;position:relative;z-index:1}.status-normal h2{color:var(--green)}.status-borderline h2{color:var(--yellow)}.status-impaired h2{color:var(--red)}.status-waiting h2{font-size:1.2rem;color:var(--text-muted);font-weight:600}.confidence-bar-wrap{width:100%;max-width:360px;height:10px;background:#e2e8f0;border-radius:10px;position:relative;overflow:hidden}.confidence-bar{height:100%;border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1)}.confidence-label{position:absolute;right:0;top:-18px;font-size:.72rem;font-weight:700;color:var(--text-secondary)}.flag-list{list-style:none;width:100%;max-width:480px;display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}.flag-list li{padding:7px 14px;border-left:3px solid;background:#fffc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:0 8px 8px 0;font-size:.78rem;color:var(--text-secondary);font-weight:500;text-align:left;box-shadow:var(--shadow-sm)}.sensor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}.sensor-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;cursor:default;transition:box-shadow var(--transition),transform var(--transition)}.sensor-card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--sensor-accent, #e2e8f0);border-radius:var(--radius-md) var(--radius-md) 0 0;transition:background var(--transition)}.sensor-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.sensor-icon{width:46px;height:46px;border-radius:12px;background:var(--sensor-icon-bg, var(--accent-light));display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}.sensor-info{display:flex;flex-direction:column;gap:3px;min-width:0}.sensor-label{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sensor-value{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.chart-panel{padding:22px 24px 14px}.chart-panel h3{margin-bottom:16px}.modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.eye-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.eye-video-wrap{position:relative;margin-top:12px;border-radius:var(--radius-sm);overflow:hidden}.eye-video{width:100%;display:block;border-radius:var(--radius-sm)}.eye-canvas{position:absolute;top:0;left:0;width:100%;opacity:.4;pointer-events:none}.speech-prompt{font-size:.85rem;color:var(--text-secondary);margin-bottom:8px;line-height:1.6;background:var(--bg-card-2);padding:10px 14px;border-radius:var(--radius-sm);border-left:3px solid var(--accent)}.speech-prompt em{font-style:italic;color:var(--text-primary);font-weight:500}.volume-bar-wrap{height:6px;background:#e2e8f0;border-radius:6px;margin-top:10px;overflow:hidden}.volume-bar{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:6px;transition:width .1s}.reaction-box{height:100px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;letter-spacing:.06em;cursor:pointer;-webkit-user-select:none;user-select:none;border:2px solid transparent;transition:all var(--transition);color:#fff}.reaction-box:hover{filter:brightness(1.06);transform:scale(1.01)}.reaction-box:active{transform:scale(.98)}.metric-row{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;padding:6px 0;border-bottom:1px solid #f1f5f9;color:var(--text-secondary)}.metric-row:last-child{border-bottom:none}.metric-row strong{font-variant-numeric:tabular-nums;font-weight:700}.btn{border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:.8rem;padding:8px 16px;font-family:inherit;transition:all var(--transition);display:inline-flex;align-items:center;gap:5px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;box-shadow:0 2px 12px #6366f166}.btn-primary:hover{box-shadow:0 4px 20px #6366f18c}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 10px #ef44444d}.btn-ghost{background:var(--bg-card-2);color:var(--text-secondary);border:1px solid var(--border-strong)}.btn-ghost:hover{background:var(--accent-light);color:var(--accent);border-color:var(--accent)}.btn-sm{padding:5px 11px;font-size:.73rem}.error-msg{font-size:.73rem;color:var(--red);font-weight:500}.raw-data summary{cursor:pointer;font-size:.78rem;color:var(--text-muted);font-weight:600;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;gap:6px}.raw-data summary:before{content:"{ }";font-family:JetBrains Mono,monospace}.raw-data pre{margin-top:12px;font-size:.72rem;color:var(--text-secondary);line-height:1.7;overflow-x:auto;font-family:JetBrains Mono,monospace;background:var(--bg-card-2);padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border)}.section-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);display:flex;align-items:center;gap:8px}.section-label:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-strong),transparent)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width: 680px){.dash-header{flex-direction:column;align-items:flex-start}.header-right,.device-input{width:100%}.status-card h2{font-size:1.6rem}.dashboard{padding:12px 12px 32px;gap:14px}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card{animation:fadeSlideIn .35s ease both}