:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#f3f6ff;background:#0b1126;--panel:#161f3a;--line:#344062;--muted:#aab9d6;--violet:#b29bff;--cyan:#7bddef;--green:#beef7d;--pink:#ff9acf}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 10% 3%,#30225b70,transparent 38%),radial-gradient(ellipse at 80% 70%,#143b5575,transparent 55%),#0b1126;font-size:15px}.hide{display:none!important}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:var(--cyan)}.ambient{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#ffffff10 1px,transparent 1px);background-size:25px 25px;opacity:.4}
.topbar,.layout,footer{position:relative;z-index:1}.topbar{display:flex;align-items:center;justify-content:space-between;max-width:1240px;padding:26px 24px;margin:auto;border-bottom:1px solid #ffffff18}.brand{display:flex;align-items:center;gap:11px}.brand-symbol{display:grid;place-items:center;background:linear-gradient(135deg,#be9dff,#8fe8ff);color:#101733;height:45px;width:48px;border-radius:13px;font-size:30px;font-weight:950}.brand-symbol span{font-size:10px;align-self:start}.brand b{font-size:26px;letter-spacing:-1px}.brand small{display:block;letter-spacing:2px;text-transform:uppercase;font-size:9px;color:var(--muted);margin-top:-4px}.header-side{display:flex;align-items:center;gap:22px}.quiet,.muted,.micro{color:var(--muted)}.micro{font-size:13px;line-height:1.6}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:2px;font-weight:850}.layout{max-width:1240px;margin:0 auto;padding:40px 24px 80px}h1{font-size:clamp(36px,4.6vw,62px);line-height:1.1;letter-spacing:-2px;margin:16px 0}h1 em{font-style:normal;color:var(--green)}h2{font-size:23px;letter-spacing:-.6px;margin:5px 0 12px}.auth-wrap{min-height:65vh;display:grid;grid-template-columns:1fr 430px;gap:10%;align-items:center}.auth-intro p{max-width:510px;font-size:19px;line-height:1.7;color:var(--muted)}.hero-circles{display:flex;align-items:center;gap:26px;margin-top:40px}.hero-circles span{width:80px;height:80px;display:grid;place-items:center;border-radius:25px;font-size:40px;font-weight:800;background:#2b3556;border:1px solid #ffffff33;transform:rotate(-8deg)}.hero-circles span:nth-child(2){color:var(--green);transform:rotate(7deg);background:#303752}.hero-circles span:nth-child(3){color:var(--pink);transform:rotate(-3deg)}
.panel{border:1px solid #49557c90;border-radius:23px;background:linear-gradient(145deg,#1b2541fa,#121b34f7);box-shadow:0 16px 48px #0003;padding:27px;min-width:0}.auth-box{padding:38px}.auth-box h2{font-size:36px;margin:12px 0}.form{display:grid;gap:19px;margin-top:25px}.form label,.inline-form label,.word-row label,.student-row label{display:grid;gap:8px;color:#dce7ff;font-size:13px;font-weight:600}.form input,.form select,.inline-form input,.word-row input,.student-row select,.password-change input,#inviteResult input{background:#0d152b;color:white;border:1px solid #546184;border-radius:12px;padding:13px;width:100%;min-width:0;outline:0}.form input:focus,.form select:focus,.inline-form input:focus,.word-row input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #78dff02b}.button{border:0;border-radius:11px;padding:13px 20px;font-weight:760;white-space:normal}.primary{background:linear-gradient(110deg,#c1f47e,#a4e8ca);color:#142634}.secondary{background:#2d395c;color:#f3f7ff;border:1px solid #536285}.large{font-size:18px;padding:15px 25px}.button:hover:not(:disabled){filter:brightness(1.1)}.button.mini{padding:8px 11px;font-size:12px}.text-button{background:transparent;color:var(--cyan);border:0;padding:7px 4px;font-size:14px}.text-button:hover{text-decoration:underline}.notice{background:#263954;padding:14px;border:1px solid #51687e;border-radius:12px;color:#d7efff}.toast{position:fixed;z-index:200;right:26px;top:86px;max-width:400px;padding:14px 22px;background:#1a4454;border:1px solid #76deed;color:#fff;border-radius:12px;box-shadow:0 20px 60px #0008}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:32px}.page-heading p{color:var(--muted);font-size:17px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.span2{grid-column:span 2}.seat-counter,.xp-pill{border:1px solid #9fefb888;color:var(--green);border-radius:40px;padding:12px 20px;background:#263e4390;font-weight:800}.inline-form{display:flex;align-items:end;gap:12px;margin-top:12px}.inline-form label{flex:1}.list-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:16px 0;border-bottom:1px solid #ffffff17}.list-row small,.student-row small{display:block;color:var(--muted);font-size:12px;padding-top:5px}.action-pair{display:flex;gap:8px;flex-wrap:wrap}.student-row{border-bottom:1px solid #ffffff20;padding:19px 0;display:grid;gap:11px}.student-row label{max-width:300px}.password-change{margin-top:5px}.password-change input{flex:1}.word-row{display:grid;grid-template-columns:140px 1fr 1fr 120px auto;align-items:end;gap:12px;border-bottom:1px solid #ffffff1f;padding:15px 0}.word-row b{align-self:center}.word-row input{padding:10px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode{display:grid;gap:6px;text-align:left;background:#182644;border:1px solid #3e5078;border-radius:14px;padding:20px;color:#fff}.mode:hover,.mode.active{border-color:var(--cyan);background:#27395e}.mode span{font-size:21px;color:var(--violet);font-weight:900}.mode small{color:var(--muted)}.stats-row{display:flex;gap:40px;flex-wrap:wrap}.stats-row div{display:grid;gap:3px}.stats-row strong{font-size:30px;color:var(--green)}.stats-row span{color:var(--muted);font-size:12px}.awards-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.award{display:inline-block;background:#3b3356;color:#eacbff;border:1px solid #b39ce884;padding:9px 15px;border-radius:30px;font-size:13px;font-weight:750}.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.question-num{color:var(--muted)}.progressbar{height:9px;background:#2b3c62;border-radius:12px;overflow:hidden;margin-bottom:20px}.progressbar>div{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .3s}.question-card{max-width:750px;margin:0 auto;min-height:480px;padding:55px;text-align:center}.question-card h1{font-size:clamp(28px,4vw,43px);margin:22px auto;letter-spacing:-1px}.audio-btn{background:#36556b;color:#e5feff;border:1px solid #78d9ec;padding:17px 30px;font-size:18px;margin:20px auto}.question-form{max-width:500px;margin:24px auto}.question-form label{text-align:left}.question-form input{font-size:21px;text-align:center}.answer-option{display:flex;align-items:center;gap:18px;background:#192947;border:1px solid #52658a;border-radius:13px;color:#f3f7ff;padding:16px;margin:9px auto;width:min(100%,520px);text-align:left}.answer-option.chosen{border-color:var(--green);background:#31455c}.option-letter{background:#45557c;padding:8px 13px;border-radius:9px;font-weight:800}.result{display:grid;gap:9px;margin:15px auto;padding:16px;border-radius:13px}.result.right{background:#30543980;color:#d3ffbd}.result.wrong{background:#75425c60;color:#ffdbe8}#nextQuestion{margin:18px}footer{padding:32px 20px;text-align:center;font-size:12px;color:#8c9cb8;border-top:1px solid #ffffff15}
@media(max-width:850px){.auth-wrap{grid-template-columns:1fr;gap:25px}.auth-intro{max-width:680px}.auth-box{max-width:650px}.dashboard-grid{grid-template-columns:1fr}.span2{grid-column:span 1}.word-row{grid-template-columns:1fr 1fr}.word-row b{grid-column:span 2}.word-row button{grid-column:span 2}.hero-circles{display:none}}
@media(max-width:540px){.layout{padding:24px 15px 60px}.topbar{padding:16px}.brand b{font-size:23px}.quiet{display:none}.panel{padding:21px}.auth-box{padding:24px}.mode-grid{gap:9px}.mode{padding:14px}.inline-form{align-items:stretch;flex-direction:column}.inline-form label,.inline-form button{width:100%}.word-row{grid-template-columns:1fr}.word-row b,.word-row button{grid-column:auto}.question-card{padding:25px}.stats-row{gap:22px}.page-heading{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.memory-box{display:inline-block;min-width:200px;margin:10px auto;padding:14px 25px;background:#293c63;border:1px solid #92b5dd;border-radius:14px;font-size:clamp(18px,4vw,32px);font-weight:850;letter-spacing:2px}.tile-box{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:10px auto}.tile{background:#30496c;color:#fff;border:1px solid #8298b6;border-radius:9px;padding:12px 14px;font-size:22px;font-weight:800}.tile:disabled{opacity:.3}
