@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap');
:root {
  --bg-0:#06100a;--bg-1:#091509;--bg-2:#0e1f12;--bg-3:#142818;--bg-4:#1b3320;
  --card-red:#e8190f;--card-yellow:#f5c400;--card-green:#1db34a;--card-blue:#1a6efc;--card-black:#1a1a1a;
  --accent:#e8190f;--accent-h:#ff2b1f;--accent-dim:rgba(232,25,15,.12);--accent-glow:0 0 24px rgba(232,25,15,.35);
  --text-1:#f0f5f2;--text-2:#8ba898;--text-3:#456050;
  --border:rgba(255,255,255,.07);--border-h:rgba(255,255,255,.13);
  --green:#22c55e;--green-dim:rgba(34,197,94,.12);--red:#ef4444;
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;
  --font-d:'Nunito',sans-serif;--font-b:'Outfit',sans-serif;
  --sh-lg:0 8px 40px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-b);background:var(--bg-0);color:var(--text-1);min-height:100dvh;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:2px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:var(--r-sm);font-family:var(--font-b);font-size:15px;font-weight:600;cursor:pointer;transition:all .16s;text-decoration:none;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;}
.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.3);}
.btn-primary:hover:not(:disabled){background:var(--accent-h);transform:translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.3),var(--accent-glow);}
.btn-primary:active:not(:disabled){transform:translateY(1px);}
.btn-secondary{background:var(--bg-3);color:var(--text-1);border:1px solid var(--border-h);}
.btn-secondary:hover:not(:disabled){background:var(--bg-4);}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border);}
.btn-ghost:hover:not(:disabled){background:var(--bg-2);color:var(--text-1);}
.btn-sm{padding:8px 16px;font-size:13px;}.btn-lg{padding:15px 32px;font-size:17px;}.btn-full{width:100%;}
.input{width:100%;padding:12px 16px;min-height:48px;background:var(--bg-2);border:1px solid var(--border-h);border-radius:var(--r-sm);color:var(--text-1);font-family:var(--font-b);font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s;}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.input::placeholder{color:var(--text-3);}
.label{display:block;font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px;}
.panel{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:20px;}
.panel-lg{padding:28px;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot-on{background:var(--green);box-shadow:0 0 8px var(--green);}.dot-off{background:var(--text-3);}
#toast-container{position:fixed;bottom:24px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:300px;}
.toast{padding:12px 18px;background:var(--bg-4);border:1px solid var(--border-h);border-radius:var(--r-sm);font-size:14px;color:var(--text-1);box-shadow:var(--sh-lg);animation:toastIn .25s ease;pointer-events:all;}
.toast.success{border-color:rgba(34,197,94,.4);}.toast.error{border-color:rgba(239,68,68,.4);}.toast.info{border-color:rgba(232,25,15,.4);}
@keyframes toastIn{from{transform:translateX(16px);opacity:0;}to{transform:translateX(0);opacity:1;}}
#conn-status{position:fixed;top:12px;right:12px;display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--bg-3);border:1px solid var(--border);border-radius:99px;font-size:11px;color:var(--text-2);z-index:200;pointer-events:none;}
#conn-status.connected{border-color:rgba(34,197,94,.3);}#conn-status.disconnected{border-color:rgba(239,68,68,.3);}
.toggle-group{display:flex;gap:4px;flex-wrap:wrap;}
.toggle-btn{padding:7px 14px;border:1px solid var(--border-h);border-radius:var(--r-sm);background:transparent;color:var(--text-2);font-size:13px;font-weight:700;cursor:pointer;transition:all .16s;font-family:var(--font-b);-webkit-tap-highlight-color:transparent;min-width:44px;min-height:40px;}
.toggle-btn:hover{color:var(--text-1);}
.toggle-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);gap:12px;}
.setting-row:last-child{border-bottom:none;}
.setting-label{font-size:14px;color:var(--text-1);font-weight:600;}.setting-desc{font-size:12px;color:var(--text-2);margin-top:2px;}
.chat-msgs{display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.chat-msg{font-size:12.5px;line-height:1.5;padding:1px 0;}.chat-msg .mu{color:var(--accent);font-weight:700;}.chat-msg.sys{color:var(--text-2);font-style:italic;font-size:11.5px;}
.chat-row{display:flex;gap:6px;}
.chat-input{flex:1;padding:9px 12px;min-height:38px;background:var(--bg-2);border:1px solid var(--border-h);border-radius:10px;color:var(--text-1);font-family:var(--font-b);font-size:13px;outline:none;transition:border-color .2s;}
.chat-input:focus{border-color:var(--accent);}
.chat-send-btn{width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;border:none;font-size:16px;font-weight:900;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.chat-send-btn:hover{background:var(--accent-h);}
.error-msg{color:var(--red);font-size:13px;margin-top:6px;min-height:20px;}
.form-group{margin-bottom:16px;}
.hidden{display:none!important;}
.rules-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;font-family:var(--font-b);color:var(--text-1);font-size:14px;font-weight:600;transition:background .16s;-webkit-tap-highlight-color:transparent;}
.rules-toggle:hover{background:var(--bg-3);}
.rules-toggle .arrow{transition:transform .25s;color:var(--text-2);}
.rules-toggle.open .arrow{transform:rotate(180deg);}
.rules-body{display:none;padding:16px;background:var(--bg-2);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);}
.rules-body.open{display:block;}
@media(max-width:600px){#toast-container{bottom:72px;left:12px;right:12px;max-width:none;}}