:root {
  --accent: #22c55e;
  --accent2: #f59e0b;
  --bg-dark: #050d14;
  --bg-card: #0d1b2a;
  --border: #1e3a5f;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Outfit', sans-serif; }
code, .mono { font-family: 'Space Mono', monospace; }
body { background: var(--bg-dark); color: #e2e8f0; min-height: 100vh; }
body.light-mode { background: #f0fdf4; color: #0f172a; }
.sidebar { width: 280px; min-height: 100vh; background: #070f1a; border-right: 1px solid var(--border); position: fixed; left: 0; top: 0; overflow-y: auto; z-index: 50; transition: transform .3s ease; }
.main-content { margin-left: 280px; padding: 24px; min-height: 100vh; }
@media(max-width:768px) { .main-content { margin-left: 0; padding: 12px; } .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.badge-green { background: #052e16; color: #4ade80; border: 1px solid #166534; }
.badge-gold { background: #2d1b00; color: #fbbf24; border: 1px solid #92400e; }
.badge-red { background: #2d0000; color: #f87171; border: 1px solid #7f1d1d; }
.badge-blue { background: #0a1628; color: #60a5fa; border: 1px solid #1e40af; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: all .2s; font-size: 14px; color: #94a3b8; }
.nav-item:hover, .nav-item.active { background: #0d2137; color: #4ade80; }
.nav-section { font-size: 11px; font-weight: 700; color: #475569; letter-spacing: 1.5px; padding: 12px 16px 4px; text-transform: uppercase; }
.tab-btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; color: #64748b; background: transparent; border: 1px solid transparent; }
.tab-btn.active { background: #0d2137; color: #4ade80; border-color: #166534; }
.tab-btn:hover:not(.active) { color: #94a3b8; background: #0a1a2a; }
.section { display: none; }
.section.active { display: block; }
.quiz-option { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; margin: 6px 0; transition: all .2s; background: #0a1628; }
.quiz-option:hover { border-color: #22c55e; background: #0d2137; }
.quiz-option.correct { border-color: #22c55e; background: #052e16; color: #4ade80; }
.quiz-option.wrong { border-color: #ef4444; background: #2d0000; color: #f87171; }
.quiz-option.disabled { pointer-events: none; opacity: 0.7; }
.progress-bar { height: 6px; border-radius: 3px; background: #1e3a5f; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #22c55e, #4ade80); transition: width .4s ease; }
.formula-box { background: #050d14; border: 1px solid #1e3a5f; border-left: 3px solid #22c55e; border-radius: 8px; padding: 16px; margin: 12px 0; }
.exam-timer { font-family: 'Space Mono', monospace; font-size: 28px; color: #fbbf24; letter-spacing: 2px; }
.cheatsheet-item { border: 1px solid var(--border); border-radius: 8px; margin: 6px 0; overflow: hidden; }
.cheatsheet-header { padding: 10px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #0a1628; font-weight: 600; font-size: 14px; }
.cheatsheet-body { padding: 14px 16px; background: #060e18; display: none; font-size: 13px; }
.cheatsheet-body.open { display: block; }
.hot-topic { background: linear-gradient(135deg, #2d1b00, #1a0f00); border: 1px solid #92400e; border-radius: 10px; padding: 14px; margin: 8px 0; }
.trap-box { background: linear-gradient(135deg, #1a0000, #0d0000); border: 1px solid #7f1d1d; border-radius: 10px; padding: 14px; margin: 8px 0; }
.glow-text { background: linear-gradient(135deg, #22c55e, #4ade80, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.table-style th { background: #0a1628; color: #4ade80; padding: 8px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border: 1px solid var(--border); }
.table-style td { padding: 8px 12px; font-size: 13px; border: 1px solid var(--border); }
.table-style tr:nth-child(even) td { background: #08121e; }
.btn-primary { padding: 10px 20px; border-radius: 8px; background: #22c55e; color: #fff; border: none; font-weight: 600; cursor: pointer; font-size: 13px; }
.btn-primary:hover { background: #16a34a; }
.btn-gold { padding: 10px 20px; border-radius: 8px; background: #f59e0b; color: #000; border: none; font-weight: 600; cursor: pointer; font-size: 13px; }
.btn-gold:hover { background: #d97706; }
.btn-outline { padding: 10px 20px; border-radius: 8px; background: none; color: #94a3b8; border: 1px solid var(--border); font-weight: 600; cursor: pointer; font-size: 13px; }
.btn-outline:hover { border-color: #22c55e; color: #22c55e; }
.btn-danger { padding: 10px 20px; border-radius: 8px; background: #ef4444; color: #fff; border: none; font-weight: 600; cursor: pointer; font-size: 13px; }
.score-card { background: linear-gradient(135deg, var(--bg-card), #0a1628); border: 1px solid #fbbf24; border-radius: 12px; padding: 28px; text-align: center; margin-top: 20px; }
.score-big { font-size: 56px; font-weight: 900; color: #fbbf24; line-height: 1; }
.score-label { color: #64748b; font-size: 14px; margin: 8px 0 16px; }
.verdict-pass { color: #4ade80; font-size: 18px; font-weight: 700; }
.verdict-fail { color: #f87171; font-size: 18px; font-weight: 700; }
.resource-link { display: block; padding: 14px; background: #0a1628; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; transition: border-color .2s; }
.resource-link:hover { border-color: #22c55e; }
.light-mode .card { background: #ffffff; border-color: #d1fae5; }
.light-mode .nav-item { color: #374151; }
.light-mode .nav-item:hover, .light-mode .nav-item.active { background: #dcfce7; color: #15803d; }
.light-mode .tab-btn.active { background: #dcfce7; color: #15803d; border-color: #86efac; }
.light-mode .quiz-option { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.light-mode .formula-box { background: #f8fafc; border-color: #cbd5e1; }
.light-mode .cheatsheet-header { background: #f0fdf4; color: #0f172a; }
.light-mode .cheatsheet-body { background: #f8fafc; color: #0f172a; }
.light-mode .hot-topic { background: #fffbeb; border-color: #d97706; color: #0f172a; }
.light-mode .sidebar { background: #f8fafc; border-color: #d1fae5; }
.light-mode .table-style th { background: #f0fdf4; color: #15803d; }
.light-mode .resource-link { background: #f8fafc; border-color: #d1fae5; }