/* App shell and compact library, shared by all account themes. */
body.leer-app {
  --ui-bg: #f5f7f3;
  --ui-surface: #fff;
  --ui-text: #243a40;
  --ui-muted: #63736f;
  --ui-border: #dce5de;
  --ui-soft: #edf5ef;
  --ui-accent: #147d73;
  --ui-accent-text: #fff;
  --bg: var(--ui-bg);
  --kaart: var(--ui-surface);
  --blauw: var(--ui-accent);
  --grijs: var(--ui-muted);
  background: var(--ui-bg);
  color: var(--ui-text);
}
body.leer-app[data-thema="bos"] {
  --ui-bg: #f1f5ed;
  --ui-soft: #e5efdf;
  --ui-accent: #356744;
  --ui-border: #d3e0cd;
}
body.leer-app[data-thema="oceaan"] {
  --ui-bg: #f0f6fa;
  --ui-soft: #e3eff7;
  --ui-accent: #236b91;
  --ui-border: #ccdee9;
}
body.leer-app[data-thema="lavendel"] {
  --ui-bg: #f7f3fa;
  --ui-soft: #eee5f6;
  --ui-accent: #765295;
  --ui-border: #dfd3e9;
}
body.leer-app[data-thema="roze"] {
  --ui-bg: #fdf3f6;
  --ui-soft: #fbe3ec;
  --ui-accent: #b0306a;
  --ui-border: #f1cfdc;
  --logo-bg: #8e1f52;
  --logo-vink: #ffc2da;
}
/* Logo volgt het thema: per thema een donkere achtergrond en een lichte vink. */
body.leer-app[data-thema="bos"] { --logo-bg: #244a30; --logo-vink: #cfe8a8; }
body.leer-app[data-thema="oceaan"] { --logo-bg: #17506f; --logo-vink: #bfe3f5; }
body.leer-app[data-thema="lavendel"] { --logo-bg: #5a3a78; --logo-vink: #e2cdf5; }
body.leer-app[data-thema="donker"] { --logo-bg: #0c3a33; --logo-vink: #79d7c9; }
.app-brand-symbol .logo-bg { fill: var(--logo-bg, #164b40); }
.app-brand-symbol .logo-lijn { stroke: var(--logo-bg, #164b40); }
.app-brand-symbol .logo-vink { stroke: var(--logo-vink, #d7ee92); }
body.leer-app[data-thema="donker"] {
  --ui-bg: #121d21;
  --ui-surface: #1e2c31;
  --ui-text: #e5efef;
  --ui-muted: #b4c5c7;
  --ui-border: #3b5158;
  --ui-soft: #273f43;
  --ui-accent: #79d7c9;
  --ui-accent-text: #102924;
  --rood: #ffaaa1;
}
.leer-app header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ui-surface);
  border-color: var(--ui-border);
  padding: 12px 24px;
  gap: 12px;
  box-shadow: 0 2px 14px #00000006;
}
.leer-app .brand-sub {
  display: none;
}
.leer-app h1 {
  font-size: 20px;
}
.leer-app .nav-kern,
.leer-app .nav-extra {
  display: contents;
}
.leer-app #nav {
  gap: 3px;
}
.leer-app #navMeer {
  display: none;
}
.leer-app .nav-icoon {
  display: none;
}
.leer-app #nav .linkbtn {
  color: var(--ui-muted);
  min-height: 44px;
  padding: 9px 10px;
  font-size: 12px;
}
.leer-app #nav .nav-actief {
  background: var(--ui-soft);
  color: var(--ui-accent);
}
.leer-app main {
  padding-top: 26px;
}
.leer-app main:has(.stof-lijst) {
  max-width: 1100px;
}
.leer-app .kaart {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
.leer-app p,
.leer-app footer {
  color: var(--ui-muted);
}
.leer-app .primary {
  background: var(--ui-accent);
  color: var(--ui-accent-text);
}
.leer-app .primary:hover:not(:disabled) {
  filter: brightness(0.92);
}
.leer-app .secondary,
.leer-app .linkbtn {
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
}
.leer-app .linkbtn:hover:not(:disabled),
.leer-app .secondary:hover:not(:disabled) {
  background: var(--ui-soft);
}
.leer-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.leer-app select,
.leer-app textarea {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
.leer-app input[type="checkbox"],
.leer-app input[type="radio"] {
  accent-color: var(--ui-accent);
}
.leer-app input::placeholder {
  color: var(--ui-muted);
  opacity: 0.85;
}
.leer-app .intro {
  text-align: left;
  max-width: none;
  margin: 4px 0 24px;
}
.leer-app .intro h2 {
  font-size: 32px;
}
.start-keuzes {
  margin: 0 0 26px;
}
.start-keuzes-kop h2 {
  font-size: 20px;
}
.start-keuzes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.start-keuze {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
  position: relative;
  padding: 20px;
  text-align: left;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}
.start-keuze:hover {
  border-color: var(--ui-accent);
  background: var(--ui-soft);
}
.start-keuze-hoofd {
  background: var(--ui-soft);
  border-color: var(--ui-accent);
}
.start-keuze strong {
  font-size: 16px;
  line-height: 1.4;
}
.start-keuze small {
  font-size: 13px;
  font-weight: 400;
  color: var(--ui-muted);
  line-height: 1.5;
}
.start-pijl {
  margin-top: auto;
  color: var(--ui-accent);
}
.stof-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.stof-kop h2 {
  font-size: 28px;
}
.stof-kop p {
  margin: 0;
}
.stof-kop .primary {
  width: auto;
  flex-shrink: 0;
  margin: 0;
}
.stof-import {
  padding: 12px 0;
  margin-bottom: 18px;
  font-size: 13px;
}
.stof-import summary {
  color: var(--ui-muted);
  font-size: 13px;
}
.stof-filterkaart {
  padding: 18px !important;
  border-radius: 14px !important;
}
.stof-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
}
.stof-filters label {
  margin: 0 0 5px;
  font-size: 12px;
}
.stof-filters input,
.stof-filters select {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 10px;
}
.stof-filtervoet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.stof-filtervoet p {
  font-size: 12px;
  margin: 0;
}
.stof-filtervoet button {
  font-size: 12px;
}
.stof-bulk {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0;
  font-size: 12px;
}
.stof-bulk label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}
.stof-bulk span {
  color: var(--ui-muted);
}
.stof-bulk button {
  margin-left: auto;
  font-size: 12px;
  min-height: 40px;
  padding: 8px 12px;
}
.stof-lijst {
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  scroll-margin-top: 130px;
}
.stof-lijst:empty {
  display: none;
}
.stof-rij {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--ui-border);
}
.stof-rij:last-child {
  border-bottom: 0;
}
.stof-rij h3 {
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.stof-rij p {
  font-size: 12px;
  margin: 0;
}
.stof-rij p span {
  color: var(--ui-accent);
}
.stof-selectie {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 44px;
  cursor: pointer;
}
.stof-selectie input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.stof-rij .primary {
  width: auto;
  margin: 0;
  min-height: 40px;
  padding: 9px 15px;
  font-size: 13px;
}
.stof-meer {
  position: relative;
}
.stof-meer summary {
  font-size: 12px;
  padding: 10px;
  border-radius: 8px;
  list-style: none;
  border: 1px solid var(--ui-border);
  min-height: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.stof-meer summary::after {
  content: "⌄";
  margin-left: 7px;
}
.stof-meer-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 245px;
  z-index: 15;
  padding: 6px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px #00000020;
}
.stof-meer-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0 !important;
  font-size: 12px;
  line-height: 1.4;
}
.stof-paginering {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 22px 0;
}
.stof-paginering span {
  font-size: 13px;
  color: var(--ui-muted);
}
.stof-paginering button {
  font-size: 13px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.thema-dialoog {
  width: 540px;
  max-width: calc(100vw - 32px);
  max-height: 85vh;
  overflow: auto;
  padding: 26px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.thema-dialoog::backdrop {
  background: #10202799;
}
.thema-keuzes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 20px 0;
}
.thema-keuzes legend {
  font-size: 13px;
  margin-bottom: 8px;
}
.thema-keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  cursor: pointer;
}
.thema-keuze:has(input:checked) {
  border-color: var(--ui-accent);
  background: var(--ui-soft);
}
.thema-keuze small {
  display: block;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 400;
}
.thema-keuze strong {
  font-size: 13px;
}
.thema-staal {
  width: 20px;
  height: 30px;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1px solid #8d9b97;
}
.staal-licht {
  background: #f5f7f3;
}
.staal-donker {
  background: #17262c;
}
.staal-systeem {
  background: linear-gradient(90deg, #f5f7f3 50%, #17262c 50%);
}
.staal-bos {
  background: #a6bf8f;
}
.staal-oceaan {
  background: #8bbbd3;
}
.staal-lavendel {
  background: #bc9dd9;
}
.staal-roze {
  background: linear-gradient(90deg, #fbe3ec 50%, #b0306a 50%);
}
.leer-app .dashboard-stats > div,
.leer-app .dashboard-resume,
.leer-app .ouder-advies {
  background: var(--ui-soft);
  border-color: var(--ui-border);
}
.leer-app .dashboard-stats strong,
.leer-app .dashboard-result b {
  color: var(--ui-accent);
}
.leer-app .dashboard-stats span,
.leer-app .dashboard-result small {
  color: var(--ui-muted);
}
.leer-app .dashboard-result:hover {
  background: var(--ui-soft);
}
.leer-app .optie {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
.leer-app .optie.gekozen {
  background: var(--ui-soft);
  border-color: var(--ui-accent);
}
.leer-app .optie-letter {
  background: var(--ui-soft);
  color: var(--ui-accent);
}
.leer-app .leer-vakken > span {
  background: var(--ui-soft);
}
.leer-app .leer-grafiek span {
  background: var(--ui-accent);
}
.leer-app .foto-upload,
.leer-app .pdf-pagina,
.leer-app .pdf-thumbnail {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
.leer-app[data-thema="donker"] .resultaat-antwoord,
.leer-app[data-thema="donker"] .resultaat-correct,
.leer-app[data-thema="donker"] .resultaat-uitleg,
.leer-app[data-thema="donker"] .pdf-waarschuwing,
.leer-app[data-thema="donker"] .ouder-melding {
  background: var(--ui-soft);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
.leer-app[data-thema="donker"] .resultaat-vraag p,
.leer-app[data-thema="donker"] .resultaat-uitleg p,
.leer-app[data-thema="donker"] .resultaat-uitleg h4 {
  color: var(--ui-text);
}
.leer-app[data-thema="donker"] .resultaat-status.is-goed {
  background: #23463a;
  color: #a8e6bd;
}
.leer-app[data-thema="donker"] .resultaat-status.is-fout {
  background: #513530;
  color: #ffbcb0;
}
.leer-app[data-thema="donker"] .antwoord-label {
  color: var(--ui-muted);
}
@media (max-width: 900px) {
  .leer-app header {
    padding: 12px 18px;
  }
  .leer-app #nav .linkbtn {
    padding: 9px 8px;
  }
  .stof-filters {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .stof-filters > div:last-child {
    grid-column: 1/-1;
    max-width: 220px;
  }
}
@media (max-width: 700px) {
  .leer-app header {
    padding: 10px 16px;
    min-height: 56px;
  }
  .leer-app header h1 {
    font-size: 18px;
  }
  .leer-app .app-brand-symbol {
    width: 28px;
    height: 28px;
  }
  .leer-app.ingelogd {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  .leer-app #nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
    box-shadow: 0 -5px 20px #00000008;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    width: 100%;
    z-index: 35;
  }
  .leer-app .nav-kern {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }
  .leer-app #nav .nav-kern .linkbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 7px 2px;
    font-size: 10px;
    border: 0;
    min-height: 54px;
    min-width: 0;
  }
  .leer-app #navMeer {
    display: flex;
  }
  .leer-app .nav-icoon {
    display: block;
    width: 22px;
    height: 22px;
    line-height: 0;
  }
  .leer-app .nav-icoon {
    width: 40px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    transition: background-color .2s, transform .2s;
  }
  .leer-app .nav-icoon svg {
    display: block;
    width: 24px;
    height: 24px;
  }
  .leer-app .nav-icoon .ic-figuur { display: none; width: 30px; height: 30px; }
  body.leer-app[data-iconen="figuur"] .nav-icoon .ic-kleur { display: none; }
  body.leer-app[data-iconen="figuur"] .nav-icoon .ic-figuur { display: block; }
  body.leer-app[data-iconen="figuur"] #nav .nav-kern .nav-icoon { background: transparent; }
  body.leer-app[data-iconen="figuur"] #nav .nav-actief .nav-icoon .ic-figuur { box-shadow: 0 0 0 2.5px var(--ui-accent); border-radius: 50%; }
  .leer-app #nav .nav-groen.nav-actief .nav-icoon { background: var(--c-groen-z); }
  .leer-app #nav .nav-blauw.nav-actief .nav-icoon { background: var(--c-blauw-z); }
  .leer-app #nav .nav-oranje.nav-actief .nav-icoon { background: var(--c-oranje-z); }
  .leer-app #nav .nav-paars.nav-actief .nav-icoon { background: var(--c-paars-z); }
  .leer-app #nav .nav-roze[aria-expanded="true"] .nav-icoon { background: var(--c-roze-z); }
  .leer-app #nav .nav-kern .nav-actief,
  .leer-app #nav .nav-kern .nav-actief:hover { background: transparent; }
  .leer-app #nav .nav-actief .nav-icoon { transform: translateY(-2px) scale(1.08); }
  @media (prefers-reduced-motion: reduce) {
    .leer-app .nav-icoon { transition: none; }
    .leer-app #nav .nav-actief .nav-icoon { transform: none; }
  }
  .leer-app #navExtra {
    display: none;
  }
  .leer-app #navExtra.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 10px;
    left: 10px;
    max-height: 65vh;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-surface);
    box-shadow: 0 10px 35px #00000025;
  }
  .leer-app #navExtra .linkbtn {
    text-align: left;
    font-size: 14px;
    min-height: 46px;
    text-decoration: none;
  }
  .leer-app main {
    padding: 22px 16px 18px;
  }
  .leer-app .intro h2 {
    font-size: 28px;
  }
  .start-keuzes-grid {
    grid-template-columns: 1fr;
  }
  .start-keuze {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    gap: 4px 12px;
    padding: 16px;
  }
  .start-keuze strong {
    grid-column: 2;
    grid-row: 1;
  }
  .start-keuze small {
    grid-column: 2;
    grid-row: 2;
  }
  .start-pijl {
    grid-column: 3;
    grid-row: 1/3;
    margin: auto;
  }
  .stof-kop {
    align-items: start;
    flex-direction: column;
    gap: 14px;
  }
  .stof-kop h2 {
    font-size: 25px;
  }
  .stof-kop .primary {
    width: 100%;
  }
  .stof-filters {
    grid-template-columns: 1fr 1fr;
  }
  .stof-zoeken {
    grid-column: 1/-1;
  }
  .stof-filters > div:last-child {
    grid-column: 1/-1;
    max-width: none;
  }
  .stof-filterkaart {
    padding: 14px !important;
  }
  .stof-rij {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 12px;
  }
  .stof-omschrijving {
    grid-column: 2/4;
  }
  .stof-rij .materiaal-overhoren {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  .stof-meer {
    grid-column: 3;
    grid-row: 2;
  }
  .stof-rij h3 {
    font-size: 14px;
  }
  .stof-bulk {
    gap: 8px;
  }
  .stof-bulk label {
    font-size: 11px;
  }
  .stof-lijst {
    scroll-margin-top: 72px;
  }
  .thema-dialoog {
    padding: 20px;
  }
  .thema-keuzes {
    grid-template-columns: 1fr;
  }
  .stof-paginering {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .leer-app * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.start-keuzes-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stof-rij {
  grid-template-columns: 24px minmax(0, 1fr) auto auto auto;
}
.stof-rij .materiaal-tj {
  font-size: 12px;
  padding: 9px 12px;
  min-height: 40px;
}
.tj-berichten {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tj-bericht {
  max-width: 94%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--ui-border);
}
.tj-bericht strong {
  font-size: 12px;
  color: var(--ui-accent);
}
.tj-bericht p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.65;
  margin: 8px 0 0;
  color: var(--ui-text);
}
.van-tj {
  background: var(--ui-surface);
  align-self: start;
}
.van-leerling {
  background: var(--ui-soft);
  align-self: end;
}
.tj-bericht .linkbtn {
  font-size: 12px;
  margin-top: 10px;
}
.tj-suggesties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tj-suggesties button {
  font-size: 12px;
}
.tj-denkt {
  padding: 14px;
  color: var(--ui-accent);
  font-size: 14px;
}
#tjVraag {
  min-height: 100px;
}
#tjWissen {
  font-size: 12px;
}
.tj-welkom {
  padding: 16px;
  background: var(--ui-soft);
  border-radius: 12px;
  font-size: 14px;
}
@media (max-width: 700px) {
  .start-keuzes-grid {
    grid-template-columns: 1fr;
  }
  .stof-rij {
    grid-template-columns: 20px minmax(0, 1fr) auto auto;
  }
  .stof-omschrijving {
    grid-column: 2/5;
  }
  .stof-rij .materiaal-overhoren {
    grid-column: 2;
    grid-row: 2;
  }
  .stof-rij .materiaal-tj {
    grid-column: 3;
    grid-row: 2;
  }
  .stof-meer {
    grid-column: 4;
    grid-row: 2;
  }
  .tj-bericht {
    max-width: 100%;
    padding: 14px;
  }
}
.tj-intro {
  text-align: center;
}
.tj-intro img {
  margin-bottom: 14px;
}
.tj-intro ul {
  text-align: left;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
}
.tj-bronnen {
  display: block;
  font-size: 11px;
  color: var(--ui-muted);
  margin-top: 12px;
}
.stof-filtervoet {
  flex-wrap: wrap;
}
.leer-app .leer-bron,
.leer-app .leer-melding,
.leer-app .pdf-vergroot {
  background: var(--ui-surface);
  color: var(--ui-text);
}

/* Destructive library action shares the existing single/bulk confirmation. */
.stof-meer-menu .materiaal-verwijderen { color:var(--rood); border-top:1px solid var(--ui-border) !important; margin-top:4px; border-radius:0; }

/* Account identity and logout stay visible in the sticky header. */
.leer-app .account-acties { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.leer-app .account-rol { font-size:11px; color:var(--ui-muted); border:1px solid var(--ui-border); border-radius:20px; padding:3px 8px; }
.leer-app #headerUitloggen { font-size:12px; padding:8px 10px; min-height:40px; border:1px solid var(--ui-border); color:var(--ui-text); }
@media(max-width:700px){ .leer-app header { flex-wrap:nowrap; gap:8px; } .leer-app .account-acties { gap:6px; } .leer-app .account-rol { padding:2px 5px; font-size:10px; } .leer-app #headerUitloggen { padding:8px; } }
@media(max-width:360px){ .leer-app header h1{font-size:16px;} .leer-app .app-brand-symbol{width:25px;height:25px;} .leer-app .account-acties{gap:4px;} .leer-app #headerUitloggen{font-size:11px;padding:6px;} }

.niveau-keuze{margin:1rem 0}.niveau-keuze select{width:100%;max-width:100%}.niveau-badge{font-size:.85rem;color:var(--grijs);margin:.5rem 0}.niveau-badge strong{color:var(--ui-text)}

.streak-week{display:flex;gap:.5rem;padding:0;list-style:none;max-width:100%;margin:1rem 0}.streak-week li{display:grid;flex:1;gap:.3rem;text-align:center;padding:.6rem .2rem;border:1px solid var(--ui-border,#ddd);border-radius:.6rem}.streak-week b{font-size:1.2rem}.streak-done{background:var(--ui-soft,#e9f6ee);color:var(--ui-text)}.streak-today{outline:2px solid var(--ui-accent,#386c54);outline-offset:2px}.leer-streak h3{margin:.4rem 0}

.streak-beloningen{display:flex;gap:.5rem;flex-wrap:wrap}.streak-beloningen span{border:1px solid var(--ui-border,#ddd);border-radius:1rem;padding:.4rem .7rem;font-size:.8rem}.streak-beloningen .badge-verdiend{font-weight:700;background:var(--ui-soft,#e9f6ee)}

.stof-rij:has(.materiaal-topografie){grid-template-columns:24px minmax(0,1fr) auto auto auto auto}.materiaal-topografie{font-size:12px;padding:9px 12px;min-height:40px}@media(max-width:700px){.stof-rij:has(.materiaal-topografie){grid-template-columns:20px minmax(0,1fr) auto auto}.stof-rij .materiaal-topografie{grid-column:2/5;grid-row:3;justify-self:start}}

.niveau-omhoog{margin:12px 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--groen) 14%,transparent);border:1px solid color-mix(in srgb,var(--groen) 45%,transparent)}
#moeilijkerBtn{width:100%;margin:6px 0 12px}

.toets-klaar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 12px 0;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--groen,#16a34a) 14%,var(--ui-surface,#fff));color:var(--ui-text,#18392f);border:1px solid color-mix(in srgb,var(--groen,#16a34a) 50%,transparent)}
.toets-klaar strong{flex:1 1 auto}

.leer-app .dashboard-resume>.resume-acties{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.leer-app .dashboard-resume .resume-acties .linkbtn{color:#fff;background:none;border:0;box-shadow:none;padding:6px 2px;text-decoration:underline;font-weight:700}
@media (max-width:700px){.leer-app .dashboard-resume .resume-acties .primary{flex:1 1 auto}}
.onafgemaakt-lijst{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.onafgemaakt-lijst li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid var(--ui-border,#cfdcd5)}
.onafgemaakt-lijst li:first-child{border-top:0}
.onafgemaakt-lijst small{display:block;color:var(--ui-muted,#5b6b65)}
.onafgemaakt-acties{display:flex;align-items:center;gap:10px}

.vragen-wachten{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--ui-bg,#f4f7f5) 82%,transparent);backdrop-filter:blur(2px)}
.vragen-wachten .kaart{width:min(440px,100%);text-align:center;display:grid;gap:10px;justify-items:center}
.vragen-wachten h2{margin:0}
.vragen-wachten .voortgang-balk{width:100%;height:10px;border-radius:99px;background:var(--ui-soft,#e2e8f0);overflow:hidden}
.vragen-wachten .voortgang-balk span{display:block;height:100%;width:0;background:var(--ui-accent,#16a34a);transition:width 1s linear}
.wacht-stappen{list-style:none;margin:4px 0;padding:0;display:grid;gap:6px;width:100%;text-align:left}
.wacht-stappen li{padding:8px 12px;border-radius:12px;border:1px solid var(--ui-border,#cfdcd5);color:var(--ui-muted,#5b6b65)}
.wacht-stappen li.bezig{border-color:var(--ui-accent,#16a34a);color:var(--ui-text,#18392f);font-weight:700}
.wacht-stappen li.bezig::before{content:"⏳ "}
.wacht-stappen li.klaar{color:var(--ui-text,#18392f)}
.wacht-stappen li.klaar::before{content:"✓ "}
.wacht-tijd{margin:0;font-variant-numeric:tabular-nums;color:var(--ui-muted,#5b6b65)}

.uitslag-meer{margin:16px 0;padding:10px 14px;border:1px solid var(--ui-border,#cfdcd5);border-radius:14px}
.uitslag-meer>summary{cursor:pointer;font-weight:700}
.uitslag-meer[open]>summary{margin-bottom:8px}

.tekenbalk{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.tekenbalk button{min-width:40px;min-height:40px;padding:0 10px;border:1px solid var(--ui-border,#cfdcd5);border-radius:10px;background:var(--ui-surface,#fff);color:var(--ui-text,#18392f);font-size:18px;font-weight:600;cursor:pointer}
.tekenbalk button:active{transform:translateY(1px)}
.tekenbalk .teken-shift[aria-pressed="true"]{background:var(--ui-accent,#16a34a);color:var(--ui-accent-text,#fff);border-color:var(--ui-accent,#16a34a)}

.bron-melding{background:var(--ui-soft);border:1px solid var(--ui-border);border-left:4px solid var(--ui-accent);border-radius:10px;padding:10px 14px;margin:0 0 14px;display:grid;gap:4px;font-size:14px}
.bron-melding p{margin:0}
.bron-melding .linkbtn{justify-self:start;padding:0;margin-top:2px}

/* Native app: Meer-scherm (window.tjNavigeer("meer")) */
.leer-app .meer-lijst{display:grid;gap:10px}
.leer-app .meer-lijst .meer-item{width:100%;text-align:left;justify-content:flex-start}