/* ============================================================
   PASSMYEXAMS — MODERN SHARED THEME
   Design tokens, base, layout, header, hero, cards, boxes,
   buttons, tables, sidebar, footer. Light + dark aware.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

/* ---- Design tokens ---- */
:root {
  /* Neutrals (slate) */
  --n-0:#ffffff; --n-25:#fbfcfe; --n-50:#f6f8fb; --n-100:#eef1f6;
  --n-150:#e4e9f0; --n-200:#d7dee8; --n-300:#b9c3d1; --n-400:#8a95a6;
  --n-500:#657084; --n-600:#4a5567; --n-700:#333c4d;
  --n-800:#202735; --n-900:#141a25; --n-950:#0c111b;

  /* Semantic surfaces (light default) */
  --bg: #f4f6fb;
  --bg-soft: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e4e9f0;
  --border-strong: #d0d8e4;
  --text: #1b2333;
  --text-soft: #4a5567;
  --text-faint: #74809440;
  --text-muted: #6b7688;

  /* Accent — overridden per subject */
  --accent: #4f46e5;
  --accent-2: #7c3aed;
  --accent-soft: #eef0fe;
  --accent-ink: #3730a3;
  --on-accent: #ffffff;

  /* Status */
  --good: #16a34a; --good-soft:#e9f8ef;
  --bad:  #e11d48; --bad-soft:#fdeef1;
  --warn: #d97706; --warn-soft:#fdf3e4;
  --info: #0284c7; --info-soft:#e6f4fc;

  /* Radii */
  --r-xs: 8px; --r-sm: 11px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --sh-2: 0 4px 12px rgba(16,24,40,.07), 0 2px 4px rgba(16,24,40,.04);
  --sh-3: 0 12px 28px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.05);
  --sh-glow: 0 10px 30px -8px var(--accent);

  /* Fonts */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Sora', var(--font);

  /* Layout */
  --header-h: 64px;
  --sidebar-w: 268px;
  --content-max: 940px;
  --wide-max: 1160px;
}

/* Dark mode */
:root[data-theme="dark"] {
  --bg:#0d1220; --bg-soft:#121a2b; --surface:#161f31; --surface-2:#1b2536;
  --border:#273148; --border-strong:#354260;
  --text:#eef2f9; --text-soft:#b7c1d4; --text-muted:#8b96ac; --text-faint:#55627a;
  --accent-soft:#1e2544; --accent-ink:#c7cbff;
  --good-soft:#12291d; --bad-soft:#2b1620; --warn-soft:#2a2013; --info-soft:#0f2434;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.4);
  --sh-3:0 16px 34px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0d1220; --bg-soft:#121a2b; --surface:#161f31; --surface-2:#1b2536;
    --border:#273148; --border-strong:#354260;
    --text:#eef2f9; --text-soft:#b7c1d4; --text-muted:#8b96ac; --text-faint:#55627a;
    --accent-soft:#1e2544; --accent-ink:#c7cbff;
    --good-soft:#12291d; --bad-soft:#2b1620; --warn-soft:#2a2013; --info-soft:#0f2434;
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.4);
    --sh-3:0 16px 34px rgba(0,0,0,.5);
  }
}

