@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --bg-0:#0a0c0f; --bg-1:#111418; --bg-2:#181c22; --bg-3:#1e242c; --bg-4:#252d38;
  --color-red:#dc2626; --color-blue:#2563eb; --color-green:#16a34a; --color-yellow:#ca8a04;
  --color-red-dim:rgba(220,38,38,.15); --color-blue-dim:rgba(37,99,235,.15);
  --color-green-dim:rgba(22,163,74,.15); --color-yellow-dim:rgba(202,138,4,.15);
  --accent:#e07b00; --accent-h:#f08c10; --accent-dim:rgba(224,123,0,.12);
  --accent-glow:0 0 24px rgba(224,123,0,.35);
  --text-1:#f0f2f5; --text-2:#8899b0; --text-3:#4a5a70;
  --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:'Baloo 2',sans-serif; --font-b:'DM Sans',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:#0a0c0f;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;}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.badge-accent{background:var(--accent-dim);color:var(--accent);}
.badge-green{background:var(--green-dim);color:var(--green);}
.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);}
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;font-family:var(--font-d);}
#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(224,123,0,.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;transition:all .3s;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);border-color:rgba(255,255,255,.2);}
.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:#0a0c0f;border:none;font-size:16px;font-weight:900;cursor:pointer;flex-shrink:0;transition:all .16s;-webkit-tap-highlight-color:transparent;}
.chat-send-btn:hover{background:var(--accent-h);transform:scale(1.05);}
.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;}}