/* ===================================================================
   BiologieBoost — Duolingo-stijl thema (licht, fris, chunky)
   =================================================================== */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
:root {
  --content-max: 1440px; --content-pad: 28px;
  --green: #58cc02; --green-d: #46a302;
  --blue: #1cb0f6; --blue-d: #1899d6;
  --purple: #ce82ff; --purple-d: #a568cc;
  --red: #ff4b4b; --red-d: #ea2b2b;
  --gold: #ffc800; --gold-d: #e6a800;
  --orange: #ff9600;
  --ink: #3c3c3c; --ink-2: #4b4b4b; --muted: #afafaf; --muted-2: #777;
  --line: #e5e5e5; --line-d: #cfcfcf;
  --bg: #ffffff; --bg-soft: #f7f7f7;
  --r: 16px; --r-lg: 20px;
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html, body { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
body {
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-2);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  font-weight: 700;
}
body.modal-open {
  overflow: hidden;
}
h1, h2, h3, h4 { font-weight: 800; color: var(--ink); margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; color: inherit; }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

/* ---------- topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 12px clamp(12px, 3vw, 26px); padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(clamp(12px, 3vw, 26px), env(safe-area-inset-left));
  padding-right: max(clamp(12px, 3vw, 26px), env(safe-area-inset-right));
  background: #fff; border-bottom: 2px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; flex: none; }
.brand .logo { display: inline-grid; place-items: center; transition: transform .35s var(--bounce); }
.brand .logo svg { display: block; }
.brand:hover .logo { transform: rotate(-12deg) scale(1.12); }
.brand-txt { font-weight: 900; font-size: 21px; color: var(--green); letter-spacing: -.5px; }
.spacer { flex: 1; }
.hud { display: flex; align-items: center; gap: 16px; min-width: 0; }
.chip-stat { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; flex: none; }
.chip-stat.streak { color: var(--orange); }
.ic { display: inline-block; vertical-align: middle; flex: none; }
.ic-flame { transform-origin: center bottom; animation: flame 1.7s ease-in-out infinite; }
.ic-flame .flame-out { fill: var(--orange); }
.ic-flame .flame-in { fill: var(--gold); }
.ic-gear { fill: var(--muted-2); transition: fill .15s; }
.icon-btn:hover .ic-gear { fill: var(--ink); }
/* inline icon-uitlijning binnen tekst/labels */
.lab-ic .ic, .dash .goalring .ring i .ic { display: inline-block; vertical-align: -.12em; }
.hearts .h { display: inline-grid; place-items: center; line-height: 0; }
.hearts .h .ic { width: 22px; height: 22px; }
.combo .ic-flame { vertical-align: -.15em; }
@keyframes flame { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.13) rotate(2deg); } }
.chip-stat.streak.pulse { animation: streakPulse .7s var(--bounce); }
@keyframes streakPulse { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.icon-btn { background: #fff; border: 2px solid var(--line); width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; transition: transform .3s var(--bounce), background .15s; }
.icon-btn:hover { background: var(--bg-soft); transform: rotate(45deg); }
.auth-actions { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.top-auth-btn { height: 38px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: #fff; color: var(--blue); border: 2px solid var(--line); border-radius: 999px; padding: 0 14px;
  box-shadow: 0 3px 0 var(--line); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px;
  transition: transform .08s, box-shadow .08s, border-color .15s; }
.top-auth-btn:hover { border-color: var(--blue); }
.top-auth-btn.primary { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 3px 0 var(--green-d); }
.account-pill { height: 40px; max-width: 190px; display: inline-flex; align-items: center; gap: 8px; background: #f6fff0;
  border: 2px solid var(--green); color: var(--green-d); border-radius: 999px; padding: 3px 12px 3px 4px;
  box-shadow: 0 3px 0 var(--green); font-weight: 900; transition: transform .08s, box-shadow .08s; }
.account-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff;
  font-size: 13px; font-weight: 900; flex: none; overflow: hidden; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 13px; }

/* ---------- layout ---------- */
main { max-width: 680px; margin: 0 auto; padding: 22px clamp(14px, 3vw, 20px) 120px; }
.view { animation: viewIn .4s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted-2); font-weight: 800; margin: 30px 4px 14px; }
.stagger > * { opacity: 0; animation: popIn .5s var(--bounce) forwards; }
.stagger > *:nth-child(1){animation-delay:.04s} .stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.16s} .stagger > *:nth-child(4){animation-delay:.22s}
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.glass { background: #fff; border: 2px solid var(--line); border-radius: var(--r); }

/* ---------- buttons (3D) ---------- */
.btn { background: var(--green); color: #fff; border-radius: var(--r); font-weight: 800; font-size: 15px; text-transform: uppercase;
  letter-spacing: .8px; padding: 14px 22px; box-shadow: 0 4px 0 var(--green-d); transition: transform .07s, box-shadow .07s, filter .15s; }
.btn:hover { filter: brightness(1.05); }
.btn.ghost { background: #fff; color: var(--blue); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn.danger { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-d); }
.btn.big { padding: 16px 30px; font-size: 16px; }

/* ---------- HERO / dashboard ---------- */
.hero { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); padding: 24px clamp(18px, 4vw, 30px); }
.hero .kicker { display: inline-block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-d);
  background: #d7ffb8; padding: 5px 12px; border-radius: 999px; font-weight: 800; }
.hero h1 { font-size: clamp(24px, 5vw, 36px); margin: 12px 0 6px; line-height: 1.1; }
.hero h1 .grad { color: var(--green); }
.hero p { color: var(--muted-2); margin: 0; max-width: 48ch; font-weight: 700; }
.dash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.dash .tile { background: var(--bg-soft); border: 2px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.dash .tile .lab { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .5px; font-weight: 800; }
.dash .tile .val { font-size: 24px; font-weight: 900; margin-top: 3px; color: var(--ink); }
.dash .goalring { display: flex; align-items: center; gap: 12px; }
.dash .goalring .ring { --p: 0; width: 50px; height: 50px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--gold) calc(var(--p)*1%), var(--line) 0); display: grid; place-items: center; }
.dash .goalring .ring i { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 18px; }

