:root {
  --bg: #f6f5f2;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #6b7078;
  --border: #dcdde0;
  --accent: #2f6fde;
  --accent-text: #ffffff;
  --good: #1f8a4c;
  --good-bg: #e3f4ea;
  --bad: #c43d3d;
  --bad-bg: #fbe7e7;
  --warn: #a86a00;
  --warn-bg: #fdf2dc;
  --mark: #fff1b8;
  --radius: 10px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --surface: #1f2228;
    --text: #e6e7ea;
    --muted: #9298a2;
    --border: #353a42;
    --accent: #5b8ff0;
    --good: #5cc98a;
    --good-bg: #1d3327;
    --bad: #ef7b7b;
    --bad-bg: #3a2224;
    --warn: #e6b450;
    --warn-bg: #3a3020;
    --mark: #4a4220;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 700; color: var(--text); text-decoration: none; }

nav { display: flex; gap: 0.25rem; flex-wrap: wrap; flex: 1; }
nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}
nav a:hover { color: var(--text); }
nav a.active { color: var(--text); background: var(--bg); font-weight: 600; }
header .logout { padding: 0.35rem 0.75rem; font-size: 0.9rem; color: var(--muted); }
header .logout:hover { color: var(--text); }

main { max-width: 720px; margin: 1.5rem auto; padding: 0 1rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.toggle { display: flex; gap: 0.4rem; align-items: center; cursor: pointer; }

.meta { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.badge {
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.soort { color: var(--muted); font-size: 0.85rem; font-style: italic; }

.question { color: var(--muted); margin: 0 0 1rem; }
.definition { font-size: 1.25rem; margin: 0 0 1rem; }
.definition.small, .sentence.small { font-size: 1rem; margin: 0.25rem 0; }
.lemma { font-weight: 700; font-size: 1.15rem; margin: 0.5rem 0 0.25rem; }
.lemma.big { font-size: 1.8rem; text-align: center; margin: 1rem 0; }
.sentence { font-size: 1.15rem; line-height: 2.1; margin: 0 0 1rem; }
.gap { letter-spacing: 1px; color: var(--muted); }
.muted { color: var(--muted); }
.translation { margin-top: 0.25rem; }
mark { background: var(--mark); color: inherit; padding: 0 0.15em; border-radius: 3px; }

input, select, button { font: inherit; color: inherit; }

input.blank {
  border: none;
  border-bottom: 2px solid var(--accent);
  background: transparent;
  padding: 0 0.25rem;
  min-width: 6ch;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
input.blank:focus { outline: none; background: var(--bg); }
input.blank.correct { border-color: var(--good); color: var(--good); }
input.blank.almost { border-color: var(--warn); color: var(--warn); }
input.blank.wrong { border-color: var(--bad); color: var(--bad); }

button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.secondary { color: var(--muted); }

kbd {
  display: inline-block;
  min-width: 1.4em;
  margin-right: 0.6rem;
  padding: 0 0.3em;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 0.8rem ui-monospace, monospace;
  color: var(--muted);
  text-align: center;
}

.options { display: grid; gap: 0.5rem; }
.option { text-align: left; display: flex; align-items: center; }
.option.correct { border-color: var(--good); background: var(--good-bg); }
.option.wrong { border-color: var(--bad); background: var(--bad-bg); }

.actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.keys { color: var(--muted); font-size: 0.8rem; text-align: right; margin: 0.75rem 0 0; }

.result { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.verdict { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.5rem; }
.result.correct .verdict { color: var(--good); }
.result.almost .verdict { color: var(--warn); }
.result.wrong .verdict { color: var(--bad); }
.spelling { margin: 0.25rem 0; }
.spelling s { color: var(--bad); }

.rate-prompt { color: var(--muted); margin: 1rem 0 0.5rem; }
.ratings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.rating { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.rating kbd { margin: 0; }
.rating small { font-size: 0.7rem; color: var(--muted); }
.rating.suggested { border-width: 2px; border-color: var(--accent); font-weight: 600; }
.rating.r1:hover { border-color: var(--bad); }
.rating.r3:hover, .rating.r4:hover { border-color: var(--good); }

.done { text-align: center; }

.settings { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.3rem; }
.field span { color: var(--muted); font-size: 0.9rem; }
.field input, .field select {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

#toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bad);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
}

/* ---------- login ---------- */
/* Full-page scene (ported from Motopp Partner Radar) with the form card floating above. */
.login-body {
  display: grid; min-height: 100dvh; place-items: center; padding: 1rem 1rem 18vh; margin: 0;
}
.login-main { position: relative; z-index: 10; width: 100%; max-width: 24rem; margin: 0; padding: 0; }
.login { display: grid; gap: 1rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); }
.login h1 { margin: 0; font-size: 1.8rem; }
.login .tagline { margin: -0.6rem 0 0.4rem; color: var(--muted); }
.login .error { color: var(--bad); margin: 0; }
.login .rise { animation: wm-rise 0.5s ease-out both; }
.login h1.rise { animation-delay: 0.3s; }
.login .tagline.rise { animation-delay: 0.4s; }
.login .field.rise:nth-of-type(1) { animation-delay: 0.5s; }
.login .field.rise:nth-of-type(2) { animation-delay: 0.6s; }
.login .actions.rise { animation-delay: 0.7s; }
@keyframes wm-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .login .rise { animation: none; } }

/* ----- scene: copied as-is from mp_business/static/input.css ----- */
/* Inlogscherm: Amsterdamse grachtengordel bij schemering (internal/view/login_scene.templ).
   Kleuren als tokens (de app heeft geen donkere modus); alle beweging uit bij prefers-reduced-motion. */
/* tokens voor beide lagen: de vogels staan in een eigen laag naast de scène */
.login-scene, .login-sky {
  --ls-ink: #263142;
  --ls-far: #a3b0c2;
  --ls-bird: #3a4558;
  --ls-win: #f5a623;
  --ls-win-op: 0.75;
  --ls-glow: #f59f00;
  --ls-glow-op: 0.24;
  --ls-water-top: #2c3a4f;
  --ls-water-bottom: #141c2b;
  --ls-wave: #fbbf24;
}
.login-scene {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 0;
  height: min(42vh, 380px);
  pointer-events: none;
  animation: ls-rise 900ms cubic-bezier(.2, .7, .2, 1) both;
}
.login-scene svg { width: 100%; height: 100%; display: block; }
/* volle kleur: doorzichtige vormen gaven lichte naden waar huizen elkaar raken */
.login-city, .login-sails, .login-quay { fill: var(--ls-ink); }
/* een dunne rand in dezelfde kleur dekt de anti-aliasnaden tussen aangrenzende huizen */
.login-city { stroke: var(--ls-ink); stroke-width: 1.2; stroke-linejoin: round; }
.login-sail { fill-opacity: 0.55; }
/* gespiegelde ramen als glinstering in de gracht */
.login-reflection { opacity: 0.3; }
.login-glow-in { stop-color: var(--ls-glow); stop-opacity: var(--ls-glow-op); }
.login-glow-out { stop-color: var(--ls-glow); stop-opacity: 0; }
.login-water-top { stop-color: var(--ls-water-top); }
.login-water-bottom { stop-color: var(--ls-water-bottom); }
.login-windows rect { fill: var(--ls-win); fill-opacity: var(--ls-win-op); }

/* molenwieken: één omwenteling per 24 s rond de as */
.login-sails { transform-box: view-box; transform-origin: 150px 196px; animation: ls-spin 24s linear infinite; }
/* golfjes schuiven één golflengte (80) op: naadloos */
.login-wave { fill: none; stroke: var(--ls-wave); stroke-opacity: 0.22; stroke-width: 1.2; stroke-linecap: round; animation: ls-wave 6s linear infinite; }
.login-wave-slow { stroke-opacity: 0.14; animation-duration: 9s; animation-direction: reverse; }
/* ramen gaan af en toe aan en uit (vertraging per raam in de markup) */
.login-windows .login-twinkle { animation: ls-twinkle 10s ease-in-out infinite; }
/* radarpulsen vanaf de torenspits */
.login-ping { fill: none; stroke: var(--ls-glow); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: ls-ping 6s cubic-bezier(.2, .6, .3, 1) infinite; }
.login-ping:nth-child(2) { animation-delay: 2s; }
.login-ping:nth-child(3) { animation-delay: 4s; }
/* geparkeerde omafiets met krat: lijntekening in lamplichtoranje, zichtbaar tegen de huizen.
   Stijl op de groep zelf: <use>-kopieën erven, selectors als ".login-bikes circle" bereiken ze niet. */
.login-bikes { fill: none; stroke: var(--ls-win); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.login-spoke { stroke-width: 0.5; stroke-opacity: 0.6; }
.login-guard { stroke-width: 1.2; }
.login-crate { stroke-width: 1.1; fill: var(--ls-win); fill-opacity: 0.18; }
.login-hub { fill: var(--ls-win); stroke: none; }
/* moderne windturbines in de verte: lichter dan de stad (luchtperspectief) */
.login-turbine { fill: var(--ls-far); }
.login-rotor { transform-box: view-box; animation: ls-spin 8s linear infinite; }
/* vogels over de bovenkant van de pagina, achter het inlogvenster */
.login-sky { position: fixed; inset: 0 0 auto 0; height: 62vh; z-index: 0; pointer-events: none; }
.login-sky svg { width: 100%; height: 100%; display: block; }
/* Vlucht: per vogel een eigen ritme (--ft duur, --fd vertraging, in de markup).
   Vleugel: arm draait om de schouder (0,0), hand om de pols en volgt iets later: de vleugel golft.
   Drie slagen, dan zweven; bij elke neerslag komt het lijf iets omhoog. */
/* volle kleur met een randje in dezelfde kleur: geen naad tussen arm en hand */
.login-bird { fill: var(--ls-bird); stroke: var(--ls-bird); stroke-width: 0.5; stroke-linejoin: round; animation: ls-bob var(--ft) ease-in-out var(--fd) infinite; }
.login-arm { transform-box: view-box; transform-origin: 0 0; animation: ls-arm var(--ft) ease-in-out var(--fd) infinite; }
.login-hand { transform-box: view-box; transform-origin: -8.2px -2.3px; animation: ls-hand var(--ft) ease-in-out calc(var(--fd) - 0.09s) infinite; }
/* langzaam eigen zweven binnen de zwerm: wat hoger, lager, even schuin */
.login-drift { animation: ls-drift 6s ease-in-out infinite; }
.login-flock { transform: translate(-120px, 0); }
.login-flock-a { animation: ls-fly-a 36s linear 1s infinite; }
.login-flock-b { animation: ls-fly-b 44s linear 14s infinite; }

@keyframes ls-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ls-spin { to { transform: rotate(360deg); } }
@keyframes ls-wave { to { transform: translateX(-80px); } }
@keyframes ls-twinkle { 0%, 55%, 100% { fill-opacity: var(--ls-win-op); } 65%, 90% { fill-opacity: 0.08; } }
@keyframes ls-ping { 0% { transform: scale(0.05); opacity: 0.7; } 80% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
/* één slag ≈ 14% van de cyclus (~0,45 s); daarna zweven met licht opgeheven armen en hangende handen (meeuw) */
@keyframes ls-arm { 0% { transform: rotate(-22deg); } 7% { transform: rotate(34deg); } 14% { transform: rotate(-22deg); } 21% { transform: rotate(34deg); } 28% { transform: rotate(-22deg); } 35% { transform: rotate(34deg); } 44% { transform: rotate(-16deg); } 56%, 90% { transform: rotate(7deg); } 100% { transform: rotate(-22deg); } }
@keyframes ls-hand { 0% { transform: rotate(-18deg); } 7% { transform: rotate(26deg); } 14% { transform: rotate(-18deg); } 21% { transform: rotate(26deg); } 28% { transform: rotate(-18deg); } 35% { transform: rotate(26deg); } 44% { transform: rotate(-10deg); } 56%, 90% { transform: rotate(-12deg); } 100% { transform: rotate(-18deg); } }
@keyframes ls-bob { 0%, 14%, 28% { transform: translateY(-1.2px); } 7%, 21%, 35% { transform: translateY(1.2px); } 44% { transform: translateY(-0.6px); } 56% { transform: translateY(0); } 90% { transform: translateY(1px); } 100% { transform: translateY(-1.2px); } }
@keyframes ls-drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 30% { transform: translate(7px, -6px) rotate(-4deg); } 65% { transform: translate(-5px, 5px) rotate(3deg); } }
/* zwermen vliegen over de pagina met een lichte golving, daarna een pauze buiten beeld */
@keyframes ls-fly-a { 0% { transform: translate(-150px, 150px); } 20% { transform: translate(260px, 124px); } 40% { transform: translate(670px, 150px); } 60% { transform: translate(1080px, 120px); } 80%, 100% { transform: translate(1600px, 138px); } }
@keyframes ls-fly-b { 0% { transform: translate(1600px, 72px); } 25% { transform: translate(1160px, 96px); } 50% { transform: translate(700px, 64px); } 75%, 100% { transform: translate(-160px, 88px); } }

@media (prefers-reduced-motion: reduce) {
  .login-scene, .login-scene * { animation: none !important; }
  .login-pings, .login-sky { display: none; }
}

/* ----- Herhaaltje adjustments ----- */
/* Dutch mills turn counter-clockwise; the turbines keep turning clockwise. */
.login-sails { animation-direction: reverse; }
/* Dark mode (Partner Radar has none): keep the silhouettes darker than the page. */
@media (prefers-color-scheme: dark) {
  .login-scene, .login-sky {
    --ls-ink: #0b0f17; --ls-far: #3a4558; --ls-bird: #9aa3b2; --ls-glow-op: 0.3;
    --ls-water-top: #111826; --ls-water-bottom: #070a10;
  }
  .login { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
}

/* ---------- shared ---------- */
.small { font-size: 0.85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.ok { color: var(--good); font-weight: 600; }
.actions.center { justify-content: center; }
h2 { margin: 0 0 0.5rem; }
h3 { margin: 1.25rem 0 0.5rem; font-size: 1rem; }
.card h3:first-child { margin-top: 0; }
main > .card + .card { margin-top: 1rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- quiz ---------- */
.quiz-durations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1rem 0; }
.duration { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1rem; }
.duration strong { font-size: 1.3rem; }
.duration small { color: var(--muted); }
.duration kbd { margin: 0; }
.quiz-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.countdown { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown.urgent { color: var(--bad); }
.score { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.quiz-run { transition: box-shadow 0.15s; }
.quiz-run.flash-good { box-shadow: 0 0 0 3px var(--good); }
.quiz-run.flash-bad { box-shadow: 0 0 0 3px var(--bad); }
.quiz-final { font-size: 2.2rem; font-weight: 700; margin: 0.5rem 0; }
.big-badge { display: inline-block; font-size: 0.95rem; padding: 0.2rem 0.8rem; }
.missed { text-align: left; margin-top: 1rem; }
.missed ul { padding-left: 1.2rem; }
.missed li { margin-bottom: 0.4rem; }

/* ---------- words ---------- */
.toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.toolbar input, .toolbar select {
  padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.toolbar input { flex: 1; min-width: 12rem; }
table { width: 100%; border-collapse: collapse; }
table.words { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
th { text-align: left; font-size: 0.8rem; color: var(--muted); font-weight: 600; padding: 0.5rem 0.75rem; }
td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); vertical-align: top; }
table.words tbody tr { cursor: pointer; }
table.words tbody tr:hover, table.words tbody tr:focus { background: var(--bg); outline: none; }
table.words tr.suspended { opacity: 0.55; }
td.def { color: var(--muted); max-width: 22rem; }
.chip {
  display: inline-block; font-size: 0.75rem; padding: 0.05rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--border); white-space: nowrap;
}
.chip.learning { border-color: var(--warn); color: var(--warn); }
.chip.young { border-color: var(--accent); color: var(--accent); }
.chip.mature { border-color: var(--good); color: var(--good); }
.chip.suspended { color: var(--muted); border-style: dashed; }
.lemma.big.left { text-align: left; margin: 0.25rem 0 0.5rem; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1rem 0; }
.stat { display: flex; flex-direction: column; }
table.history td { font-size: 0.9rem; }

/* ---------- stats ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; }
.tile {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem;
  border: 1px solid var(--border); border-radius: 8px; color: inherit; text-decoration: none;
}
.tile strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.tile.link:hover { border-color: var(--accent); }
.lapsed { padding-left: 1.5rem; margin: 0; }
.lapsed li { margin-bottom: 0.2rem; }

.forecast .bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; }
.bar-col {
  flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; position: relative;
}
.bar { width: 60%; max-width: 36px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar-value { font-size: 0.75rem; color: var(--muted); min-height: 1.1em; font-variant-numeric: tabular-nums; }
.bar-label { font-size: 0.75rem; margin-top: 0.3rem; border-top: 1px solid var(--border); width: 100%; text-align: center; padding-top: 0.2rem; }
.bar-col:hover .bar { filter: brightness(1.15); }
.bar-col:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% - 1.5rem); white-space: nowrap;
  background: var(--text); color: var(--surface); font-size: 0.75rem; padding: 0.2rem 0.5rem;
  border-radius: 4px; pointer-events: none; z-index: 1;
}

/* ---------- import ---------- */
label.file {
  display: inline-block; padding: 0.55rem 1rem; border: 1px dashed var(--accent); border-radius: 8px;
  cursor: pointer; color: var(--accent); margin: 0.5rem 0;
}
label.file input { display: none; }
.summary { padding-left: 1.2rem; }
table.issues td { font-size: 0.9rem; }
table.issues tr.error td:nth-child(2) { color: var(--bad); }
table.issues tr.warning td:nth-child(2) { color: var(--warn); }
.info-note { color: var(--muted); font-size: 0.85rem; margin-top: 0.75rem; }
.info-note summary { cursor: pointer; }

/* ---------- decks, translations, import help ---------- */
.translation-hint { color: var(--muted); font-style: italic; margin: 0 0 0.5rem; }
ul.decks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
ul.decks .toggle { gap: 0.6rem; flex-wrap: wrap; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }
pre {
  font: 0.8rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.75rem; overflow-x: auto; margin: 0.25rem 0 0.75rem;
}
table.format td { font-size: 0.9rem; }
table.format td:nth-child(2) { color: var(--muted); white-space: nowrap; }
.example {
  position: relative; margin-top: 1.25rem; padding: 1.5rem 1rem 0.75rem;
  border: 2px dashed var(--accent); border-radius: var(--radius);
}
.example-label {
  position: absolute; top: -0.75rem; left: 1rem; background: var(--accent); color: var(--accent-text);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.1rem 0.6rem; border-radius: 999px;
}
.example table.sample { font-size: 0.85rem; margin-bottom: 0.75rem; overflow-x: auto; display: block; }
.example table.sample th { font-family: ui-monospace, monospace; color: var(--accent); }
.example table.sample td { white-space: nowrap; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .card { padding: 1rem; }
  .ratings { grid-template-columns: repeat(2, 1fr); }
  .keys { display: none; }
  .hide-sm { display: none; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .quiz-durations { grid-template-columns: 1fr; }
}