:root {
  --bg-primary: #FAFAF7; --bg-secondary: #FFFFFF; --bg-card: #FFFFFF;
  --bg-card-hover: #F5F5F0; --bg-accent: #0D4D2B; --bg-accent-light: #E8F5EC;
  --bg-accent-lighter: #F0FAF3; --text-primary: #1A1A1A; --text-secondary: #555555;
  --text-muted: #888888; --text-on-accent: #FFFFFF; --border-color: #E5E5E0;
  --accent: #0D4D2B; --accent-hover: #0A3D22; --correct: #16803C;
  --correct-bg: #DCFCE7; --wrong: #DC2626; --wrong-bg: #FEE2E2;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  --font-body: 'DM Sans', sans-serif; --font-display: 'Fraunces', serif;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0F1210; --bg-secondary: #171D19; --bg-card: #1C2420;
    --bg-card-hover: #232E28; --bg-accent: #34D979; --bg-accent-light: #1A2E22;
    --bg-accent-lighter: #152118; --text-primary: #E8ECE9; --text-secondary: #A0ADA5;
    --text-muted: #6B7C72; --text-on-accent: #0F1210; --border-color: #2A3630;
    --accent: #34D979; --accent-hover: #5AE494; --correct: #34D979;
    --correct-bg: #0D2818; --wrong: #F87171; --wrong-bg: #2D1515;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  }
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.container { max-width:1100px; margin:0 auto; padding:24px 20px 60px; }
.site-header { background:var(--bg-secondary); border-bottom:1px solid var(--border-color); padding:14px 0; position:sticky; top:0; z-index:100; }
.header-inner { max-width:1100px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--accent); display:flex; align-items:center; gap:8px; }
.logo-icon { width:32px; height:32px; background:var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-on-accent); font-size:16px; }
.nav a { color:var(--text-secondary); padding:7px 14px; border-radius:var(--radius-sm); font-size:0.88rem; font-weight:500; transition:all 0.2s; }
.nav a:hover { background:var(--bg-accent-light); color:var(--accent); text-decoration:none; }
h1 { font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; margin-bottom:16px; }
h2 { font-size:1.15rem; font-weight:600; margin:24px 0 8px; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--text-muted); margin-bottom:16px; flex-wrap:wrap; }
.breadcrumb a { color:var(--accent); }
.subject-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:36px; }
.subject-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); padding:20px; transition:all 0.2s; }
.subject-card:hover { border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.subject-card-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px; background:var(--bg-accent-light); color:var(--accent); }
.subject-card h3 { font-size:1rem; font-weight:600; margin-bottom:4px; }
.subject-card p { font-size:0.82rem; color:var(--text-muted); }
.topic-count { margin-top:10px; font-size:0.78rem; color:var(--accent); font-weight:500; }
.topic-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.topic-item { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; transition:all 0.2s; }
.topic-item:hover { border-color:var(--accent); background:var(--bg-card-hover); }
.topic-item-num { width:30px; height:30px; border-radius:50%; background:var(--bg-accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; margin-right:12px; flex-shrink:0; }
.btn-primary { background:var(--accent); color:var(--text-on-accent); border:none; padding:12px 24px; border-radius:var(--radius-sm); font-size:0.92rem; font-weight:600; cursor:pointer; font-family:var(--font-body); display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover { background:var(--accent-hover); text-decoration:none; }
.ad-slot { background:var(--bg-accent-lighter); border:1px dashed var(--border-color); border-radius:var(--radius-sm); padding:16px; text-align:center; margin:20px 0; font-size:0.78rem; color:var(--text-muted); min-height:60px; display:flex; align-items:center; justify-content:center; }
.footer { max-width:1100px; margin:0 auto; padding:24px 20px; border-top:1px solid var(--border-color); text-align:center; font-size:0.82rem; color:var(--text-muted); }
.footer-links { display:flex; justify-content:center; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.footer-links a { color:var(--text-muted); }
.legal-page { max-width:720px; margin:0 auto; }
.legal-page p, .legal-page li { font-size:0.92rem; color:var(--text-secondary); line-height:1.7; margin-bottom:10px; }
.legal-page ul { padding-left:20px; }
.hero { text-align:center; padding:40px 0 32px; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:var(--bg-accent-light); color:var(--accent); padding:6px 16px; border-radius:20px; font-size:0.82rem; font-weight:500; margin-bottom:16px; }
.hero p { font-size:1.05rem; color:var(--text-secondary); max-width:560px; margin:0 auto 24px; }
.hero-stats { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.hero-stat-num { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--accent); }
.hero-stat-label { font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
@media (max-width:640px) { .subject-grid { grid-template-columns:1fr 1fr; } .topic-list { grid-template-columns:1fr; } }
@media (max-width:380px) { .subject-grid { grid-template-columns:1fr; } }