/* ---------- theme accents ---------- */
.t-green { --acc: #58cc02; --acc-d: #46a302; --acc-soft: #d7ffb8; }
.t-blue  { --acc: #1cb0f6; --acc-d: #1899d6; --acc-soft: #ddf4ff; }
.t-purple{ --acc: #ce82ff; --acc-d: #a568cc; --acc-soft: #f3e3ff; }
.t-orange{ --acc: #ff9600; --acc-d: #e07f00; --acc-soft: #ffe9c9; }
.t-pink  { --acc: #ff5b9e; --acc-d: #e23d81; --acc-soft: #ffe0ec; }
.t-teal  { --acc: #14b8a6; --acc-d: #0e9484; --acc-soft: #cff6f0; }
.t-red   { --acc: #ff4b4b; --acc-d: #e02b2b; --acc-soft: #ffdede; }
.t-indigo{ --acc: #6c8cff; --acc-d: #4d6ce0; --acc-soft: #e2e8ff; }
.t-lime  { --acc: #7cb518; --acc-d: #649413; --acc-soft: #eaf7cd; }
.t-amber { --acc: #f0a500; --acc-d: #cf8b00; --acc-soft: #ffeec2; }
.t-brown { --acc: #c1741a; --acc-d: #9c5c12; --acc-soft: #f6e6cf; }
.t-rose  { --acc: #f43f5e; --acc-d: #d92544; --acc-soft: #ffe0e6; }
.t-sky   { --acc: #0ea5e9; --acc-d: #0284c7; --acc-soft: #d6f0fd; }

/* section title */
.section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 30px 4px 14px; flex-wrap: wrap; }

/* ---------- onboarding / setup ---------- */
.setup-hero { background: linear-gradient(160deg, #f2fff0, #ffffff); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 26px clamp(18px, 4vw, 32px); }
.setup-hero .kicker { display: inline-block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-d);
  background: #d7ffb8; padding: 5px 12px; border-radius: 999px; font-weight: 800; }
.setup-hero h1 { font-size: clamp(26px, 5.5vw, 40px); margin: 14px 0 8px; line-height: 1.08; }
.setup-hero h1 .grad { color: var(--green); }
.setup-hero p { color: var(--muted-2); margin: 0; max-width: 56ch; font-weight: 700; line-height: 1.6; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pick-card { text-align: left; background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); padding: 20px; cursor: pointer;
  box-shadow: 0 4px 0 var(--line); transition: transform .1s, border-color .15s, box-shadow .1s; }
.pick-card.sel { border-color: var(--green); box-shadow: 0 4px 0 var(--green); background: #f6fff0; }
.pick-card .pick-emoji { font-size: 30px; width: 54px; height: 54px; border-radius: 15px; background: var(--bg-soft); display: grid; place-items: center; }
.pick-card .pick-emoji .ic { width: 30px; height: 30px; }
.pick-card h3 { margin: 12px 0 4px; font-size: 19px; }
.pick-card p { margin: 0; color: var(--muted-2); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.setup-foot { display: flex; gap: 12px; justify-content: flex-end; margin-top: 26px; }
.btn:disabled { opacity: .45; filter: grayscale(.3); cursor: not-allowed; }

/* ---------- hero context chip ---------- */
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ctx-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border: 2px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 800; color: var(--ink-2); box-shadow: 0 3px 0 var(--line); transition: transform .1s; }
.ctx-chip .dot { color: var(--muted); }
.ctx-chip .ctx-edit { color: var(--blue); text-transform: uppercase; font-size: 10px; letter-spacing: .5px; margin-left: 4px; }

/* ---------- chapters grid ---------- */
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.chapter { position: relative; min-height: 142px; display: flex; flex-direction: column; border-radius: 18px; padding: 15px 16px 16px; cursor: pointer; background: #fff;
  border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); transition: transform .12s, box-shadow .12s; overflow: hidden; }
.chapter::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--acc, var(--green)); }
.chapter:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--line); }
.chapter .ch-top { display: flex; align-items: center; gap: 10px; margin-top: 2px; min-height: 46px; }
.chapter .ch-num { font-size: 13px; font-weight: 900; color: #fff; background: var(--acc, var(--green)); min-width: 30px; height: 30px; padding: 0 9px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.chapter.soon .ch-num { background: var(--line-d); color: #fff; }
.chapter .ch-progress { --p: 0; width: 46px; height: 46px; margin-left: 0; border-radius: 50%; background: conic-gradient(var(--acc, var(--green)) calc(var(--p)*1%), var(--sand) 0); display: grid; place-items: center; flex: none; }
.chapter .ch-progress i { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--acc-d, var(--green-d)); display: grid; place-items: center; font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif; font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: 0; }
.chapter h3 { margin: 12px 52px 0 0; font-size: 17.5px; line-height: 1.15; }
.chapter .ch-go { position: absolute; right: 16px; bottom: 14px; margin: 0; font-size: 12px; font-weight: 900; color: var(--acc-d, var(--ink)); pointer-events: none; }
.chapter.soon { cursor: default; background: var(--sand, var(--bg-soft)); border-style: dashed; box-shadow: none; }
.chapter.soon::before { background: var(--line-d); }
.chapter.soon:hover { transform: none; box-shadow: none; }
.soon-pill { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--muted); background: #ece5d3; border: 1.5px solid var(--line-d); padding: 5px 13px; border-radius: 999px; }

/* ---------- chapter banner + tabs ---------- */
.ch-banner { display: flex; gap: 16px; align-items: flex-start; border-radius: var(--r-lg); padding: 22px clamp(18px, 3vw, 26px);
  margin: 14px 0 16px; color: #fff; background: var(--acc, var(--green)); box-shadow: 0 5px 0 var(--acc-d, var(--green-d)); }
.ch-banner-ic { font-size: 40px; width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.25); flex: none; }
.ch-banner-txt { min-width: 0; }
.ch-banner-txt h2 { color: #fff; font-size: clamp(22px, 4vw, 28px); margin-bottom: 6px; }
.ch-banner-txt p { color: rgba(255,255,255,.95); font-weight: 700; font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }
.ch-banner-bar { height: 10px; background: rgba(0,0,0,.18); border-radius: 999px; overflow: hidden; max-width: 340px; }
.ch-banner-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fff, #d7ffb8, #fff); background-size: 200% 100%; transition: width .7s var(--ease); animation: progress-shimmer 1.8s linear infinite; }

@keyframes progress-shimmer {
  from { background-position: 220% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-banner-bar > span,
  .vid-prog-bar > span { animation: none; transition: none; }
  .pbar > span { transition: none; }
}

.ch-banner-meta { color: rgba(255,255,255,.95); font-weight: 800; font-size: 12px; margin-top: 7px; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; padding-bottom: 4px; margin-bottom: 18px; }
.tab { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: #fff; border: 2px solid var(--line);
  color: var(--muted-2); padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 var(--line); transition: transform .1s, border-color .15s, color .15s; }
.tab .ic { width: 18px; height: 18px; }
.tab:hover { border-color: var(--blue); }
.tab.on { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 3px 0 var(--green-d); }
.tab.on .ic { color: #fff; }
.tab-lead { color: var(--muted-2); font-weight: 700; line-height: 1.6; margin: 0 4px 18px; font-size: 14px; }

/* ---------- videoleerlijn ---------- */
.vid-progress { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin: 0 0 22px; box-shadow: 0 3px 0 var(--line); }
.vid-prog-bar { flex: 1; height: 12px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.vid-prog-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-d), var(--green), #d7ffb8, var(--green)); background-size: 220% 100%; transition: width .8s var(--ease); animation: progress-shimmer 1.8s linear infinite; }
.vid-prog-lab { font-size: 12.5px; font-weight: 800; color: var(--muted-2); white-space: nowrap; }

.vid-section { margin-bottom: 30px; }
.vid-sec-head { display: flex; align-items: flex-start; gap: 14px; margin: 0 4px 16px; }
.vid-sec-id { flex: none; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 12px; background: var(--acc, var(--green)); color: #fff; font-weight: 900; font-size: 15px; display: grid; place-items: center; }
.vid-sec-title { font-size: 18px; margin: 4px 0 2px; }
.vid-sec-intro { margin: 0; color: var(--muted-2); font-weight: 700; font-size: 13px; line-height: 1.5; }

.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.vid-card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 3px 0 var(--line); transition: border-color .2s, box-shadow .2s; }
.vid-card.watched { border-color: var(--acc, var(--green)); box-shadow: 0 3px 0 var(--acc-d, var(--green-d)); }
.vid-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vid-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; text-decoration: none; }
.vid-info { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 16px; flex: 1; }
.vid-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.vid-title { font-size: 15.5px; line-height: 1.3; }
.vid-dur { flex: none; font-size: 11.5px; font-weight: 800; color: var(--muted-2); background: var(--bg-soft); border-radius: 999px; padding: 3px 9px; }
.vid-desc { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.5; }
.vid-note { font-size: 12px; font-weight: 800; color: var(--acc-d, var(--green-d)); background: var(--acc-soft, var(--bg-soft)); border-radius: 10px; padding: 6px 10px; }
.vid-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.vid-term { font-size: 11.5px; font-weight: 800; color: var(--acc-d, var(--muted-2)); background: var(--acc-soft, var(--bg-soft)); border-radius: 999px; padding: 4px 10px; }
.vid-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.vid-watch { flex: 1; }
.vid-card.watched .vid-watch { color: var(--green-d); border-color: var(--green); }
.vid-open { font-size: 12.5px; font-weight: 800; color: var(--blue); text-decoration: none; white-space: nowrap; }
.vid-open:hover { text-decoration: underline; }

/* ---------- theorie accordion ---------- */
.para-acc { background: #fff; border: 2px solid var(--line); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; box-shadow: 0 3px 0 var(--line); }
.para-acc > summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 800; color: var(--ink); }
.para-acc > summary::-webkit-details-marker { display: none; }
.para-acc .pa-id { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-soft); color: var(--muted-2); display: grid; place-items: center; font-size: 13px; font-weight: 900; flex: none; }
.para-acc .pa-title { flex: 1; font-size: 16px; }
.para-acc .pa-done { font-size: 11px; font-weight: 800; color: var(--green-d); background: #d7ffb8; padding: 3px 9px; border-radius: 999px; }
.para-acc .pa-chev { color: var(--muted); transition: transform .25s; }
.para-acc[open] .pa-chev { transform: rotate(180deg); }
.para-acc[open] .pa-id { background: var(--green); color: #fff; }
.para-acc.done .pa-id { background: var(--green); color: #fff; }
.para-inner { padding: 0 18px 18px; border-top: 2px solid var(--line); }
.para-inner .goalbox { margin: 16px 0 16px; }
.para-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn.small { padding: 10px 16px; font-size: 13px; }

/* ---------- launch cards (flitskaarten/oefenvragen) ---------- */
.card-launch { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 6px; }
.launch-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: var(--r); background: #fff;
  border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .1s; }
.launch-card .lc-ic { font-size: 22px; width: 46px; height: 46px; border-radius: 12px; background: var(--bg-soft); display: grid; place-items: center; font-weight: 900; color: var(--green-d); flex: none; }
.launch-card h4 { margin: 0 0 2px; font-size: 15px; } .launch-card p { margin: 0; color: var(--muted-2); font-size: 12px; font-weight: 700; }
.launch-card.small .lc-ic { font-size: 18px; width: 40px; height: 40px; }

/* ---------- examenopgaven ---------- */
.exam-item { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 0 var(--line); }
.exam-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.exam-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--blue); }
.exam-badge .ic { width: 16px; height: 16px; }
.exam-pts { font-size: 11px; font-weight: 800; color: var(--gold-d); background: #fff7d6; border: 2px solid #ffe08a; padding: 3px 10px; border-radius: 999px; }
.exam-title { font-size: 18px; margin-bottom: 8px; }
.exam-context { background: var(--bg-soft); border-left: 4px solid var(--blue); border-radius: 10px; padding: 12px 15px; color: var(--ink-2); font-weight: 700; line-height: 1.55; font-size: 14px; margin-bottom: 12px; }
.exam-q { font-weight: 800; color: var(--ink); line-height: 1.5; margin-bottom: 14px; }
.exam-model { background: #f6fff0; border: 2px solid var(--green); border-radius: var(--r); padding: 14px 18px; margin-top: 14px; animation: slideUp .3s var(--ease); }
.exam-model .fb-model-tag { font-size: 12px; font-weight: 800; color: var(--green-d); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.exam-model ol { margin: 0; padding-left: 20px; color: var(--ink-2); font-weight: 700; line-height: 1.55; display: grid; gap: 8px; }
.exam-rich-context img,
.exam-source-images img,
.exam-model-images img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* Bronafbeeldingen vullen de volle breedte van hun kader, zodat ze zo groot
   en duidelijk mogelijk in beeld komen. */
.exam-rich-context img,
.exam-source-images img {
  width: 100%;
}
.exam-source-images,
.exam-model-images {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.exam-source-images figure,
.exam-model-images figure {
  margin: 0;
  overflow: auto;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.exam-source-images img,
.exam-model-images img {
  margin: 0 auto;
}
.exam-model-images {
  margin-top: 10px;
}
.ai-fb-slot:not(:empty) { margin-top: 16px; }
.fb-detail { display: grid; gap: 10px; margin-bottom: 14px; }
.fb-block { background: var(--bg-soft); border: 2px solid var(--line); border-radius: var(--r); padding: 12px 15px; }
.fb-block b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 14px; }
.fb-block p { margin: 0; color: var(--ink-2); font-weight: 700; line-height: 1.5; font-size: 14px; }

/* quick actions */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qcard { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r); cursor: pointer;
  background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .1s; }
.qcard:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--line); }
.qcard .qi { font-size: 28px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--bg-soft); flex: none; }
.qcard .qi .ic { width: 24px; height: 24px; }
.qcard h4 { margin: 0 0 3px; font-size: 16px; } .qcard p { margin: 0; color: var(--muted-2); font-size: 12.5px; font-weight: 700; }

/* ---------- back & headers ---------- */
.backbtn { background: #fff; border: 2px solid var(--line); padding: 9px 16px; border-radius: var(--r); font-weight: 800; font-size: 14px;
  color: var(--muted-2); display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 3px 0 var(--line); transition: transform .1s; }
/* nette tussenruimte tussen de terugknop en het volgende paneel (lees, quiz, flashcards, proces, open, tutor) */
.backbtn + .panel { margin-top: 16px; }
.world-banner { border-radius: var(--r-lg); padding: 22px clamp(18px, 3vw, 26px); margin: 14px 0 8px; color: #fff; }
.world-banner.world-brain { background: var(--green); box-shadow: 0 5px 0 var(--green-d); }
.world-banner.world-senses { background: var(--blue); box-shadow: 0 5px 0 var(--blue-d); }
.world-banner.world-immune { background: var(--purple); box-shadow: 0 5px 0 var(--purple-d); }
.world-banner .big { font-size: 42px; }
.world-banner h2 { margin: 6px 0 4px; font-size: 26px; color: #fff; }
.world-banner .wmeta { color: rgba(255, 255, 255, .92); font-weight: 800; font-size: 13px; }

/* ---------- goalbox (in accordion) ---------- */
.goalbox { padding: 16px 18px; border-left: 6px solid var(--green); }
.goalbox .gt { font-weight: 800; margin-bottom: 9px; color: var(--ink); }
.goalbox ul { margin: 0; padding-left: 20px; color: var(--ink-2); line-height: 1.7; font-weight: 700; }

/* ===================================================================
   PANEL / shared
   =================================================================== */
.panel { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 26px); }
.topline { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.pbar { flex: 1; height: 16px; background: var(--line); border-radius: 999px; overflow: hidden; }
.pbar > span { display: block; height: 100%; border-radius: 999px; background: var(--green); width: 0;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08), inset 0 4px 0 rgba(255, 255, 255, .35); transition: width .75s var(--ease); will-change: width; }
.combo { font-weight: 900; color: var(--orange); white-space: nowrap; min-width: 44px; text-align: right; transition: transform .2s var(--bounce); }
.combo.bump { transform: scale(1.4); }
.hearts { display: flex; gap: 4px; font-size: 20px; }
.hearts .h.lost { filter: grayscale(1); opacity: .35; transition: all .3s; }
.fc-meta { color: var(--muted-2); font-size: 13px; font-weight: 800; }

/* ---------- quiz ---------- */
.qtext { font-size: clamp(20px, 3.6vw, 26px); font-weight: 800; margin: 4px 0 22px; line-height: 1.3; color: var(--ink); }
.options { display: grid; gap: 12px; }
.opt { text-align: left; padding: 15px 18px; border-radius: var(--r); background: #fff; border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--line); font-size: 16px; font-weight: 800; color: var(--ink-2); display: flex; align-items: center; gap: 13px;
  transition: transform .07s, border-color .12s, background .12s, box-shadow .07s; }
.opt .key { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--muted-2); flex: none; }
.opt:hover { background: #f7feff; border-color: #84d8ff; box-shadow: 0 3px 0 #b3e6ff; }
.opt.correct { border-color: var(--green); background: #d7ffb8; color: var(--green-d); box-shadow: 0 3px 0 var(--green); animation: pop .35s var(--bounce); }
.opt.correct .key { border-color: var(--green); background: var(--green); color: #fff; }
.opt.wrong { border-color: var(--red); background: #ffdfe0; color: var(--red-d); box-shadow: 0 3px 0 var(--red); }
.opt.wrong .key { border-color: var(--red); background: var(--red); color: #fff; }
.opt.dim { opacity: .5; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.explain { margin-top: 20px; padding: 16px 18px; border-radius: var(--r); font-size: 15px; font-weight: 700; animation: slideUp .3s var(--ease); }
.explain b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 900; }
.explain b.ok { color: var(--green-d); } .explain b.no { color: var(--red-d); }
.explain.good { background: #d7ffb8; color: #4a8a1d; }
.explain.bad { background: #ffdfe0; color: #c63a3a; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qfoot { display: flex; justify-content: flex-end; margin-top: 22px; }

/* ---------- lokale Biologiepagina-bronopgaven ---------- */
.source-quiz-shell,
.source-match-shell {
  max-width: 1080px;
  margin-inline: auto;
}
.source-set-meta {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  margin-bottom: 12px;
}
.source-qhtml {
  color: var(--ink);
  font-size: clamp(16px, 2.4vw, 19px);
  font-weight: 650;
  line-height: 1.65;
  margin-bottom: 22px;
}
.source-qhtml img {
  display: block;
  max-width: min(100%, 900px);
  height: auto;
  margin: 14px 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.source-options .opt {
  align-items: flex-start;
}
.source-short-box {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.source-short-input {
  min-width: min(360px, 100%);
  flex: 1 1 280px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font: inherit;
  font-weight: 750;
  padding: 13px 14px;
}
.source-short-input:focus,
.source-match-select:focus {
  outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent);
  border-color: var(--green);
}
.source-check-list,
.source-match-list {
  display: grid;
  gap: 10px;
}
.source-check-option {
  display: grid;
  grid-template-columns: auto 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: 0 3px 0 var(--line);
  color: var(--ink-2);
  font-weight: 800;
  line-height: 1.35;
}
.source-check-option input {
  width: 19px;
  height: 19px;
  accent-color: var(--green);
}
.source-check-option .key {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--muted-2);
}
.source-check-option.correct {
  border-color: var(--green);
  background: #d7ffb8;
}
.source-check-option.wrong {
  border-color: var(--red);
  background: #ffdfe0;
}
.source-match-shell h2 {
  margin: 0 0 14px;
}
.source-match-intro img {
  margin-inline: auto;
}
.source-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: 0 3px 0 var(--line);
}
.source-match-prompt {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--ink-2);
  font-weight: 750;
  line-height: 1.45;
}
.source-match-prompt b {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--green-d);
}
.source-match-select {
  width: 100%;
  min-height: 44px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 750;
  padding: 8px 10px;
}
.source-match-row.correct {
  border-color: var(--green);
  background: #f1ffe8;
}
.source-match-row.wrong {
  border-color: var(--red);
  background: #fff0f1;
}
.source-match-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.source-match-status {
  color: var(--ink-2);
  font-weight: 850;
}

/* ---------- LEER ---------- */
.lesson { display: grid; place-items: center; gap: 18px; text-align: center; min-height: 300px; }
.lesson .emoji { font-size: 56px; animation: pop .5s var(--bounce); }
.lesson .badge { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); font-weight: 800; }
.lesson .term { font-size: clamp(26px, 6vw, 38px); font-weight: 900; line-height: 1.1; color: var(--green); }
.lesson .def { font-size: clamp(16px, 3.2vw, 20px); color: var(--ink-2); max-width: 52ch; line-height: 1.55; font-weight: 700; }
.dots { display: flex; gap: 7px; justify-content: center; }
.dots .d { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: all .3s; }
.dots .d.on { background: var(--green); width: 24px; border-radius: 999px; }
.lesson-nav { display: flex; gap: 12px; justify-content: center; }

/* ---------- flashcards ---------- */
.fc-stage { display: grid; place-items: center; gap: 20px; }
.flashcard { width: min(560px, 100%); height: 300px; perspective: 1500px; cursor: pointer; }
.fc-inner { position: relative; width: 100%; height: 100%; transition: transform .55s var(--bounce); transform-style: preserve-3d; }
.flashcard.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--r-lg); padding: 30px; display: grid; place-items: center; text-align: center; }
.fc-front { background: #fff; border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.fc-front .cn { position: absolute; top: 16px; left: 18px; font-size: 26px; opacity: .35; }
.fc-front .term { font-size: clamp(26px, 5vw, 36px); font-weight: 900; color: var(--ink); }
.fc-front .hint { position: absolute; bottom: 18px; left: 0; right: 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.fc-back { background: #d7ffb8; border: 2px solid var(--green); box-shadow: 0 5px 0 var(--green); transform: rotateY(180deg); }
.fc-back .def { font-size: clamp(16px, 3.4vw, 21px); line-height: 1.55; font-weight: 700; color: #3a6b16; }
.fc-rate { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.fc-rate button { padding: 13px 22px; border-radius: var(--r); font-weight: 800; font-size: 14px; box-shadow: 0 4px 0 var(--line); border: 2px solid var(--line); background: #fff; transition: transform .08s; }
.rate-again { color: var(--red); } .rate-hard { color: var(--gold-d); } .rate-good { color: var(--green); }

/* ---------- sequence ---------- */
.seq-list { display: grid; gap: 10px; margin-top: 12px; }
.seq-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: #fff;
  border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); cursor: grab; user-select: none; transition: border-color .2s, background .2s, transform .1s; }
.seq-item:active { cursor: grabbing; }
.seq-item.dragging { opacity: .5; transform: scale(1.02); }
.seq-item.over { border-color: var(--blue); }
.seq-item .grip { color: var(--muted); font-size: 18px; }
.seq-item .idx { width: 28px; height: 28px; border-radius: 9px; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.seq-item .txt { flex: 1; font-weight: 800; color: var(--ink-2); }
.seq-item.ok { border-color: var(--green); background: #d7ffb8; }
.seq-item.no { border-color: var(--red); background: #ffdfe0; }
.seq-controls { display: flex; gap: 6px; margin-left: auto; }
.seq-controls button { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-soft); border: 2px solid var(--line); font-weight: 800; color: var(--muted-2); }
.seq-controls button:hover { background: #ececec; }

/* ---------- AI tutor ---------- */
.chat { display: flex; flex-direction: column; height: min(560px, 68vh); }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.msg { max-width: 88%; padding: 12px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; font-weight: 700; animation: popIn .25s var(--bounce); }
.msg.user { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 5px; }
.msg.ai { align-self: flex-start; background: var(--bg-soft); border: 2px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 5px; }
.msg.sys { align-self: center; color: var(--muted-2); font-size: 13px; background: transparent; text-align: center; }
.chat-suggest { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chip { background: #fff; border: 2px solid var(--line); color: var(--blue); padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; transition: border-color .2s; }
.chip:hover { border-color: var(--blue); }
.chat-input { display: flex; gap: 10px; margin-top: 12px; }
.chat-input textarea { flex: 1; resize: none; background: #fff; color: var(--ink); border: 2px solid var(--line);
  border-radius: var(--r); padding: 12px 14px; font-size: 15px; min-height: 48px; max-height: 120px; font-family: inherit; font-weight: 700; }
.chat-input textarea:focus { outline: none; border-color: var(--blue); }
.typing span { display: inline-block; width: 8px; height: 8px; margin: 0 1px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- result ---------- */
.result { text-align: center; padding: 26px 20px; }
.result .big { font-size: 72px; animation: pop2 .6s var(--bounce); }
@keyframes pop2 { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.result .rank { font-size: 66px; font-weight: 900; line-height: 1; color: var(--gold); -webkit-text-stroke: 2px var(--gold-d); }
.result .stars { font-size: 34px; letter-spacing: 6px; margin: 6px 0; color: var(--gold); }
.result .stars .dim { color: var(--line); }
.result h2 { margin: 8px 0; font-size: 30px; }
.result .score { font-size: 17px; color: var(--muted-2); font-weight: 800; }
.result .actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* ---------- modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 40; display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); animation: viewIn .2s; }
.modal { width: min(480px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg); padding: clamp(20px, 4vw, 26px); background: #fff; border: 2px solid var(--line); box-shadow: 0 8px 0 var(--line); }
.modal h3 { margin: 0 0 6px; font-size: 22px; display: flex; align-items: center; gap: 8px; }
.modal p.sub { color: var(--muted-2); font-size: 13.5px; margin: 0 0 18px; font-weight: 700; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line); color: var(--muted-2); font-size: 0; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); }
.modal-x .ic { width: 18px; height: 18px; display: block; }
.modal-x:hover { color: var(--ink); border-color: var(--line-d); }
.auth-modal, .settings-modal { position: relative; }
.auth-modal { width: min(430px, 100%); }
.settings-modal { width: min(560px, 100%); }
.auth-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--green-d); background: #d7ffb8;
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.auth-dna { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--green); }
.auth-google { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 2px solid var(--line); border-radius: var(--r); color: var(--ink); font-size: 15px; font-weight: 900;
  box-shadow: 0 4px 0 var(--line); transition: transform .08s, box-shadow .08s, border-color .15s; }
.auth-google:hover { border-color: var(--blue); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; margin: 18px 0 14px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 2px; background: var(--line); border-radius: 999px; }
.auth-submit { width: 100%; margin-top: 4px; justify-content: center; }
.auth-switch-line { margin: 18px 0 0; text-align: center; color: var(--muted-2); font-weight: 800; font-size: 13px; }
.auth-switch-line button { color: var(--blue); background: none; font-weight: 900; text-decoration: underline; }
.auth-eye { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-soft); border: 2px solid var(--line); color: var(--muted-2); flex: none; display: grid; place-items: center; font-size: 0; }
.auth-eye .ic { width: 17px; height: 17px; display: block; }
.auth-eye:hover { color: var(--ink); border-color: var(--line-d); }
.auth-status { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; font-weight: 800; border: 2px solid transparent; }
.auth-status.compact { margin-top: 12px; }
.auth-status[data-variant="info"] { background: #ddf4ff; color: #0b6a9e; border-color: #b3e6ff; }
.auth-status[data-variant="success"] { background: #d7ffb8; color: #3a6b16; border-color: var(--green); }
.auth-status[data-variant="error"] { background: #ffdede; color: #b62525; border-color: #ff9c9c; }
.settings-head { display: flex; align-items: center; gap: 12px; margin: 0 36px 18px 0; }
.settings-orb { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: #d7ffb8; color: var(--green-d); }
.settings-orb .ic { width: 24px; height: 24px; fill: currentColor; }
.settings-section { border-top: 2px solid var(--line); padding-top: 16px; margin-top: 16px; }
.settings-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.settings-section-title { margin-bottom: 12px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); }
.account-section { background: #f6fff0; border: 2px solid #d7ffb8; border-radius: var(--r); padding: 14px; }
.account-section.signed-out { background: #f7feff; border-color: #c9ecff; }
.account-settings-head { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 14px; }
.account-avatar.large { width: 44px; height: 44px; font-size: 16px; }
.account-id { min-width: 0; flex: 1; display: grid; gap: 2px; }
.account-id b { color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-id span { color: var(--muted-2); font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-pill { flex: none; font-size: 11px; font-weight: 900; color: var(--green-d); background: #d7ffb8; border: 2px solid var(--green); border-radius: 999px; padding: 4px 10px; }
.sync-pill[data-sync="saving"], .sync-pill[data-sync="loading"] { color: #0b6a9e; background: #ddf4ff; border-color: #b3e6ff; }
.sync-pill[data-sync="error"] { color: #b62525; background: #ffdede; border-color: #ff9c9c; }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.danger, .btn.ghost.danger { color: var(--red); }
.field { margin-bottom: 16px; }
.field label { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 800; margin-bottom: 7px; color: var(--ink); }
.field input, .field select { width: 100%; background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-family: inherit; font-weight: 700; }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); }
.field-wrap { width: 100%; display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 0 8px 0 12px; transition: border-color .15s; }
.field-wrap:focus-within { border-color: var(--blue); }
.field-wrap input { border: 0; border-radius: 0; padding: 12px 0; }
.field-wrap input:focus { outline: none; border-color: transparent; }
.field .help { font-size: 12px; color: var(--muted-2); margin-top: 7px; font-weight: 700; line-height: 1.5; }
.field .help code { background: var(--bg-soft); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.toggle { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 2px solid var(--line); font-weight: 800; color: var(--ink); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 2px solid var(--line); color: var(--ink); }
.danger-zone strong { display: block; color: var(--red); font-size: 14px; font-weight: 900; }
.danger-zone span { display: block; color: var(--muted-2); font-size: 12px; font-weight: 700; line-height: 1.45; margin-top: 3px; }
.danger-zone .btn { flex: none; padding: 9px 16px; font-size: 13px; }
.note { background: #ddf4ff; border: 2px solid #b3e6ff; padding: 13px 15px; border-radius: 14px; font-size: 12.5px; color: #0b6a9e; font-weight: 700; line-height: 1.55; margin-bottom: 16px; overflow-wrap: anywhere; }
.note code, .field .help code { overflow-wrap: anywhere; word-break: break-word; }
.badge-ok { color: var(--green); font-weight: 800; font-size: 12px; }
.badge-warn { color: var(--orange); font-weight: 800; font-size: 12px; }
.switch { appearance: none; width: 48px; height: 28px; background: var(--line); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; }
.switch:checked { background: var(--green); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s var(--bounce); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch:checked::after { transform: translateX(20px); }

/* ---------- confetti & toast ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 59; }
.toast { position: fixed; left: 50%; top: 78px; transform: translateX(-50%) translateY(-26px); z-index: 55;
  max-width: min(520px, calc(100vw - 32px)); background: var(--green); color: #fff; font-weight: 900; line-height: 1.35; text-align: center;
  padding: 14px 24px; border-radius: 18px; box-shadow: 0 5px 0 var(--green-d); opacity: 0; transition: all .45s var(--bounce); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- AI: spinner, notities, knoppen ---------- */
.ai-loading { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-weight: 800; padding: 16px 0; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
.spinner.tiny { width: 16px; height: 16px; border-width: 2px; border-top-color: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-note { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: #f0f9ff; border: 2px solid #c9ecff; color: #0b5d86; font-weight: 700; line-height: 1.55; animation: slideUp .3s var(--ease); }
.ai-tag { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--blue); text-transform: uppercase; margin-bottom: 5px; }
.ai-markdown { display: grid; gap: 10px; }
.ai-markdown p { margin: 0; }
.ai-markdown strong { font-weight: 900; color: #084766; }
.ai-markdown em { font-style: italic; }
.ai-markdown code { background: #ddf4ff; border: 1px solid #b3e6ff; border-radius: 6px; padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.ai-markdown ul, .ai-markdown ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.ai-markdown h3, .ai-markdown h4, .ai-markdown h5 { margin: 2px 0 0; color: #084766; line-height: 1.25; }
.why-btn { display: inline-block; margin-top: 14px; background: #fff; border: 2px solid var(--blue); color: var(--blue); padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 #b3e6ff; transition: transform .1s; }

/* ---------- samenvatting-lezer ---------- */
.summary .badge { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--green); font-weight: 800; }
.sum-title { font-size: 22px; margin: 6px 0 14px; color: var(--ink); }
.summary p { color: var(--ink-2); line-height: 1.65; font-weight: 700; margin: 0 0 12px; }
.sum-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.sum-list li { position: relative; padding: 11px 14px 11px 40px; background: var(--bg-soft); border: 2px solid var(--line); border-radius: 12px; font-weight: 700; color: var(--ink-2); }
.sum-list li::before { content: "•"; position: absolute; left: 16px; top: 7px; color: var(--green); font-size: 22px; font-weight: 900; }

/* ---------- open oefenen ---------- */
.open-head { margin-bottom: 10px; }
.open-input { width: 100%; background: #fff; border: 2px solid var(--line); border-radius: var(--r); padding: 14px 16px; font-size: 16px; font-family: inherit; font-weight: 700; color: var(--ink); resize: vertical; min-height: 120px; }
.open-input:focus { outline: none; border-color: var(--blue); }
.open-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* ---------- AI-feedback ---------- */
.fb-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.score-ring { --p: 0; --col: var(--green); width: 86px; height: 86px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--col) calc(var(--p)*1%), var(--line) 0); animation: ringIn .8s var(--ease); }
@keyframes ringIn { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.score-ring i { width: 68px; height: 68px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 25px; font-weight: 900; color: var(--ink); }
.score-ring i small { font-size: 12px; }
.fb-verdict { font-size: 20px; font-weight: 900; color: var(--ink); }
.fb-fb { color: var(--ink-2); font-weight: 700; line-height: 1.5; margin-top: 3px; }
.fb-lists { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.fb-good, .fb-miss { border-radius: var(--r); padding: 12px 15px; font-weight: 700; font-size: 14px; line-height: 1.45; }
.fb-good { background: #d7ffb8; color: #3a6b16; } .fb-miss { background: #fff3d6; color: #8a6713; }
.fb-good b, .fb-miss b { display: block; margin-bottom: 5px; }
.fb-good ul, .fb-miss ul { margin: 0; padding-left: 18px; }
.fb-model { background: var(--bg-soft); border: 2px solid var(--line); border-radius: var(--r); padding: 2px 16px; margin-bottom: 6px; }
.fb-model summary { font-weight: 800; cursor: pointer; padding: 12px 0; color: var(--blue); }
.fb-model p { color: var(--ink-2); font-weight: 700; line-height: 1.55; margin: 0 0 12px; }

/* ---------- aanbeveling ---------- */
.rec-banner { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg); cursor: pointer;
  background: linear-gradient(135deg, #fff3d6, #ffe7b3); border: 2px solid #ffd778; box-shadow: 0 4px 0 #ffcf57; transition: transform .1s; }
.rec-ic { font-size: 28px; width: 54px; height: 54px; display: grid; place-items: center; background: #fff; border-radius: 14px; flex: none; }
.rec-txt { flex: 1; } .rec-txt h4 { margin: 0 0 2px; color: #7a5a00; } .rec-txt p { margin: 0; color: #9a7a20; font-weight: 800; font-size: 13px; }
.rec-go { font-weight: 900; color: #7a5a00; white-space: nowrap; }

@media (max-width: 620px) {
  .dash { grid-template-columns: 1fr; }
  .quick { grid-template-columns: 1fr; }
  .fb-lists { grid-template-columns: 1fr; }
  .pick-row { grid-template-columns: 1fr; }
  .chapters { grid-template-columns: 1fr; }
  .card-launch { grid-template-columns: 1fr; }
  .vid-grid { grid-template-columns: 1fr; }
  .ch-banner { flex-direction: column; }
  .setup-foot .btn { flex: 1; }
  .hud { gap: 12px; }
  .auth-actions { gap: 6px; }
  .top-auth-btn { height: 36px; padding: 0 10px; font-size: 11px; }
  .account-pill { max-width: 136px; padding-right: 9px; }
  .sync-pill { width: 100%; text-align: center; }
  .account-settings-head { flex-wrap: wrap; }
  /* volledige-breedte CTA's: grote taptargets */
  .qfoot { justify-content: stretch; }
  .qfoot .btn { flex: 1; }
  .lesson-nav { width: 100%; }
  .lesson-nav .btn { flex: 1; }
  .result .actions .btn { flex: 1 1 140px; }
}
/* smalle telefoons: comprimeer de HUD zodat niets afgekapt wordt */
@media (max-width: 500px) {
  .topbar { gap: 8px; }
  .hud { gap: 10px; }
  .danger-zone { align-items: stretch; flex-direction: column; }
  .danger-zone .btn { width: 100%; }
  .top-auth-btn { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
  .account-name { display: none; }
  .account-pill { padding-right: 4px; }
}
@media (max-width: 430px) {
  .brand-txt { display: none; }
  .top-auth-btn { max-width: 92px; }
}
@media (max-width: 380px) {
  .hud { gap: 9px; }
  .chip-stat { font-size: 15px; }
  .top-auth-btn { max-width: 78px; padding: 0 8px; }
}

/* ===================================================================
   BiologieBoost redesign layer
   Aardse UI uit de Claude mockup, toegepast op de echte app-engine.
   =================================================================== */
:root {
  --paper: #eef5f1;
  --card: #ffffff;
  --cream: #fbfdf9;
  --sand: #e6efe8;
  --ink: #20261f;
  --ink-2: #46524a;
  --muted: #778374;
  --muted-2: #657264;
  --faint: #9aa89c;
  --line: #d8e3db;
  --line-d: #c6d4c9;
  --green: #477c55;
  --green-d: #346541;
  --blue: #347d9b;
  --blue-d: #28657d;
  --purple: #7b62a3;
  --purple-d: #604885;
  --red: #bb5067;
  --red-d: #984155;
  --gold: #bf9631;
  --gold-d: #957321;
  --orange: #bd6946;
  --clay-d: #985036;
  --leaf-soft: #dcebdc;
  --water-soft: #d8ecf3;
  --plum-soft: #e7dff1;
  --clay-soft: #f0ded4;
  --ochre-soft: #f0e6c1;
  --rose-soft: #f3dde4;
  --bg: var(--paper);
  --bg-soft: var(--sand);
  --r: 14px;
  --r-lg: 20px;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

body {
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-2);
  background: var(--paper);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.brand-txt,
.hero h1,
.setup-hero h1,
.chapter h3,
.ch-banner-txt h2,
.dash .tile .val,
.qcard h4,
.launch-card h4 {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  letter-spacing: 0;
}

.topbar {
  position: sticky;
  z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1.5px solid var(--line);
  box-shadow: 0 10px 30px -28px rgba(38,35,25,.45);
}
body.shell-active > .topbar {
  display: none;
}
/* De upgradepagina draait zonder app-shell en heeft een eigen logobalk; de
   lichte topbar zou daar dubbel bovenop staan. */
body:has(.upgrade-page) > .topbar {
  display: none;
}

.brand-txt { color: var(--ink); font-size: 20px; }
.brand .logo { width: 34px; height: 34px; border-radius: 10px; background: var(--green); color: #fff; }
.brand .logo svg { width: 22px; height: 22px; }
.brand .logo path { stroke: #fff; }
.chip-stat.streak { color: var(--orange); }
.icon-btn,
.top-auth-btn,
.account-pill {
  border-color: var(--line);
  box-shadow: 0 3px 0 var(--line);
}
.top-auth-btn { color: var(--green-d); }
.top-auth-btn.primary,
.btn {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 4px 0 var(--green-d);
}
.account-pill {
  background: #fff;
  color: var(--ink);
}
.account-avatar { background: var(--green); }

main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

#app > .setup {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px clamp(18px, 5vw, 64px) 48px;
}

.setup > .section-title:first-child {
  margin-top: 0;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  background: var(--cream);
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  padding: 22px 16px;
  background: var(--sand);
  border-right: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.app-main {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

.app-topbar {
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px;
  background: #fff;
  border-bottom: 1.5px solid var(--line);
}

.app-title {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.app-top-spacer { flex: 1; }

.app-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.app-stat .ic {
  width: 19px;
  height: 19px;
}

.shell-auth-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-content {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 26px;
}

.app-content > .view {
  max-width: none;
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 800;
}
.side-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--green);
  display: grid;
  place-items: center;
  flex: none;
}

.side-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
}
.side-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.route-card strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
}
.route-card {
  margin-top: auto;
}
.route-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.route-card button {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--leaf-soft);
  color: var(--green-d);
  font-size: 11px;
  font-weight: 800;
}
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-link {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  transition: background .15s, color .15s, transform .12s;
}
.side-link:hover {
  background: #fff;
  transform: translateX(2px);
}
.side-link.on {
  background: var(--leaf-soft);
  color: var(--green-d);
}
.side-link .ic {
  width: 19px;
  height: 19px;
}
.side-link b {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--water-soft);
  color: var(--blue-d);
  font-size: 11px;
}
.progress-card {
  margin-top: auto;
}
.side-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--sand);
  overflow: hidden;
}
.side-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}
.progress-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}

.continue-card {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  display: block;
  text-align: left;
  border-radius: 20px;
  padding: 26px 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--acc, var(--green)), var(--acc-d, var(--green-d)));
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.continue-card:hover {
  transform: translateY(-3px);
  filter: saturate(1.04);
}
.continue-kicker {
  display: block;
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.continue-card h3 {
  margin: 12px 0 4px;
  color: #fff;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}
.continue-card p {
  margin: 0 0 18px;
  max-width: 50ch;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  font-weight: 600;
}
.continue-bar {
  height: 9px;
  max-width: 340px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.continue-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff, var(--acc-soft, var(--leaf-soft)), #fff);
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
}
.continue-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 13px;
  background: #fff;
  color: var(--acc-d, var(--green-d));
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.continue-watermark {
  position: absolute;
  right: -8px;
  top: -12px;
  font-size: 120px;
  line-height: 1;
  opacity: .14;
}

.stat-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat-card {
  flex: 1;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid var(--line);
}
.stat-card b {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.stat-card strong {
  display: block;
  margin-top: 1px;
  color: var(--ink);
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
}
.stat-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex: none;
}
.stat-count {
  background: var(--ochre-soft);
  color: var(--gold-d);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 800;
}
.stat-streak {
  background: var(--clay-soft);
  color: var(--orange);
}
.stat-streak .ic {
  width: 24px;
  height: 24px;
}
.setup-hero,
.hero {
  background: radial-gradient(120% 80% at 100% 0, var(--leaf-soft) 0%, transparent 55%), var(--cream);
  border: 1.5px solid var(--line);
  box-shadow: 0 28px 56px -42px rgba(38,35,25,.45);
}
.setup-hero .kicker,
.hero .kicker,
.ctx-chip {
  border: 1.5px solid var(--line);
}
.setup-hero .kicker,
.hero .kicker {
  color: var(--green-d);
  background: var(--leaf-soft);
}
.hero h1 .grad,
.setup-hero h1 .grad {
  color: var(--green-d);
}
.hero p,
.setup-hero p,
.pick-card p,
.qcard p,
.launch-card p,
.tab-lead {
  color: var(--muted);
  font-weight: 600;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.setup-hero {
  margin-bottom: 28px;
}
.setup-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.setup-metrics span {
  display: grid;
  gap: 2px;
  min-height: 66px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.setup-metrics b {
  color: var(--ink);
  font-size: 14px;
}
.setup-metrics small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.dash {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dash .tile,
.pick-card,
.chapter,
.qcard,
.launch-card,
.para-acc,
.exam-item,
.vid-card,
.panel,
.modal {
  border: 1.5px solid var(--line);
  box-shadow: 0 5px 0 var(--line);
}
.dash .tile {
  background: #fff;
}
.dash .goalring .ring {
  background: conic-gradient(var(--green) calc(var(--p)*1%), var(--line) 0);
}

.pick-card.sel {
  border-color: var(--green);
  box-shadow: 0 4px 0 var(--green);
  background: #fff;
}
.pick-card .pick-emoji,
.lc-ic,
.qcard .qi {
  background: var(--leaf-soft);
  color: var(--green-d);
}

.chapters {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.chapter-toolbar {
  align-items: flex-end;
  gap: 16px;
}
.chapter-heading {
  display: grid;
  gap: 5px;
}
.chapter-heading small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.chapter-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: min(100%, 480px);
}
.chapter-search {
  flex: 1 1 190px;
  min-width: 190px;
}
.chapter-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--line);
}
.chapter-search input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--leaf-soft), 0 3px 0 var(--line);
}
.chapter-year-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.year-chip {
  min-height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: 900;
  box-shadow: 0 3px 0 var(--line);
  white-space: nowrap;
}
.year-chip.on {
  border-color: var(--green);
  background: var(--leaf-soft);
  color: var(--green-d);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--green) 34%, var(--line));
}
.year-chip:hover {
  border-color: var(--green);
  color: var(--green-d);
}
.chapter {
  width: 100%;
  text-align: left;
  border-radius: 18px;
  background: #fff;
}
.chapter::before {
  height: 5px;
}
.chapter .ch-num {
  font-family: "Bricolage Grotesque", sans-serif;
}
.chapter .ch-go {
  position: static;
  right: auto;
  bottom: auto;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
}
.chapter h3 + .ch-go {
  padding-top: 14px;
}
.chapter .ch-meta {
  display: block;
  margin-top: 7px;
  padding-right: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.empty-state {
  padding: 28px;
  border: 1.5px dashed var(--line-d);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  text-align: center;
}
.empty-state b {
  display: block;
  color: var(--ink);
  font-size: 18px;
}
.empty-state p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.t-green { --acc: var(--green); --acc-d: var(--green-d); --acc-soft: var(--leaf-soft); }
.t-blue  { --acc: var(--blue); --acc-d: var(--blue-d); --acc-soft: var(--water-soft); }
.t-purple{ --acc: var(--purple); --acc-d: var(--purple-d); --acc-soft: var(--plum-soft); }
.t-orange{ --acc: var(--orange); --acc-d: var(--clay-d, #9e522f); --acc-soft: var(--clay-soft); }
.t-pink  { --acc: var(--red); --acc-d: var(--red-d); --acc-soft: var(--rose-soft); }
.t-teal  { --acc: #4c8f83; --acc-d: #347062; --acc-soft: #dceee8; }
.t-red   { --acc: var(--red); --acc-d: var(--red-d); --acc-soft: var(--rose-soft); }
.t-indigo{ --acc: var(--purple); --acc-d: var(--purple-d); --acc-soft: var(--plum-soft); }
.t-lime  { --acc: var(--green); --acc-d: var(--green-d); --acc-soft: var(--leaf-soft); }
.t-amber { --acc: var(--gold); --acc-d: var(--gold-d); --acc-soft: var(--ochre-soft); }
.t-brown { --acc: var(--orange); --acc-d: #9e522f; --acc-soft: var(--clay-soft); }
.t-rose  { --acc: var(--red); --acc-d: var(--red-d); --acc-soft: var(--rose-soft); }
.t-sky   { --acc: var(--blue); --acc-d: var(--blue-d); --acc-soft: var(--water-soft); }

.ch-banner {
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--acc-d, var(--green-d));
  background: linear-gradient(135deg, var(--acc, var(--green)), var(--acc-d, var(--green-d)));
}
.tabs {
  gap: 9px;
}
.tab {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--line);
}
.tab.on {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 3px 0 var(--green-d);
}

.rec-banner,
.qcard,
.launch-card {
  border-radius: 16px;
  background: #fff;
}
.rec-banner,
.qcard {
  width: 100%;
  text-align: left;
}
.quick {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.q-smart .qi {
  background: var(--plum-soft);
  color: var(--purple-d);
}
.q-exam .qi {
  background: var(--clay-soft);
  color: var(--clay-d);
}
.q-review .qi {
  background: var(--water-soft);
  color: var(--blue-d);
}
.btn.ghost {
  color: var(--ink-2);
  border-color: var(--line);
  box-shadow: 0 4px 0 var(--line);
}
.btn.danger,
.btn.ghost.danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 4px 0 var(--red-d);
}
.btn.ghost.danger {
  background: #fff;
  color: var(--red-d);
  border-color: var(--line);
  box-shadow: 0 4px 0 var(--line);
}

.para-acc {
  background: #fff;
  border-radius: 16px;
}
.para-acc summary {
  background: #fff;
}
.pa-id,
.vid-sec-id,
.exam-badge {
  background: var(--leaf-soft);
  color: var(--green-d);
}
.goalbox {
  background: var(--cream);
}
.chat-suggest .chip,
.vid-term {
  background: var(--sand);
  border: 1.5px solid var(--line);
  color: var(--ink-2);
}
.ai-note,
.ai-optin-note {
  background: var(--plum-soft);
  border-color: #d8c9e6;
  color: var(--purple-d);
}

body.session-active {
  overflow-x: hidden;
}
body.session-active .topbar {
  display: none;
}
body.session-active main {
  width: 100%;
  max-width: none;
  padding: 0;
}
.session-fullscreen {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) clamp(16px, 4vw, 44px) max(22px, env(safe-area-inset-bottom));
  background:
    radial-gradient(900px 500px at 15% 0, var(--leaf-soft) 0%, transparent 62%),
    radial-gradient(760px 420px at 100% 100%, var(--water-soft) 0%, transparent 58%),
    var(--paper);
}
.session-fullscreen .view {
  width: min(920px, 100%);
  position: relative;
  animation: scaleIn .24s ease both;
}
.session-fullscreen .panel {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 34px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px -42px rgba(38,35,25,.55), 0 5px 0 var(--line);
}
.session-close {
  position: fixed;
  z-index: 80;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
  color: var(--ink);
  font-size: 0;
  line-height: 1;
}
.session-close .ic {
  width: 21px;
  height: 21px;
  display: block;
}
.session-close:hover {
  border-color: var(--line-d);
  background: var(--cream);
}
.learn-fullscreen,
.exam-fullscreen,
.quiz-fullscreen {
  min-height: 100dvh;
  place-items: stretch;
  padding: 0;
}
.learn-fullscreen .view,
.exam-fullscreen .view,
.quiz-fullscreen .view {
  width: 100%;
  min-height: 100dvh;
  animation: none;
  transform: none;
}
/* Oefenvragen — echt fullscreen, net als de flitskaarten */
.quiz-fullscreen .panel {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: max(64px, calc(env(safe-area-inset-top) + 58px)) clamp(18px, 5vw, 72px) max(24px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.quiz-fullscreen .topline {
  width: min(760px, 100%);
  margin: 0 auto;
}
.quiz-stage {
  flex: 1;
  min-height: 0;
  width: min(760px, 100%);
  margin: 22px auto 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.quiz-stage > * {
  margin-top: 0;
  margin-bottom: 0;
}
.quiz-fullscreen .qtext {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.25;
}
.quiz-fullscreen .options {
  gap: 14px;
}
.quiz-fullscreen .opt {
  padding: 18px 20px;
  font-size: clamp(15px, 1.7vw, 18px);
}
.session-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--green-d);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.topline {
  gap: 14px;
}
.pbar {
  background: var(--sand);
}
.pbar > span {
  background: var(--green);
}
.qtext,
.flashcard .term {
  font-family: "Bricolage Grotesque", sans-serif;
  color: var(--ink);
}
.opt {
  border: 1.5px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
}
.opt.correct {
  border-color: var(--green);
  background: var(--leaf-soft);
}
.opt.wrong {
  border-color: var(--red);
  background: var(--rose-soft);
}
.flashcard {
  min-height: clamp(300px, 48vh, 440px);
}
.fc-face {
  border: 1.5px solid var(--line);
  background: #fff;
}
.fc-front {
  background: linear-gradient(145deg, #fff, var(--cream));
}
.fc-back {
  background: linear-gradient(145deg, var(--water-soft), #fff);
}
.rate-again,
.rate-hard,
.rate-good {
  border-radius: 14px;
  border: 1.5px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
}

.overlay {
  background: rgba(38,35,25,.48);
}
.modal {
  border-radius: 20px;
}
.settings-orb,
.auth-dna {
  background: var(--leaf-soft);
  color: var(--green-d);
}
.field input,
.field select,
.open-input {
  border: 1.5px solid var(--line-d);
  background: #fff;
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.open-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--leaf-soft);
}
.field .field-wrap input,
.field .field-wrap input:focus {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.ai-limit-note {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--leaf-soft);
}
.ai-limit-note strong {
  color: var(--ink);
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 16px;
}
.ai-limit-note span {
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

/* ---------- chapter detail redesign ---------- */
.chapter-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.chapter-view .backbtn {
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
}
.chapter-view .backbtn:hover {
  color: var(--ink-2);
}
.chapter-view .backbtn svg {
  width: 15px;
  height: 15px;
}
.chapter-view .ch-banner {
  margin: 0;
  padding: 24px 26px;
  gap: 18px;
  align-items: flex-start;
  border-radius: 20px;
  overflow: hidden;
}
.chapter-view .ch-banner-ic {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 34px;
  background: rgba(255,255,255,.2);
}
.chapter-view .ch-banner-txt {
  flex: 1;
}
.chapter-view .ch-banner-kicker {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.82);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  line-height: 1.2;
  text-transform: uppercase;
}
.chapter-view .ch-banner-txt h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0;
}
.chapter-view .ch-banner-txt p {
  max-width: 64ch;
  margin: 0 0 14px;
  color: rgba(255,255,255,.94);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
}
.chapter-view .ch-banner-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 500px;
}
.chapter-view .ch-banner-bar {
  flex: 1;
  max-width: none;
  height: 9px;
  background: rgba(0,0,0,.18);
}
.chapter-view .ch-banner-meta {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.chapter-view .tabs {
  gap: 9px;
  margin: 0;
  padding: 0;
}
.chapter-view .tab {
  padding: 10px 17px;
  border: 1.5px solid var(--line);
  font-size: 13.5px;
}
.chapter-view .tab .ic {
  width: 16px;
  height: 16px;
}
.chapter-view .tab-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chapter-view .tab-lead {
  margin: 0 2px 2px;
  max-width: 78ch;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.chapter-view .para-acc {
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
}
.chapter-view .para-acc[open] {
  border-color: var(--green);
  box-shadow: 0 3px 0 var(--leaf-soft);
}
.chapter-view .para-acc > summary {
  gap: 13px;
  padding: 16px 18px;
  font-weight: 700;
}
.chapter-view .para-acc .pa-id {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--sand);
  color: var(--green-d);
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 13px;
}
.chapter-view .para-acc[open] .pa-id,
.chapter-view .para-acc.done .pa-id {
  background: var(--green);
  color: #fff;
}
.chapter-view .para-acc .pa-title {
  min-width: 0;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.chapter-view .para-acc .pa-done {
  padding: 4px 10px;
  background: var(--leaf-soft);
  color: var(--green-d);
}
.chapter-view .para-inner {
  padding: 2px 18px 18px;
  border-top: 1.5px solid var(--line);
}
.chapter-view .goalbox.glass {
  margin: 16px 0;
  padding: 15px 18px;
  border: 0;
  border-left: 5px solid var(--green);
  border-radius: 12px;
  background: var(--leaf-soft);
}
.chapter-view .goalbox .gt {
  margin-bottom: 8px;
}
.chapter-view .summary p {
  font-weight: 600;
}
.chapter-tutor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 6px 0 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--plum-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.chapter-tutor-card.is-locked {
  background: var(--ochre-soft);
}
.chapter-tutor-card.is-locked .tutor-ic {
  background: var(--gold);
  color: #fff;
}
.chapter-tutor-card.is-locked .tutor-copy b {
  color: var(--gold-d);
}
.chapter-tutor-card.is-locked .tutor-cta {
  background: var(--gold);
  box-shadow: 0 3px 0 var(--gold-d);
}
.tutor-ic {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 11px;
  background: var(--purple);
  color: #fff;
}
.tutor-ic .ic {
  width: 20px;
  height: 20px;
}
.tutor-copy {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.tutor-copy b {
  color: var(--purple-d);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
}
.tutor-copy small {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}
.tutor-cta {
  flex: none;
  padding: 9px 16px;
  border-radius: 11px;
  background: var(--purple);
  box-shadow: 0 3px 0 var(--purple-d);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.chapter-action-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 var(--line);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, border-color .15s;
}
.chapter-action-card:hover {
  border-color: var(--green);
  box-shadow: 0 6px 0 var(--line);
  transform: translateY(-2px);
}
.action-ic {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 15px;
}
.action-ic .ic {
  width: 26px;
  height: 26px;
}
.action-copy {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.action-copy b {
  color: var(--ink);
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.action-copy small {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}
.action-cta {
  flex: none;
  padding: 12px 22px;
  border-radius: 13px;
  background: var(--green);
  box-shadow: 0 3px 0 var(--green-d);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.action-flash .action-ic {
  background: var(--water-soft);
  color: var(--blue-d);
}
.action-video .action-ic {
  background: var(--leaf-soft);
  color: var(--green-d);
}
.action-puzzle .action-ic {
  background: var(--ochre-soft);
  color: var(--gold-d);
}
.action-exam .action-ic {
  background: var(--plum-soft);
  color: var(--purple-d);
}
.action-quiz .action-ic {
  background: var(--plum-soft);
  color: var(--purple-d);
}
.material-playlist.is-pending .action-cta {
  background: var(--sand);
  box-shadow: 0 3px 0 var(--line);
  color: var(--muted);
}
.chapter-view .section-title {
  margin: 14px 2px 0;
}
.chapter-view .card-launch {
  gap: 12px;
  margin-bottom: 0;
}
.chapter-view .launch-card.small {
  padding: 14px 16px;
  border-radius: 15px;
}

/* ---------- fullscreen flashcards ---------- */
.flash-session {
  display: flex;
  color: var(--ink);
}
.flash-session-shell {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: max(64px, calc(env(safe-area-inset-top) + 58px)) clamp(18px, 5vw, 72px) max(24px, env(safe-area-inset-bottom));
}
.flash-session-head,
.exam-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: min(1120px, 100%);
  margin: 0 auto;
}
.flash-session-head h2,
.exam-session-head h2 {
  margin: 0 0 6px;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1;
}
.flash-session-head p,
.exam-session-head p {
  max-width: 70ch;
  margin: 0;
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.session-count,
.exam-session-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.session-count {
  width: 90px;
  height: 90px;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  background: var(--water-soft);
  color: var(--blue-d);
}
.session-count b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 30px;
  line-height: .9;
}
.session-count span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.flash-topline {
  width: min(760px, 100%);
  margin: 0 auto;
}
.learn-fullscreen .fc-stage {
  align-self: stretch;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  min-height: 0;
}
.learn-fullscreen .flashcard {
  width: min(760px, 100%);
  height: clamp(380px, 68vh, 620px);
  min-height: 0;
}
.learn-fullscreen .fc-face {
  padding: clamp(26px, 5vw, 56px);
  border-radius: 26px;
}
.learn-fullscreen .fc-front .term {
  font-size: clamp(34px, 6vw, 66px);
  line-height: 1.04;
}
.learn-fullscreen .fc-back .def {
  max-width: 58ch;
  font-size: clamp(18px, 2.5vw, 28px);
}
.learn-fullscreen .fc-rate {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.learn-fullscreen .fc-rate button {
  min-height: 58px;
  font-size: 15px;
}
.learn-result {
  align-self: center;
  justify-self: center;
  width: min(640px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.learn-result-ic {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--water-soft);
  color: var(--blue-d);
}
.learn-result-ic .ic {
  width: 34px;
  height: 34px;
}
.learn-result h2 {
  font-size: clamp(30px, 5vw, 46px);
}
.learn-result p {
  margin: 0;
  color: var(--muted-2);
  font-size: 16px;
}

/* ---------- examenmenu en fullscreen examen ---------- */
.exam-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.exam-set-mini .lc-ic .ic {
  width: 21px;
  height: 21px;
}
.exam-session {
  display: flex;
}
.exam-session-shell {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: max(12px, calc(env(safe-area-inset-top) + 8px)) clamp(14px, 2.4vw, 34px) max(24px, env(safe-area-inset-bottom));
}
/* De kicker naast de vaste sluitknop, niet eronder — scheelt veel witruimte bovenaan. */
.exam-session-head {
  padding-left: 34px;
}
@media (min-width: 981px) {
  .exam-session-head {
    min-height: 32px;
    align-items: center;
  }
}
.exam-session-stats span {
  min-width: 86px;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}
.exam-session-stats b {
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
}
.exam-session-progress {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.exam-session-progress .pbar {
  height: 12px;
  background: var(--sand);
}
.exam-session-progress b {
  color: var(--muted-2);
  font-size: 13px;
  white-space: nowrap;
}
.exam-workspace {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 400px);
  gap: 18px;
  align-items: start;
  min-height: 0;
}
.exam-work-list {
  display: grid;
  gap: 16px;
}
.exam-work-card {
  padding: clamp(13px, 1.8vw, 20px);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 0 var(--line);
}
.exam-work-card .exam-title {
  font-size: clamp(20px, 2.7vw, 29px);
}
.exam-work-card .exam-q {
  font-size: 16px;
}
.exam-answer {
  min-height: 190px;
  resize: vertical;
}
.exam-work-actions .btn {
  text-transform: none;
  letter-spacing: 0;
}
.exam-work-nav {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.exam-work-nav h3 {
  font-size: 15px;
}
.exam-nav-list {
  display: grid;
  gap: 8px;
}
.exam-nav-btn {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px;
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink-2);
  text-align: left;
}
.exam-nav-btn b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--sand);
  color: var(--muted-2);
  font-size: 13px;
}
.exam-nav-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 800;
}
.exam-nav-btn.answered b {
  background: var(--water-soft);
  color: var(--blue-d);
}
.exam-nav-btn.done b {
  background: var(--green);
  color: #fff;
}

/* ---------- interactieve puzzels ---------- */
.session-fullscreen .puzzle-view {
  width: min(1240px, 100%);
}
.puzzle-shell {
  width: 100%;
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px -42px rgba(38,35,25,.55), 0 5px 0 var(--line);
}
.puzzle-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.puzzle-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--gold-d);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.puzzle-head h2 {
  margin: 0 0 6px;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
}
.puzzle-head p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.puzzle-meter {
  --p: 0;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p)*1%), var(--sand) 0);
}
.puzzle-meter b,
.puzzle-meter span {
  grid-area: 1 / 1;
}
.puzzle-meter b {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--gold-d);
  font-size: 19px;
  font-weight: 900;
}
.puzzle-meter span {
  margin-top: 54px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.puzzle-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.puzzle-toolbar .btn.small {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 12px;
}
.puzzle-status {
  margin-left: 4px;
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 800;
}
.puzzle-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sand);
}
.puzzle-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--green));
  transition: width .28s var(--ease);
}
.puzzle-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 18px;
  align-items: start;
}
.puzzle-board-wrap {
  max-width: 100%;
  overflow: auto;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
}
.puzzle-board {
  --cols: 25;
  display: grid;
  grid-template-columns: repeat(var(--cols), 34px);
  gap: 1px;
  width: max-content;
}
.puzzle-cell {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 0;
}
.puzzle-cell.blank {
  background: var(--ink);
  opacity: .9;
}
.puzzle-cell.fill {
  display: block;
  border: 1px solid var(--line-d);
  background: #fff;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.puzzle-cell.fill.active {
  border-color: var(--gold);
  background: var(--ochre-soft);
}
.puzzle-cell.fill.correct {
  border-color: var(--green);
  background: var(--leaf-soft);
}
.puzzle-cell.fill.locked {
  border-color: var(--green);
  background: var(--leaf-soft);
}
.puzzle-cell.fill.wrong {
  border-color: var(--red);
  background: var(--rose-soft);
}
.puzzle-cell.fill:focus-within {
  z-index: 2;
  border-color: var(--gold-d);
  box-shadow: var(--focus-ring);
}
.puzzle-cell input {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  text-transform: uppercase;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
}
.puzzle-cell input[readonly] {
  cursor: default;
}
.puzzle-cell input:focus {
  outline: none;
}
.puzzle-num {
  position: absolute;
  top: 2px;
  left: 3px;
  z-index: 1;
  color: var(--muted-2);
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.puzzle-clues {
  display: grid;
  gap: 16px;
  max-height: min(74vh, 760px);
  overflow: auto;
  padding-right: 4px;
}
.puzzle-clues section {
  display: grid;
  gap: 8px;
}
.puzzle-clues h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}
.puzzle-clue-list {
  display: grid;
  gap: 8px;
}
.puzzle-clue {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-2);
  text-align: left;
  transition: border-color .12s, background .12s, transform .12s;
}
.puzzle-clue:hover {
  transform: translateY(-1px);
  border-color: var(--gold);
}
.puzzle-clue.on {
  border-color: var(--gold);
  background: var(--ochre-soft);
}
.puzzle-clue.done {
  border-color: var(--green);
  background: var(--leaf-soft);
}
.puzzle-clue b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--sand);
  color: var(--gold-d);
  font-size: 13px;
  font-weight: 900;
}
.puzzle-clue.done b {
  background: var(--green);
  color: #fff;
}
.puzzle-clue span {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}
.puzzle-clue small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- echte fullscreen puzzel ---------- */
.puzzle-fullscreen {
  min-height: 100dvh;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
.puzzle-fullscreen .puzzle-view {
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  animation: none;
  transform: none;
}
.puzzle-fullscreen .session-close {
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
}
.puzzle-fullscreen .puzzle-shell {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: block;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(76px, calc(env(safe-area-inset-left) + 76px));
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  overflow: hidden;
}
.puzzle-fullscreen .puzzle-workspace {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(318px, 410px);
  gap: 16px;
  align-items: stretch;
}
.puzzle-fullscreen .puzzle-board-wrap {
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.puzzle-fullscreen .puzzle-board {
  --cell: 28px;
  --gap: 1px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  gap: var(--gap);
  width: auto;
}
.puzzle-fullscreen .puzzle-cell {
  width: var(--cell);
  height: var(--cell);
  border-radius: 0;
}
.puzzle-fullscreen .puzzle-cell input {
  border-radius: 0;
  font-size: max(10px, calc(var(--cell) * .52));
}
.puzzle-fullscreen .puzzle-num {
  top: max(1px, calc(var(--cell) * .08));
  left: max(2px, calc(var(--cell) * .1));
  font-size: max(6px, calc(var(--cell) * .25));
}
.puzzle-side {
  min-height: 0;
}
.puzzle-fullscreen .puzzle-side {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 0 2px;
}
.puzzle-fullscreen .puzzle-head {
  align-items: center;
  gap: 12px;
}
.puzzle-fullscreen .puzzle-kicker {
  margin-bottom: 5px;
  font-size: 10px;
}
.puzzle-fullscreen .puzzle-head h2 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
}
.puzzle-fullscreen .puzzle-meter {
  width: 68px;
  height: 68px;
}
.puzzle-fullscreen .puzzle-meter b {
  width: 52px;
  height: 52px;
  font-size: 16px;
}
.puzzle-fullscreen .puzzle-meter span {
  margin-top: 43px;
  font-size: 7px;
}
.puzzle-fullscreen .puzzle-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
}
.puzzle-fullscreen .puzzle-toolbar .btn.small {
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 11px;
}
.puzzle-toolbar .btn.confirm {
  border-color: var(--gold);
  background: var(--ochre-soft);
  color: var(--gold-d);
}
.puzzle-fullscreen .puzzle-status {
  display: grid;
  gap: 4px;
  min-height: 58px;
  margin: 0;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-2);
  overflow: hidden;
}
.puzzle-fullscreen .puzzle-status small {
  color: var(--gold-d);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
.puzzle-fullscreen .puzzle-status b {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.puzzle-fullscreen .puzzle-progress {
  height: 7px;
}
.puzzle-fullscreen .puzzle-clues {
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding-right: 0;
}
.puzzle-fullscreen .puzzle-clues section {
  min-height: 0;
  overflow: hidden;
}
.puzzle-fullscreen .puzzle-clues h3 {
  font-size: 13px;
}
.puzzle-fullscreen .puzzle-clue-list {
  grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
  align-content: start;
  gap: 5px;
}
.puzzle-fullscreen .puzzle-clue {
  grid-template-columns: 1fr;
  min-height: 30px;
  padding: 3px;
  border-radius: 10px;
  place-items: center;
  text-align: center;
}
.puzzle-fullscreen .puzzle-clue b {
  width: 100%;
  height: 26px;
}
.puzzle-fullscreen .puzzle-clue span {
  display: none;
}
.puzzle-fullscreen .puzzle-clue small {
  display: none;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1.5px solid var(--line);
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
  }
  .side-card {
    min-width: 180px;
  }
  .side-nav {
    min-width: max-content;
    flex-direction: row;
  }
  .side-link {
    width: auto;
    white-space: nowrap;
  }
  .progress-card {
    margin-top: 0;
    min-width: 160px;
  }
  .app-content {
    padding: 20px clamp(14px, 4vw, 24px) 90px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .quick,
  .dash {
    grid-template-columns: 1fr;
  }
  .puzzle-workspace {
    grid-template-columns: 1fr;
  }
  .puzzle-fullscreen .puzzle-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  }
  .puzzle-clues {
    max-height: none;
  }
  .flash-session-head,
  .exam-session-head,
  .exam-session-progress {
    width: 100%;
  }
  .exam-workspace {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .exam-work-nav {
    position: static;
    order: -1;
  }
  .exam-nav-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .app-topbar {
    top: 0;
    overflow-x: auto;
  }
}

@media (max-width: 680px) {
  #app > .setup {
    padding: 16px 14px 28px;
  }
  .setup-metrics {
    grid-template-columns: 1fr;
  }
  .pick-row {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    padding: 10px 12px;
    gap: 10px;
    align-items: center;
  }
  .side-brand {
    padding: 2px 4px;
    font-size: 17px;
  }
  .side-logo {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .side-link {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 13.5px;
  }
  .route-card,
  .progress-card {
    display: none;
  }
  .app-main {
    min-width: 0;
  }
  .app-content {
    padding-top: 16px;
  }
  .app-topbar {
    min-height: 56px;
    gap: 10px;
    padding: 8px 14px;
  }
  .app-title {
    min-width: max-content;
  }
  .app-stat {
    font-size: 14px;
  }
  .app-settings.icon-btn {
    width: 38px;
    height: 38px;
  }
  .shell-auth-actions .top-auth-btn {
    display: none;
  }
  .chapter-toolbar {
    align-items: stretch;
  }
  .chapter-controls {
    width: 100%;
    justify-content: stretch;
  }
  .chapter-search {
    flex-basis: 100%;
  }
  .chapter-year-filters {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .year-chip {
    padding: 0 6px;
  }
  .ch-banner {
    flex-direction: column;
  }
  .chapter-view .ch-banner {
    padding: 22px 20px;
  }
  .chapter-view .ch-banner-progress {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .chapter-view .ch-banner-bar {
    width: 100%;
  }
  .chapter-action-card {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 18px;
  }
  .chapter-tutor-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .tutor-cta {
    margin-left: 50px;
  }
  .action-cta {
    margin-left: 72px;
  }
  .learn-fullscreen .session-close,
  .exam-fullscreen .session-close {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
  }
  .flash-session-shell,
  .exam-session-shell {
    padding: max(56px, calc(env(safe-area-inset-top) + 48px)) 12px max(20px, env(safe-area-inset-bottom));
  }
  .flash-session-head,
  .exam-session-head {
    flex-direction: column;
  }
  .exam-session-head {
    padding-left: 0;
  }
  .session-count {
    width: 74px;
    height: 74px;
  }
  .learn-fullscreen .flashcard {
    height: clamp(310px, 48vh, 430px);
  }
  .learn-fullscreen .fc-rate {
    grid-template-columns: 1fr;
  }
  .exam-session-stats {
    width: 100%;
  }
  .exam-session-stats span {
    flex: 1;
  }
  .exam-session-progress {
    align-items: flex-start;
    flex-direction: column;
  }
  .exam-session-progress .pbar {
    width: 100%;
  }
  .exam-work-card {
    border-radius: 16px;
  }
  .exam-set-grid {
    grid-template-columns: 1fr;
  }
  .puzzle-shell {
    padding: 16px;
    border-radius: 18px;
  }
  .puzzle-fullscreen {
    padding: 0;
  }
  .puzzle-fullscreen .session-close {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
  }
  .puzzle-fullscreen .puzzle-view {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
  .puzzle-fullscreen .puzzle-shell {
    height: 100dvh;
    padding: max(62px, calc(env(safe-area-inset-top) + 58px)) 10px max(10px, env(safe-area-inset-bottom));
    border-radius: 0;
    overflow: hidden;
  }
  .puzzle-fullscreen .puzzle-workspace {
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(172px, 28vh);
    gap: 10px;
  }
  .puzzle-fullscreen .puzzle-side {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 7px;
    padding: 0;
  }
  .puzzle-fullscreen .puzzle-head {
    display: none;
  }
  .puzzle-fullscreen .puzzle-toolbar {
    grid-template-columns: 1fr 1fr auto;
  }
  .puzzle-fullscreen .puzzle-progress {
    display: none;
  }
  .puzzle-fullscreen .puzzle-status {
    min-height: 44px;
    padding: 7px 9px;
  }
  .puzzle-fullscreen .puzzle-status small {
    font-size: 8px;
  }
  .puzzle-fullscreen .puzzle-status b {
    font-size: 11.5px;
    line-height: 1.15;
  }
  .puzzle-fullscreen .puzzle-clues {
    gap: 6px;
  }
  .puzzle-fullscreen .puzzle-clues section {
    gap: 3px;
  }
  .puzzle-fullscreen .puzzle-clues h3 {
    font-size: 10px;
  }
  .puzzle-fullscreen .puzzle-clue-list {
    grid-template-columns: repeat(auto-fit, minmax(27px, 1fr));
    gap: 3px;
  }
  .puzzle-fullscreen .puzzle-clue {
    min-height: 21px;
    padding: 2px;
  }
  .puzzle-fullscreen .puzzle-clue b {
    height: 17px;
    border-radius: 7px;
    font-size: 9px;
  }
  .puzzle-head {
    flex-direction: column;
  }
  .puzzle-meter {
    width: 76px;
    height: 76px;
  }
  .puzzle-meter b {
    width: 58px;
    height: 58px;
    font-size: 17px;
  }
  .puzzle-meter span {
    margin-top: 49px;
  }
  .puzzle-board-wrap {
    padding: 10px;
  }
  .puzzle-board {
    grid-template-columns: repeat(var(--cols), 29px);
    gap: 2px;
  }
  .puzzle-fullscreen .puzzle-board {
    grid-template-columns: repeat(var(--cols), var(--cell));
    gap: var(--gap);
  }
  .puzzle-cell {
    width: 29px;
    height: 29px;
    border-radius: 5px;
  }
  .puzzle-fullscreen .puzzle-cell {
    width: var(--cell);
    height: var(--cell);
  }
  .puzzle-cell input {
    font-size: 15px;
  }
  .puzzle-clue {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .puzzle-clue small {
    grid-column: 2;
  }
  .session-fullscreen {
    align-items: stretch;
    padding-top: 72px;
  }
  .puzzle-fullscreen,
  .learn-fullscreen,
  .exam-fullscreen {
    padding: 0;
  }
  .session-fullscreen .view,
  .session-fullscreen .panel {
    width: 100%;
  }
  .flashcard {
    min-height: 340px;
  }
  .fc-rate {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto !important; }
}

/* ---------- externe oefentoets ---------- */
.external-quiz-panel h2 { margin-bottom: 8px; }
.external-quiz-actions { display: flex; justify-content: flex-end; margin: 12px 0; }
.external-quiz-frame { width: 100%; min-height: 78vh; border: 2px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: 0 4px 0 var(--line); }

/* ===================================================================
   BiologieBoost — Premium (goud thema), Settings v2, sidebar & effecten
   =================================================================== */

/* ---------- Premium GOUDEN THEMA ---------- */
/* Actief zodra de gebruiker Premium heeft: warme, gouden herkleuring. */
body.premium-active {
  --green: #c79a2e; --green-d: #9a7420;
  --cream: #fffdf5; --sand: #f3e7c6; --paper: #fbf5e6;
  --leaf-soft: #f3e8c4; --line: #e7d6a8; --line-d: #d8c288;
  --ink: #2c2610; --ink-2: #55492a;
  --blue: #b8862a; --blue-d: #8f6716;
}
body.premium-active .app-shell {
  background:
    radial-gradient(1200px 340px at 100% -6%, rgba(255,214,110,.28), transparent 60%),
    linear-gradient(180deg, #fffdf5, #fbf3df);
}
body.premium-active .app-sidebar {
  background: linear-gradient(180deg, #fcf4d9, #f6ecc7);
  border-right-color: #e6d29a;
}
body.premium-active .app-topbar,
body.premium-active .topbar {
  box-shadow: inset 0 -2px 0 rgba(191,150,49,.28), 0 10px 30px -28px rgba(120,90,20,.5);
}
body.premium-active .side-logo,
body.premium-active .brand .logo {
  background: linear-gradient(135deg, #f2cf5b, #bf9631) !important;
  box-shadow: 0 3px 12px -3px rgba(191,150,49,.6);
}
body.premium-active .brand-txt,
body.premium-active .side-brand > span:last-child {
  background: linear-gradient(90deg, #a9781d, #e6b93e, #a9781d);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldShimmer 4s linear infinite;
}
@keyframes goldShimmer { to { background-position: 200% center; } }
body.premium-active .continue-card { box-shadow: 0 12px 30px -18px rgba(160,120,20,.7); }
body.premium-active .chapter:hover { border-color: #e3c14e; }
body.premium-active ::-webkit-scrollbar-thumb { background: #e7d6a8; }

/* Korte gouden flits over het scherm bij premium-ontgrendeling. */
.premium-flash::after {
  content: ""; position: fixed; inset: 0; z-index: 58; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(255,214,110,.55), transparent 60%);
  animation: premiumFlash 1.4s ease-out forwards;
}
@keyframes premiumFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Premium-kroon op accountpil ---------- */
.account-pill.is-premium {
  border-color: #e3c14e;
  background: linear-gradient(180deg, #fffaf0, #fdf1cf);
  box-shadow: 0 3px 0 #d9b542;
}
.account-pill.is-premium .account-avatar { background: linear-gradient(135deg, #f2cf5b, #bf9631); }
.premium-crown { font-size: 13px; margin-left: -2px; filter: drop-shadow(0 1px 1px rgba(140,100,10,.4)); }
.account-avatar.large.is-premium { box-shadow: 0 0 0 3px rgba(226,193,78,.5); }
.account-premium-flag {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 900;
  color: #8a6512; background: linear-gradient(90deg, #fdf0c8, #f7e2a0); border: 1.5px solid #e6c964;
}

/* ---------- Settings v2 (tabs & panels) ---------- */
.settings-orb.gold { background: linear-gradient(135deg, #f2cf5b, #bf9631); color: #fff; }
.settings-tabs { display: flex; gap: 6px; background: var(--bg-soft); padding: 5px; border-radius: 14px; margin: 4px 0 18px; }
.settings-tab {
  flex: 1; padding: 9px 8px; border-radius: 10px; background: transparent; color: var(--muted-2);
  font-weight: 900; font-size: 13px; transition: background .15s, color .15s, transform .1s;
}
.settings-tab:hover { color: var(--ink); }
.settings-tab.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -3px rgba(0,0,0,.2); }
body.premium-active .settings-tab.on { color: var(--green-d); }
.settings-panel { display: none; animation: fadeSlide .25s var(--ease); }
.settings-panel.on { display: block; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.settings-modal-v2 .settings-section-title { margin-top: 20px; }
.settings-modal-v2 .settings-panel > .settings-section-title:first-child { margin-top: 4px; }
.muted-line { color: var(--muted-2); font-size: 12.5px; font-weight: 700; line-height: 1.5; margin: -4px 0 12px; }
.route-static {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-soft); border: 2px solid var(--line);
}
.route-static b { color: var(--ink); font-size: 14px; }
.route-static span { color: var(--muted-2); font-size: 12px; font-weight: 700; }

/* ---------- Premium-paneel: upgrade hero ---------- */
.premium-hero {
  position: relative; overflow: hidden; text-align: center; padding: 22px 18px 20px;
  border-radius: 18px; border: 2px solid #ead28a;
  background: radial-gradient(600px 200px at 50% -30%, rgba(255,214,110,.5), transparent 65%), linear-gradient(180deg, #fffaf0, #fdf3d6);
}
.premium-hero .ph-crown { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(160,120,20,.4)); animation: crownBob 2.6s var(--ease) infinite; }
@keyframes crownBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.premium-hero h4 { font-size: 20px; margin: 8px 0 2px; color: #6f5310; }
.ph-price { font-size: 26px; font-weight: 900; color: #8a6512; margin-bottom: 12px; }
.ph-price span { font-size: 13px; font-weight: 800; color: var(--muted-2); }
.ph-list { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 300px; text-align: left; display: grid; gap: 8px; }
.ph-list li { position: relative; padding-left: 26px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.ph-list li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; background: #e8c34e; color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.ph-note { display: block; margin-top: 10px; color: var(--muted-2); font-size: 11.5px; font-weight: 700; }
.premium-cta, .btn.premium-cta {
  background: linear-gradient(135deg, #e8c34e, #bf9631) !important;
  border-color: #bf9631 !important; color: #4a3708 !important;
  box-shadow: 0 4px 0 #9a7420 !important;
}
.big-cta { width: 100%; padding: 15px 22px; font-size: 15px; }

/* ---------- Premium-paneel: actieve status ---------- */
.premium-status-card {
  padding: 16px; border-radius: 16px; border: 2px solid #ead28a;
  background: linear-gradient(180deg, #fffaf0, #fdf1cf); margin-bottom: 6px;
}
.ps-badge { font-weight: 900; font-size: 15px; color: #7a5a12; margin-bottom: 4px; }
.premium-status-card p { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* ---------- Model-kiezer ---------- */
.model-select { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.model-opt {
  text-align: left; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line);
  background: #fff; transition: border-color .15s, transform .1s, box-shadow .15s; display: grid; gap: 2px;
}
.model-opt b { font-size: 14px; color: var(--ink); }
.model-opt small { font-size: 11.5px; color: var(--muted-2); font-weight: 700; }
.model-opt:hover { border-color: var(--line-d); }
.model-opt.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(199,154,46,.16); background: var(--leaf-soft); }
.model-opt.locked { opacity: .72; }
.model-opt.locked b { color: var(--muted-2); }

/* ---------- Billing-acties ---------- */
.billing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.billing-action { flex: 1 1 auto; }

/* ---------- Sidebar: nieuwe kaarten ---------- */
.side-action {
  width: 100%; margin-top: 4px; padding: 11px 14px; border-radius: 12px; font-weight: 900; font-size: 13px;
  transition: transform .1s, box-shadow .1s, filter .15s;
}
.side-action.upgrade {
  background: linear-gradient(135deg, #e8c34e, #bf9631); color: #4a3708; box-shadow: 0 4px 0 #9a7420;
}
.side-action.manage { background: #fff; color: var(--green-d); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.daily-card .daily-row { display: flex; align-items: center; gap: 12px; }
.daily-ring {
  --p: 0; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--gold) calc(var(--p)*1%), var(--sand) 0);
}
.daily-ring i { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; color: var(--gold-d); }
.daily-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.daily-meta b { color: var(--ink); font-size: 14px; }
.daily-streak { display: inline-flex; align-items: center; gap: 5px; color: var(--orange); font-size: 12px; font-weight: 800; }
.daily-streak .ic { width: 15px; height: 15px; }
.side-premium { border: 2px solid var(--line); }
.side-premium.upgrade { background: linear-gradient(180deg, #fffaf0, #fdf3d6); border-color: #ead28a; }
.side-premium.active { background: linear-gradient(180deg, #fffaf0, #fdf1cf); border-color: #ead28a; }
.side-premium .sp-head { display: flex; align-items: center; gap: 7px; font-weight: 900; color: #7a5a12; font-size: 13.5px; margin-bottom: 6px; }
.side-premium .sp-crown { font-size: 16px; }
.side-premium p { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.45; }
.sp-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 5px; }
.sp-list li { position: relative; padding-left: 18px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.sp-list li::before { content: "✓"; position: absolute; left: 0; color: #bf9631; font-weight: 900; }

/* ---------- AI-tutorkaart: premium-accent ---------- */
.chapter-tutor-card.is-premium {
  border-color: #ead28a;
  background: linear-gradient(180deg, #fffaf0, #fdf5e0);
}
.chapter-tutor-card.is-premium .tutor-cta { background: linear-gradient(135deg, #e8c34e, #bf9631); color: #4a3708; }

/* ---------- Nieuwe visuele effecten ---------- */
.burst-banner {
  position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.7); z-index: 62;
  padding: 16px 28px; border-radius: 999px; font-weight: 900; font-size: clamp(20px, 4vw, 30px);
  color: #fff; background: linear-gradient(135deg, #58cc02, #1cb0f6); white-space: nowrap; pointer-events: none;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.4); animation: burstBannerAnim 1.9s var(--bounce) forwards;
}
.burst-banner.premium { background: linear-gradient(135deg, #f2cf5b, #bf9631); color: #3d2d06; }
@keyframes burstBannerAnim {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-4deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(.92); }
}
/* ===================================================================
   BiologieBoost — polish-laag
   Verfijning bovenop het aardse thema: rustiger typografie, betere
   leesbaarheid, doorlopende sidebar, zichtbare voortgangsbalken en
   een opgeruimde mobiele weergave. Alleen overrides — geen nieuwe
   markup nodig.
   =================================================================== */

/* ---------- typografie: lopende tekst niet meer overal vet ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-weight: 500; }
::selection { background: var(--leaf-soft); color: var(--ink); }
* { scrollbar-color: var(--line-d) transparent; }
::-webkit-scrollbar-thumb { background: var(--line-d); }

.summary p,
.para-inner p,
.chapter-view .summary p,
.exam-context,
.exam-model ol,
.fb-block p,
.fb-model p,
.goalbox ul,
.sum-list li,
.vid-desc,
.lesson .def,
.msg,
.field .help,
.note,
.empty-state p,
.progress-card p,
.side-premium p,
.sp-list li,
.ph-list li,
.premium-status-card p,
.muted-line {
  font-weight: 500;
}
.summary p,
.para-inner p,
.chapter-view .summary p {
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.7;
}
.goalbox ul { line-height: 1.75; }
.exam-context { line-height: 1.6; }
.hero p, .setup-hero p, .pick-card p, .qcard p, .launch-card p, .tab-lead { font-weight: 500; }
.vid-sec-intro, .vid-prog-lab, .fc-meta { font-weight: 600; }

/* ---------- knoppen: geen schreeuwende kapitalen meer ---------- */
.btn,
.top-auth-btn {
  text-transform: none;
  letter-spacing: .2px;
}
.top-auth-btn { font-size: 13px; }
.btn { font-weight: 800; }
.opt { font-weight: 700; line-height: 1.4; }
.btn:focus-visible,
.tab:focus-visible,
.opt:focus-visible,
.chapter:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 55%, transparent);
  outline-offset: 2px;
}

/* ---------- app-shell: sidebar-kolom loopt door tot onderaan ---------- */
.app-shell { position: relative; }
.app-shell::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 246px;
  background: var(--sand);
  border-right: 1.5px solid var(--line);
  pointer-events: none;
}
.app-sidebar { position: sticky; z-index: 1; }
.app-main { position: relative; z-index: 1; }
body.premium-active .app-shell::before {
  background: linear-gradient(180deg, #fcf4d9, #f6ecc7);
  border-right-color: #e6d29a;
}

/* ---------- sidebar: premium-kaart netjes op één regel ---------- */
.side-premium .sp-head { line-height: 1.3; }
.side-premium .sp-head b { min-width: 0; }
.side-action { font-size: 12.5px; padding: 10px 12px; white-space: nowrap; }
.side-link { font-weight: 600; }
.side-link.on { font-weight: 700; }

/* ---------- dashboard: kleine verfijningen ---------- */
.continue-cta { transition: transform .15s var(--ease), box-shadow .15s; }
.continue-card:hover .continue-cta { transform: translateX(2px); }
.continue-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 55%, transparent); outline-offset: 3px; }
.stat-card { transition: border-color .15s; }
.chapter .ch-go { gap: 4px; transition: transform .15s var(--ease); }
.chapter:hover .ch-go { transform: translateX(3px); }
.qcard:hover { border-color: var(--acc, var(--green)); }
.launch-card { transition: transform .1s, border-color .15s, box-shadow .1s; }
.launch-card:hover { border-color: var(--green); }
.rec-banner {
  background: linear-gradient(135deg, #fdf3d6, #f7e7bb);
  border-color: #ead28a;
  box-shadow: 0 4px 0 #dfc272;
}
.rec-txt h4 { color: #6f5310; }
.rec-txt p { color: #8a6d28; font-weight: 600; }
.rec-go { color: #6f5310; }

/* ---------- voortgangsbalken: altijd zichtbaar spoor ---------- */
.pbar,
.vid-prog-bar,
.exam-session-progress .pbar {
  background: #e0eae3;
  box-shadow: inset 0 0 0 1.5px rgba(70,82,74,.08);
}
body.premium-active .pbar,
body.premium-active .vid-prog-bar { background: #efe3bd; }

/* ---------- quiz: feedback en uitlegkaart ---------- */
.explain { font-weight: 500; line-height: 1.6; }
.explain b { margin-bottom: 6px; }
.explain .why-btn { display: block; width: fit-content; margin-top: 12px; }
.explain.good { background: var(--leaf-soft); color: #33512c; }
.explain.good b.ok { color: var(--green-d); }
.explain.bad { background: var(--rose-soft); color: #7c3345; }
.explain.bad b.no { color: var(--red-d); }
.why-btn { background: #fff; border-color: var(--blue); color: var(--blue-d); box-shadow: 0 3px 0 var(--water-soft); }

/* ---------- flitskaarten: compactere kaart, rustiger achterkant ---------- */
.learn-fullscreen .flashcard { height: clamp(330px, 54vh, 500px); }
.fc-back .def { color: var(--ink); font-weight: 500; }
.fc-front .hint { color: var(--faint); font-weight: 600; }
.fc-front .cn { opacity: .28; }
.flash-topline .pbar { height: 12px; }
.rate-again { color: var(--red-d); }
.rate-hard { color: var(--gold-d); }
.rate-good { color: var(--green-d); }

/* ---------- modals: zachtere schaduw en blur ---------- */
.overlay { backdrop-filter: blur(3px); }
.modal { box-shadow: 0 24px 60px -30px rgba(38,35,25,.55), 0 5px 0 var(--line); }

/* ---------- toast in shell-weergave ---------- */
body.shell-active .toast { top: max(78px, calc(env(safe-area-inset-top) + 72px)); }

/* ---------- mobiel: compacte navigatiestrook zonder lege ruimte ---------- */
@media (max-width: 980px) {
  .app-shell::before { display: none; }
  .app-sidebar {
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    scrollbar-width: none;
  }
  .app-sidebar::-webkit-scrollbar { display: none; }
  .app-sidebar .daily-card,
  .app-sidebar .side-premium { display: none; }
}
@media (max-width: 680px) {
  .chapter-tutor-card .tutor-copy { flex: 1 1 200px; }
  .continue-card { min-height: 0; padding: 22px 20px; }
  .continue-watermark { font-size: 90px; }
  .stat-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .stat-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 13px 14px; min-height: 0; }
  .stat-card strong { font-size: 15px; }
  .summary p, .para-inner p, .chapter-view .summary p { font-size: 15px; }
  .source-match-row { grid-template-columns: 1fr; }
  .source-check-option { grid-template-columns: auto 28px minmax(0, 1fr); padding: 12px; }
  .source-short-box .btn { flex: 1 1 140px; }
}

/* ===================================================================
   BiologieBoost — examen & puzzel verfijning
   =================================================================== */

/* ---------- examenscherm ---------- */
/* Rustiger, beter leesbare opgaven; nettere kopregel en zijnavigatie. */
.exam-work-card .exam-title {
  letter-spacing: 0;
  line-height: 1.12;
}
.exam-work-card .exam-q {
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.exam-context {
  font-weight: 500;
  background: var(--water-soft);
  border-left-color: var(--blue);
  color: var(--ink-2);
}
.exam-answer::placeholder,
.open-input::placeholder {
  color: var(--faint);
  font-weight: 500;
}
/* Kopstatistieken als één nette groep i.p.v. losse blokken. */
.exam-session-stats {
  gap: 8px;
  align-items: stretch;
}
.exam-session-stats span {
  min-width: 78px;
  justify-content: center;
  box-shadow: 0 3px 0 var(--line);
}
.exam-session-head p {
  font-weight: 500;
}
/* Zijnavigatie: laat lange titels op twee regels afbreken i.p.v. afkappen. */
.exam-nav-btn span {
  white-space: normal;
  overflow: visible;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}
.exam-nav-btn {
  align-items: start;
}
.exam-nav-btn b { margin-top: 1px; }
.exam-work-nav h3 { letter-spacing: 0; }
/* Antwoordmodel: iets rustiger opsomming. */
.exam-model ol { font-weight: 500; }
.exam-model .fb-model-tag { letter-spacing: .3px; }

/* ---------- puzzel: desktop toont de volledige, leesbare aanwijzingen ---------- */
/* In fullscreen op smalle schermen blijven het compacte nummerraster en de
   losse actieve-hint-box; op ruimere schermen is er plek voor de hele lijst. */
@media (min-width: 860px) {
  .puzzle-fullscreen .puzzle-clues {
    display: block;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
  }
  .puzzle-fullscreen .puzzle-clues section {
    margin-bottom: 16px;
    overflow: visible;
  }
  .puzzle-fullscreen .puzzle-clues h3 {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 2px 0 6px;
    background: var(--paper);
    font-size: 13px;
  }
  .puzzle-fullscreen .puzzle-clue-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .puzzle-fullscreen .puzzle-clue {
    grid-template-columns: 30px minmax(0, 1fr);
    place-items: center start;
    min-height: 0;
    padding: 8px 11px;
    border-radius: 11px;
    text-align: left;
  }
  .puzzle-fullscreen .puzzle-clue b {
    width: 30px;
    height: 30px;
  }
  .puzzle-fullscreen .puzzle-clue span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
  }
  .puzzle-fullscreen .puzzle-clue small {
    display: none;
  }
}

/* De actieve-hint-box krijgt een subtiele gouden rand zodat 'ie opvalt. */
.puzzle-fullscreen .puzzle-status {
  border-color: var(--ochre-soft);
  box-shadow: inset 0 0 0 1.5px rgba(191,150,49,.14);
}
.puzzle-toolbar .btn.small { letter-spacing: .2px; }

/* ===================================================================
   BiologieBoost — professionele Quizlet-achtige redesign
   Laatste laag: rustige studie-app, minder motion, vlakke componenten.
   =================================================================== */
:root {
  --paper: #f6f7fb;
  --card: #ffffff;
  --cream: #ffffff;
  --sand: #f1f3f8;
  --ink: #2e3856;
  --ink-2: #3f4b67;
  --muted: #6f7890;
  --muted-2: #586380;
  --faint: #939bb4;
  --line: #e6e8f0;
  --line-d: #d5d9e6;
  --green: #2f8f5b;
  --green-d: #207348;
  --blue: #2f8f5b;
  --blue-d: #207348;
  --purple: #5f8f6f;
  --purple-d: #3f7350;
  --red: #d9576b;
  --red-d: #ba4054;
  --gold: #ffcd1f;
  --gold-d: #9a7113;
  --orange: #ff8a47;
  --leaf-soft: #e8f5ed;
  --water-soft: #edf8f2;
  --plum-soft: #eef7f0;
  --clay-soft: #fff3ec;
  --ochre-soft: #fff8df;
  --rose-soft: #fff0f3;
  --bg: var(--paper);
  --bg-soft: var(--sand);
  --r: 10px;
  --r-lg: 14px;
  --surface-shadow: 0 1px 2px rgba(46, 56, 86, .06), 0 8px 24px rgba(46, 56, 86, .05);
  --focus-ring: 0 0 0 3px rgba(66, 85, 255, .18);

  /* Selectie/actief. Bewust géén groen: groen is gereserveerd voor "goed
     beantwoord", zodat "waar ben ik" en "hoe ging het" nooit dezelfde kleur
     krijgen. Zie de vraagpillen in de examentraining. */
  --sel: #3d6ee0;
  --sel-d: #2c53b4;
  --sel-soft: #eef3fd;
  --sel-line: #b9cdf6;

  /* Beoordelingskleuren: alleen deze drie zeggen iets over goed/fout. */
  --ok: var(--green);
  --ok-d: var(--green-d);
  --ok-soft: var(--leaf-soft);
  --ok-line: #a6d5bc;
  --warn: #e0922f;
  --warn-d: #a4661b;
  --warn-soft: #fdf4e8;
  --warn-line: #efcb99;
  --err: var(--red);
  --err-d: #a8374a;
  --err-soft: #fbeef1;
  --err-line: #eeb4be;
}

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: "Hanken Grotesk", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
}
h1, h2, h3, h4,
.brand-txt,
.app-title,
.side-brand,
.chapter h3,
.continue-card h3,
.ch-banner-txt h2,
.action-copy b,
.stat-card strong,
.qtext,
.flashcard .term {
  font-family: "Hanken Grotesk", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.view,
.stagger > *,
.msg,
.settings-panel,
.exam-model,
.ai-note,
.lesson .emoji,
.result .big,
.score-ring,
.burst-banner,
.premium-hero .ph-crown,
.brand .logo,
.ic-flame,
.ch-banner-bar > span,
.continue-bar span,
.vid-prog-bar > span {
  animation: none !important;
}
.view,
.stagger > * {
  opacity: 1 !important;
  transform: none !important;
}
html { scroll-behavior: auto; }

.topbar,
.app-topbar {
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(60, 60, 60, .1);
  box-shadow: 0 16px 32px -30px rgba(38, 35, 25, .55);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
}
.topbar { padding-top: max(10px, env(safe-area-inset-top)); }
.brand-txt,
.side-brand > span:last-child {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}
.brand .logo,
.side-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--green);
  box-shadow: none;
}
.brand .logo:hover,
.brand:hover .logo {
  transform: none;
}
.brand .logo svg,
.side-logo svg {
  width: 20px;
  height: 20px;
}

.app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
  background: var(--paper);
}
.app-shell::before {
  width: 252px;
  background: #fff;
  border-right: 1px solid var(--line);
}
.app-sidebar {
  gap: 18px;
  padding: 20px 14px;
  background: #fff;
  border-right: 1px solid var(--line);
}
.app-main {
  background: var(--paper);
}
.app-content {
  /* Bredere leeskolom op grote schermen zodat de lege randen niet onnodig
     groot zijn (voorheen 1180px). De topbar lijnt hier via calc op uit. */
  max-width: var(--content-max, 1440px);
  padding: 28px;
}
.app-title {
  font-size: 17px;
  font-weight: 800;
}

.side-brand {
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--line);
}
.side-nav { gap: 2px; }
.side-link {
  min-height: 40px;
  border-radius: 8px;
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 700;
  transition: background .12s ease, color .12s ease;
}
.side-link:hover,
.side-link.on {
  background: var(--leaf-soft);
  color: var(--green-d);
  transform: none;
}
.side-link b {
  background: var(--green);
  color: #fff;
}
.side-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.daily-card,
.side-premium {
  background: var(--sand);
}
.side-premium,
.side-premium.upgrade,
.side-premium.active {
  border: 1px solid var(--line);
  background: var(--sand);
}
.side-premium .sp-head {
  color: var(--ink);
}
.side-premium .sp-crown {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--green);
  font-size: 0;
}
.side-premium .sp-crown .ic {
  width: 18px;
  height: 18px;
}
.daily-ring {
  background: conic-gradient(var(--green) calc(var(--p)*1%), #dfe3ef 0);
}
.daily-ring i {
  color: var(--green-d);
}

.btn,
.top-auth-btn,
.account-pill,
.icon-btn,
.side-action,
.premium-cta,
.auth-google,
.modal-x,
.session-close,
.chapter-action-card,
.launch-card,
.qcard,
.chapter,
.pick-card,
.rec-banner,
.para-acc,
.exam-work-card,
.exam-work-nav,
.puzzle-shell,
.puzzle-status,
.external-quiz-frame,
.fc-face,
.fc-rate button,
.opt,
.tab,
.chapter-search input,
.model-opt,
.year-chip,
.ctx-chip,
.pill,
.why-btn,
.exs-pill,
.exs-vt-btn,
.exs-sc-btn,
.exs-nav-btn,
.exs-close,
.pzx-btn-check,
.pzx-celebrate-btn,
.image-lightbox .lightbox-close {
  box-shadow: none !important;
}
/* Zwevende elementen houden wél diepte, maar zacht i.p.v. als hard blokje. */
.toast {
  box-shadow: 0 10px 30px -10px rgba(32, 115, 72, .45);
}
.image-lightbox .lightbox-close {
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35) !important;
}
.btn,
.top-auth-btn,
.side-action,
.premium-cta,
.auth-google,
.fc-rate button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
.btn:hover,
.top-auth-btn.primary:hover,
.side-action.upgrade:hover,
.premium-cta:hover {
  background: var(--green-d);
  filter: none;
}
.btn.ghost,
.top-auth-btn,
.side-action.manage,
.auth-google,
.fc-rate button {
  background: #fff;
  border-color: var(--line-d);
  color: var(--ink);
}
.btn.ghost:hover,
.top-auth-btn:hover,
.side-action.manage:hover,
.auth-google:hover,
.fc-rate button:hover {
  border-color: var(--green);
  color: var(--green-d);
  background: #fff;
}
.btn.danger,
.btn.ghost.danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn:focus-visible,
.top-auth-btn:focus-visible,
.side-link:focus-visible,
.chapter:focus-visible,
.qcard:focus-visible,
.launch-card:focus-visible,
.tab:focus-visible,
.opt:focus-visible,
.chapter-action-card:focus-visible,
.account-pill:focus-visible,
.icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

.icon-btn,
.app-settings.icon-btn {
  background: #fff;
  color: var(--muted-2);
  border: 1px solid var(--line);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:hover {
  background: var(--sand);
  color: var(--ink);
  transform: none;
}
.ic-gear { fill: currentColor; }
.app-stat {
  color: var(--muted-2);
}
.app-stat .ic,
.daily-streak .ic,
.chip-stat.streak .ic {
  color: var(--orange);
}
.dashboard-grid {
  display: block;
  margin-bottom: 22px;
}
.continue-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 0;
  padding: 15px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--surface-shadow) !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.continue-card > :not(.continue-art),
.ch-banner > :not(.ch-banner-art) {
  position: relative;
  z-index: 1;
}
.chapter > :not(.chapter-art) {
  z-index: 1;
}
.continue-art,
.chapter-art,
.ch-banner-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.continue-art img,
.chapter-art img,
.ch-banner-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(.96);
}
.continue-art {
  left: 32%;
  opacity: .7;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.42) 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.42) 34%, #000 100%);
}
.continue-art img {
  opacity: .24;
}
.continue-card::before { display: none; }
.continue-card:hover {
  transform: none;
  border-color: var(--green);
  filter: none;
}
/* Compacte, volledige-breedte "ga verder"-balk */
.continue-thumb {
  flex: none;
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--leaf-soft);
}
.continue-thumb .continue-art {
  left: 0;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.continue-thumb .continue-art img {
  opacity: 1;
  filter: saturate(1) contrast(1);
}
.continue-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.continue-kicker {
  color: var(--green-d);
  font-size: 11px;
  letter-spacing: .04em;
}
.continue-card h3 {
  margin: 1px 0 0;
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.continue-meta {
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.continue-bar,
.ch-banner-bar,
.pbar,
.vid-prog-bar,
.exam-session-progress .pbar {
  height: 8px;
  background: #e3e7f2;
  box-shadow: none;
}
.continue-bar span,
.ch-banner-bar > span,
.pbar > span,
.vid-prog-bar > span,
.exam-session-progress .pbar > span {
  background: var(--green);
}
.continue-cta {
  flex: none;
  align-self: center;
  margin: 0;
  padding: 11px 20px;
  background: var(--green);
  color: #fff;
  border-radius: 10px;
  box-shadow: none;
  white-space: nowrap;
}
.continue-card:hover .continue-cta {
  background: var(--green-d);
}
.continue-card:hover .continue-cta,
.chapter:hover .ch-go {
  transform: none;
}
/* Voortgang als dunne lijn onderaan de balk */
.continue-card .continue-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  max-width: none;
  margin: 0;
  border-radius: 0;
}
.continue-watermark {
  display: none;
}
@media (max-width: 560px) {
  .continue-card { flex-wrap: wrap; padding-bottom: 18px; }
  .continue-body { flex-basis: 0; }
  .continue-cta { width: 100%; justify-content: center; }
}
.stat-stack { gap: 12px; }
.stat-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.stat-card b {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .02em;
}
.stat-card strong {
  color: var(--ink);
  font-size: 20px;
}
.stat-ic,
.qcard .qi,
.lc-ic,
.action-ic,
.rec-ic,
.chapter .ch-num {
  border-radius: 10px;
  background: var(--leaf-soft);
  color: var(--green-d);
}
.stat-streak { background: var(--clay-soft); color: var(--orange); }
.stat-count { background: var(--leaf-soft); color: var(--green-d); }

.section-title,
.section-title-row .section-title {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .04em;
}
.chapter-heading small {
  color: var(--muted);
  font-weight: 600;
}
.chapter-search input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}
.chapter-search input:focus {
  border-color: var(--green);
  box-shadow: var(--focus-ring) !important;
}
.chapters {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.chapter {
  min-height: 152px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.chapter-art {
  left: 30%;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 16%, rgba(0,0,0,.86) 42%, #000 56%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 16%, rgba(0,0,0,.86) 42%, #000 56%, #000 100%);
}
.chapter-art img {
  opacity: .68;
  object-position: center right;
  filter: saturate(1.16) contrast(1.16);
}
.chapter::before { display: none; }
.chapter:hover {
  transform: none;
  border-color: var(--green);
  box-shadow: var(--surface-shadow) !important;
}
.chapter:hover .chapter-art img {
  opacity: .76;
}
.chapter .ch-top {
  min-height: 38px;
}
.chapter .ch-num {
  min-width: 34px;
  height: 34px;
  color: var(--green-d);
  font-size: 13px;
}
.chapter .ch-progress {
  width: 40px;
  height: 40px;
  margin-left: 0;
  background: conic-gradient(var(--green) calc(var(--p)*1%), #e2e6f0 0);
}
.chapter .ch-progress i {
  width: 30px;
  height: 30px;
  color: var(--green-d);
  font-size: 10px;
}
.chapter h3 {
  margin-top: 14px;
  color: var(--ink);
  font-size: 18px;
}
.chapter .ch-meta {
  color: var(--muted);
}
.chapter .ch-go,
.rec-go {
  color: var(--green-d);
}

.quick {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.qcard,
.launch-card,
.rec-banner,
.pick-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.qcard:hover,
.launch-card:hover,
.rec-banner:hover,
.pick-card:hover {
  transform: none;
  border-color: var(--green);
  box-shadow: var(--surface-shadow) !important;
}
.qcard p,
.launch-card p,
.rec-txt p {
  color: var(--muted-2);
  font-weight: 500;
}
.rec-banner {
  background: #fff;
  border-color: var(--line);
}
.rec-txt h4 {
  color: var(--ink);
}

.chapter-view {
  gap: 18px;
}
.chapter-view .backbtn {
  color: var(--muted-2);
  font-weight: 700;
}
.ch-banner,
.chapter-view .ch-banner {
  position: relative;
  display: block;
  min-height: 128px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
  box-shadow: var(--surface-shadow) !important;
}
.ch-banner .ch-progress,
.chapter-view .ch-banner .ch-progress {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--p)*1%), #e2e6f0 0);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}
.ch-banner .ch-progress i,
.chapter-view .ch-banner .ch-progress i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-d);
  display: grid;
  place-items: center;
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}
.ch-banner-txt,
.chapter-view .ch-banner-txt {
  position: relative;
  z-index: 1;
  max-width: 64%;
  padding-right: 54px;
}
.ch-banner-art {
  left: 34%;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 16%, rgba(0,0,0,.86) 42%, #000 56%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 16%, rgba(0,0,0,.86) 42%, #000 56%, #000 100%);
}
.ch-banner-art img {
  opacity: .62;
  object-position: center right;
  filter: saturate(1.14) contrast(1.14);
}
.ch-banner-ic,
.chapter-view .ch-banner-ic {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--leaf-soft);
  color: var(--green-d);
  font-size: 28px;
}
.chapter-view .ch-banner-kicker,
.ch-banner-meta,
.chapter-view .ch-banner-meta {
  color: var(--muted-2);
}
.chapter-view .ch-banner-txt h2,
.ch-banner-txt h2 {
  color: var(--ink);
  font-size: clamp(26px, 3vw, 38px);
}
.chapter-view .ch-banner-txt p,
.ch-banner-txt p {
  color: var(--muted-2);
  font-size: 15px;
  font-weight: 500;
}
.tabs,
.chapter-view .tabs {
  gap: 6px;
  border-bottom: 1px solid var(--line);
}
.tab,
.chapter-view .tab {
  margin-bottom: -1px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted-2);
  font-weight: 800;
}
.tab:hover,
.chapter-view .tab:hover {
  color: var(--ink);
  border-color: transparent;
}
.tab.on,
.chapter-view .tab.on {
  background: transparent;
  color: var(--green-d);
  border-bottom-color: var(--green);
}
.tab.on .ic { color: currentColor; }

.chapter-view .para-acc,
.para-acc {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.chapter-view .para-acc[open],
.para-acc[open] {
  border-color: var(--line-d);
  box-shadow: var(--surface-shadow) !important;
}
.chapter-view .para-acc > summary,
.para-acc summary {
  background: #fff;
}
.chapter-view .para-acc .pa-id,
.pa-id {
  background: var(--sand);
  color: var(--ink);
}
.chapter-view .para-acc[open] .pa-id,
.chapter-view .para-acc.done .pa-id {
  background: var(--green);
  color: #fff;
}
.chapter-view .goalbox.glass,
.goalbox {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: var(--sand);
}
.chapter-tutor-card,
.chapter-tutor-card.is-locked,
.chapter-tutor-card.is-premium {
  border: 1px solid var(--line);
  background: #fff;
}
.tutor-ic,
.tutor-cta,
.chapter-tutor-card.is-locked .tutor-cta,
.chapter-tutor-card.is-premium .tutor-cta {
  background: var(--green);
  color: #fff;
  box-shadow: none;
}
.tutor-copy b {
  color: var(--ink);
}
.tutor-copy small {
  color: var(--muted-2);
}
.chapter-action-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.chapter-action-card:hover {
  transform: none;
  border-color: var(--green);
  box-shadow: var(--surface-shadow) !important;
}
.action-cta {
  border-radius: 8px;
  background: var(--green);
  box-shadow: none;
}
.action-copy small {
  color: var(--muted-2);
  font-weight: 500;
}

.session-fullscreen,
.learn-fullscreen,
.exam-fullscreen,
.puzzle-fullscreen {
  background: var(--paper);
}
.session-fullscreen .panel,
.flash-session-shell,
.exam-session-shell {
  background: transparent;
}
.session-fullscreen .panel,
.exam-work-card,
.exam-work-nav,
.puzzle-shell {
  border: 1px solid var(--line);
  box-shadow: var(--surface-shadow) !important;
}
/* De full-bleed oefenpanelen zijn bewust transparant; de kaartrand en -schaduw
   horen hier niet — die gaven vage schaduwranden aan de linker- en rechterkant. */
.quiz-fullscreen .panel {
  border: 0;
  box-shadow: none !important;
}
.qtext {
  color: var(--ink);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
}
.opt {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 650;
}
.opt:hover {
  border-color: var(--green);
  background: #fff;
}
.opt .key {
  border-color: var(--line);
  background: var(--sand);
  color: var(--muted-2);
}
.opt.correct {
  border-color: #1aa179;
  background: #eefaf6;
  color: #13745b;
}
.opt.correct .key {
  border-color: #1aa179;
  background: #1aa179;
}
.opt.wrong {
  border-color: var(--red);
  background: var(--rose-soft);
  color: var(--red-d);
}
.explain {
  border: 1px solid transparent;
  border-radius: 12px;
}
.explain.good {
  border-color: #cceee4;
  background: #eefaf6;
  color: #17634f;
}
.explain.bad {
  border-color: #f6cbd3;
  background: var(--rose-soft);
  color: var(--red-d);
}

.learn-fullscreen .flashcard,
.flashcard {
  perspective: 1600px;
}
.learn-fullscreen .fc-face,
.fc-face {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--surface-shadow) !important;
}
.fc-front,
.fc-back {
  background: #fff;
}
.fc-front .cn {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 1;
}
.fc-front .hint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.fc-back .def {
  color: var(--ink);
}
.learn-fullscreen .fc-rate button {
  border: 1px solid var(--line-d);
  background: #fff;
  color: var(--ink);
}
.learn-fullscreen .fc-rate button:hover {
  border-color: var(--green);
  color: var(--green-d);
}
.rate-again { color: var(--red-d) !important; }
.rate-hard { color: var(--gold-d) !important; }
.rate-good { color: #13745b !important; }
.learn-result-ic,
.result .big {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--leaf-soft);
  color: var(--green-d);
  font-size: 34px;
  font-weight: 900;
}

.exam-session-head h2,
.flash-session-head h2,
.learn-result h2 {
  color: var(--ink);
}
.exam-session-head p,
.flash-session-head p,
.learn-result p {
  color: var(--muted-2);
}
.exam-session-stats span,
.exam-nav-btn,
.puzzle-status,
.puzzle-board-wrap {
  border: 1px solid var(--line);
  background: #fff;
}
.exam-nav-btn.answered b,
.exam-nav-btn.done b,
.puzzle-clue.done b {
  background: var(--green);
}
.exam-context {
  border-left-color: var(--green);
  background: var(--sand);
}
.open-input,
.field input,
.field select {
  border: 1px solid var(--line-d);
  border-radius: 10px;
  background: #fff;
}
.open-input:focus,
.field input:focus,
.field select:focus {
  border-color: var(--green);
  box-shadow: var(--focus-ring) !important;
}

.puzzle-fullscreen .puzzle-shell {
  background: var(--paper);
}
.puzzle-cell.fill,
.puzzle-clue {
  border-color: var(--line);
}
.puzzle-clue.on {
  border-color: var(--green);
  background: var(--leaf-soft);
}
.puzzle-meter {
  background: conic-gradient(var(--green) calc(var(--p)*1%), #dfe3ef 0);
}
.puzzle-meter b {
  color: var(--green-d);
}
.puzzle-progress span {
  background: var(--green);
}

.overlay {
  background: rgba(18, 24, 38, .48);
  backdrop-filter: blur(4px);
}
.modal {
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(46, 56, 86, .16) !important;
}
.settings-tabs {
  background: var(--sand);
  border-radius: 10px;
}
.settings-tab {
  border-radius: 8px;
}
.settings-tab.on,
.model-opt.on {
  background: #fff;
  color: var(--green-d);
  box-shadow: none;
}
.premium-hero,
.premium-status-card,
.account-premium-flag,
.side-premium.upgrade,
.side-premium.active {
  border-color: var(--line);
  background: var(--sand);
}
.premium-hero .ph-crown,
.ps-badge,
.account-premium-flag {
  color: var(--green-d);
}
.premium-hero .ph-crown {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  filter: none;
}
.premium-cta,
.btn.premium-cta,
.side-action.upgrade {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}
.premium-crown {
  margin-left: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--leaf-soft);
  color: var(--green-d);
  font-size: 10px;
  font-weight: 900;
  filter: none;
}
body.premium-active,
body.premium-active .app-shell,
body.premium-active .app-sidebar {
  --green: #2f8f5b;
  --green-d: #207348;
  --cream: #ffffff;
  --sand: #f1f3f8;
  --paper: #f6f7fb;
  --leaf-soft: #e8f5ed;
  --line: #e6e8f0;
  --line-d: #d5d9e6;
  --ink: #2e3856;
  --ink-2: #3f4b67;
  background: inherit;
}
body.premium-active .app-shell::before,
body.premium-active .app-sidebar {
  background: #fff;
  border-right-color: var(--line);
}
body.premium-active .brand-txt,
body.premium-active .side-brand > span:last-child {
  background: none;
  color: var(--ink);
  animation: none;
}
body.premium-active .side-logo,
body.premium-active .brand .logo {
  background: var(--green) !important;
  box-shadow: none;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-shell::before { display: none; }
  .app-sidebar {
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .dashboard-grid,
  .quick {
    grid-template-columns: 1fr;
  }
  .ch-banner-txt,
  .chapter-view .ch-banner-txt {
    max-width: 70%;
  }
  .ch-banner-art {
    left: 46%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 22%, #000 62%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 22%, #000 62%, #000 100%);
  }
  .ch-banner-art img {
    opacity: .5;
  }
}
@media (max-width: 680px) {
  .app-content {
    padding: 18px 14px 80px;
  }
  .app-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px 0;
    overflow: visible;
  }
  .side-brand {
    padding: 0 0 8px;
    border-bottom: 0;
  }
  .side-nav {
    display: flex;
    flex-direction: row;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar {
    display: none;
  }
  .side-link {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: #fff;
    white-space: nowrap;
  }
  .side-link.on {
    border-color: var(--green);
    background: var(--leaf-soft);
  }
  .app-topbar {
    gap: 8px;
    padding: 8px 12px;
  }
  .app-stat {
    display: none;
  }
  .stat-stack {
    grid-template-columns: 1fr;
  }
  .continue-art {
    left: 18%;
  }
  .continue-art img {
    opacity: .18;
  }
  .chapter {
    min-height: 132px;
  }
  .chapter-art {
    left: 44%;
  }
  .chapter-art img {
    opacity: .62;
  }
  /* Tabbladen: laat ze afbreken naar twee rijen i.p.v. horizontaal
     wegscrollen — anders staat "Examenopgaven" buiten beeld en vindt
     bijna niemand de examenopgaven. Nu zijn alle vier meteen zichtbaar. */
  .chapter-view .tabs {
    overflow-x: visible;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .chapter-view .tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 11px 10px;
  }
  /* Hoofdstuk-hero: op mobiel mag de introtekst de volle breedte pakken
     i.p.v. in een smalle kolom naast de foto te proppen. De foto zakt
     naar de rechterrand en wordt subtieler, zodat de tekst leesbaar blijft. */
  .ch-banner-txt,
  .chapter-view .ch-banner-txt {
    max-width: 100%;
    padding-right: 46px;
  }
  .ch-banner-art {
    left: 54%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.14) 30%, #000 78%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.14) 30%, #000 78%, #000 100%);
  }
  .ch-banner-art img {
    opacity: .32;
  }
  .action-cta,
  .tutor-cta {
    margin-left: 0;
  }
  .chapter-action-card,
  .chapter-tutor-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .action-cta,
  .tutor-cta {
    grid-column: 2;
    width: fit-content;
  }
}

/* ===================================================================
   Shell zonder sidebar: logo, navigatie en profielmenu in een topbar
   =================================================================== */
.app-shell,
body.premium-active .app-shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  overflow: hidden;
  background: var(--paper);
}
/* Alleen de shell-weergave vergrendelt het venster; de topbar blijft vast en
   het gebied eronder scrollt. Zo verspringt niets als de scrollbar verschijnt
   of verdwijnt (bv. bij het wisselen naar een filter met weinig hoofdstukken). */
body.shell-active {
  overflow: hidden;
}
/* Het venster zelf scrollt in shell-weergave niet (alleen .app-scroll doet dat).
   De scrollbar-gutter op html blijft dan ongebruikt en reserveert een leeg
   strookje naast de echte scrollbar; die zetten we hier uit. */
html:has(body.shell-active) {
  scrollbar-gutter: auto;
}
/* Het examen- en puzzelscherm vergrendelen op desktop het venster (de shell is
   100dvh met overflow: hidden en scrollt intern). Het venster scrollt dan niet,
   dus reserveert de scrollbar-gutter op html een leeg strookje aan de
   rechterkant; die zetten we hier ook uit. */
html:has(.exam-fullscreen),
html:has(.puzzle-fullscreen) {
  scrollbar-gutter: auto;
}
.app-shell::before,
body.premium-active .app-shell::before {
  display: none !important;
}
.app-sidebar,
body.premium-active .app-sidebar {
  display: none !important;
}
.app-main {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}
.app-topbar {
  position: relative;
  top: auto;
  flex: 0 0 auto;
  min-height: 72px;
  z-index: 120;
  gap: 12px;
  /* De balk-achtergrond blijft volledige breedte, maar logo + knoppen lijnen
     uit met de content-kolom, zodat de randen als bewuste marge ogen. */
  padding: max(10px, env(safe-area-inset-top)) max(clamp(16px, 3vw, 34px), calc((100% - var(--content-max)) / 2 + var(--content-pad))) 10px;
  border-bottom: 1px solid rgba(60, 60, 60, .1);
  background: rgba(255, 255, 255, .82);
  overflow: visible;
}
/* Het enige echt scrollbare gebied. scrollbar-gutter reserveert altijd ruimte,
   zodat gecentreerde content niet horizontaal verspringt. */
.app-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.app-content {
  position: relative;
  z-index: 0;
}
.shell-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 0 8px 0 0;
  color: var(--ink);
  background: transparent;
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}
.shell-auth-actions .top-auth-btn {
  display: inline-flex;
}
.shell-logo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  background: var(--green);
}
.top-premium-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #ffcd1f;
  color: var(--ink);
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.top-premium-btn:hover {
  filter: brightness(.98);
}
.top-premium-btn.active {
  background: var(--leaf-soft);
  color: var(--green-d);
}
.account-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.account-avatar-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 26px -22px rgba(46, 56, 86, .9);
}
.account-avatar-btn:hover {
  border-color: var(--green);
}
.account-avatar-btn.is-premium {
  box-shadow: 0 0 0 3px rgba(255, 205, 31, .42);
}
.account-avatar-btn .account-avatar,
.account-menu-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.account-avatar-btn .account-avatar img,
.account-menu-avatar img,
.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 130;
  width: min(352px, calc(100vw - 28px));
  padding: 8px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(46, 56, 86, .06), 0 22px 54px -30px rgba(46, 56, 86, .55);
}
.account-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 16px;
  width: 14px;
  height: 14px;
  border-left: 1.5px solid var(--line);
  border-top: 1.5px solid var(--line);
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(45deg);
}
.account-menu[hidden] {
  display: none !important;
}
.account-menu-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-bottom: 6px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: 16px;
  background: linear-gradient(135deg, var(--leaf-soft), #fff 82%);
}
.account-menu-avatar {
  width: 62px;
  height: 62px;
  border: 3px solid #fff;
  font-size: 20px;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green) 34%, var(--line));
}
.account-menu-avatar.is-premium {
  box-shadow: 0 0 0 4px rgba(255, 205, 31, .35);
}
.account-menu-identity {
  min-width: 0;
}
.account-menu-identity small,
.account-menu-head b,
.account-menu-head span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-identity small {
  margin-bottom: 2px;
  color: var(--green-d);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.account-menu-head b {
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.08;
}
.account-menu-head span {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 13.5px;
  font-weight: 700;
}
.account-menu-item {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  font-size: 15px;
  font-weight: 800;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.account-menu-head + .account-menu-item {
  margin-top: 0;
}
.account-menu-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line));
  border-radius: 12px;
  background: var(--leaf-soft);
  color: var(--green-d);
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.account-menu-icon .ic {
  width: 21px;
  height: 21px;
  color: currentColor;
}
.account-menu-icon .ic-gear {
  fill: currentColor;
}
.account-menu-icon .ic-target circle {
  stroke: currentColor;
}
.account-menu-icon .ic-target circle:nth-child(1),
.account-menu-icon .ic-target circle:nth-child(2) {
  fill: none;
}
.account-menu-icon .ic-target circle:nth-child(3) {
  fill: currentColor;
}
.account-menu-item.is-settings .account-menu-icon {
  border-color: color-mix(in srgb, var(--green) 16%, var(--line));
  background: var(--sand);
  color: var(--muted-2);
}
.account-menu-item.is-premium .account-menu-icon {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  background: #fff7cf;
  color: #b88600;
}
.account-menu-item:hover {
  border-color: var(--line);
  background: var(--sand);
  color: var(--ink);
  transform: translateX(3px);
}
.account-menu-item:hover .account-menu-icon {
  transform: scale(1.05);
}
.account-menu-item.danger {
  margin-top: 8px;
  color: var(--red-d);
}
.account-menu-item.danger .account-menu-icon {
  border-color: #ffd2d2;
  background: #fff1f1;
  color: var(--red-d);
}
.account-menu-item.danger:hover {
  border-color: #ffd2d2;
  background: #fff6f6;
}
.account-pill {
  width: 42px;
  max-width: 42px;
  height: 42px;
  justify-content: center;
  padding: 3px;
  border-radius: 50%;
}
.account-pill .account-name,
.account-pill .premium-crown {
  display: none !important;
}
.account-pill .account-avatar {
  width: 100%;
  height: 100%;
}

@media (max-width: 1060px) {
  .app-topbar {
    flex-wrap: wrap;
  }
}
@media (max-width: 680px) {
  .app-topbar {
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  }
  .shell-brand span:last-child {
    display: none;
  }
  .top-premium-btn {
    min-height: 36px;
    max-width: 134px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
  }
  body:not(.signed-in) .top-premium-btn {
    display: none;
  }
  body.signed-in .top-premium-btn {
    max-width: 180px;
  }
  .app-stat {
    display: inline-flex;
  }
  .shell-auth-actions {
    gap: 6px;
  }
  .account-avatar-btn {
    width: 40px;
    height: 40px;
  }
  .account-menu {
    right: -2px;
    width: min(340px, calc(100vw - 20px));
  }
  .account-menu-head {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 12px;
  }
  .account-menu-avatar {
    width: 56px;
    height: 56px;
  }
  .account-menu-head b {
    font-size: 17px;
  }
  .account-menu-head span {
    font-size: 13px;
  }
  .account-menu-item {
    min-height: 48px;
    padding: 5px 7px;
    font-size: 15px;
  }
  .account-menu-icon {
    width: 36px;
    height: 36px;
  }
}

/* ===================================================================
   Instellingen als echte pagina
   =================================================================== */
.settings-page {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: clamp(38px, 7vw, 74px) 0 84px;
}
.settings-page-inner {
  display: grid;
  gap: 28px;
}
.settings-page-header {
  display: flex;
  align-items: center;
  gap: 18px;
}
.settings-page-header .settings-orb {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--leaf-soft);
  color: var(--green-d);
}
.settings-page-header h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif;
  font-size: clamp(42px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: .95;
}
.settings-page-header .sub {
  margin: 10px 0 0;
  max-width: 620px;
  color: var(--muted-2);
  font-size: 16px;
  font-weight: 600;
}
.settings-page .settings-tabs {
  width: min(520px, 100%);
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.settings-page .settings-tab {
  min-height: 42px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
}
.settings-page .settings-tab.on {
  background: var(--leaf-soft);
  color: var(--green-d);
}
.settings-page .settings-panels {
  width: 100%;
}
.settings-page .settings-panel {
  display: none;
}
.settings-page .settings-panel.on {
  display: block;
  animation: none;
}
.settings-page .settings-panel[data-panel="account"].on,
.settings-page .settings-panel[data-panel="prefs"].on {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--surface-shadow);
}
.settings-page .account-settings-head {
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.settings-page .account-avatar.large {
  width: 86px;
  height: 86px;
  font-size: 28px;
}
.settings-page .account-id b {
  font-size: 24px;
  font-weight: 800;
}
.settings-page .account-id span {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
}
.settings-page .profile-avatar-picker {
  margin: 0 0 26px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line);
}
.profile-avatar-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 4vw, 34px);
}
.profile-avatar-preview {
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 42px;
  font-weight: 900;
}
.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 20px;
  min-width: 0;
  padding-top: 4px;
}
.profile-avatar-option {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  transition: transform .12s var(--ease);
}
.profile-avatar-option img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.profile-avatar-option::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid transparent;
  border-radius: 50%;
  transition: border-color .15s, box-shadow .15s;
}
.profile-avatar-option:hover {
  transform: translateY(-2px);
}
.profile-avatar-option:hover::after {
  border-color: var(--line-d);
}
.profile-avatar-option:focus-visible::after {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(28, 176, 246, .16);
}
.profile-avatar-option.on::after {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(28, 176, 246, .16);
}
.profile-avatar-option.is-fallback {
  display: grid;
  place-items: center;
  background: var(--green);
}
.settings-page .sync-pill {
  align-self: flex-start;
  border-width: 1px;
  background: var(--leaf-soft);
}
.settings-page .field {
  max-width: 620px;
}
.settings-page .field input,
.settings-page .field select {
  min-height: 48px;
  border-width: 1px;
  font-size: 15px;
}
.settings-page .settings-actions {
  margin-top: 6px;
}
.settings-page .settings-section-title {
  margin: 0 0 16px;
  color: var(--muted-2);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.settings-page .premium-hero {
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 4vw, 36px) clamp(24px, 5vw, 44px);
  border: 1px solid #133c27;
  border-radius: 18px;
  background: linear-gradient(120deg, #062d1a 0%, #10442a 58%, #2f8f5b 100%);
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 48px -32px rgba(15, 21, 62, .7);
}
.settings-page .premium-hero .ph-crown {
  grid-column: 1;
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  filter: none;
  animation: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}
.settings-page .premium-hero h4 {
  grid-column: 1;
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
}
.settings-page .premium-hero .ph-price,
.settings-page .premium-hero .ph-list,
.settings-page .premium-hero .ph-note {
  grid-column: 1;
}
.settings-page .premium-hero .ph-price {
  margin: 8px 0 0;
  color: rgba(255,255,255,.9);
  font-size: 18px;
}
.settings-page .premium-hero .ph-price span,
.settings-page .premium-hero .ph-note,
.settings-page .premium-hero .ph-list li {
  color: rgba(255,255,255,.75);
}
.settings-page .premium-hero .ph-list {
  max-width: none;
  margin: 14px 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-page .premium-hero .big-cta {
  grid-column: 2;
  grid-row: 1 / span 5;
  width: auto;
  min-width: 180px;
  border-radius: 999px;
  background: #ffcd1f !important;
  border-color: #ffcd1f !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.settings-page .premium-status-card,
.settings-page .model-select,
.settings-page .billing-actions,
.settings-page .muted-line {
  max-width: 760px;
}
.settings-page .premium-status-card {
  border-width: 1px;
  background: #fff;
  box-shadow: var(--surface-shadow);
}
.settings-page .model-select {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-page .model-opt {
  border-width: 1px;
}
.settings-page .route-static {
  max-width: 620px;
  border-width: 1px;
  background: var(--sand);
}
.settings-page .toggle {
  max-width: 720px;
  min-height: 62px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.settings-page .danger-zone {
  max-width: 720px;
  margin-top: 22px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .settings-page {
    padding: 30px 0 64px;
  }
  .settings-page-header {
    align-items: flex-start;
  }
  .settings-page-header .settings-orb {
    display: none;
  }
  .settings-page-header h1 {
    font-size: 42px;
  }
  .settings-page .settings-tabs {
    width: 100%;
    overflow-x: auto;
  }
  .settings-page .settings-panel[data-panel="account"].on,
  .settings-page .settings-panel[data-panel="prefs"].on {
    padding: 20px;
  }
  .settings-page .account-settings-head {
    align-items: flex-start;
  }
  .settings-page .account-avatar.large {
    width: 64px;
    height: 64px;
  }
  .profile-avatar-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .profile-avatar-preview {
    width: 104px;
    height: 104px;
    font-size: 32px;
  }
  .profile-avatar-grid {
    gap: 14px;
  }
  .profile-avatar-option {
    width: 56px;
    height: 56px;
  }
  .settings-page .sync-pill {
    width: 100%;
    text-align: center;
  }
  .settings-page .premium-hero {
    grid-template-columns: 1fr;
  }
  .settings-page .premium-hero .big-cta {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
.settings-page .premium-hero .ph-list,
  .settings-page .model-select {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   Instellingen — één doorlopende pagina (Quizlet-geïnspireerd)
   =================================================================== */
.settings-page .settings-page-header {
  display: block;
  align-items: initial;
  margin-bottom: 6px;
}
.settings-page .settings-page-header h1 {
  font-size: clamp(34px, 5vw, 50px);
}
.settings-page .settings-page-header .sub {
  margin-top: 8px;
}
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-section-label {
  margin: 0;
  padding-left: 2px;
  color: var(--muted-2);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
}
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 22px clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: var(--surface-shadow);
}
.settings-card.card-rows {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* Rijen binnen een kaart */
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px clamp(18px, 3vw, 26px);
  border-top: 1px solid var(--line);
}
.card-rows > .set-row:first-child,
.card-rows > .set-signedout:first-child { border-top: 0; }
.set-row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.set-row-main b {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 800;
}
.set-row-main span {
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.set-row-block {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.set-row-danger b { color: var(--red-d); }
.set-row .sync-pill { align-self: center; flex: none; }

/* "Bewerken/Instellen" tekst-actie */
.settings-link {
  flex: none;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: var(--green-d);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.settings-link:hover { text-decoration: underline; }

/* Inline bewerk-veld dat onder een rij verschijnt */
.set-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px clamp(18px, 3vw, 26px) 20px;
}
.set-edit[hidden] { display: none; }
.set-edit input {
  width: 100%;
  max-width: 440px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-d);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
}
.set-edit input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.set-edit-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Subkop + hint binnen een vrije kaart (Abonnement) */
.settings-card .set-subhead {
  margin: 6px 0 -6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}
.settings-card .set-hint {
  margin: 0;
  color: var(--muted-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* Klein statuslabel (Vaste route) */
.set-tag {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--leaf-soft);
  color: var(--green-d);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* Toggle-rijen */
.set-row.toggle-row .switch-wrap { flex: none; display: inline-flex; align-items: center; }

/* Uitgelogd-blok */
.set-signedout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px clamp(18px, 3vw, 26px);
}
.set-signedout-actions { display: flex; gap: 10px; flex: none; }

/* Avatarkiezer binnen de rij */
.avatar-picker-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 26px);
  flex-wrap: wrap;
}
.avatar-picker-row .profile-avatar-preview {
  width: 92px;
  height: 92px;
  font-size: 30px;
  flex: none;
}
.avatar-picker-row .profile-avatar-grid { gap: 12px 14px; }
.avatar-picker-row .profile-avatar-option {
  width: 52px;
  height: 52px;
}

/* Upgrade-banner (gratis gebruikers) */
.upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 16px;
  background: linear-gradient(120deg, #062d1a 0%, #10442a 58%, #2f8f5b 122%);
  color: #fff;
}
.upgrade-banner .ub-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.upgrade-banner h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
}
.upgrade-banner p {
  margin: 6px 0 0;
  max-width: 560px;
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
}
.upgrade-banner .premium-cta {
  flex: none;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #ffcd1f !important;
  border-color: #ffcd1f !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-weight: 800;
  white-space: nowrap;
}
.upgrade-banner .premium-cta:hover { filter: brightness(.97); }

/* Solide rode knop (account verwijderen) */
.btn.btn-danger-solid {
  background: var(--red-d);
  border-color: var(--red-d);
  color: #fff;
}
.btn.btn-danger-solid:hover {
  background: var(--red-d);
  border-color: var(--red-d);
  filter: brightness(.95);
}

@media (max-width: 620px) {
  .set-row,
  .set-signedout {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .set-row.toggle-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .set-row .settings-link,
  .set-row .set-tag,
  .set-row > .btn,
  .set-signedout-actions { align-self: flex-start; }
  .set-row .sync-pill { align-self: flex-start; }
  .upgrade-banner .premium-cta { width: 100%; }
}

/* Auth modal: voorkom dubbele focusranden binnen input-wrappers. */
.auth-modal .field-wrap:focus-within {
  border-color: var(--green);
  box-shadow: none;
}
.auth-modal .field-wrap input,
.auth-modal .field-wrap input:focus,
.auth-modal .field-wrap input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

/* ===================================================================
   Upgrade pagina — eigen donkere weergave zonder app-shell. De pagina
   is een gerichte conversiestap: alleen een logobalk, geen navigatie.
   =================================================================== */
.upgrade-page {
  --up-bg: #0b1f17;
  --up-gold: #ffcd1f;
  --up-gold-d: #d9ac00;
  --up-green: #4fce8f;
  --up-green-l: #7fe0ab;
  --up-ink: #e7f0ea;
  --up-muted: #a9c6b7;
  --up-muted-d: #7fa793;
  min-height: 100vh;
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  color: var(--up-ink);
  background:
    radial-gradient(1100px 720px at 88% -6%, #1a4a33 0%, transparent 58%),
    radial-gradient(900px 640px at 4% 108%, #123a29 0%, transparent 55%),
    var(--up-bg);
}
.upgrade-page a { color: var(--up-gold); text-decoration: none; }
.upgrade-page a:hover { color: #ffe08a; }

/* ---------- logobalk ---------- */
.up-bar {
  display: flex;
  align-items: center;
  padding: 22px clamp(18px, 5vw, 52px);
}
.up-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.up-brand span {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  letter-spacing: -.5px;
}

.up-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 32px) clamp(18px, 4vw, 28px) 96px;
}

/* ---------- hero ---------- */
.up-hero {
  text-align: center;
  max-width: 860px;
  margin: 0 auto clamp(40px, 6vw, 60px);
}
.up-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 205, 31, .14);
  border: 1px solid rgba(255, 205, 31, .4);
  color: var(--up-gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.up-hero h1 {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: clamp(40px, 6.4vw, 74px);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 22px 0 18px;
  text-wrap: balance;
}
.up-hero p {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--up-muted);
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 600;
  line-height: 1.55;
}
.up-hero p strong { color: #fff; }

/* ---------- abonnementskaarten ---------- */
.up-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 860px;
  margin: 0 auto;
  align-items: start;
}
.up-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
}
.up-plan-premium {
  background: linear-gradient(180deg, rgba(255, 205, 31, .08), rgba(255, 255, 255, .03));
  border: 2px solid var(--up-gold);
  box-shadow: 0 22px 50px -28px rgba(255, 205, 31, .5);
}
.up-plan h2 {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}
.up-plan-premium h2 { font-weight: 800; }
.up-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--up-gold);
  color: #14261d;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.up-plan-sub {
  margin: 6px 0 0;
  color: var(--up-muted);
  font-size: 15px;
  font-weight: 600;
}
.up-plan-sub-gold { color: #e9d29a; }
.up-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 26px 0 4px;
}
.up-price span {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  color: #fff;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.up-price small {
  color: var(--up-muted);
  font-size: 15px;
  font-weight: 700;
}
.up-plan-note {
  margin: 0 0 24px;
  color: var(--up-muted-d);
  font-size: 14px;
  font-weight: 700;
}
.up-plan-note-gold {
  color: var(--up-gold);
  font-weight: 800;
}
.up-rule {
  height: 1px;
  background: rgba(255, 255, 255, .1);
  margin: 28px 0 22px;
}
.up-rule-gold { background: rgba(255, 205, 31, .22); }
.up-feats-title {
  margin: 0 0 4px;
  color: var(--up-muted);
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.up-feats {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.up-feats-premium { margin-top: 16px; }
.up-feats li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #dbe8e0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.up-feats-premium li {
  color: #fff;
  font-weight: 700;
}
.up-tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.up-tick-green { background: var(--up-green); }
.up-hl { color: var(--up-green); }

/* ---------- knoppen ---------- */
.up-cta {
  width: 100%;
  height: 54px;
  border-radius: 999px;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.up-cta:hover { filter: brightness(1.04); }
.up-cta:active {
  transform: translateY(3px);
  box-shadow: none;
}
.up-cta[disabled] {
  opacity: .7;
  cursor: default;
  transform: none;
}
.up-cta-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .28);
}
.up-cta-gold {
  background: var(--up-gold);
  color: #14261d;
  border: none;
  box-shadow: 0 4px 0 var(--up-gold-d);
}
.up-cta-wide {
  width: auto;
  height: 58px;
  padding: 0 36px;
  font-size: 17px;
}
.up-cta .spinner { border-top-color: #14261d; }

.up-assure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 30px 0 0;
  color: var(--up-muted-d);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}

/* ---------- sectiekoppen ---------- */
.up-sec-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 38px;
}
.up-chip {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--up-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.up-chip-green {
  background: rgba(79, 206, 143, .14);
  color: var(--up-green-l);
}
.up-sec-head h2 {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  color: #fff;
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 18px 0 8px;
}
.up-sec-head p {
  margin: 0;
  color: var(--up-muted);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- voordelen ---------- */
.up-benefits { margin-top: clamp(56px, 8vw, 100px); }
.up-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.up-benefit {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, border-color .18s ease;
}
.up-benefit:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .24);
}
.up-benefit-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  margin-bottom: 18px;
}
.up-ic-green { background: rgba(79, 206, 143, .16); color: var(--up-green-l); }
.up-ic-blue { background: rgba(90, 183, 246, .16); color: #8fd0ff; }
.up-ic-yellow { background: rgba(255, 205, 31, .16); color: var(--up-gold); }
.up-ic-orange { background: rgba(255, 138, 71, .16); color: #ffb184; }
.up-benefit h3 {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}
.up-benefit p {
  margin: 0;
  color: var(--up-muted);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
}

/* ---------- veelgestelde vragen ---------- */
.up-faq-sec {
  margin: clamp(56px, 8vw, 100px) auto 0;
  max-width: 760px;
}
.up-faq-list {
  display: grid;
  gap: 12px;
}
.up-faq {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  padding: 4px;
  transition: background .15s ease;
}
.up-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  color: #fff;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.up-faq summary::-webkit-details-marker { display: none; }
.up-faq .up-chev {
  flex: none;
  transition: transform .2s ease;
}
.up-faq[open] .up-chev { transform: rotate(180deg); }
.up-faq p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--up-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

/* ---------- afsluitende oproep ---------- */
.up-final {
  margin-top: clamp(56px, 8vw, 100px);
  text-align: center;
  border-radius: 20px;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px);
  background:
    radial-gradient(120% 160% at 50% 0, rgba(255, 205, 31, .14) 0%, transparent 60%),
    rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 205, 31, .28);
}
.up-final h2 {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.up-final-lead {
  max-width: 46ch;
  margin: 0 auto 28px;
  color: var(--up-muted);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}
.up-final-note {
  margin: 18px 0 0;
  color: var(--up-muted-d);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- footer op de donkere pagina ----------
   De footer rekent normaal op de padding van .app-content; die ontbreekt
   op deze shell-loze pagina, dus lijnt hij hier zelf uit met .up-main. */
.upgrade-page .site-footer {
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: transparent;
  margin-top: 0;
  padding: 26px clamp(18px, 4vw, 28px) max(22px, env(safe-area-inset-bottom));
}
.upgrade-page .site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.upgrade-page .site-footer-brand { color: #fff; }
.upgrade-page .site-footer a { color: var(--up-muted); }
.upgrade-page .site-footer a:hover { color: #fff; }

@media (max-width: 680px) {
  .up-main { padding-bottom: 64px; }
  .up-plan { padding: 28px 22px; }
  .up-benefit-grid { grid-template-columns: 1fr; }
  .up-cta-wide { width: 100%; }
  .up-assure {
    align-items: flex-start;
    text-align: left;
  }
  .up-assure svg { flex: none; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .up-cta,
  .up-benefit,
  .up-faq .up-chev { transition: none; }
  .up-benefit:hover { transform: none; }
}

/* =====================================================================
   FLITSKAARTEN — rework (altijd zichtbare knoppen, swipe-feedback,
   gestapelde kaarten, sneltoetsen, tellers)
   ===================================================================== */

/* tellers boven de kaart */
.fc-counts {
  width: min(760px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 4px;
}
.fc-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted-2);
}
.fc-count b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.fc-count-still b { color: var(--orange); }
.fc-count-known b { color: var(--green-d); }

/* gestapelde kaarten: de volgende ligt er al onder */
.fc-deck {
  position: relative;
  width: min(760px, 100%);
  display: grid;
}
.learn-fullscreen .fc-deck > .flashcard,
.fc-deck > .flashcard {
  grid-area: 1 / 1;
  width: 100%;
}
.fc-current {
  position: relative;
  z-index: 2;
  transition: transform .38s cubic-bezier(.55, 0, .78, .28), opacity .34s ease;
  will-change: transform;
}
.fc-next {
  z-index: 1;
  transform: scale(.955) translateY(16px);
  opacity: .97;
  pointer-events: none;
}
.fc-current.fc-fly-left  { transform: translateX(-130%) rotate(-13deg); opacity: 0; }
.fc-current.fc-fly-right { transform: translateX(130%) rotate(13deg); opacity: 0; }

/* beoordelings-overlay op de kaart */
.fc-verdict {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 6vw, 56px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.fc-verdict.show { opacity: 1; }
.rating-still .fc-verdict {
  background: color-mix(in srgb, var(--orange) 13%, #fff);
  border: 3px solid var(--orange);
  color: var(--orange);
}
.rating-known .fc-verdict {
  background: color-mix(in srgb, var(--green) 14%, #fff);
  border: 3px solid var(--green);
  color: var(--green-d);
}
/* rand van de kaart zelf mee kleuren */
.fc-current.rating-still .fc-face  { border-color: var(--orange) !important; }
.fc-current.rating-known .fc-face { border-color: var(--green) !important; }

/* subtiele sneltoets-balk op de eerste kaart */
.fc-shortcut {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  padding: 6px 12px;
  border-radius: 999px;
}
.fc-shortcut kbd {
  font-family: inherit;
  font-weight: 800;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line-d);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 11px;
  line-height: 1.5;
}

/* twee altijd-zichtbare knoppen; nog leren = oranje, weet ik = groen */
.learn-fullscreen .fc-rate,
.fc-rate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(760px, 100%);
}
.fc-rate .rk { font-weight: 900; opacity: .65; }
.rate-again { color: var(--orange) !important; }
.learn-fullscreen .fc-rate .rate-again:hover,
.rate-again:hover { border-color: var(--orange) !important; color: var(--orange) !important; }

/* eindscherm: nette ruimte tussen Opnieuw en Verder */
.learn-result .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}
.learn-result .actions .btn { min-width: 150px; }

@media (prefers-reduced-motion: reduce) {
  .fc-current { transition: none; }
  .fc-next { transform: scale(.97) translateY(12px); }
}

/* =====================================================================
   EXAMENSCHERM — rework (één opgave per keer, links vraag / rechts
   antwoord, nummerblokjes, voortgangsbalk in de rechterkolom)
   ===================================================================== */
.exam-q-col { min-width: 0; }
.exam-q-col .exam-work-card { box-shadow: var(--surface-shadow) !important; }

.exam-answer-col {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

/* voortgangsbalk hoort bij de rechterkolom i.p.v. volledige breedte */
.exam-answer-col .exam-session-progress {
  width: 100%;
  margin: 0;
}

/* nummerblokjes om snel tussen opgaven te wisselen */
.exam-nav-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.exam-nav-block {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 15px;
  transition: border-color .12s ease, background .12s ease, color .12s ease, transform .1s ease;
}
.exam-nav-block:hover { border-color: var(--purple); color: var(--purple-d); }
.exam-nav-block.answered { border-color: var(--blue); color: var(--blue-d); }
.exam-nav-block.done { border-color: var(--green); color: var(--green-d); }
/* Huidige opgave = paars (waar je bent), niet groen — groen betekent 'goed'. */
.exam-nav-block.current {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 28%, transparent);
}

/* antwoordblok in de rechterkolom */
.exam-answer-slot { display: grid; gap: 12px; }
.exam-answer-mid { display: grid; gap: 12px; }
.exam-answer-mid .exam-answer { min-height: 200px; resize: vertical; }

/* knoppenblok onderaan de rechterkolom */
.exam-answer-buttons { display: grid; gap: 10px; }
.exam-nav-row { display: flex; gap: 10px; }
.exam-nav-row .btn { flex: 1; }
.btn:disabled, .btn[disabled] { opacity: .45; pointer-events: none; }

/* Desktop: rechterkolom staat vast, linkerkolom (opgave) scrollt,
   de knoppen zitten onderaan het scherm. */
@media (min-width: 981px) {
  .exam-fullscreen .exam-session-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .exam-workspace {
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }
  .exam-q-col {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .exam-answer-col {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .exam-answer-col > .exam-session-progress,
  .exam-answer-col > .exam-nav-blocks { flex: none; }
  .exam-answer-slot {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .exam-answer-mid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .exam-answer-mid .exam-answer { flex: 1; min-height: 150px; }
  .exam-answer-buttons { flex: none; }
}

/* =====================================================================
   EXAMEN — antwoordmodel-kader, zelfnakijk-knoppen (rood/oranje/groen)
   ===================================================================== */
/* Label rechtsboven het kader; bij een afbeelding vult die het hele kader. */
.exam-model-wrap { display: grid; gap: 6px; }
.exam-model-wrap .fb-model-tag {
  justify-self: end;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--green-d);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.exam-model-wrap .exam-model { margin-top: 0; }
.exam-model-img { padding: 0; overflow: hidden; }
.exam-model-img .exam-model-images { margin: 0; gap: 0; }
.exam-model-img .exam-model-images figure {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
.exam-model-img .exam-model-images img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

/* Bovenrij knoppen: 'Toon antwoordmodel' + 3 zelfnakijk-knoppen. */
.exam-btn-row-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.exam-btn-row-top .exam-model-btn { width: auto; min-width: 0; }
.exam-selfcheck { display: flex; gap: 6px; min-width: 0; }
.exam-sc-btn {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .1s ease;
}
.exam-sc-btn.sc-red { border-color: var(--red); color: var(--red-d); }
.exam-sc-btn.sc-orange { border-color: var(--orange); color: var(--orange); }
.exam-sc-btn.sc-green { border-color: var(--green); color: var(--green-d); }
.exam-sc-btn:hover { transform: translateY(-1px); }
.exam-sc-btn.sc-red.active { background: var(--red); border-color: var(--red); color: #fff; }
.exam-sc-btn.sc-orange.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.exam-sc-btn.sc-green.active { background: var(--green); border-color: var(--green); color: #fff; }

/* Nummerblokjes kleuren mee met je zelf-beoordeling. */
.exam-nav-block.sc-red { background: var(--red); border-color: var(--red); color: #fff; }
.exam-nav-block.sc-orange { background: var(--orange); border-color: var(--orange); color: #fff; }
.exam-nav-block.sc-green { background: var(--green); border-color: var(--green); color: #fff; }
.exam-nav-block.current.sc-red { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 32%, transparent); }
.exam-nav-block.current.sc-orange { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 32%, transparent); }
.exam-nav-block.current.sc-green { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 32%, transparent); }

/* ===================================================================
   Compacte hoofdstukbanner op de actie-tabs (materiaal, oefenvragen,
   examen). Zonder de lange intro past de banner in enkele regels, zodat
   de oefen- en toetskaarten meteen zichtbaar zijn zonder te scrollen.
   =================================================================== */
.ch-banner.compact,
.chapter-view .ch-banner.compact {
  min-height: 0;
  padding: 16px 20px;
}
.ch-banner.compact .ch-banner-txt,
.chapter-view .ch-banner.compact .ch-banner-txt {
  max-width: 100%;
  padding-right: 52px;
}
.ch-banner.compact .ch-banner-txt h2,
.chapter-view .ch-banner.compact .ch-banner-txt h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
}
.ch-banner.compact .ch-banner-kicker,
.chapter-view .ch-banner.compact .ch-banner-kicker {
  margin-bottom: 4px;
}
/* De decoratieve dierfoto blijft, maar smaller zodat de titel de ruimte krijgt. */
.ch-banner.compact .ch-banner-art {
  left: 58%;
}
@media (max-width: 680px) {
  .ch-banner.compact,
  .chapter-view .ch-banner.compact {
    padding: 14px 16px;
  }
  .ch-banner.compact .ch-banner-art {
    left: 64%;
  }
}

/* ===================================================================
   Oefensessie herontwerp — vaste voortgangsbalk boven, vraag in het
   midden (scrollt alleen als hij echt lang is) en een vaste actiebalk
   onderaan. Zo hoef je na elk antwoord niet meer te scrollen om
   "Volgende" te vinden, en staat de vraag meteen bovenaan in beeld i.p.v.
   verticaal gecentreerd met een groot gat erboven.
   Geldt voor zowel de meerkeuze-quiz als de bron-oefentoetsen (gedeelde
   .quiz-fullscreen-shell).
   =================================================================== */
/* De hele pagina scrollt (scrollbar helemaal rechts, scrollen kan overal),
   niet alleen het vraaggebied. Kop en actiebalk blijven op hun plek via sticky. */
.quiz-fullscreen {
  min-height: 100dvh;
  overflow: visible;
}
.quiz-fullscreen .view {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.quiz-fullscreen .panel {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}
/* Uitzondering: de koppelopgave houdt zijn eigen tweedelige indeling (foto vast
   bovenaan, lijst scrollt intern, actiebalk vast onderaan). Die blijft dus
   venster-hoog vergrendeld i.p.v. mee te doen met de pagina-scroll hierboven. */
.quiz-fullscreen:has(.source-match-shell),
.quiz-fullscreen:has(.source-match-shell) .view {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
/* Voortgangsbalk + teller blijven vast bovenaan staan (sticky bij het scrollen
   van de pagina) en staan strak tegen de bovenrand — geen groot gat meer erboven. */
.quiz-fullscreen .topline {
  position: sticky;
  top: 0;
  z-index: 5;
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-top: max(18px, calc(env(safe-area-inset-top) + 12px));
  background: var(--paper);
}
/* De vraag zit boven-uitgelijnd (geen dood gat meer) en scrollt intern
   alleen als de inhoud langer is dan het scherm. */
.quiz-fullscreen .quiz-stage {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
  justify-content: flex-start;
  padding-bottom: 4px;
}
/* Bronvragen: kop, meta en vraagtekst dichter op elkaar (minder loze ruimte). */
.quiz-fullscreen .source-stage {
  gap: 10px;
}
.quiz-fullscreen .source-stage .source-set-meta {
  margin-bottom: 0;
}
/* Vaste actiebalk onderaan het paneel: de knop hangt buiten de scrollende
   vraag, dus hij staat altijd onderaan in beeld én valt nooit over de uitleg
   heen. De knop wordt in JS aan het paneel gehangen (niet aan de vraag). */
.quiz-fullscreen .qfoot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 14px 0 max(16px, env(safe-area-inset-bottom));
  justify-content: stretch;
  background: var(--paper);
  /* Zachte scheiding zodat de balk loskomt van de (soms scrollende) vraag. */
  box-shadow: 0 -10px 16px -12px rgba(38, 35, 25, .22);
}
.quiz-fullscreen .qfoot .btn {
  flex: 1;
  padding-block: 15px;
  font-size: 16px;
}
/* Teller "3 / 12" naast de balk. */
.quiz-fullscreen .topline .fc-meta {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: right;
}
/* Korte-antwoord invoerbalk hangt (net als de knoppen) onderaan het paneel. */
.quiz-fullscreen .source-short-box {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 14px 0 max(16px, env(safe-area-inset-bottom));
  background: var(--paper);
  box-shadow: 0 -10px 16px -12px rgba(38, 35, 25, .22);
}

/* -------------------------------------------------------------------
   Koppelopgave (match): compacte kop bovenaan, daaronder de foto als
   vaste band en de onderdelen, plus een vaste actiebalk onderaan.
   ------------------------------------------------------------------- */
.quiz-fullscreen .source-match-shell {
  max-width: none;
  width: min(1100px, 100%);
  margin: 0 auto;
  /* Kop staat vlak onder de rand; de sluitknop zweeft links en overlapt niet. */
  padding-top: max(20px, calc(env(safe-area-inset-top) + 14px));
}
.quiz-fullscreen .source-match-head {
  flex: 0 0 auto;
}
.quiz-fullscreen .source-match-head .source-set-meta {
  margin: 0;
}
.quiz-fullscreen .source-match-head h2 {
  margin: 0;
}
.quiz-fullscreen .source-match-body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
/* Op elk scherm dezelfde opzet: de foto staat als vaste band bovenaan en blijft
   plakken terwijl je de rijen eronder invult. Geen losse fotokolom rechts meer,
   die liet bij een brede, lage montagefoto een groot leeg vlak achter. */
.quiz-fullscreen .source-match-aside {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 14px;
  padding: 4px 0 10px;
  background: var(--paper);
}
.quiz-fullscreen .source-match-aside .source-match-intro {
  margin: 0;
}
.quiz-fullscreen .source-match-aside .source-match-intro img {
  display: block;
  max-height: min(38vh, 320px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
/* Vaste actiebalk onderaan (Controleer / Toon antwoorden / score). */
.quiz-fullscreen .source-match-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 0 max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 16px -12px rgba(38, 35, 25, .22);
}

@media (max-width: 680px) {
  .quiz-fullscreen .panel {
    padding-left: 18px;
    padding-right: 18px;
  }
  .quiz-fullscreen .quiz-stage {
    margin-top: 14px;
  }
}

/* ===================================================================
   Afbeelding-lightbox — klik op een inhoudelijke afbeelding om hem
   schermvullend te bekijken. Ligt boven de sessie-sluitknop (z-index 80).
   =================================================================== */
.overlay.image-lightbox {
  z-index: 120;
  background: rgba(8, 10, 8, .84);
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  cursor: zoom-out;
}
@supports (backdrop-filter: blur(2px)) {
  .overlay.image-lightbox { backdrop-filter: blur(4px); }
}
.image-lightbox .lightbox-img {
  max-width: min(1280px, 96vw);
  max-height: 90dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .7);
  animation: scaleIn .2s ease both;
}
.image-lightbox .lightbox-close {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
  color: var(--ink);
  cursor: pointer;
}
.image-lightbox .lightbox-close .ic {
  width: 22px;
  height: 22px;
  display: block;
}
.image-lightbox .lightbox-close:hover {
  background: var(--cream);
}
/* Visuele hint dat inhoudelijke afbeeldingen te vergroten zijn. */
.source-qhtml img,
.source-match-intro img,
.chapter-view .summary img,
.para-inner img,
figure img,
.exam-image img,
.exam-work-card img,
.exam-model img,
.exs-images img,
.exs-model-inner img {
  cursor: zoom-in;
}

/* ===================================================================
   EXAMENSESSIE — herontwerp (mockup "Examenopgavescherm")
   Vaste bovenbalk met nummerpillen + voortgang, links de opgave (scrollt),
   rechts een vaste antwoordkaart. Gebruikt de bestaande designtokens.
   =================================================================== */
.exam-fullscreen .exam-session {
  display: flex;
  flex-direction: column;
  /* Grid-item: zonder min-width:0 groeit dit mee met de min-content van de
     pillenrij (die niet meer wikkelt) en schuift het hele scherm horizontaal
     weg. De rij moet binnen zijn eigen strip scrollen, niet de sessie rekken. */
  min-width: 0;
}
.exs-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}

/* --- bovenbalk --- */
.exs-topbar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 66px;
  padding: 12px max(16px, env(safe-area-inset-left)) 10px 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* Voortgang: één dun lijntje tegen de bovenrand van de balk. Geen tekst,
   geen percentage; vult horizontaal en beslaat de volle breedte bij 100%. */
.exs-progress {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.exs-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--green);
  transition: width .4s var(--ease);
}
.exs-close {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.exs-close .ic { width: 20px; height: 20px; }
.exs-close:hover { border-color: var(--line-d); background: var(--paper); color: var(--ink); }
.exs-topbar-id {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
}
.exs-kicker {
  font: 800 11px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green-d);
}
.exs-sub {
  font: 700 14px/1.1 "Hanken Grotesk", sans-serif;
  color: var(--muted);
}
.exs-topbar-nav {
  flex: 1;
  min-width: 0;
  /* Alles staat op één rij. Passen de pillen op hun kleinste maat nog steeds
     niet (smalle telefoons, heel veel opgaven), dan schuift deze strip opzij
     in plaats van dat er een tweede rij ontstaat. */
  overflow-x: auto;
  scrollbar-width: none;
}
.exs-topbar-nav::-webkit-scrollbar { display: none; }
/* Breedte wordt in JS gespiegeld aan de linkerkant van de balk. */
.exs-topbar-spacer {
  flex: none;
  align-self: stretch;
}
/* Eén rij, nooit wikkelen. JS rekent --pill-size uit zodat de pillen precies
   op de beschikbare breedte passen. width:max-content + auto-marges centreren
   ze als er ruimte is, zonder de linkerkant af te knippen als de strip toch
   moet scrollen. */
.exs-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--pill-gap, 6px);
  width: max-content;
  margin: 0 auto;
  /* Ruimte voor de outline van de actieve pil; die zou anders tegen de rand
     van de scrollstrip afgeknipt worden. */
  padding: 4px;
}
.exs-pill {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--pill-size, 36px);
  height: var(--pill-size, 36px);
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font: 700 13px/1 "Hanken Grotesk", sans-serif;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* --- vulling = status van het antwoord --- */
.exs-pill:hover { border-color: var(--line-d); background: var(--sand); color: var(--ink-2); }
/* beantwoord, nog niet nagekeken: neutraal gevuld */
.exs-pill.answered {
  background: var(--sand);
  color: var(--ink);
  border-color: var(--line-d);
  font-weight: 800;
}
.exs-pill.answered:hover { border-color: var(--muted); }
/* nagekeken: alleen deze drie kleuren zeggen iets over goed/fout */
.exs-pill.sc-red { background: var(--err-soft); color: var(--err-d); border-color: var(--err-line); }
.exs-pill.sc-orange { background: var(--warn-soft); color: var(--warn-d); border-color: var(--warn-line); }
.exs-pill.sc-green { background: var(--ok-soft); color: var(--ok-d); border-color: var(--ok-line); }
.exs-pill.sc-red:hover { border-color: var(--err); }
.exs-pill.sc-orange:hover { border-color: var(--warn); }
.exs-pill.sc-green:hover { border-color: var(--ok); }

/* --- ring = "hier ben je nu", los van de statuskleur --- */
/* Een outline i.p.v. een achtergrondkleur, zodat actief en beoordeeld naast
   elkaar leesbaar blijven en blauw nooit "goed" kan betekenen. */
.exs-pill.current {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
  border-color: var(--sel);
}
/* Actief én nog onbeantwoord: ook een zachte blauwe vulling, anders is de
   ring op een lege pil te mager. */
.exs-pill.current:not(.answered):not(.sc-red):not(.sc-orange):not(.sc-green),
.exs-pill.current:not(.answered):not(.sc-red):not(.sc-orange):not(.sc-green):hover {
  background: var(--sel-soft);
  color: var(--sel-d);
  font-weight: 800;
}

/* --- werkgebied: vlak van rand tot rand --- */
.exs-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.exs-left {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.exs-qbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 26px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.exs-qbar-badge {
  font: 800 11px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--green-d);
}
.exs-qbar-points {
  font: 800 11px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--gold-d);
}
/* Snelle toggle: uitgeschreven tekst <> originele scan. */
.exs-viewtoggle {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.exs-vt-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 7px 15px;
  border-radius: 999px;
  font: 700 12px/1 "Hanken Grotesk", sans-serif;
  color: var(--muted);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.exs-vt-btn:hover { color: var(--ink); }
.exs-vt-btn.active {
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 6px rgba(47, 143, 91, .28);
}
.exs-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 30px;
}
.exs-right {
  flex: none;
  width: 420px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--line);
}
.exs-ahead {
  flex: none;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.exs-ahead-label { font: 800 13px/1 "Hanken Grotesk", sans-serif; color: var(--ink); }

/* --- linkerkolom: de opgave --- */
.exs-q-panel { min-width: 0; }
.exs-q-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.exs-q-badge {
  font: 800 11px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--green-d);
  background: var(--leaf-soft);
  padding: 7px 13px;
  border-radius: 999px;
}
.exs-q-points {
  font: 800 11px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #9a7113;
  background: #fff6d6;
  border: 1px solid #f4e3a0;
  padding: 6px 12px;
  border-radius: 999px;
}
.exs-q-title {
  font: 700 clamp(23px, 3vw, 30px)/1.15 "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -.2px;
}
.exs-field-label {
  display: block;
  font: 800 10px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.exs-field-label.green { color: var(--green-d); }
.exs-field-label.ink { color: var(--ink); font-size: 13px; letter-spacing: .2px; text-transform: none; margin-bottom: 11px; }
.exs-intro { margin-bottom: 20px; }
.exs-intro-text { margin: 0; font: 500 15px/1.65 "Hanken Grotesk", sans-serif; color: var(--ink-2); }
.exs-rich {
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font: 500 15px/1.65 "Hanken Grotesk", sans-serif;
  color: var(--ink-2);
}
.exs-rich p { margin: 0 0 10px; }
.exs-figure {
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.exs-images { margin: 0; }
.exs-images figure {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.exs-ask {
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.exs-q-text { margin: 0; font: 700 clamp(17px, 2vw, 19px)/1.55 "Hanken Grotesk", sans-serif; color: var(--ink); }

/* ---------- uitgeschreven examenopgave (tekstweergave) ---------- */
.exq { font: 500 15px/1.65 "Hanken Grotesk", sans-serif; color: var(--ink-2); }
.exq > :first-child { margin-top: 0; }
.exq p { margin: 0 0 12px; }
.exq p:last-child { margin-bottom: 0; }
.exq em, .exq i { font-style: italic; }
.exq strong, .exq b { font-weight: 700; color: var(--ink); }
.exq .exq-head {
  font: 700 clamp(18px, 2.1vw, 21px)/1.3 "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -.1px;
}
.exq .exq-sub-head { font-weight: 700; color: var(--ink); margin: 16px 0 8px; }
.exq .exq-bron {
  font-style: italic;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: -2px 0 16px;
}
.exq figure.exq-fig { margin: 16px 0 18px; max-width: 100%; }
.exq figure.exq-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.exq figure.exq-fig figcaption {
  font: 600 12px/1.45 "Hanken Grotesk", sans-serif;
  color: var(--muted);
  margin-top: 7px;
}
.exq .exq-vraag {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.exq .exq-vraag .exq-vraag-label {
  display: block;
  font: 800 10px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green-d);
  margin-bottom: 10px;
}
.exq .exq-q {
  margin: 0;
  font: 700 clamp(16px, 1.9vw, 18px)/1.55 "Hanken Grotesk", sans-serif;
  color: var(--ink);
}
.exq .exq-q + .exq-q { margin-top: 10px; }
.exq ul.exq-parts, .exq ol.exq-parts { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.exq ul.exq-parts li, .exq ol.exq-parts li {
  font: 700 clamp(15px, 1.8vw, 17px)/1.5 "Hanken Grotesk", sans-serif;
  color: var(--ink);
}
.exq .exq-pt {
  display: inline-block;
  font: 800 11px/1 "Hanken Grotesk", sans-serif;
  color: var(--gold-d);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-right: 8px;
}
.exq table.exq-table { border-collapse: collapse; margin: 12px 0 16px; font-size: 14px; width: auto; }
.exq table.exq-table th, .exq table.exq-table td {
  border: 1px solid var(--line);
  padding: 6px 11px;
  text-align: left;
  color: var(--ink-2);
  vertical-align: top;
}
.exq table.exq-table th { background: var(--paper); color: var(--ink); font-weight: 700; }
.exq ol.exq-list { margin: 6px 0 12px; padding-left: 22px; display: grid; gap: 5px; }
.exq ol.exq-list li { color: var(--ink-2); font-weight: 500; line-height: 1.55; }
.exq ul.exq-opts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.exq ul.exq-opts li { font: 600 15px/1.5 "Hanken Grotesk", sans-serif; color: var(--ink-2); }
.exq ul.exq-opts li b { display: inline-block; min-width: 1.5em; color: var(--ink); font-weight: 800; }

/* --- rechterkolom: de antwoordkolom (vlak tegen de rand) --- */
.exs-a-mid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  overflow-y: auto;
}
.exs-answer {
  width: 100%;
  min-height: 200px;
  flex: none;
  resize: vertical;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  font: 500 15px/1.6 "Hanken Grotesk", sans-serif;
  color: var(--ink);
  background: #fbfcfe;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.exs-answer::placeholder { color: var(--faint); }
.exs-answer:focus { border-color: var(--green); background: #fff; }

.exs-model-block { margin-top: 18px; }
.exs-model-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 15px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: 800 13px/1 "Hanken Grotesk", sans-serif;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.exs-model-toggle:hover { border-color: var(--line-d); background: var(--paper); }
.exs-model-chev { display: inline-grid; place-items: center; color: var(--muted); transition: transform .2s ease; }
.exs-model-toggle.open .exs-model-chev { transform: rotate(180deg); }
.exs-model-panel {
  margin-top: 12px;
  background: #eef7f1;
  border: 1px solid #cfe6d8;
  border-radius: 10px;
  padding: 16px;
  animation: slideUp .25s var(--ease);
}
.exs-model-panel.hidden { display: none; }
.exs-model-tag {
  display: block;
  font: 800 10px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green-d);
  margin-bottom: 11px;
}
.exs-model-inner ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.exs-model-inner li { font: 500 14px/1.55 "Hanken Grotesk", sans-serif; color: var(--ink-2); }
.exs-model-inner.exs-model-img { padding: 0; }
.exs-model-inner .exam-model-images { margin: 0; }

/* --- onderrand van de kaart: zelfnakijken + navigatie --- */
.exs-a-foot {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 16px 20px;
  background: #fff;
}
.exs-foot-label { display: block; font: 800 12px/1.3 "Hanken Grotesk", sans-serif; color: var(--ink); margin-bottom: 11px; }
.exs-selfcheck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.exs-sc-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 4px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: 800 12px/1 "Hanken Grotesk", sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}
.exs-sc-glyph { font-size: 15px; line-height: 1; }
.exs-sc-btn:hover { border-color: var(--line-d); }
.exs-sc-btn.sc-red.active { border-color: #d9576b; background: #fbeef1; color: #b83f56; }
.exs-sc-btn.sc-orange.active { border-color: #e0922f; background: #fdf3e6; color: #b0701f; }
.exs-sc-btn.sc-green.active { border-color: var(--green); background: var(--leaf-soft); color: var(--green-d); }
.exs-nav-row { display: flex; gap: 10px; }
.exs-nav-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font: 800 13px/1 "Hanken Grotesk", sans-serif;
  transition: all .15s ease;
  cursor: pointer;
}
.exs-nav-btn.prev { border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); }
.exs-nav-btn.prev:hover:not(:disabled) { border-color: var(--line-d); background: var(--paper); }
.exs-nav-btn.next { border: 1.5px solid var(--green); background: var(--green); color: #fff; }
.exs-nav-btn.next:hover:not(:disabled) { filter: brightness(1.03); }
.exs-nav-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* --- desktop: kolommen scrollen intern, kaart staat vast --- */
@media (min-width: 901px) {
  .exam-fullscreen .exam-session,
  .exam-fullscreen .exs-shell { height: 100dvh; }
  .exam-fullscreen .exs-shell { overflow: hidden; }
}

/* --- mobiel: één kolom, hele pagina scrollt --- */
@media (max-width: 900px) {
  .exam-fullscreen .exam-session,
  .exs-shell { min-height: 100dvh; height: auto; }
  .exs-topbar {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0));
  }
  .exs-topbar-id { order: 1; }
  /* De pillen krijgen hier een eigen regel over de volle breedte; ze staan nog
     steeds op één rij en scrollen zijwaarts als ze niet passen. */
  .exs-topbar-nav { order: 2; flex-basis: 100%; min-width: 0; }
  /* Balk wikkelt hier, dus links spiegelen is niet nodig. */
  .exs-topbar-spacer { display: none; }
  .exs-body { flex-direction: column; overflow-y: auto; }
  .exs-left { flex: none; min-height: 0; }
  .exs-scroll { overflow: visible; padding: 18px 16px; }
  .exs-right { width: auto; flex: none; border-left: 0; border-top: 1px solid var(--line); }
  .exs-a-mid { overflow: visible; }
}

/* ===================================================================
   PUZZEL — herontworpen kruiswoordscherm (pzx-*)
   Vlak van rand tot rand: koptekst met voortgang, actieve-hintbalk,
   bord, onderste werkbalk en een getabde aanwijzingenkolom.
   =================================================================== */
.puzzle-fullscreen .pzx-shell {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  overflow: hidden;
}

/* --- koptekst --- */
.pzx-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 66px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.pzx-close {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pzx-close:hover { border-color: var(--line-d); background: var(--paper); color: var(--ink); }
.pzx-id { flex: none; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pzx-kicker {
  font: 800 11px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green-d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pzx-title {
  font: 700 20px/1.05 "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  color: var(--ink);
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pzx-topbar-spacer { flex: 1; min-width: 8px; }
.pzx-progress-wrap { flex: none; display: flex; align-items: center; gap: 16px; }
.pzx-meter { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; min-width: 190px; }
.pzx-solved { font: 700 12px/1 "Hanken Grotesk", sans-serif; color: var(--muted); white-space: nowrap; }
.pzx-bar { width: 190px; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pzx-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--green); width: 0; transition: width .35s ease; }
.pzx-pct {
  flex: none;
  width: 52px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font: 800 15px/1 "Hanken Grotesk", sans-serif;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid #eef0f6;
}
.pzx-pct.complete { color: var(--green-d); background: var(--leaf-soft); border-color: #bfe0cc; }

/* --- werkgebied --- */
.pzx-body { flex: 1; min-height: 0; display: flex; }
.pzx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--paper); }

/* actieve-hintbalk boven het bord */
.pzx-cluebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.pzx-dir-chip {
  flex: none;
  font: 800 10px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--green-d);
  background: var(--leaf-soft);
  padding: 7px 11px;
  border-radius: 999px;
}
.pzx-clue-active { flex: 1; min-width: 0; font: 800 15px/1.3 "Hanken Grotesk", sans-serif; color: var(--ink); }
.pzx-clue-len { flex: none; font: 700 12px/1 "Hanken Grotesk", sans-serif; color: #8b93a7; white-space: nowrap; }

/* het bord — compacte vierkante vakjes, strak tegen elkaar */
.pzx-board-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  padding: 24px;
}
.pzx-board {
  --cell: 40px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  gap: 0;
}
.pzx-cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  margin: -1px 0 0 -1px; /* naburige randen vallen samen tot één lijn */
  border-radius: 0;
}
.pzx-cell.blank { background: transparent; }
.pzx-cell.fill {
  background: #fff;
  border: 1px solid #c4cad8;
  display: block;
  transition: background .12s ease, border-color .12s ease;
}
.pzx-cell.fill.active { background: #eaf3ff; border-color: #7db0ef; z-index: 2; }
.pzx-cell.fill.locked { background: var(--leaf-soft); border-color: #a9d3ba; }
.pzx-cell.fill.wrong { background: #fdf1f3; border-color: #db8090; z-index: 1; }
.pzx-num {
  position: absolute;
  top: 0;
  left: 2px;
  font: 700 max(8px, calc(var(--cell) * .28))/1.1 "Hanken Grotesk", sans-serif;
  color: #9aa3b5;
  pointer-events: none;
}
.pzx-cell-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  font: 800 calc(var(--cell) * .54)/1 "Hanken Grotesk", sans-serif;
  color: var(--ink);
  caret-color: var(--green);
  cursor: pointer;
  padding: 0;
  outline: none;
}
.pzx-cell.fill.locked .pzx-cell-input { color: var(--green-d); pointer-events: none; }
.pzx-cell.fill.wrong .pzx-cell-input { color: #c0405a; }

/* onderste werkbalk */
.pzx-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.pzx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 800 14px/1 "Hanken Grotesk", sans-serif;
  cursor: pointer;
  transition: transform .1s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.pzx-btn-check {
  padding: 12px 20px;
  border-radius: 11px;
  border: none;
  background: var(--green);
  color: #fff;
  box-shadow: 0 3px 0 var(--green-d);
}
.pzx-btn-check:active { filter: brightness(.94); }
.pzx-btn-reveal {
  padding: 12px 18px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
}
.pzx-btn-reveal:hover { border-color: var(--line-d); }
.pzx-btn-reveal.confirm { border-color: #e0b23a; background: #fdf6e3; color: #a2760f; }
.pzx-toolbar-spacer { flex: 1; }
.pzx-btn-clear {
  padding: 12px 16px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: #8b93a7;
}
.pzx-btn-clear:hover { border-color: #e6b3bd; color: #c05068; background: #fdf1f3; }

/* aanwijzingenkolom */
.pzx-side {
  flex: none;
  width: 360px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--line);
}
.pzx-tabs { flex: none; display: flex; border-bottom: 1px solid var(--line); }
.pzx-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border: none;
  background: transparent;
  font: 800 12px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: .3px;
  color: #8b93a7;
  cursor: pointer;
  transition: color .15s ease, box-shadow .15s ease;
}
.pzx-tab.on { color: var(--green-d); box-shadow: inset 0 -2px 0 var(--green); }
.pzx-tab-count {
  flex: none;
  font: 800 11px/1 "Hanken Grotesk", sans-serif;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f0f2f8;
  color: #9aa3b5;
}
.pzx-tab.on .pzx-tab-count { background: #d7ebdf; color: var(--green-d); }
.pzx-clues { flex: 1; min-height: 0; overflow-y: auto; }
.pzx-clue-list.hidden { display: none; }
.pzx-clue {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  border: none;
  border-bottom: 1px solid #f0f2f6;
  cursor: pointer;
  text-align: left;
  background: transparent;
  transition: background .12s ease, box-shadow .12s ease;
}
.pzx-clue:hover { background: #f7f9fc; }
.pzx-clue.on { background: #eef6f0; box-shadow: inset 3px 0 0 var(--green); padding-left: 13px; }
.pzx-clue-num { flex: none; width: 20px; text-align: center; font: 800 12px/1.5 "Hanken Grotesk", sans-serif; color: #aab1c2; }
.pzx-clue.on .pzx-clue-num { color: var(--green-d); }
.pzx-clue.done .pzx-clue-num { color: var(--green); }
.pzx-clue-text { flex: 1; min-width: 0; font: 600 13px/1.4 "Hanken Grotesk", sans-serif; color: var(--ink-2); text-align: left; }
.pzx-clue.done .pzx-clue-text { color: var(--muted); }
.pzx-clue-tag { flex: none; font: 700 11px/1.6 "Hanken Grotesk", sans-serif; color: #c2c8d4; }
.pzx-clue.done .pzx-clue-tag { font-weight: 800; font-size: 12px; color: var(--green); }

/* celebratie-overlay */
.pzx-celebrate {
  position: fixed;
  inset: 0;
  background: rgba(30, 38, 58, .34);
  display: grid;
  place-items: center;
  z-index: 90;
  padding: 20px;
}
.pzx-celebrate[hidden] { display: none; }
.pzx-celebrate-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 40px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(46, 56, 86, .3);
  max-width: 360px;
  animation: scaleIn .24s ease both;
}
.pzx-celebrate-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--leaf-soft); display: grid; place-items: center; margin: 0 auto 18px; }
.pzx-celebrate-card h2 { font: 700 24px/1.15 "Bricolage Grotesque", "Hanken Grotesk", sans-serif; color: var(--ink); margin: 0 0 8px; }
.pzx-celebrate-card p { font: 500 15px/1.5 "Hanken Grotesk", sans-serif; color: var(--muted); margin: 0 0 22px; }
.pzx-celebrate-btn {
  padding: 13px 26px;
  border-radius: 12px;
  border: none;
  background: var(--green);
  color: #fff;
  font: 800 14px/1 "Hanken Grotesk", sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--green-d);
}
.pzx-celebrate-btn:active { filter: brightness(.94); }

/* --- desktop: alles vast, alleen bord en hintlijst scrollen --- */
@media (min-width: 901px) {
  .puzzle-fullscreen .pzx-shell { height: 100dvh; overflow: hidden; }
}

/* --- mobiel: gestapeld, hintlijst onderaan --- */
@media (max-width: 900px) {
  .puzzle-fullscreen .pzx-shell { height: 100dvh; }
  .pzx-topbar { flex-wrap: wrap; gap: 10px 14px; padding: 10px 12px; min-height: 0; }
  .pzx-id { order: 1; flex: 1; }
  .pzx-progress-wrap { order: 2; gap: 12px; }
  .pzx-meter { min-width: 0; }
  .pzx-bar { width: 120px; }
  .pzx-topbar-spacer { display: none; }
  .pzx-body { flex-direction: column; }
  .pzx-main { flex: 1; min-height: 0; }
  .pzx-cluebar { padding: 10px 14px; }
  .pzx-board-wrap { padding: 14px; }
  .pzx-toolbar { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .pzx-btn { font-size: 13px; }
  .pzx-btn-check, .pzx-btn-reveal, .pzx-btn-clear { padding: 10px 14px; }
  .pzx-side { width: auto; flex: none; max-height: 38vh; border-left: 0; border-top: 1px solid var(--line); }
}

/* ===================================================================
   Topbar auth — mobiel: labels nooit afkappen, primaire CTA ademt
   ("Account maken" liep buiten beeld op smalle telefoons)
   =================================================================== */
@media (max-width: 560px) {
  /* De oude max-width clamps kapten "Account maken" hard af. Weg ermee:
     de knop krijgt zijn natuurlijke breedte met nette binnenmarge. */
  .top-auth-btn {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    padding: 0 15px;
    font-size: 12.5px;
  }
  .auth-actions, .shell-auth-actions { gap: 8px; }

  /* "Inloggen" wordt een compacte tekstknop zonder rand: dat geeft een
     heldere hiërarchie (primaire CTA = "Account maken") én scheelt de
     breedte die de gevulde knop nodig heeft. Zowel de legacy-topbar
     (#signInBtn) als de shell-topbar (#shellSignInBtn). */
  #signInBtn, #shellSignInBtn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0 6px;
    color: var(--green-d);
  }
  #signInBtn:hover, #shellSignInBtn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--green);
  }
}
@media (max-width: 380px) {
  .top-auth-btn { padding: 0 13px; font-size: 12px; }
  #signInBtn, #shellSignInBtn { padding: 0 4px; }
}

/* ===================================================================
   JURIDISCHE PAGINA'S + FOOTER
   Privacyverklaring en algemene voorwaarden: één leeskolom, rustige
   typografie, bestaande tokens. Zie de comment bovenaan het
   LEGAL_DOCS-blok in app.js — de teksten moeten nog juridisch
   nagekeken worden.
   =================================================================== */
.legal-doc {
  max-width: 62ch;
  margin: 0 auto;
  padding: 8px 0 24px;
}

.legal-head { margin-bottom: 30px; }
.legal-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--green-d);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legal-head h1 {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.15;
  margin-bottom: 10px;
}
.legal-updated {
  margin: 0 0 16px;
  color: var(--muted-2);
  font-size: 13.5px;
  font-weight: 700;
}
.legal-intro {
  margin: 0;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.65;
  font-weight: 600;
}

.legal-section { margin-bottom: 26px; }
.legal-section h2 {
  margin-bottom: 10px;
  font-size: 19px;
  line-height: 1.3;
}
.legal-section p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 600;
}
.legal-section ul {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 600;
}
.legal-section li { margin-bottom: 6px; }
.legal-section li::marker { color: var(--green-d); }
.legal-section :last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 44px;
  padding: 22px 0 max(8px, env(safe-area-inset-bottom));
  border-top: 2px solid var(--line);
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
}
.site-footer-brand {
  color: var(--muted-2);
  font-size: 13.5px;
  font-weight: 800;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.site-footer-links a {
  color: var(--muted-2);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.site-footer-links a:hover { color: var(--green-d); text-decoration: underline; }

@media (max-width: 600px) {
  .legal-doc { padding-top: 4px; }
  .legal-section p, .legal-section ul { font-size: 15px; }
  .site-footer-inner { justify-content: flex-start; }
}


/* ===================================================================
   LANDING — publieke startpagina (/ als je uitgelogd bent, en /home)
   -------------------------------------------------------------------
   Draait zonder app-shell, dus de lichte topbar bovenaan blijft staan
   en levert brand + Inloggen/Account maken. De vier leermodi lenen het
   accentsysteem (.t-*) van de hoofdstukkaarten, zodat de landing exact
   dezelfde kleuren, randen en radii spreekt als de rest van de site.
   =================================================================== */
.landing-page .lp-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 28px) 0;
}

/* ---------- hero ---------- */
.lp-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(44px, 7vw, 72px);
}
.lp-eyebrow {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--leaf-soft);
  color: var(--green-d);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lp-hero h1 {
  font-size: clamp(36px, 6vw, 62px);
  line-height: 1.04;
  margin: 18px 0 14px;
  text-wrap: balance;
}
.lp-lead {
  max-width: 58ch;
  margin: 0 auto;
  color: var(--muted-2);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
}
.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 12px;
}
.lp-hero-note {
  margin: 0;
  color: var(--faint);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- knoppen — zelfde vorm als .btn elders op de site ---------- */
.lp-btn {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.lp-btn:hover { background: var(--green-d); }
.lp-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lp-btn-ghost {
  background: #fff;
  border-color: var(--line-d);
  color: var(--ink);
}
.lp-btn-ghost:hover {
  background: #fff;
  border-color: var(--green);
  color: var(--green-d);
}
.lp-btn-wide { padding: 0 40px; }

/* ---------- leermodi ---------- */
.lp-modes-title {
  text-align: center;
  font-size: clamp(21px, 3vw, 28px);
  margin: 0 0 clamp(20px, 3vw, 28px);
  text-wrap: balance;
}
.lp-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.lp-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px 18px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.lp-mode:hover {
  border-color: var(--acc, var(--green));
  box-shadow: var(--surface-shadow);
}
.lp-mode:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lp-mode-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--acc-soft, var(--leaf-soft));
  color: var(--acc-d, var(--green-d));
  margin-bottom: 2px;
}
.lp-mode h3 { font-size: 19px; }
.lp-mode p {
  margin: 0;
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1.55;
}
.lp-mode-go {
  margin-top: auto;
  padding-top: 14px;
  color: var(--acc-d, var(--green-d));
  font-size: 13px;
  font-weight: 800;
}
.lp-mode-go span { display: inline-block; transition: transform .12s ease; }
.lp-mode:hover .lp-mode-go span { transform: translateX(3px); }

/* ---------- afsluiter ---------- */
.lp-final {
  text-align: center;
  max-width: 620px;
  margin: clamp(52px, 8vw, 84px) auto 0;
}
.lp-final h2 {
  font-size: clamp(23px, 3.4vw, 32px);
  margin-bottom: 10px;
  text-wrap: balance;
}
.lp-final p {
  margin: 0 0 22px;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1.6;
}

.landing-page .site-footer {
  max-width: 1080px;
  margin: clamp(48px, 7vw, 72px) auto 0;
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);
}

@media (max-width: 600px) {
  .lp-hero-cta { flex-direction: column; align-items: stretch; }
  .lp-btn-wide { width: 100%; }
}