/* ---- Per-subject accent themes ---- */
.theme-envmanagement { --accent:#0e9f6e; --accent-2:#0891b2; --accent-soft:#e6f6ef; --accent-ink:#0b7350; }
.theme-biology       { --accent:#16a34a; --accent-2:#65a30d; --accent-soft:#e9f8ef; --accent-ink:#12823b; }
.theme-maths         { --accent:#7c3aed; --accent-2:#c026d3; --accent-soft:#f2ecfe; --accent-ink:#5b21b6; }
.theme-english       { --accent:#d9488a; --accent-2:#e11d48; --accent-soft:#fdecf3; --accent-ink:#a3255f; }
.theme-marine        { --accent:#0e7490; --accent-2:#0ea5e9; --accent-soft:#e4f5fa; --accent-ink:#0b5a70; }
.theme-physics       { --accent:#4f46e5; --accent-2:#6366f1; --accent-soft:#ecedfe; --accent-ink:#3730a3; }
:root[data-theme="dark"] .theme-envmanagement,
:root[data-theme="dark"] .theme-biology,
:root[data-theme="dark"] .theme-maths,
:root[data-theme="dark"] .theme-english,
:root[data-theme="dark"] .theme-marine,
:root[data-theme="dark"] .theme-physics { --accent-soft:#1c2740; --accent-ink:#cdd3ff; }

/* ---- Reset / base ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms!important;transition-duration:.01ms!important;} }

body {
  font-family:var(--font); color:var(--text); background:var(--bg);
  line-height:1.65; min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 40%);
  background-attachment:fixed;
}

h1,h2,h3,h4 { font-family:var(--display); line-height:1.2; letter-spacing:-.01em; color:var(--text); font-weight:700; }
h1 { font-size:clamp(1.8rem,4vw,2.5rem); }
h2 { font-size:clamp(1.4rem,3vw,1.9rem); }
h3 { font-size:1.28rem; }
h4 { font-size:1.08rem; }
p { margin-bottom:1rem; }
a { color:var(--accent); text-decoration:none; transition:color .15s; }
a:hover { color:var(--accent-2); }
strong { color:var(--text); font-weight:700; }
ul,ol { margin:0 0 1rem 1.25rem; }
li { margin-bottom:.35rem; }
img,svg { max-width:100%; height:auto; }
hr { border:none; border-top:1px solid var(--border); margin:2rem 0; }

/* Accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px; border-radius:6px;
}
.skip-link { position:absolute; top:-48px; left:8px; background:var(--accent); color:#fff;
  padding:.6rem 1rem; border-radius:8px; z-index:2000; font-weight:700; }
.skip-link:focus { top:8px; }
.visually-hidden { position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

/* ---- Icons ---- */
.ic { width:1.15em; height:1.15em; display:inline-block; vertical-align:-.18em; flex:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.ic-lg { width:1.5em; height:1.5em; }

/* ============ HEADER ============ */
.site-header {
  position:sticky; top:0; z-index:1000; height:var(--header-h);
  display:flex; align-items:center; gap:1rem; padding:0 clamp(1rem,3vw,1.6rem);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.brand { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display);
  font-weight:800; font-size:1.15rem; color:var(--text); letter-spacing:-.02em; white-space:nowrap; }
.brand:hover { color:var(--text); }
.brand .brand-mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--sh-2); }
.brand .brand-mark .ic { width:20px; height:20px; stroke-width:2.4; }
.brand em { color:var(--accent); font-style:normal; }
.header-spacer { flex:1; }

.topic-nav { display:flex; gap:.25rem; align-items:center; flex-wrap:wrap; }
.topic-nav a {
  color:var(--text-soft); padding:.44rem .8rem; border-radius:var(--r-pill);
  font-size:.86rem; font-weight:600; white-space:nowrap; transition:all .15s; line-height:1;
}
.topic-nav a:hover { background:var(--accent-soft); color:var(--accent-ink); }
.topic-nav a.active { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); box-shadow:var(--sh-1); }

.header-btn { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-soft); cursor:pointer; transition:all .15s; }
.header-btn:hover { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
.hamburger { display:none; }

/* ============ HERO ============ */
.hero {
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(2.6rem,7vw,4.5rem) 1.5rem clamp(2.2rem,5vw,3.4rem);
  background:
    radial-gradient(120% 120% at 50% -20%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb,var(--accent) 12%, var(--surface)) 0%, var(--surface) 70%);
  border-bottom:1px solid var(--border);
}
.hero .eyebrow { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-soft); padding:.4rem .9rem; border-radius:var(--r-pill); margin-bottom:1.1rem; }
.hero h1 { margin-bottom:.7rem; }
.hero .lead { font-size:clamp(1rem,2.2vw,1.18rem); color:var(--text-soft); max-width:620px; margin:0 auto; }
.hero-stats { display:flex; justify-content:center; gap:clamp(1.4rem,5vw,3rem); flex-wrap:wrap; margin-top:1.8rem; }
.hero-stat b { display:block; font-family:var(--display); font-size:1.7rem; color:var(--accent-ink); line-height:1; }
.hero-stat span { font-size:.82rem; color:var(--text-muted); font-weight:600; }

/* ============ LAYOUT WRAPPERS ============ */
.wrap { max-width:var(--wide-max); margin:0 auto; padding:0 clamp(1rem,3vw,1.6rem); }
.section { padding:clamp(2rem,5vw,3.2rem) 0; }
.section-head { text-align:center; max-width:640px; margin:0 auto 2rem; }
.section-head h2 { margin-bottom:.5rem; }
.section-head p { color:var(--text-muted); }

/* ---- Topic page layout ---- */
.page-layout { display:grid; grid-template-columns:var(--sidebar-w) 1fr; max-width:var(--wide-max);
  margin:0 auto; gap:0; }
.content { padding:clamp(1.4rem,3vw,2.4rem) clamp(1.1rem,3vw,2.2rem); max-width:var(--content-max);
  width:100%; margin:0 auto; }
.content > h1 { margin-bottom:.35rem; }
.page-subtitle { color:var(--text-muted); font-size:1.02rem; margin-bottom:1.6rem; }

/* ============ SIDEBAR ============ */
.sidebar { position:sticky; top:var(--header-h); align-self:start; height:calc(100vh - var(--header-h));
  overflow-y:auto; padding:1.4rem 1rem; border-right:1px solid var(--border); background:var(--surface); }
.sidebar h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted);
  font-family:var(--font); font-weight:700; margin-bottom:.8rem; padding-left:.5rem; }
.sidebar-nav { list-style:none; margin:0; }
.sidebar-nav li { margin-bottom:.12rem; }
.sidebar-nav a { display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border-radius:9px;
  font-size:.88rem; color:var(--text-soft); font-weight:500; border-left:2px solid transparent; }
.sidebar-nav a:hover { background:var(--accent-soft); color:var(--accent-ink); }
.sidebar-nav a.active { background:var(--accent-soft); color:var(--accent-ink); font-weight:700;
  border-left-color:var(--accent); }
.sidebar-nav .nav-num { font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent);
  min-width:2.1rem; font-size:.82rem; }
