*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f172a;--card: #1e293b;--border: #334155;--text: #f1f5f9;--muted: #94a3b8;--primary: #3b82f6;--primary-hover: #2563eb;--success: #22c55e;--danger: #ef4444;--radius: 12px}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:radial-gradient(ellipse at top,#1e293b,#0f172a 60%);color:var(--text);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;max-width:520px;padding:24px}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:0 20px 60px #0006}h1{font-size:1.6rem;margin-bottom:6px;text-align:center}.subtitle{color:var(--muted);text-align:center;margin-bottom:24px;font-size:.95rem}.hint{background:#0f172a;border:1px dashed var(--border);border-radius:8px;padding:10px 12px;font-size:.82rem;color:var(--muted);margin-bottom:20px;text-align:center}.hint code{color:#38bdf8}label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;margin-top:14px}input{width:100%;padding:11px 14px;border-radius:8px;border:1px solid var(--border);background:#0f172a;color:var(--text);font-size:.95rem;outline:none}input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3b82f633}button.primary{width:100%;margin-top:22px;padding:12px;border-radius:8px;border:none;background:var(--primary);color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:background .15s}button.primary:hover{background:var(--primary-hover)}button.primary:disabled{opacity:.6;cursor:not-allowed}.error{background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:10px 12px;border-radius:8px;font-size:.85rem;margin-bottom:12px}.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-weight:700;font-size:.9rem;letter-spacing:.04em}.badge.on{background:#22c55e26;color:#86efac;border:1px solid rgba(34,197,94,.3)}.badge.off{background:#ef444426;color:#fca5a5;border:1px solid rgba(239,68,68,.3)}.dot{width:10px;height:10px;border-radius:50%}.dot.on{background:var(--success);box-shadow:0 0 10px var(--success);animation:pulse 2s infinite}.dot.off{background:var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.toggle-wrap{display:flex;justify-content:center;margin:28px 0 18px}.toggle{position:relative;width:120px;height:64px;border-radius:32px;border:none;cursor:pointer;transition:background .3s;padding:4px}.toggle.on{background:var(--success)}.toggle.off{background:#475569}.toggle:disabled{opacity:.6;cursor:not-allowed}.knob{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 10px #0000004d}.toggle.on .knob{transform:translate(56px)}.toggle.off .knob{transform:translate(0)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.actions button{padding:11px;border-radius:8px;border:1px solid var(--border);background:#0f172a;color:var(--text);font-weight:600;cursor:pointer}.actions button.active-on{background:var(--success);border-color:var(--success);color:#fff}.actions button.active-off{background:var(--danger);border-color:var(--danger);color:#fff}.actions button:disabled{opacity:.5;cursor:not-allowed}.meta{margin-top:20px;padding:14px;background:#0f172a;border-radius:8px;border:1px solid var(--border);font-size:.82rem;color:var(--muted);line-height:1.6}.meta strong{color:var(--text)}.logout{margin-top:18px;width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer}.logout:hover{color:var(--text);border-color:var(--text)}.toast{margin-top:14px;padding:10px 12px;border-radius:8px;font-size:.85rem;text-align:center}.toast.success{background:#22c55e26;border:1px solid rgba(34,197,94,.3);color:#86efac}.toast.info{background:#3b82f626;border:1px solid rgba(59,130,246,.3);color:#93c5fd}