*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0f;--bg-card: #1a1a2e;--accent: #6366f1;--accent-secondary: #8b5cf6;--red: #ef4444;--green: #22c55e;--blue: #3b82f6;--text-primary: #ffffff;--text-secondary: #a1a1aa;--radius: 12px;--radius-lg: 24px}html,body,#root{height:100%;width:100%}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.app-container{max-width:800px;margin:0 auto;padding:24px 20px;min-height:100%}.header{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:32px;padding-top:16px}.header h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{color:var(--text-secondary);font-size:.9rem}.qr-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:24px auto;padding:24px;background:#fff;border-radius:var(--radius);width:fit-content;box-shadow:0 0 40px #6366f126,0 0 80px #8b5cf614}.qr-container canvas,.qr-container svg,.qr-container img{display:block}.qr-step-label{text-align:center;font-size:1rem;font-weight:500;color:var(--text-secondary);margin-bottom:16px;letter-spacing:.01em}.qr-step-label strong{color:var(--text-primary)}.color-display{min-height:60vh;border-radius:var(--radius-lg);transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;background-color:var(--bg-card);color:var(--text-primary);text-shadow:0 2px 8px rgba(0,0,0,.3);-webkit-user-select:none;user-select:none}.btn-add-device{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;background:linear-gradient(135deg,var(--accent),var(--accent-secondary));color:var(--text-primary);font-size:1rem;font-weight:600;border:none;border-radius:var(--radius);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 15px #6366f14d}.btn-add-device:hover{transform:scale(1.04);box-shadow:0 6px 25px #6366f173}.btn-add-device:active{transform:scale(.98)}.btn-reconnect{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;background:transparent;color:var(--accent);font-size:.85rem;font-weight:500;border:1.5px solid var(--accent);border-radius:var(--radius);cursor:pointer;transition:background .15s ease,color .15s ease}.btn-reconnect:hover{background:#6366f11a}.btn-remove{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;background:transparent;color:var(--red);font-size:.8rem;font-weight:500;border:1.5px solid var(--red);border-radius:var(--radius);cursor:pointer;transition:background .15s ease}.btn-remove:hover{background:#ef44441a}.device-list{display:flex;flex-direction:column;gap:12px;margin-top:24px}.device-card{background:var(--bg-card);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;transition:background .15s ease}.device-card:hover{background:#22223a}.device-card .device-info{display:flex;flex-direction:column;gap:4px}.device-card .device-name{font-weight:600;font-size:.95rem}.device-card .device-meta{font-size:.8rem;color:var(--text-secondary)}.device-card .device-actions{display:flex;gap:8px;align-items:center}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.status-badge:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%}.status-badge.connected{background:#22c55e1f;color:var(--green)}.status-badge.connected:before{background:var(--green);box-shadow:0 0 6px var(--green)}.status-badge.disconnected{background:#ef44441f;color:var(--red)}.status-badge.disconnected:before{background:var(--red)}.status-badge.pairing{background:#fbbf241f;color:#fbbf24}.status-badge.pairing:before{background:#fbbf24;animation:pulse-dot 1.2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.color-btn{width:100px;height:100px;border-radius:50%;border:none;cursor:pointer;font-weight:700;color:var(--text-primary);font-size:1rem;transition:transform .12s ease,box-shadow .12s ease;text-transform:uppercase;letter-spacing:.03em}.color-btn:hover{transform:scale(1.08)}.color-btn:active{transform:scale(.9)}.color-btn.red{background:var(--red);box-shadow:0 4px 20px #ef444459}.color-btn.red:hover{box-shadow:0 6px 30px #ef444480}.color-btn.green{background:var(--green);box-shadow:0 4px 20px #22c55e59}.color-btn.green:hover{box-shadow:0 6px 30px #22c55e80}.color-btn.blue{background:var(--blue);box-shadow:0 4px 20px #3b82f659}.color-btn.blue:hover{box-shadow:0 6px 30px #3b82f680}.btn-row{display:flex;gap:20px;justify-content:center;margin-top:40px;flex-wrap:wrap}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.connected-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#0a0a0fd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:fade-in .3s ease}.connected-overlay .checkmark{font-size:4rem}.connected-overlay p{font-size:1.25rem;font-weight:600}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.pairing-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:40px 20px}.pairing-status h2{font-size:1.25rem;font-weight:600}.pairing-status p{color:var(--text-secondary);font-size:.9rem;max-width:320px;line-height:1.5}.mobile-container{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;text-align:center}.saved-sessions{width:100%;max-width:400px;margin-top:32px}.saved-sessions h3{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:12px}.text-center{text-align:center}.mt-4{margin-top:16px}.mt-8{margin-top:32px}.text-muted{color:var(--text-secondary)}.text-sm{font-size:.85rem}@media(max-width:640px){.app-container{padding:16px 14px}.header h1{font-size:1.4rem}.color-display{min-height:50vh;font-size:2rem;border-radius:16px}.color-btn{width:80px;height:80px;font-size:.85rem}.btn-row{gap:14px;margin-top:28px}.btn-add-device{padding:14px 24px;font-size:.9rem;width:100%}.device-card{flex-direction:column;align-items:flex-start;gap:12px}.device-card .device-actions{width:100%;justify-content:flex-end}.qr-container{padding:16px}}@media(max-width:380px){.color-btn{width:68px;height:68px;font-size:.75rem}.btn-row{gap:10px}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}::selection{background:#6366f14d;color:var(--text-primary)}