:root{--bg:#0f1115;--surface:#171a21;--surface-2:#1e222b;--border:#2a2f3a;--text:#e7e9ee;--muted:#9aa3b2;--primary:#4f8cff;--primary-hover:#3d7bf0;--success:#38b26b;--danger:#e5544b}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}.container{max-width:960px;margin:0 auto;padding:24px 20px}header.site{border-bottom:1px solid var(--border);background:var(--surface)}header.site .inner{align-items:center;gap:18px;max-width:960px;margin:0 auto;padding:14px 20px;display:flex}header.site .brand{font-size:18px;font-weight:700}header.site nav{color:var(--muted);gap:16px;display:flex}header.site .spacer{flex:1}.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px}.card h3{margin:0 0 6px}.price{color:var(--primary);font-weight:700}.btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-size:15px;display:inline-block}.btn:hover{background:var(--primary-hover)}.btn:disabled{opacity:.6;cursor:default}.btn.secondary{background:var(--surface-2);border:1px solid var(--border)}.lesson{border-bottom:1px solid var(--border);color:var(--muted);align-items:center;gap:10px;padding:10px 0;display:flex}.lesson .lock{font-size:13px}.muted{color:var(--muted)}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 12px;font-size:15px}.form-narrow{max-width:380px}.alert{border-radius:8px;margin-bottom:14px;padding:10px 14px}.alert.error{border:1px solid var(--danger);color:#ffb3ad;background:#e5544b1f}.alert.success{border:1px solid var(--success);color:#a7e8c1;background:#38b26b1f}.badge-owned{color:var(--success);font-weight:600}.player-wrap{aspect-ratio:16/9;border:1px solid var(--border);background:#000;border-radius:10px;width:100%;position:relative;overflow:hidden}.player-wrap iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.lesson.clickable{cursor:pointer}.lesson.clickable:hover{color:var(--text)}