:root{color-scheme:dark;--bg:#0b0d12;--surface:#12151d;--surface2:#181c27;--line:#2a3040;--text:#f4f6fb;--muted:#9aa4ba;--accent:#7b6cff;--accent2:#a886ff;--good:#59db9a;--danger:#ff6475;--shadow:0 20px 70px rgba(0,0,0,.3);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 85% -10%,rgba(123,108,255,.12),transparent 35%),var(--bg);color:var(--text);min-height:100vh}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}.hidden{display:none!important}
.login-view{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(580px,100%);padding:54px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(24,28,39,.95),rgba(14,17,24,.95));box-shadow:var(--shadow);text-align:center}.login-card h1{font-size:clamp(2.25rem,7vw,4.4rem);line-height:.98;margin:18px 0}.login-card p:not(.eyebrow){color:var(--muted);font-size:1.08rem;line-height:1.7;margin:0 auto 28px;max-width:440px}.brand-mark{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;margin:auto;background:linear-gradient(135deg,var(--accent),#dd6cff);box-shadow:0 14px 40px rgba(123,108,255,.35);font-weight:900;font-size:1.4rem}.brand-mark.small{width:44px;height:44px;border-radius:13px;font-size:.85rem;margin:0}
.app{display:grid;grid-template-columns:285px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:25px 18px;background:rgba(15,18,25,.92);border-right:1px solid var(--line);display:flex;flex-direction:column;backdrop-filter:blur(18px);z-index:4}.brand{display:flex;gap:13px;align-items:center;padding:0 9px 28px}.brand strong,.brand span{display:block}.brand strong{font-size:1.15rem}.brand span{color:var(--muted);font-size:.78rem;margin-top:2px}.server-label,.eyebrow{color:#a9a1ff;font-size:.7rem;letter-spacing:.14em;font-weight:800}.server-label{margin:0 9px 8px}.server-select{margin:0 5px 18px}
nav{display:grid;gap:5px;overflow:auto;padding:0 4px 15px}nav button{border:0;background:transparent;color:#b1bbcd;display:flex;align-items:center;gap:12px;text-align:left;padding:11px 13px;border-radius:10px;cursor:pointer;font-weight:650}nav button span{font-size:1rem;width:21px;text-align:center;filter:grayscale(.2)}nav button:hover{background:#1b202c;color:white}nav button.active{background:linear-gradient(90deg,rgba(123,108,255,.2),rgba(123,108,255,.04));box-shadow:inset 3px 0 var(--accent);color:white}.user-box{margin-top:auto;border-top:1px solid var(--line);padding:18px 8px 0;display:flex;align-items:center;gap:11px}.user-box img{width:36px;height:36px;border-radius:50%;background:var(--surface2)}.user-box strong,.user-box a{display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-box a{font-size:.75rem;color:var(--muted);margin-top:3px;text-decoration:none}.user-box a:hover{color:white}
.workspace{min-width:0;padding:30px clamp(24px,4vw,62px) 80px}.workspace>header{display:flex;justify-content:space-between;align-items:center;margin:0 auto 34px;max-width:1250px}.workspace header h1{margin:4px 0 0;font-size:2rem}.eyebrow{margin:0}.status{padding:9px 13px;border:1px solid rgba(89,219,154,.25);background:rgba(89,219,154,.08);border-radius:999px;color:#b9f8d8;font-size:.82rem;font-weight:700}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:7px;box-shadow:0 0 12px var(--good)}
.panel{display:none;max-width:1250px;margin:auto;animation:enter .2s ease}.panel.active{display:block}@keyframes enter{from{opacity:0;transform:translateY(5px)}}.hero{border:1px solid rgba(123,108,255,.25);border-radius:24px;padding:42px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;background:linear-gradient(115deg,rgba(123,108,255,.16),rgba(168,134,255,.05)),var(--surface);box-shadow:var(--shadow)}.hero h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1;margin:18px 0 12px;max-width:690px}.hero p{color:var(--muted);font-size:1.05rem}.hero-orb{width:160px;height:160px;flex:0 0 160px;border-radius:48px;display:grid;place-items:center;font-size:2rem;font-weight:900;background:linear-gradient(135deg,#6658f7,#c05dff);box-shadow:0 22px 80px rgba(123,108,255,.35);transform:rotate(8deg)}.pill{font-size:.72rem;font-weight:850;color:#d4ceff;border:1px solid rgba(168,134,255,.35);background:rgba(123,108,255,.12);padding:7px 11px;border-radius:999px;letter-spacing:.08em}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.stat-grid article{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.stat-grid b{display:block;font-size:1.75rem}.stat-grid span{display:block;color:var(--muted);margin-top:5px;font-size:.83rem}
.card{background:linear-gradient(145deg,var(--surface),#10131a);border:1px solid var(--line);border-radius:20px;padding:27px;margin-top:18px;box-shadow:0 12px 40px rgba(0,0,0,.12)}.card-head{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:21px}.card h2{margin:0;font-size:1.25rem}.card p{color:var(--muted);margin:7px 0 0;font-size:.9rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.split .card{margin:0}.grid{display:grid;gap:17px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
label{display:block;color:#dce1eb;font-size:.84rem;font-weight:730;margin:15px 0}label small,.hint,small{display:block;color:var(--muted);font-size:.74rem;font-weight:500;margin-top:6px;line-height:1.45}input:not([type=checkbox]),select,textarea{width:100%;border:1px solid #303749;background:#0d1017;color:var(--text);border-radius:10px;padding:11px 12px;outline:0;margin-top:7px;transition:.15s}input[type=color]{height:43px;padding:5px}textarea{min-height:110px;resize:vertical}select{appearance:auto}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,108,255,.12)}.switch{margin:0}.switch input{position:absolute;opacity:0}.switch span{display:block;width:45px;height:25px;border-radius:999px;background:#343a49;position:relative;cursor:pointer;transition:.2s}.switch span:after{content:"";width:19px;height:19px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;transition:.2s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{transform:translateX(20px)}.check{display:flex;align-items:center;gap:8px}.check input{accent-color:var(--accent)}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:23px}.button{border:1px solid var(--line);background:#202532;color:white;border-radius:10px;padding:10px 17px;text-decoration:none;cursor:pointer;font-weight:750;display:inline-flex;justify-content:center;align-items:center}.button:hover{filter:brightness(1.12)}.button.primary{border-color:transparent;background:linear-gradient(135deg,var(--accent),#9b67fa)}.button.danger{color:#ffc4ca;border-color:rgba(255,100,117,.32);background:rgba(255,100,117,.08)}.button.large{padding:14px 21px}.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.feature-list span{background:#0e1118;border:1px solid var(--line);padding:14px;border-radius:10px;color:#b8c1d2;font-size:.82rem}.feature-list span:before{content:"✓";color:var(--good);margin-right:8px}.hint{margin:15px 2px}code{padding:2px 5px;border-radius:5px;background:#202431;color:#cfc9ff}
.list{display:grid;gap:10px;margin-top:18px}.list-item{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:15px 17px}.list-item h3{font-size:.94rem;margin:0 0 4px}.list-item p{margin:0;color:var(--muted);font-size:.78rem;max-width:720px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-actions{display:flex;gap:7px;flex-shrink:0}.item-actions .button{padding:7px 11px;font-size:.75rem}.empty{max-width:700px;margin:80px auto;text-align:center;border:1px dashed var(--line);border-radius:22px;padding:50px;background:var(--surface)}.empty p{color:var(--muted)}.toast{position:fixed;right:22px;bottom:22px;padding:12px 16px;background:#242a38;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);z-index:20;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;max-width:390px}.toast.show{opacity:1;transform:none}.toast.error{border-color:rgba(255,100,117,.5);color:#ffd1d6}
@media(max-width:980px){.app{grid-template-columns:84px 1fr}.sidebar{padding:20px 10px}.brand{padding:0 10px 20px}.brand>div:last-child,.server-label,.user-box>div{display:none}.server-select{font-size:0;padding:10px 3px}.server-select option{font-size:14px}nav button{font-size:0;justify-content:center}nav button span{font-size:1.1rem}.user-box{justify-content:center}.split{grid-template-columns:1fr}.hero-orb{display:none}.stat-grid{grid-template-columns:repeat(2,1fr)}.feature-list{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.app{display:block}.sidebar{position:static;width:100%;height:auto}.brand{display:none}.server-label{display:block}.server-select{font-size:inherit;margin-bottom:10px}nav{display:flex;overflow-x:auto}nav button{font-size:0;flex:0 0 49px}.user-box{display:none}.workspace{padding:22px 14px 70px}.workspace>header{align-items:flex-start}.status{font-size:0;padding:10px}.status i{margin:0}.hero{padding:28px}.stat-grid{grid-template-columns:1fr 1fr}.grid.two,.grid.three,.feature-list{grid-template-columns:1fr}.card{padding:20px}.login-card{padding:35px 24px}.list-item{align-items:flex-start;flex-direction:column}.item-actions{width:100%}.item-actions .button{flex:1}}
/* Member onboarding and community games */
.verification-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}.verification-steps article{background:linear-gradient(145deg,#202334,#171b29);border:1px solid #35394e;border-radius:18px;padding:24px}.verification-steps b{font-size:28px;color:#bba8ff}.verification-steps h3{margin:10px 0}.verification-steps p{color:#b6bdd1;line-height:1.6}.verification-hero{background:linear-gradient(120deg,#36285a,#1d2843)}.brand strong{font-size:15px;line-height:1.35}.brand .brand-mark{flex-shrink:0}details{margin:18px 0;padding:16px;border:1px solid #35394e;border-radius:12px}summary{cursor:pointer;color:#c8b8ff}input:disabled{opacity:.5}.actions{flex-wrap:wrap}@media(max-width:800px){.verification-steps{grid-template-columns:1fr}}