.sidebar-progress { margin-top:1.4rem; padding:1rem .7rem 0; border-top:1px solid var(--border); }
.sidebar-progress-label { font-size:.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:.5rem; }

/* ============ SECTIONS & CARDS ============ */
.subtopic-section { margin-bottom:2.6rem; scroll-margin-top:calc(var(--header-h) + 14px); }
.subtopic-section > h2 { display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
.section-number { flex:none; width:38px; height:38px; border-radius:11px; display:inline-grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-family:var(--display);
  font-size:.92rem; font-weight:700; box-shadow:var(--sh-1); }

.content-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:1.35rem 1.5rem; margin-bottom:1.25rem; box-shadow:var(--sh-1); }
.content-card h3 { margin:.3rem 0 .7rem; color:var(--accent-ink); }
.content-card h3:first-child { margin-top:0; }
.content-card ul, .content-card ol { margin-bottom:.4rem; }
.content-card p:last-child { margin-bottom:0; }

.key-term { background:linear-gradient(180deg,transparent 62%, color-mix(in srgb,var(--accent) 28%, transparent) 62%);
  font-weight:700; color:var(--text); padding:0 .1em; }

/* Info boxes */
.key-facts,.tip-box,.warning-box,.info-box { position:relative; border-radius:var(--r);
  padding:1.1rem 1.25rem 1.1rem 3.1rem; margin:1.4rem 0; box-shadow:var(--sh-1); font-size:.98rem;
  border:1px solid var(--border); }
.key-facts::before,.tip-box::before,.warning-box::before,.info-box::before {
  position:absolute; left:1rem; top:1.05rem; width:1.35rem; height:1.35rem; }
.key-facts { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%, transparent); }
.tip-box { background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 30%, transparent); }
.warning-box { background:var(--bad-soft); border-color:color-mix(in srgb,var(--bad) 30%, transparent); }
.info-box { background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 30%, transparent); }
.key-facts ul,.tip-box ul,.warning-box ul,.info-box ul { margin-bottom:0; }
.box-title { display:block; font-weight:800; font-family:var(--display); font-size:.95rem; margin-bottom:.35rem;
  letter-spacing:.01em; }
.key-facts .box-title { color:var(--accent-ink); }
.tip-box .box-title { color:var(--good); }
.warning-box .box-title { color:var(--bad); }
.info-box .box-title { color:var(--info); }

