:root{--bg:#0b1020;--panel:rgba(18,26,51,.7);--text:#eaf0ff;--muted:#aab4d6;--border:hsla(0,0%,100%,.12);--primary:#4f7cff;--primary2:#7aa2ff;--easy:#3ddc97;--medium:#ffd166;--hard:#ff6b6b;--shadow:0 16px 50px rgba(0,0,0,.45);--shadow-soft:0 10px 30px rgba(0,0,0,.28)}*{box-sizing:border-box}body,html{height:100%}body{margin:0;background:radial-gradient(1200px 700px at 20% 0,rgba(79,124,255,.18),transparent 55%),radial-gradient(900px 600px at 85% 15%,rgba(61,220,151,.12),transparent 50%),radial-gradient(1100px 700px at 50% 100%,rgba(255,209,102,.08),transparent 55%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,Apple Color Emoji,Segoe UI Emoji}.wrap{max-width:900px;margin:0 auto;padding:18px;animation:pageIn .42s cubic-bezier(.2,.9,.2,1) both}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.brand{font-weight:900;letter-spacing:.2px}.nav{display:flex;gap:10px}.btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer;transition:transform .14s ease,background .14s ease,border-color .14s ease}.btn:hover{transform:translateY(-1px);border-color:hsla(0,0%,100%,.2)}.btn:active{transform:translateY(0) scale(.99)}.btnActive{border-color:rgba(79,124,255,.9);background:rgba(79,124,255,.12)}.panel{border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(18,26,51,.78),rgba(18,26,51,.56));padding:18px;box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hidden{display:none}.statRow{display:flex;gap:12px;flex-wrap:wrap}.statCard{flex:1 1;min-width:220px;border:1px solid var(--border);border-radius:14px;padding:14px;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.08));box-shadow:0 10px 22px rgba(0,0,0,.18);transition:transform .18s ease,border-color .18s ease}.statCard:hover{transform:translateY(-2px);border-color:hsla(0,0%,100%,.18)}.statLabel{color:var(--muted);font-size:13px}.statValue{font-size:28px;font-weight:800;margin-top:6px}.progressWrap{margin:12px 0 18px}.progressTop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.progressLabel,.progressPct{color:var(--muted)}.progressTrack{height:16px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.2);overflow:hidden}.progressBar{height:100%;background:linear-gradient(90deg,var(--primary) 0,var(--primary2) 100%);border-radius:999px;width:0;transition:width .42s cubic-bezier(.2,.9,.2,1);position:relative}.progressBar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.22),transparent);transform:translateX(-60%);animation:shimmer 2.2s ease-in-out infinite}.primary{background:var(--primary);color:#fff;border:1px solid hsla(0,0%,100%,.1);padding:14px 18px;font-size:16px;border-radius:14px;cursor:pointer;min-width:220px;font-weight:800;box-shadow:0 16px 40px rgba(79,124,255,.25);transition:transform .14s ease,box-shadow .18s ease,filter .18s ease}.primary:hover{transform:translateY(-1px);box-shadow:0 18px 50px rgba(79,124,255,.32);filter:saturate(1.06)}.primary:active{transform:translateY(0) scale(.99)}.primary:disabled{opacity:.6;cursor:not-allowed}.wordBox{border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,.2);padding:20px;text-align:center;box-shadow:var(--shadow-soft);transform-origin:50% 50%;animation:cardIn .42s cubic-bezier(.2,.9,.2,1) both}.word{font-size:48px;font-weight:900;letter-spacing:.5px}.panelTitle{font-weight:900;margin-bottom:8px}.inputRow{display:flex;gap:10px;margin-top:10px}.input{flex:1 1;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.18);padding:12px 14px;color:var(--text);outline:none;transition:border-color .18s ease,transform .18s ease}.input:focus{border-color:rgba(122,162,255,.7);transform:translateY(-1px)}.secondary{background:transparent;color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:800;white-space:nowrap;transition:transform .14s ease,border-color .14s ease,background .14s ease}.secondary:hover{transform:translateY(-1px);border-color:hsla(0,0%,100%,.2);background:hsla(0,0%,100%,.04)}.secondary:active{transform:translateY(0) scale(.99)}.ratingRow{display:flex;gap:10px;margin-top:14px}.rating{flex:1 1;border-radius:14px;border:1px solid var(--border);padding:12px 14px;font-weight:900;cursor:pointer;transition:transform .14s ease,border-color .14s ease,filter .18s ease}.rating:hover{transform:translateY(-1px);border-color:hsla(0,0%,100%,.2);filter:saturate(1.08)}.rating:active{transform:translateY(0) scale(.99)}.rating.easy{background:rgba(61,220,151,.14);color:var(--easy)}.rating.medium{background:rgba(255,209,102,.14);color:var(--medium)}.rating.hard{background:hsla(0,100%,71%,.14);color:var(--hard)}.subheading{margin-top:18px;font-size:18px}.list{margin-top:10px;border:1px solid var(--border);border-radius:14px;background:rgba(0,0,0,.15);padding:12px}.listItem{padding:10px;border-bottom:1px dashed hsla(0,0%,100%,.15)}.listItem:last-child{border-bottom:none}.muted{color:var(--muted)}@media (prefers-reduced-motion:reduce){.progressBar:after,.wordBox,.wrap{animation:none!important}*{transition:none!important}}@keyframes pageIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes cardIn{0%{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes shimmer{0%{transform:translateX(-60%);opacity:.1}50%{transform:translateX(60%);opacity:.22}to{transform:translateX(160%);opacity:.1}}