:root {
  --primary-color: #059669;
  --primary-dark: #047857;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-light: #94a3b8;
  --bg: #ffffff;
  --bg-light: #f0fdf4;
  --bg-dark: #0f172a;
  --border: #e2e8f0;
  --shadow: rgba(15,23,42,0.08);
  --nav-height: 64px;
  --sidebar-width: 260px;
  --radius: 0.5rem;
  --radius-lg: 0.875rem;
  --font: 'Inter', sans-serif;
  --transition: 0.2s ease;
}
[data-theme="dark"] {
  --bg: #0f172a; --bg-light: #1e293b; --text-primary: #e2e8f0;
  --text-secondary: #94a3b8; --text-light: #64748b; --border: #334155; --shadow: rgba(0,0,0,0.4);
}
[data-theme="dark"] .navbar { background: rgba(15,23,42,0.97); border-bottom-color: #334155; }
[data-theme="dark"] .sidebar { background: #111827; border-right-color: #334155; }
[data-theme="dark"] .sidebar-link { color: #94a3b8; }
[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .sidebar-group-title { color: #64748b; }
[data-theme="dark"] .card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .card h3 { color: #e2e8f0; }
[data-theme="dark"] .card p  { color: #94a3b8; }
[data-theme="dark"] .lesson-row { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .lesson-row h4 { color: #e2e8f0; }
[data-theme="dark"] .lesson-row p  { color: #94a3b8; }
[data-theme="dark"] .lesson-row:hover { border-color: var(--primary-color); }
[data-theme="dark"] .badge-soon { background: #1e293b; color: #64748b; border-color: #334155; }
[data-theme="dark"] .video-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .notes-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .notes-card h2 { color: #e2e8f0; border-bottom-color: #334155; }
[data-theme="dark"] .notes-card h3 { color: #cbd5e1; }
[data-theme="dark"] .notes-card p, [data-theme="dark"] .notes-card li { color: #94a3b8; }
[data-theme="dark"] .section-hero { background: linear-gradient(135deg, #0a1628 0%, #052e16 60%, #047857 100%); }

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font); color:var(--text-primary); background:var(--bg); line-height:1.6; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }

.navbar { position:fixed; top:0; width:100%; z-index:200; height:var(--nav-height); background:rgba(255,255,255,0.97); border-bottom:1px solid var(--border); backdrop-filter:blur(10px); }
.nav-inner { max-width:1400px; margin:0 auto; padding:0 1.5rem; height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-logo a { font-size:1.1rem; font-weight:700; color:var(--primary-color); }
.nav-logo span { font-weight:400; color:var(--text-secondary); }
.nav-links { display:flex; align-items:center; gap:0.25rem; }
.nav-links a { font-size:0.88rem; font-weight:500; color:var(--text-secondary); padding:0.35rem 0.7rem; border-radius:var(--radius); transition:all var(--transition); }
.nav-links a:hover, .nav-links a.active { background:#dcfce7; color:var(--primary-color); }
.nav-right { display:flex; align-items:center; gap:0.5rem; }
.nav-visit-main { font-size:0.82rem; font-weight:600; color:var(--primary-color); border:1px solid var(--primary-color); padding:0.3rem 0.85rem; border-radius:999px; transition:all var(--transition); }
.nav-visit-main:hover { background:var(--primary-color); color:white; }
.theme-toggle { width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-primary); font-size:0.85rem; transition:all var(--transition); }
.theme-toggle:hover { background:var(--primary-color); border-color:var(--primary-color); color:white; }
.hamburger { display:none; flex-direction:column; gap:4px; cursor:pointer; padding:4px; }
.hamburger span { width:22px; height:2px; background:var(--text-primary); border-radius:2px; transition:all var(--transition); }

.section-hero { background:linear-gradient(135deg,#0f172a 0%,#052e16 60%,#059669 100%); padding:calc(var(--nav-height) + 28px) 2rem 40px; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; text-align:center; }
.section-hero h1 { font-size:1.75rem; font-weight:700; margin-bottom:0.4rem; }
.section-hero p  { font-size:0.95rem; color:#94a3b8; max-width:520px; }
.breadcrumb { font-size:0.8rem; color:#94a3b8; margin-bottom:0.6rem; display:flex; align-items:center; gap:0.35rem; justify-content:center; }
.breadcrumb a { color:#86efac; }
.breadcrumb a:hover { text-decoration:underline; }

.docs-layout { display:flex; min-height:100vh; }
.sidebar { width:var(--sidebar-width); min-width:var(--sidebar-width); background:var(--bg-light); border-right:1px solid var(--border); position:fixed; top:var(--nav-height); left:0; height:calc(100vh - var(--nav-height)); overflow-y:auto; padding:1.25rem 0; transition:transform var(--transition); z-index:100; }
.sidebar-group { margin-bottom:1.5rem; }
.sidebar-group-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-light); padding:0 1.1rem; margin-bottom:0.35rem; }
.sidebar-link { display:flex; align-items:center; gap:0.6rem; font-size:0.875rem; color:var(--text-secondary); padding:0.4rem 1.1rem; transition:all var(--transition); border-left:3px solid transparent; }
.sidebar-link i { font-size:0.8rem; width:14px; text-align:center; color:var(--text-light); }
.sidebar-link:hover { background:#dcfce7; color:var(--primary-color); border-left-color:#bbf7d0; }
.sidebar-link:hover i, .sidebar-link.active i { color:var(--primary-color); }
.sidebar-link.active { background:#dcfce7; color:var(--primary-color); font-weight:600; border-left-color:var(--primary-color); }
.docs-main { margin-left:var(--sidebar-width); flex:1; min-width:0; padding:2rem 2.5rem 4rem; }

/* ── Category cards ── */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; margin-bottom:2rem; }
.card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; box-shadow:0 2px 10px var(--shadow); transition:transform var(--transition),box-shadow var(--transition); }
.card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(5,150,105,0.12); }
.card-icon { width:48px; height:48px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.card h3 { font-size:1.05rem; font-weight:700; color:var(--text-primary); margin-bottom:0.4rem; }
.card p  { font-size:0.875rem; color:var(--text-secondary); line-height:1.6; margin-bottom:1rem; }
.card-tags { display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:1rem; }
.card-tag  { font-size:0.75rem; background:var(--bg-light); color:var(--text-secondary); border:1px solid var(--border); border-radius:999px; padding:0.15rem 0.6rem; }
.card-link { font-size:0.875rem; font-weight:600; color:var(--primary-color); display:inline-flex; align-items:center; gap:0.35rem; transition:gap var(--transition); }
.card-link:hover { gap:0.6rem; }

/* ── Lesson rows on category pages ── */
.lesson-row { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.1rem 1.4rem; margin-bottom:0.75rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; transition:border-color var(--transition),box-shadow var(--transition); text-decoration:none; color:inherit; }
.lesson-row:hover { border-color:var(--primary-color); box-shadow:0 2px 10px rgba(5,150,105,0.1); }
.lesson-row-body { flex:1; }
.lesson-row h4 { font-size:0.95rem; font-weight:600; color:var(--text-primary); margin-bottom:0.2rem; }
.lesson-row p  { font-size:0.82rem; color:var(--text-secondary); }
.lesson-meta { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; flex-shrink:0; }
.badge-video { font-size:0.72rem; font-weight:600; padding:0.2rem 0.6rem; border-radius:999px; background:#fff1f2; color:#e11d48; border:1px solid #fecdd3; white-space:nowrap; }
.badge-soon  { font-size:0.72rem; font-weight:600; padding:0.2rem 0.6rem; border-radius:999px; background:#f1f5f9; color:#94a3b8; border:1px solid var(--border); white-space:nowrap; }
.badge-new   { font-size:0.72rem; font-weight:600; padding:0.2rem 0.6rem; border-radius:999px; background:#dcfce7; color:#059669; border:1px solid #bbf7d0; white-space:nowrap; }

.content-group { margin-bottom:2.5rem; }
.content-group-title { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-light); margin-bottom:0.85rem; padding-bottom:0.5rem; border-bottom:1px solid var(--border); }

/* ── Lesson page layout ── */
.lesson-layout { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; margin-bottom:2rem; }
.video-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 2px 10px var(--shadow); position:sticky; top:calc(var(--nav-height) + 1rem); }
.video-embed { position:relative; aspect-ratio:16/9; background:#0f172a; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-coming { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; color:#64748b; font-size:0.9rem; }
.video-coming i { font-size:2.5rem; color:#374151; }
.video-footer { padding:1rem 1.25rem; }
.video-footer h3 { font-size:0.95rem; font-weight:700; color:var(--text-primary); margin-bottom:0.25rem; }
.video-footer p  { font-size:0.82rem; color:var(--text-secondary); }
.video-link { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.82rem; font-weight:600; color:#e11d48; margin-top:0.5rem; transition:gap var(--transition); }
.video-link:hover { gap:0.6rem; }

.notes-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.75rem; box-shadow:0 2px 10px var(--shadow); }
.notes-card h2 { font-size:1.25rem; font-weight:700; color:var(--text-primary); margin:1.5rem 0 0.6rem; padding-bottom:0.4rem; border-bottom:2px solid var(--border); }
.notes-card h2:first-child { margin-top:0; }
.notes-card h3 { font-size:1rem; font-weight:700; color:var(--text-primary); margin:1.1rem 0 0.4rem; }
.notes-card p  { font-size:0.9rem; color:var(--text-secondary); line-height:1.8; margin-bottom:0.85rem; }
.notes-card ul, .notes-card ol { padding-left:1.3rem; margin-bottom:0.85rem; }
.notes-card li { font-size:0.9rem; color:var(--text-secondary); line-height:1.75; margin-bottom:0.25rem; }
.notes-callout { background:#f0fdf4; border-left:4px solid var(--primary-color); border-radius:0 var(--radius) var(--radius) 0; padding:0.75rem 1rem; margin:0.85rem 0; font-size:0.88rem; color:#166534; }

.docs-footer { background:var(--bg-dark); color:#94a3b8; padding:1.5rem; text-align:center; font-size:0.85rem; }
.docs-footer a { color:#86efac; }

.mobile-bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:62px; background:var(--bg); border-top:1px solid var(--border); z-index:150; padding-bottom:env(safe-area-inset-bottom,0); box-shadow:0 -4px 20px var(--shadow); }
.mobile-bottom-nav-inner { display:flex; height:62px; align-items:stretch; }
.mobile-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--text-light); font-size:0.6rem; font-weight:500; padding:0.35rem 0.15rem; transition:color var(--transition),background var(--transition); min-height:44px; }
.mobile-nav-item i { font-size:1rem; }
.mobile-nav-item:hover,.mobile-nav-item.active { color:var(--primary-color); background:#dcfce7; }
[data-theme="dark"] .mobile-bottom-nav { background:#0f172a; border-top-color:#334155; }
[data-theme="dark"] .mobile-nav-item:hover,[data-theme="dark"] .mobile-nav-item.active { background:#1e293b; color:#34d399; }

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:99; backdrop-filter:blur(2px); }
.sidebar-overlay.show { display:block; }

@media(max-width:1024px) {
  .sidebar { transform:translateX(-260px); width:260px; }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.15); }
  .docs-main { margin-left:0; padding:1.75rem 2rem 3rem; }
  .hamburger { display:flex; }
  .lesson-layout { grid-template-columns:1fr; }
  .video-card { position:static; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .docs-main { padding:1.5rem 1.25rem 5rem; }
  .section-hero { padding:32px 1.5rem; }
  .section-hero h1 { font-size:1.5rem; }
}
@media(max-width:640px) {
  .cat-grid { grid-template-columns:1fr; }
  .nav-visit-main { display:none; }
  .mobile-bottom-nav { display:block; }
}