/* Equation / formula box */
.equation-box { background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r);
  padding:1rem 1.3rem; margin:1.1rem 0; text-align:center; }
.equation-box .equation-label { display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); font-weight:700; margin-bottom:.45rem; }
.equation-box .eq { font-size:1.2rem; font-weight:600; color:var(--accent-ink);
  font-family:'Cambria Math','Times New Roman',serif; }

/* Section quick-links */
.section-links { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1.8rem; }

/* ============ BUTTONS ============ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; cursor:pointer;
  font-family:var(--font); font-weight:600; font-size:.95rem; line-height:1; padding:.7rem 1.2rem;
  border-radius:var(--r-pill); border:1px solid transparent; transition:all .16s; text-decoration:none;
  min-height:42px; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent);
  box-shadow:var(--sh-1); }
.btn-primary:hover { color:var(--on-accent); box-shadow:var(--sh-2); }
.btn-secondary { background:var(--surface); color:var(--text-soft); border-color:var(--border-strong); }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft); }
.btn-ghost { background:var(--accent-soft); color:var(--accent-ink); }
.btn-ghost:hover { color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 16%, transparent); }
.btn-success { background:var(--good); color:#fff; }
.btn-success:hover { color:#fff; filter:brightness(1.05); }
.btn-small { padding:.44rem .85rem; font-size:.85rem; min-height:34px; }
.btn-block { width:100%; }

/* ============ TABLES ============ */
.table-scroll { overflow-x:auto; margin:1rem 0; border-radius:var(--r); border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; font-size:.93rem; background:var(--surface); }
.data-table th { background:var(--surface-2); color:var(--accent-ink); text-align:left; padding:.7rem 1rem;
  font-family:var(--font); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;
  border-bottom:2px solid var(--border-strong); white-space:nowrap; }
.data-table td { padding:.68rem 1rem; border-bottom:1px solid var(--border); vertical-align:top; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:var(--accent-soft); }

/* ---- Mark complete ---- */
.mark-complete { display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem; padding:.65rem 1rem;
  background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--r-pill);
  cursor:pointer; font-weight:600; font-size:.92rem; color:var(--text-soft); transition:all .15s; }
.mark-complete:hover { border-color:var(--good); color:var(--good); background:var(--good-soft); }
.mark-complete input { width:18px; height:18px; accent-color:var(--good); cursor:pointer; }
.mark-complete:has(input:checked) { border-style:solid; border-color:var(--good); color:var(--good); background:var(--good-soft); }

/* ============ PROGRESS BAR ============ */
.progress-bar { width:100%; height:9px; background:var(--n-100); border-radius:var(--r-pill); overflow:hidden; }
:root[data-theme="dark"] .progress-bar { background:#0d1524; }
.progress-fill { height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .6s cubic-bezier(.4,0,.2,1); }
.progress-text { font-size:.8rem; color:var(--text-muted); margin-top:.45rem; font-weight:600; }

/* ============ FOOTER ============ */
.site-footer { margin-top:3rem; border-top:1px solid var(--border); background:var(--surface);
  padding:2.2rem 1.5rem; text-align:center; color:var(--text-muted); font-size:.88rem; }
.site-footer a { color:var(--accent); font-weight:600; }
.footer-links { display:flex; gap:.4rem 1rem; justify-content:center; flex-wrap:wrap; margin:.7rem 0; }
.footer-disclaimer { max-width:640px; margin:1rem auto 0; font-size:.78rem; color:var(--text-faint); line-height:1.5; }

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .page-layout { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:var(--header-h); width:var(--sidebar-w); z-index:900;
    transform:translateX(-102%); transition:transform .28s ease; box-shadow:var(--sh-3); }
  .sidebar.open { transform:translateX(0); }
  .topic-nav { display:none; }
  .hamburger { display:inline-grid; }
}
@media (max-width:640px){
  .hero-stats { gap:1.2rem; }
  .content { padding:1.1rem; }
  .btn { font-size:.9rem; }
}

/* Scrollbar */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* Utilities */
.text-center{text-align:center;} .mt-1{margin-top:.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;}
.mb-0{margin-bottom:0;} .mb-2{margin-bottom:1rem;} .muted{color:var(--text-muted);}
.fade-in{ animation:fadeUp .5s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }