.page-wide{max-width:1100px;margin:0 auto;padding:24px}@media (max-width: 900px){.page-wide{padding:16px 16px calc(64px + var(--tabbar-h) + env(safe-area-inset-bottom,0px))}}.hero-card{position:relative;overflow:hidden;border-radius:20px;padding:2.25rem 1.25rem;text-align:center;margin-bottom:1.5rem;background:linear-gradient(160deg,#14102b,#241a4d 45%,#3d2374);box-shadow:0 12px 30px -12px #14102b80}.hero-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,154,60,.18),transparent 40%),radial-gradient(circle at 85% 85%,rgba(139,92,246,.25),transparent 45%);pointer-events:none}.hero-title{position:relative;margin:0 0 6px;font-size:21px;color:#fff}.hero-accent{background:linear-gradient(90deg,#ff9a3c,#ffcb8a);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{position:relative;color:#ffffffb8;font-size:14px;margin:0 0 1.1rem}.hero-hook-row{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.hero-hook-pill{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#ff9a3c,#ffb35c);color:#2a1400;font-weight:700;font-size:12.5px;padding:.5rem .9rem;border-radius:999px;white-space:nowrap;box-shadow:0 8px 18px -6px #ff9a3c8c}.hero-hook-spark{font-size:14px;line-height:1}.section-label{font-size:14px;font-weight:600;margin:0 0 10px}.subject-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:1.5rem}.subject-card{display:block;background:linear-gradient(160deg,#1a1438,#241a4d);border-radius:14px;padding:1.25rem;text-decoration:none;color:#fff;position:relative;overflow:hidden;transition:transform .12s ease}.subject-card-live{border:1px solid #ff9a3c}.subject-card-live:active{transform:scale(.98)}.subject-card-soon{background:linear-gradient(160deg,#1a1438,#241a4d);border:1px solid rgba(255,255,255,.08);color:#fff;opacity:.55}.subject-card-soon .subject-native{color:#fff}.subject-card-soon .subject-english{color:#fff9}.subject-card-soon .subject-icon-muted{background:#ffffff14}.subject-card-soon .subject-icon-muted i,.subject-card-soon .subject-count-muted{color:#ffffff80}.avail-pill{position:absolute;top:14px;right:14px;background:linear-gradient(90deg,#ff9a3c,#ffb35c);color:#2a1400;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}.popular-badge{position:absolute;top:14px;left:14px;background:#ffffff1f;color:#ffcb8a;border:1px solid rgba(255,255,255,.18);font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}.subject-card-popular .subject-icon{margin-top:28px}.subject-icon{width:36px;height:36px;border-radius:10px;background:#ff9a3c26;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.subject-icon i{font-size:18px;color:#ff9a3c}.subject-icon-muted{background:var(--bg)}.subject-icon-muted i{color:var(--muted)}.subject-native{font-weight:700;font-size:15px}.subject-card-live .subject-native{color:#fff}.subject-card-live .subject-english{color:#ffffffa6}.subject-english{font-size:13px;color:var(--muted);margin:2px 0 10px}.subject-count{font-size:12px;color:#ffcb8a;font-weight:600}.subject-count-muted{font-size:12px;color:var(--muted)}@media (max-width: 900px){.subject-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.subject-card{border-radius:16px;padding:.9rem}.avail-pill{top:10px;right:10px;font-size:10px;padding:2px 8px}.popular-badge{top:10px;left:10px;font-size:10px;padding:2px 8px}.subject-card-popular .subject-icon{margin-top:22px}.subject-icon{width:30px;height:30px;border-radius:9px;margin-bottom:8px}.subject-icon i{font-size:15px}.subject-native{font-size:13px;line-height:1.3}.subject-english{font-size:11px;margin:2px 0 8px}.subject-count,.subject-count-muted{font-size:11px}}.login-banner{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.login-banner-text{font-size:13px;color:var(--muted)}.login-banner-btn{font-size:13px;padding:6px 14px;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text);white-space:nowrap}@media (max-width: 900px){.login-banner{display:none!important}body.is-logged-in #hero-card{display:none}}