/*
 * Compleet Spaans — development visual layer
 * Rustige, iPadOS-geïnspireerde vormgeving. Deze laag staat bewust als laatste
 * stylesheet zodat bestaande paginafuncties en componentstructuren intact blijven.
 */

:root {
  --cs-bg: #f4f5f8;
  --cs-surface: rgba(255, 255, 255, .82);
  --cs-surface-solid: #fff;
  --cs-text: #1d1d1f;
  --cs-secondary: #6e6e73;
  --cs-blue: #087bff;
  --cs-spanish-blue: #2d7396;
  --cs-spanish-red: #c52545;
  --cs-blue-soft: #eaf3ff;
  --cs-purple-soft: #f1edff;
  --cs-orange-soft: #fff0e5;
  --cs-border: rgba(29, 29, 31, .08);
  --cs-shadow: 0 12px 40px rgba(37, 45, 65, .07);
  --navy: #1d1d1f;
  --gold: #087bff;
  --red: #087bff;
  --paper: var(--cs-bg);
  --line: var(--cs-border);
  --muted: var(--cs-secondary);
  --soft: #f3f4f7;
  --blue: #087bff;
}

/* Gelijke glazen paginakoppen, gebaseerd op Cheatsheet Tijden. */
.page-intro-hero,
.translate-hero,
.flashcards-hero,
.study-library-hero,
.learning-hero,
.gente-reader-hero,
.grammar-reading-intro,
.cheatsheet-visual-head.page-intro-hero {
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.78) !important;
  background: linear-gradient(125deg,rgba(220,238,255,.9),rgba(239,232,255,.84) 54%,rgba(255,235,229,.83)) !important;
  box-shadow: 0 18px 46px rgba(53,72,92,.12),inset 0 1px 0 rgba(255,255,255,.86) !important;
  color: #1e2936 !important;
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}
.page-intro-hero h1,.page-intro-hero h2,.page-intro-hero .title,
.translate-hero h2,.flashcards-hero h2,.study-library-hero h2,.learning-hero h2,
.gente-reader-hero h2,.grammar-reading-intro h2 {color:#1e2936 !important}
.page-intro-hero p,.translate-hero p,.flashcards-hero p,.study-library-hero p,
.learning-hero p,.gente-reader-hero p,.grammar-reading-intro p {color:#56616e !important}
.page-intro-hero .eyebrow,.translate-hero .eyebrow,.flashcards-hero .eyebrow,
.study-library-hero .eyebrow,.learning-hero .eyebrow,.gente-reader-hero .eyebrow,
.grammar-reading-intro .eyebrow {color:#39748f !important}
.admin-menu-order-group li.is-menu-hidden {opacity:.58;background:rgba(235,238,242,.72)}
.admin-menu-visibility {white-space:nowrap}
.activity-page-filters {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}

@media (max-width:700px) {
  .translate-page {box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin:0}
  .translate-hero,.translate-workspace {box-sizing:border-box;width:100%;max-width:100%;min-width:0}
  .translate-hero {padding:18px}
  .translate-hero h2 {font-size:32px}
  .translate-workspace {padding:14px}
  .translate-direction {grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:6px}
  .translate-direction label,.translate-direction select,.translate-field,.translate-field textarea {min-width:0;max-width:100%}
}

html {
  background: var(--cs-bg);
}

body {
  background:
    radial-gradient(circle at 87% 4%, rgba(178, 214, 255, .34), transparent 25rem),
    radial-gradient(circle at 42% 100%, rgba(216, 202, 255, .27), transparent 30rem),
    var(--cs-bg);
  color: var(--cs-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.005em;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
a,
input,
select,
textarea {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(8, 123, 255, .25);
  outline-offset: 2px;
}

.environment-banner {
  background: rgba(25, 27, 33, .88);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
}

.app {
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}

body.environment-development .app {
  padding-top: 56px;
}

.side {
  top: 18px;
  height: calc(100vh - 36px);
  padding: 20px 14px 16px;
  background: var(--cs-surface);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 26px;
  box-shadow: var(--cs-shadow);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  scrollbar-width: thin;
}

body.environment-development .side {
  top: 56px;
  height: calc(100vh - 74px);
}

.brand {
  padding: 3px 7px 18px;
  border-bottom: 1px solid var(--cs-border);
}

.brand-logo {
  width: 62px;
  margin-bottom: 7px;
}

.brand-title {
  color: var(--cs-text);
  font: 700 18px/1.15 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.03em;
}

.brand-title span {
  color: var(--cs-blue);
  font-size: 12px;
  letter-spacing: .12em;
}

.brand .by {
  color: var(--cs-secondary);
  font: 500 9px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .02em;
}

.brand .rule {
  display: none;
}

.nav-label,
.nav-group-label {
  color: #8b8d94;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .13em;
}

.nav-label {
  margin: 18px 11px 7px;
}

.nav-group-label {
  display: block;
  margin: 17px 11px 6px;
}

.nav button {
  min-height: 39px;
  margin: 2px 0;
  padding: 9px 11px;
  border-radius: 12px;
  color: #565960;
  font-size: 13px;
  font-weight: 540;
}

.nav button:hover {
  color: var(--cs-text);
  background: rgba(118, 120, 128, .08);
  transform: translateX(1px);
}

.nav button.active {
  padding-left: 11px;
  border-left: 0;
  color: var(--cs-blue);
  background: var(--cs-blue-soft);
  font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(8, 123, 255, .035);
}

.nav-level-scope,
.module-switch {
  border-radius: 14px;
}

.meta,
.account-box {
  color: var(--cs-secondary);
  border-color: var(--cs-border);
}

.main {
  padding: 14px 28px 64px 18px;
}

.shell {
  max-width: 1240px;
}

.searchbar {
  top: 18px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 34px rgba(37, 45, 65, .09);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

body.environment-development .searchbar {
  top: 56px;
}

.searchbar input {
  min-height: 50px;
  padding: 13px 18px;
  color: var(--cs-text);
  background: transparent;
}

.searchbar input::placeholder {
  color: #92949b;
}

.searchbar .search-level-select {
  flex: 0 0 auto;
  min-width: 86px;
  min-height: 42px;
  margin: 6px 0;
  padding: 0 30px 0 12px;
  border: 0;
  border-left: 1px solid rgba(53, 107, 151, .14);
  border-radius: 11px;
  color: #356b97;
  background-color: rgba(225, 237, 247, .74);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.searchbar .search-level-select:hover,
.searchbar .search-level-select:focus-visible {
  background-color: rgba(213, 231, 244, .96);
  outline: 2px solid rgba(53, 107, 151, .22);
  outline-offset: -2px;
}

.searchbar button {
  margin: 6px;
  padding: 0 20px;
  border-radius: 11px;
  background: var(--cs-blue);
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 6px 16px rgba(8, 123, 255, .2);
}

.content {
  margin-top: 28px;
}

.eyebrow {
  color: var(--cs-blue);
  font-size: 10px;
  letter-spacing: .12em;
}

.title {
  color: var(--cs-text);
  font: 700 38px/1.12 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.045em;
}

.lead {
  color: var(--cs-secondary);
  font-size: 16px;
  line-height: 1.58;
}

.section-title {
  color: var(--cs-text);
  font: 700 21px/1.25 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
  border-color: var(--cs-border);
}

.welcome-card,
.study-library-hero,
.study-hero,
.verb-intro {
  border-radius: 26px;
  background: linear-gradient(125deg, #dceeff 0%, #eee8ff 58%, #fff0e8 100%);
  color: var(--cs-text);
  box-shadow: var(--cs-shadow);
}

.welcome-card .eyebrow,
.study-library-hero .eyebrow,
.study-hero .eyebrow,
.verb-intro .eyebrow {
  color: #6f62d6;
}

.welcome-card h2,
.study-library-hero h2,
.study-hero h1,
.verb-intro h2 {
  color: var(--cs-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 720;
  letter-spacing: -.045em;
}

.welcome-card p,
.study-library-hero p,
.study-hero p,
.verb-intro p {
  color: #62656d;
}

.welcome-card::after {
  color: rgba(99, 91, 198, .07);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hero-btn,
.action-btn,
.primary,
.login-card button[type="submit"] {
  border: 0;
  border-radius: 12px;
  background: var(--cs-blue);
  color: #fff;
  box-shadow: 0 7px 18px rgba(8, 123, 255, .19);
}

.hero-btn.secondary {
  border: 1px solid rgba(29, 29, 31, .1);
  background: rgba(255, 255, 255, .7);
  color: var(--cs-text);
}

.hero-btn:hover,
.action-btn:hover,
.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.stats-card,
.home-section,
.panel,
.dashboard,
.dash-link,
.quick-item,
.word-card,
.verb-row,
.study-page,
.study-sidebar,
.study-book-cover,
.continue-reading,
.study-favorites,
.user-form,
.user-list,
.generic-info-panel,
.generic-map-node,
.relation-map-card {
  border-color: var(--cs-border);
  background: var(--cs-surface-solid);
  box-shadow: 0 7px 28px rgba(37, 45, 65, .035);
}

.stats-card,
.home-section,
.panel,
.word-card,
.study-page,
.study-sidebar,
.study-book-cover,
.continue-reading,
.study-favorites,
.user-form,
.user-list,
.generic-info-panel {
  border-radius: 20px;
}

.dashboard {
  gap: 12px;
  border: 0;
  background: transparent;
}

.dash-link {
  border: 1px solid var(--cs-border);
  border-radius: 18px;
}

.dash-link:hover,
.quick-item:hover,
.study-book-cover:hover,
.continue-reading:hover {
  background: #fbfcff;
  border-color: rgba(8, 123, 255, .18);
  box-shadow: 0 12px 34px rgba(37, 45, 65, .07);
  transform: translateY(-2px);
}

.dash-link h3,
.panel h3,
.quick-item b,
.study-book-cover h3,
.continue-reading h3,
.generic-info-panel h3 {
  color: var(--cs-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 680;
  letter-spacing: -.025em;
}

input,
select,
textarea,
.words-toolbar select,
.words-toolbar input,
.verb-search select,
.verb-search input,
.example-sentences-toolbar select,
.example-sentences-toolbar input {
  border-color: var(--cs-border) !important;
  border-radius: 12px;
  background: #f6f7f9 !important;
  color: var(--cs-text) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(8, 123, 255, .55) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(8, 123, 255, .12);
}

.words-alpha button,
.book-filterbar button,
.topic-level-selector button,
.relation-level-buttons button,
.relation-categorybar button,
.generic-filterbar button,
.verb-family {
  border-radius: 10px !important;
  border-color: var(--cs-border) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #565960 !important;
}

.words-alpha button.active,
.book-filterbar button.active,
.topic-level-selector button.active,
.relation-level-buttons button.active,
.relation-categorybar button.active,
.generic-filterbar button.active,
.verb-family.active {
  border-color: transparent !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(8, 123, 255, .2) !important;
}

.relation-level-controls {
  border-color: transparent !important;
  border-radius: 18px;
  background: #202229 !important;
}

.login-screen {
  background:
    radial-gradient(circle at 18% 16%, rgba(172, 211, 255, .62), transparent 31rem),
    radial-gradient(circle at 85% 84%, rgba(218, 201, 255, .5), transparent 30rem),
    #f4f5f8;
}

.login-shell {
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 35px 100px rgba(37, 45, 65, .15);
}

.login-welcome {
  background: linear-gradient(145deg, #20242d, #3a4251);
}

.login-card {
  border-color: rgba(255, 255, 255, .7);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(37, 45, 65, .13);
}

.login-card h1,
.login-card p {
  color: var(--cs-text);
}

@media (max-width: 900px) {
  .app {
    padding: 0;
  }

  body.environment-development .app {
    padding-top: 32px;
  }

  .mobile-header {
    background: rgba(255, 255, 255, .82);
    border-color: var(--cs-border);
    box-shadow: 0 6px 24px rgba(37, 45, 65, .07);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }

  .mobile-header strong {
    color: var(--cs-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 680;
    letter-spacing: -.025em;
  }

  .mobile-header button {
    color: var(--cs-blue);
  }

  .main {
    padding: 14px 12px 38px;
  }

  .side {
    border-radius: 0 24px 24px 0;
    background: rgba(250, 250, 252, .94);
  }

  .searchbar {
    top: 62px;
    border-radius: 15px;
  }

  body.environment-development .searchbar {
    top: 94px;
  }

  .home-hero,
  .home-grid {
    gap: 12px;
  }

  .welcome-card,
  .study-library-hero,
  .study-hero,
  .verb-intro {
    border-radius: 22px;
  }

  .title {
    font-size: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Volledige lichte materiaalhiërarchie ------------------------------------ */

.landing-hero:not(.landing-hero-editorial),
.practice-hero,
.learning-hero,
.focused-practice-head,
.topic-hero,
.topic-detail-heading,
.page-intro-hero,
.a1-book-intro,
.a1-book-hero,
.books-hero,
.translate-hero,
.verb-detail-hero,
.verb-center-banner,
.gente-reader-hero,
.dev-intro {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(121, 181, 255, .3), transparent 18rem),
    linear-gradient(125deg, #e7f3ff 0%, #f2edff 55%, #fff2eb 100%) !important;
  color: var(--cs-text) !important;
  box-shadow: var(--cs-shadow) !important;
}

.landing-hero:not(.landing-hero-editorial) h1,
.practice-hero h1,
.practice-hero h2,
.learning-hero h1,
.learning-hero h2,
.focused-practice-head h2,
.topic-hero h2,
.topic-detail-heading h2 {
  color: var(--cs-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 720 !important;
  letter-spacing: -.045em !important;
}

.page-intro-hero .title,
.a1-book-intro h3,
.a1-book-hero h2,
.books-hero h2,
.translate-hero h2,
.verb-detail-hero h2,
.verb-center-banner h2,
.gente-reader-hero h2,
.dev-intro h2 {
  color: var(--cs-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 720 !important;
  letter-spacing: -.045em !important;
}

.landing-hero:not(.landing-hero-editorial) p,
.practice-hero p,
.learning-hero p,
.focused-practice-head p,
.topic-hero p,
.topic-detail-heading p {
  color: #62656d !important;
}

.page-intro-hero .lead,
.a1-book-intro p,
.a1-book-hero p,
.books-hero p,
.translate-hero p,
.verb-detail-hero .meaning,
.verb-center-banner p,
.gente-reader-hero p,
.dev-intro p {
  color: #62656d !important;
}

.landing-hero:not(.landing-hero-editorial) .eyebrow,
.practice-hero .eyebrow,
.learning-hero .eyebrow,
.topic-hero .eyebrow,
.topic-detail-heading > div:first-child > span {
  color: #6e60cf !important;
}

.page-intro-hero .eyebrow,
.a1-book-intro .eyebrow,
.a1-book-hero .eyebrow,
.books-hero .eyebrow,
.translate-hero .eyebrow,
.verb-detail-hero .eyebrow,
.verb-center-banner .eyebrow,
.gente-reader-hero .eyebrow,
.dev-intro .eyebrow {
  color: #6e60cf !important;
}

.landing-hero:not(.landing-hero-editorial) .landing-level,
.landing-hero:not(.landing-hero-editorial) .landing-activity,
.practice-score,
.learning-hero aside,
.focused-practice-head > span,
.topic-meta span,
.topic-meta button {
  border-color: rgba(29, 29, 31, .08) !important;
  background: rgba(255, 255, 255, .68) !important;
  color: #555860 !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.landing-hero:not(.landing-hero-editorial) .landing-level b,
.landing-hero:not(.landing-hero-editorial) .landing-activity i,
.practice-score b,
.learning-hero aside b {
  color: var(--cs-text) !important;
}

.topic-hero aside {
  margin: 14px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 18px;
  background: rgba(255, 255, 255, .6) !important;
  color: var(--cs-text) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.topic-hero aside p {
  color: #62656d !important;
}

.a1-book-intro button,
.page-intro-hero .new-item-btn {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(8, 123, 255, .2) !important;
}

.a1-book-badge,
.books-count,
.translate-hero > span,
.verb-center-score,
.gente-reader-hero aside,
.dev-intro aside {
  border-color: rgba(29, 29, 31, .08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .62) !important;
  color: var(--cs-text) !important;
  box-shadow: none !important;
}

.books-count span,
.books-count small,
.verb-center-score span,
.verb-center-score small {
  color: var(--cs-secondary) !important;
}

.verb-detail-hero .hero-parts {
  gap: 8px !important;
  background: transparent !important;
}

.verb-detail-hero .hero-part {
  border: 1px solid rgba(29, 29, 31, .08) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .62) !important;
}

.verb-detail-hero .hero-part span {
  color: var(--cs-secondary) !important;
}

.verb-detail-hero .hero-part b {
  color: var(--cs-text) !important;
}

.words-toolbar,
.verb-tools,
.verb-filter-groups,
.example-sentences-toolbar,
.relation-level-controls,
.topic-level-selector,
.book-filterbar,
.relation-categorybar,
.generic-filterbar {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: var(--cs-text) !important;
  box-shadow: 0 9px 30px rgba(37, 45, 65, .055) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.words-toolbar label,
.verb-tools label,
.verb-filter-groups label,
.example-sentences-toolbar label,
.relation-level-controls b,
.topic-level-selector b,
.book-filterbar b,
.relation-categorybar b,
.generic-filterbar b,
.verb-filter-groups section > span {
  color: #555860 !important;
}

.relation-level-controls > div {
  color: var(--cs-text) !important;
}

.topic-level-selector {
  border-left: 1px solid rgba(255, 255, 255, .72) !important;
}

.topic-level-selector span {
  color: #6e60cf !important;
}

.book-filterbar,
.relation-categorybar,
.generic-filterbar {
  padding: 7px !important;
}

.words-alpha button,
.book-filterbar button,
.topic-level-selector button,
.relation-level-buttons button,
.relation-categorybar button,
.generic-filterbar button,
.verb-family,
.practice-lab-tabs button,
.learning-practice-tabs button,
.gente-reader-tabs button,
.dev-tabs button {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #62656d !important;
  box-shadow: none !important;
}

.words-alpha button:hover,
.book-filterbar button:hover,
.topic-level-selector button:hover,
.relation-level-buttons button:hover,
.relation-categorybar button:hover,
.generic-filterbar button:hover,
.verb-family:hover,
.practice-lab-tabs button:hover,
.learning-practice-tabs button:hover,
.gente-reader-tabs button:hover,
.dev-tabs button:hover {
  background: rgba(118, 120, 128, .08) !important;
  color: var(--cs-text) !important;
}

.words-alpha button.active,
.book-filterbar button.active,
.topic-level-selector button.active,
.relation-level-buttons button.active,
.relation-categorybar button.active,
.generic-filterbar button.active,
.verb-family.active,
.practice-lab-tabs button.active,
.learning-practice-tabs button.active,
.gente-reader-tabs button.active,
.dev-tabs button.active,
.filter-line .chip.active,
.segmented button.active,
.study-level-chapters button.active {
  border-color: transparent !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(8, 123, 255, .2) !important;
}

.learning-practice-tabs,
.gente-reader-tabs,
.dev-tabs,
.segmented {
  gap: 4px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: rgba(118, 120, 128, .1) !important;
}

.learning-practice-tabs button + button {
  border-left: 0 !important;
}

.tense-full-forms-grid h5,
.tense-cheat-table thead th,
.study-table th,
.conj th {
  border-color: var(--cs-border) !important;
  background: #f0f2f5 !important;
  color: var(--cs-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 680 !important;
}

.tense-full-forms-grid h5:first-child,
.tense-cheat-table thead th:first-child,
.study-table th:first-child {
  border-radius: 10px 0 0 0;
}

.tense-full-forms-grid h5:last-child,
.tense-cheat-table thead th:last-child,
.study-table th:last-child {
  border-radius: 0 10px 0 0;
}

.gente-translation-page {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 7px 28px rgba(37, 45, 65, .04);
}

.gente-translation-page header {
  background: var(--cs-blue-soft) !important;
  color: var(--cs-text) !important;
}

.gente-translation-page header span {
  color: var(--cs-secondary) !important;
}

.gente-translation-page header b {
  color: var(--cs-blue) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.practice-card-icon,
.study-level-chapters > span,
.practice-tense-badge,
.app-loading span {
  border-radius: 11px !important;
  background: var(--cs-blue-soft) !important;
  color: var(--cs-blue) !important;
  box-shadow: none !important;
}

.central-practice-card,
.learning-role-grid button,
.thematic-relation-card {
  border: 1px solid var(--cs-border) !important;
  border-radius: 18px !important;
  background: var(--cs-surface-solid) !important;
  box-shadow: 0 7px 28px rgba(37, 45, 65, .035) !important;
}

.central-practice-card {
  border-top: 1px solid var(--cs-border) !important;
}

.central-practice-card h3,
.learning-role-grid button b,
.thematic-relation-card h3 {
  color: var(--cs-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 680 !important;
  letter-spacing: -.025em;
}

.practice-start,
.practice-card-actions button:not(.secondary),
.relation-card-actions button:first-child,
.word-card-practice,
.gente-reader-toolbar a,
.topic-depth-card button,
.topic-next-actions button:first-child,
.chapter-editor-heading .editor-save,
.focused-next,
.generic-map-help > [data-relation-all-items]:hover {
  border-color: transparent !important;
  border-radius: 11px !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(8, 123, 255, .18) !important;
}

.practice-card-actions button.secondary,
.relation-card-actions button + button,
.generic-map-help > [data-relation-all-items] {
  border: 1px solid var(--cs-border) !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: var(--cs-text) !important;
  box-shadow: none !important;
}

.generic-map-header > .relation-map-show-all {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 !important;
}

.generic-map-help > [data-relation-all-items].relation-all-flashcard-btn,
.generic-map-header > [data-relation-all-items].relation-all-flashcard-btn {
  border-color: var(--cs-quizlet) !important;
  background: var(--cs-quizlet) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(66, 87, 178, .2) !important;
}
.generic-map-help > [data-relation-all-items].relation-all-flashcard-btn:hover,
.generic-map-header > [data-relation-all-items].relation-all-flashcard-btn:hover {
  border-color: var(--cs-quizlet-active) !important;
  background: var(--cs-quizlet-active) !important;
}

.example-sentences-toolbar .example-sentence-count {
  color: #596775 !important;
  font-weight: 600;
}

.example-sentences-toolbar .example-sentence-count b {
  color: #173a59 !important;
  font-weight: 750;
}

.login-welcome {
  background:
    radial-gradient(circle at 20% 14%, rgba(111, 176, 255, .36), transparent 20rem),
    linear-gradient(145deg, #e7f3ff, #f1edff 58%, #fff2eb) !important;
  color: var(--cs-text) !important;
}

.login-welcome h2,
.login-welcome strong,
.login-welcome span,
.login-welcome em {
  color: var(--cs-text) !important;
}

.login-welcome p,
.login-welcome small {
  color: #62656d !important;
}

.login-flavours span {
  border-color: rgba(29, 29, 31, .08) !important;
  background: rgba(255, 255, 255, .48) !important;
  color: #6e60cf !important;
}

.login-card button[type="submit"] {
  background: var(--cs-blue) !important;
}

.preface-language-switch,
.language-switch {
  border: 0 !important;
  background: rgba(118, 120, 128, .1) !important;
}

.preface-language-switch button.active,
.language-switch button.active,
.nav-level-scope button.active {
  background: var(--cs-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(8, 123, 255, .18) !important;
}

@media (max-width: 700px) {
  .mobile-menu-hint {
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: rgba(255, 255, 255, .86) !important;
    color: var(--cs-blue) !important;
    box-shadow: 0 8px 24px rgba(37, 45, 65, .1) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .topic-hero aside {
    margin: 0 14px 14px;
  }
}

/* Volledig voorzetselthema en de directe ingang vanuit zoeken. */
.preposition-search-gateway {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 22px 0 28px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(73, 137, 175, .28);
  border-radius: 26px;
  background: linear-gradient(120deg, rgba(223, 241, 253, .94), rgba(243, 238, 255, .9) 54%, rgba(255, 240, 235, .88));
  box-shadow: 0 14px 34px rgba(37, 45, 65, .08);
}

.preposition-search-gateway h3,
.preposition-search-gateway p {
  margin: 0;
}

.preposition-search-gateway h3 {
  margin-top: 5px;
  color: #27303b;
  font-size: clamp(25px, 2.2vw, 36px);
}

.preposition-search-gateway p {
  max-width: 900px;
  margin-top: 10px;
  color: #596772;
  line-height: 1.6;
}

.preposition-search-gateway ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  color: #315f7d;
  font-weight: 750;
}

.preposition-search-gateway button,
.radio-primary > a,
.radio-station-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  background: #39779f;
  color: #fff;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(57, 119, 159, .2);
}

.preposition-table-wrap {
  overflow-x: auto;
  margin: 18px 0;
  border: 1px solid rgba(73, 137, 175, .18);
  border-radius: 18px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.preposition-reference-table {
  min-width: 760px;
  margin: 0 !important;
  border: 0 !important;
}

.preposition-reference-table th:first-child,
.preposition-reference-table td:first-child {
  width: 22%;
}

.preposition-reference-table th:nth-child(2),
.preposition-reference-table td:nth-child(2) {
  width: 30%;
}

.grammar-reference-note {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-left: 5px solid #4c8caf;
  border-radius: 0 14px 14px 0;
  background: #eef7fc;
}

/* Luisterhub: officiële Spaanstalige radio per niveau. */
.radio-hub {
  display: grid;
  gap: 26px;
}

.radio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.radio-hero > span {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border-radius: 28px;
  background: rgba(255, 255, 255, .74);
  color: #bf2f43;
  font-size: 44px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}

.radio-primary,
.radio-method,
.radio-start-prompt {
  border: 1px solid rgba(73, 137, 175, .2);
  border-radius: 26px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 34px rgba(37, 45, 65, .07);
}

.radio-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(24px, 3vw, 38px);
}

.radio-primary h2,
.radio-primary p,
.radio-section-heading h2,
.radio-method h2,
.radio-method p {
  margin: 0;
}

.radio-primary h2,
.radio-method h2 {
  margin-top: 5px;
  color: #27303b;
  font-size: clamp(26px, 2.4vw, 38px);
}

.radio-primary p,
.radio-method p {
  max-width: 900px;
  margin-top: 10px;
  color: #5b6872;
  line-height: 1.6;
}

.radio-level {
  display: inline-flex;
  width: fit-content;
  margin-top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e9f4fa;
  color: #27698f;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .04em;
}

.radio-section-heading > span {
  color: #bf2f43;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.radio-section-heading h2 {
  margin-top: 5px;
}

.radio-station-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.radio-station-card {
  display: flex;
  min-height: 270px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(73, 137, 175, .18);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(37, 45, 65, .06);
}

.radio-station-card h3 {
  margin: 16px 0 8px;
  color: #29333d;
  font-size: 23px;
}

.radio-station-card p {
  margin: 0 0 20px;
  color: #5e6b75;
  line-height: 1.55;
}

.radio-station-card a {
  margin-top: auto;
  background: #fff;
  color: #39779f;
  border: 1px solid rgba(57, 119, 159, .26);
  box-shadow: none;
}

.radio-method {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 32px;
  padding: clamp(24px, 3vw, 38px);
}

.radio-method ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.radio-method li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f3f8fb;
  color: #40515d;
  line-height: 1.45;
}

.radio-method li b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #39779f;
  color: #fff;
}

.radio-start-prompt {
  display: grid;
  gap: 8px;
  padding: 24px 28px;
}

.radio-start-prompt b {
  color: #bf2f43;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.radio-start-prompt span {
  color: #2b73a0;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 750;
}

.radio-start-prompt small {
  color: #66747e;
  font-size: 15px;
}

@media (max-width: 1050px) {
  .radio-station-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .preposition-search-gateway,
  .radio-hero,
  .radio-primary,
  .radio-method { grid-template-columns: minmax(0, 1fr); }
  .preposition-search-gateway button,
  .radio-primary > a { width: 100%; }
  .preposition-search-gateway ul { display: grid; gap: 7px; }
  .radio-hero > span { display: none; }
  .radio-station-grid { grid-template-columns: minmax(0, 1fr); }
  .radio-station-card { min-height: 0; }
  .radio-start-prompt { padding: 20px; }
}

/* Alle echte zoekvelden krijgen dezelfde dunne rode invoerlijn. */
input.search-input-accent {
  border: 1px solid rgba(194, 35, 67, .72) !important;
  color: #b51f3d !important;
  caret-color: #c22343 !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: inset 0 0 0 1px rgba(194, 35, 67, .025) !important;
}

input.search-input-accent::placeholder {
  color: rgba(181, 31, 61, .72) !important;
  opacity: 1 !important;
}

input.search-input-accent:focus {
  border-color: #b51f3d !important;
  box-shadow: 0 0 0 3px rgba(194, 35, 67, .11) !important;
  outline: none !important;
}

/* Compacte, rustige snelle filters voor het werkwoordenregister. */
.verb-tools .verb-filter-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 2px 8px;
  color: #344755;
}

.verb-tools .verb-filter-heading b {
  font-size: 15px;
}

.verb-tools .verb-filter-heading span {
  color: #747981;
  font-size: 12px;
}

.verb-tools .verb-filter-groups {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(77, 103, 121, .11) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(238, 247, 252, .78), rgba(248, 244, 255, .72) 55%, rgba(255, 246, 241, .76)) !important;
}

.verb-tools .verb-filter-groups section {
  display: block !important;
  min-width: 0;
  padding: 12px !important;
  border: 1px solid rgba(77, 103, 121, .1) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: 0 5px 15px rgba(37, 45, 65, .035) !important;
}

.verb-tools .verb-filter-groups section > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 0 9px !important;
  color: #425866 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  line-height: 1.2;
}

.verb-tools .verb-filter-groups section > span::before {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #4f88aa;
  content: "";
}

.verb-tools .verb-filter-groups section[data-filter-group="2"] > span::before {
  background: #8b77bb;
}

.verb-tools .verb-filter-groups section[data-filter-group="3"] > span::before {
  background: #c46b62;
}

.verb-tools .verb-filter-groups .verb-family-strip {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  margin: 0 !important;
}

.verb-tools .verb-filter-groups .verb-family {
  min-height: 34px;
  padding: 6px 9px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.15;
}

.verb-tools .verb-filter-groups .verb-family small {
  min-width: 21px;
  margin-left: 3px;
  font-size: 9px;
}

/* Alfabetisch thema ↔ relatiekaart-overzicht. */
.relation-topic-index {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid rgba(77, 103, 121, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 8px 24px rgba(37, 45, 65, .045);
}

.relation-topic-index summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.relation-topic-index summary::-webkit-details-marker {
  display: none;
}

.relation-topic-index summary span {
  display: grid;
  gap: 3px;
}

.relation-topic-index summary b {
  color: #293d4a;
  font-size: 15px;
}

.relation-topic-index summary small,
.relation-topic-index summary i {
  color: #747981;
  font-size: 12px;
  font-style: normal;
}

.relation-topic-index[open] summary {
  border-bottom: 1px solid rgba(77, 103, 121, .1);
}

.relation-topic-index-head,
.relation-topic-index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.relation-topic-index-head {
  padding: 10px 16px;
  background: rgba(228, 238, 246, .58);
  color: #596774;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.relation-topic-index-list {
  max-height: 430px;
  overflow: auto;
}

.relation-topic-index-row {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(77, 103, 121, .075);
}

.relation-topic-index-row:last-child {
  border-bottom: 0;
}

.relation-topic-index-row button,
.relation-topic-index-row > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #38566a;
  font: inherit;
  font-size: 13px;
  text-align: left;
}

.relation-topic-index-row button {
  cursor: pointer;
}

.relation-topic-index-row button:hover {
  background: rgba(53, 107, 151, .08);
}

/* Beheerdersoverzicht voor ingelogd gebruik. */
.admin-activity {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(77, 103, 121, .12);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(237, 247, 252, .82), rgba(248, 244, 255, .78), rgba(255, 247, 243, .8));
}

.admin-activity > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.admin-activity h3 {
  margin: 3px 0 5px;
}

.admin-activity header p {
  max-width: 780px;
  margin: 0;
  color: #69717a;
  font-size: 13px;
}

.admin-activity header button {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid rgba(53, 107, 151, .2);
  border-radius: 11px;
  background: rgba(255, 255, 255, .78);
  color: #356b97;
  font-weight: 750;
}

.admin-activity-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0;
}

.admin-activity-kpis span {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(77, 103, 121, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .74);
}

.admin-activity-kpis b {
  color: #2f658e;
  font-size: 22px;
}

.admin-activity-kpis small {
  color: #69717a;
}

.admin-activity-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-activity-columns > div {
  overflow: hidden;
  border: 1px solid rgba(77, 103, 121, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.admin-activity-columns h4 {
  margin: 0;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(77, 103, 121, .1);
  color: #344755;
  font-size: 13px;
}

.activity-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 49px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(77, 103, 121, .075);
}

.activity-row:last-child {
  border-bottom: 0;
}

.activity-row > span {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #c8cdd2;
}

.activity-row > span.is-active {
  background: #36a269;
  box-shadow: 0 0 0 4px rgba(54, 162, 105, .12);
}

.activity-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.activity-row b {
  overflow: hidden;
  color: #344755;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-row small,
.activity-row em {
  color: #737a82;
  font-size: 10px;
  font-style: normal;
}

.activity-empty {
  margin: 0;
  padding: 18px;
  color: #737a82;
  font-size: 12px;
}

@media (max-width: 900px) {
  .verb-tools .verb-filter-groups {
    grid-template-columns: 1fr !important;
  }

  .admin-activity-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .relation-topic-index-head,
  .relation-topic-index-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .relation-topic-index-head span:last-child {
    display: none;
  }

  .relation-topic-index summary i {
    display: none;
  }

  .admin-activity {
    padding: 14px;
  }

  .admin-activity > header {
    flex-direction: column;
  }

  .admin-activity-kpis {
    grid-template-columns: 1fr;
  }
}

/* Veilige beheerindeling: hoofdblokken blijven responsief en worden alleen
   omhoog of omlaag gezet, zonder vrije pixelpositionering. */
.page-block-editable {
  position: relative !important;
  outline: 2px dashed rgba(53,107,151,.5) !important;
  outline-offset: 5px;
}

.page-block-controls {
  position: absolute;
  z-index: 30;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(53,107,151,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 22px rgba(42,70,94,.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.page-block-controls b {
  padding-inline: 5px;
  color: #526779;
  font-size: 12px;
}

.page-block-controls button {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(53,107,151,.18);
  border-radius: 10px;
  background: #fff;
  color: #356b97;
  font-size: 12px;
  font-weight: 700;
}

.page-block-controls button:disabled {
  opacity: .34;
}

@media (max-width: 700px) {
  .page-block-controls {
    position: sticky;
    top: 72px;
    justify-content: flex-end;
    margin: 7px;
  }

  .page-block-controls b {
    display: none;
  }
}

/* De Cheatsheet-kop gebruikt exact dezelfde kleurrijke opening als de andere schermen. */

.cheatsheet-visual-head.page-intro-hero {
  background:
    radial-gradient(circle at 86% 12%, rgba(121, 181, 255, .3), transparent 18rem),
    linear-gradient(125deg, #e7f3ff 0%, #f2edff 55%, #fff2eb 100%) !important;
}

/* Zachtere Apple-typografie en één consistente rode hoofdstukaccentkleur. */
:root {
  --cs-text: #35353a;
  --cs-heading: #2f3035;
  --cs-secondary: #6c7078;
  --cs-chapter-red: #c32d49;
  --cs-chapter-red-soft: #fff0f3;
  --navy: var(--cs-heading);
  --red: var(--cs-chapter-red);
}

body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
}

.content {
  color: #484b52;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.title,
.book-chapter-copy b,
.study-book-cover h3,
.continue-reading h3,
.a1-chapter-card b,
.a1-related-head h3,
.study-sidebar h3,
.study-section-heading,
.study-chapter-nav b {
  color: var(--cs-heading) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, sans-serif !important;
  font-weight: 600 !important;
}

.study-library-hero h2,
.books-hero h2,
.study-hero h1,
.a1-book-hero h2,
.page-intro-hero .title,
.a1-book-intro h3 {
  font-weight: 620 !important;
}

.book-chapter-copy b,
.a1-chapter-card b,
.study-book-cover h3,
.continue-reading h3 {
  font-weight: 560 !important;
}

.content p,
.content li,
.content em,
.content small {
  color: #646870;
  font-weight: 400;
}

.book-chapter-number,
.book-chapter-copy small,
.a1-chapter-card > span,
.study-book-level,
.study-sidebar-level,
.study-toc span,
.study-hero .eyebrow,
.a1-book-hero .eyebrow {
  color: var(--cs-chapter-red) !important;
}

.study-level-chapters > span,
.practice-card-icon,
.practice-tense-badge {
  background: var(--cs-chapter-red-soft) !important;
  color: var(--cs-chapter-red) !important;
}

.book-chapter-number {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, sans-serif !important;
  font-weight: 600 !important;
}

.book-chapter-copy small,
.a1-chapter-card > span,
.study-book-level,
.study-sidebar-level {
  font-weight: 650 !important;
}

.side .nav button,
.side .nav button.nav-shortcut,
.side .nav button.nav-later,
.side .nav button.nav-study,
.side .nav button.nav-reader,
.side .nav button.nav-learning,
.side .nav button.nav-practice,
.side .nav button.nav-translate {
  min-height: 39px;
  padding: 9px 11px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.side .nav button.active,
.side .nav button.nav-shortcut.active,
.side .nav button.nav-later.active,
.side .nav button.nav-study.active,
.side .nav button.nav-reader.active,
.side .nav button.nav-learning.active,
.side .nav button.nav-practice.active,
.side .nav button.nav-translate.active {
  font-weight: 600 !important;
}

.nav-translate::before {
  color: var(--cs-chapter-red) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Taalhiërarchie ---------------------------------------------------------- */

.spanish-inline,
.spanish-table-text,
.spanish-sentence {
  color: var(--cs-chapter-red) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif !important;
  font-size: 1em !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

.spanish-inline {
  padding: 0 .08em;
  background: transparent !important;
}

.grammar-reading-page {
  max-width: 1120px;
  padding: 36px 42px !important;
  border: 1px solid rgba(29, 29, 31, .07) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 12px 38px rgba(37, 45, 65, .055) !important;
}

.grammar-reading-intro {
  max-width: 1120px;
  padding: 36px 42px !important;
}

.grammar-reading-intro > .title {
  margin: 12px 0 14px !important;
  font-size: clamp(34px, 3vw, 42px) !important;
  line-height: 1.08 !important;
}

.grammar-reading-intro > .title .spanish-inline {
  color: var(--cs-heading) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.grammar-reading-intro > .lead {
  max-width: 940px !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.page-intro-hero.grammar-overview-intro {
  padding: 22px 30px 20px !important;
}

.grammar-overview-intro > .lead {
  margin-bottom: 0 !important;
}

.grammar-overview-intro > .a1-book-intro {
  width: 100%;
  margin: 14px 0 0 !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(70, 83, 96, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.grammar-overview-intro > .a1-book-intro h3 {
  margin: 4px 0 5px !important;
  font-size: clamp(24px, 2.2vw, 31px) !important;
}

.grammar-overview-intro > .a1-book-intro p {
  max-width: 920px !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

.grammar-overview-intro > .a1-book-intro button {
  padding: 11px 17px !important;
  white-space: nowrap;
}

.grammar-reading-page > .eyebrow {
  color: var(--cs-chapter-red) !important;
}

.grammar-reading-page > .title {
  margin: 12px 0 14px;
  color: var(--cs-heading) !important;
  font-size: clamp(34px, 3vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}

.grammar-reading-page > .title .spanish-inline {
  color: var(--cs-heading) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.grammar-reading-page > .lead {
  max-width: 940px;
  margin: 0;
  color: #555a63 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.grammar-reading-section {
  max-width: 1000px;
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top-color: rgba(29, 29, 31, .08) !important;
}

.grammar-reading-section h3 {
  margin-bottom: 9px !important;
  color: var(--cs-heading) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, sans-serif !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

.grammar-reading-section h3 .spanish-inline {
  color: var(--cs-chapter-red) !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

.grammar-reading-section .grammar-text {
  color: #555a63 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
}

.grammar-reading-section .grammar-text .spanish-inline {
  font-size: inherit !important;
}

.grammar-deepening {
  border: 1px solid rgba(195, 45, 73, .14) !important;
  border-left: 1px solid rgba(195, 45, 73, .14) !important;
  border-radius: 18px !important;
  background: var(--cs-chapter-red-soft) !important;
  box-shadow: none !important;
}

/* Afgeronde, consistente werk- en oefenschermen -------------------------- */

.practice-workspace {
  max-width: none;
}

.practice-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 0 20px !important;
  padding: 28px 30px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(121, 181, 255, .3), transparent 18rem),
    linear-gradient(125deg, #e7f3ff 0%, #f2edff 55%, #fff2eb 100%) !important;
  box-shadow: var(--cs-shadow) !important;
  overflow: hidden;
}

.practice-title-row .eyebrow {
  color: var(--cs-chapter-red) !important;
}

.practice-title-row .title {
  color: var(--cs-heading) !important;
  font-size: clamp(34px, 3vw, 42px) !important;
  font-weight: 620 !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}

.practice-title-row p {
  color: #60656e !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.practice-mini-score {
  min-width: 112px;
  padding: 12px 16px !important;
  border: 1px solid rgba(29, 29, 31, .07) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .86) !important;
  color: var(--cs-heading) !important;
  box-shadow: 0 8px 24px rgba(37, 45, 65, .065) !important;
}

.practice-mini-score span {
  color: #747880 !important;
  font-weight: 650 !important;
}

.practice-mini-score b {
  color: var(--cs-heading) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, sans-serif !important;
  font-weight: 620 !important;
}

.practice-mini-score em {
  color: #8a8e96 !important;
}

.practice-settings {
  gap: 14px !important;
  margin: 20px 0 !important;
  padding: 34px 20px 18px !important;
  border: 1px solid rgba(29, 29, 31, .07) !important;
  border-left: 1px solid rgba(29, 29, 31, .07) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 8px 26px rgba(37, 45, 65, .045) !important;
}

.practice-settings::before {
  top: 12px !important;
  color: #747880 !important;
}

.practice-settings label {
  color: #555a63 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.practice-settings select,
.practice-settings input {
  min-height: 46px;
  border-radius: 12px !important;
  background: #f5f6f8 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.practice-settings button,
.practice-actions button,
.translate-submit,
.editor-save,
.action-btn {
  min-height: 46px;
  border-color: transparent !important;
  border-radius: 12px !important;
}

.practice-settings button,
.practice-actions button:not(.secondary) {
  background: var(--cs-blue) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 16px rgba(8, 123, 255, .18) !important;
}

.practice-card,
.practice-prompt,
.practice-empty,
.practice-feedback,
.practice-score,
.practice-mode-grid button,
.practice-focus-grid button,
.focused-practice-card,
.vocab-overview,
.translate-workspace,
.translate-result,
.grammar-deepening,
.panel,
.toc-row,
.a1-chapter-card,
.book-chapter-row,
.word-card,
.verb-row:not(.verb-row-head),
.topic-category-card,
.topic-depth-card {
  border-radius: 18px !important;
}

.practice-card,
.practice-mode-grid button,
.practice-focus-grid button,
.focused-practice-card {
  overflow: hidden;
  border: 1px solid rgba(29, 29, 31, .07) !important;
  border-top: 1px solid rgba(29, 29, 31, .07) !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 8px 28px rgba(37, 45, 65, .05) !important;
}

.practice-prompt {
  background: #f5f6f8 !important;
}

.practice-empty {
  padding: 28px 30px !important;
  border: 1px dashed rgba(108, 112, 120, .38) !important;
  background: rgba(255, 255, 255, .55) !important;
  color: #747880 !important;
}

#content button:not(.back) {
  border-radius: 12px;
}

@media (max-width: 700px) {
  .grammar-reading-intro {
    padding: 25px 21px !important;
    border-radius: 20px !important;
  }

  .grammar-reading-page {
    padding: 25px 21px !important;
    border-radius: 20px !important;
  }

  .grammar-reading-page > .lead,
  .grammar-reading-section .grammar-text {
    font-size: 15px !important;
  }

  .practice-title-row {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 22px 20px !important;
    border-radius: 20px !important;
  }

  .practice-title-row .practice-mini-score {
    justify-self: start;
  }

  .practice-settings {
    padding: 36px 14px 15px !important;
  }

  .page-intro-hero.grammar-overview-intro {
    padding: 22px 20px 18px !important;
  }

  .grammar-overview-intro > .a1-book-intro {
    margin-top: 16px !important;
    padding-top: 15px !important;
  }
}

.poster-sheet-grid .poster-ending-table {
  table-layout: fixed !important;
}

.poster-sheet-grid .poster-ending-table th:first-child {
  width: 38% !important;
  min-width: 0 !important;
}

.poster-sheet-grid .poster-ending-table th:not(:first-child),
.poster-sheet-grid .poster-ending-table td {
  width: 20.666% !important;
  text-align: center !important;
}

/* Eén typografisch systeem en duidelijke keuzehiërarchie ----------------- */

:root {
  --cs-blue: #356b97;
  --cs-blue-soft: #edf4fa;
  --blue: var(--cs-blue);
  --gold: var(--cs-blue);
  --cs-chapter-red: #496f82;
  --cs-chapter-red-soft: #edf3f6;
  --red: var(--cs-chapter-red);
  --cs-required: #496f82;
  --cs-required-soft: #edf3f6;
  --cs-action: #356b97;
  --cs-search: #bd2945;
}

body * {
  font-family: inherit !important;
}

pre,
code,
kbd,
samp {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
}

.module-switch {
  position: relative;
  margin-top: 14px;
  padding: 30px 11px 13px !important;
  border: 1px solid rgba(73, 111, 130, .14) !important;
  background: linear-gradient(145deg, rgba(237, 243, 246, .9), rgba(255, 255, 255, .9)) !important;
  box-shadow: 0 8px 24px rgba(48, 76, 92, .05) !important;
}

.module-switch::before {
  content: attr(data-choice-label);
  position: absolute;
  top: 11px;
  left: 13px;
  color: var(--cs-required);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.module-switch .nav-label {
  color: var(--cs-required) !important;
}

.preface-language-switch,
.language-switch {
  background: rgba(73, 111, 130, .09) !important;
}

.preface-language-switch button,
.language-switch button,
.nav-level-scope button {
  color: #59616a !important;
  font-weight: 600 !important;
}

.preface-language-switch button.active,
.language-switch button.active,
.nav-level-scope button.active {
  border-color: transparent !important;
  background: var(--cs-required) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(73, 111, 130, .2) !important;
}

.nav-level-scope button {
  background: rgba(238, 241, 243, .95) !important;
}

.side .nav button.active {
  color: var(--cs-action) !important;
  background: var(--cs-blue-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(53, 107, 151, .04) !important;
}

.side .nav button.active::after {
  background: var(--cs-action) !important;
}

.nav-group-label {
  color: var(--cs-action) !important;
}

.searchbar button {
  background: var(--cs-search) !important;
  box-shadow: 0 6px 16px rgba(189, 41, 69, .18) !important;
}

.searchbar button:hover,
.searchbar button:focus-visible {
  background: #9f203a !important;
}

.landing-hero-editorial h1,
.landing-module-summary b,
.landing-primary b,
.landing-continue b,
.landing-more-content h3 {
  font-family: inherit !important;
}

.landing-hero-editorial h1 {
  max-width: 980px !important;
  color: var(--cs-heading) !important;
  font-size: clamp(38px, 4vw, 52px) !important;
  font-weight: 620 !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}

.landing-hero-editorial p {
  color: #5d626a !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.landing-module-summary {
  border-left-color: var(--cs-required) !important;
  border-radius: 0 14px 14px 0 !important;
  background: #f3f7f9 !important;
}

.landing-module-summary b {
  color: var(--cs-heading) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

.landing-hero-meta {
  gap: 12px !important;
}

.landing-hero-editorial .landing-level {
  border-color: rgba(72, 84, 95, .16) !important;
  background: #f5f6f7 !important;
  color: #69717a !important;
  font-weight: 500 !important;
}

.landing-hero-editorial .landing-level b {
  color: var(--cs-heading) !important;
  font-weight: 650 !important;
}

.landing-hero-editorial .landing-activity {
  border: 1px solid rgba(72, 84, 95, .2) !important;
  background: #fff !important;
  color: var(--cs-action) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 13px rgba(55, 65, 75, .07) !important;
}

.landing-hero-editorial .landing-activity:hover,
.landing-hero-editorial .landing-activity:focus-visible {
  border-color: rgba(53, 107, 151, .3) !important;
  background: var(--cs-blue-soft) !important;
  color: var(--cs-action) !important;
}

.landing-primary > button {
  grid-template-rows: auto auto auto !important;
  min-height: 0 !important;
  padding: 15px 18px !important;
  border-color: rgba(29, 29, 31, .07) !important;
  background: rgba(255, 255, 255, .9) !important;
}

.landing-primary > button b {
  margin: 3px 0 !important;
  color: var(--cs-heading) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

.landing-primary > button small {
  margin-top: 2px !important;
  color: #636a72 !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
}

.landing-primary > button i {
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
  font-size: 22px !important;
  font-weight: 650 !important;
}

.landing-primary > button em {
  display: none !important;
}

.route-learning {
  --route: #496f82;
  --route-soft: #edf3f6;
}

.route-practice {
  --route: #356b97;
  --route-soft: #edf4fa;
}

.route-search {
  --route: #bd2945;
  --route-soft: #fff0f2;
}

@media (max-width: 700px) {
  .landing-hero-editorial h1 {
    font-size: 34px !important;
  }

  .landing-primary > button b {
    font-size: 20px !important;
  }
}

/* Verdieping als één doorlopend blok, met een werkende vervolgzoekactie. */

.grammar-deepening {
  display: block !important;
  margin: 28px 0 22px !important;
  padding: 28px !important;
}

.grammar-deepening-copy {
  max-width: 980px;
}

.grammar-deepening-copy h3 {
  margin: 6px 0 9px;
  color: var(--cs-heading) !important;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.025em;
}

.grammar-deepening-copy p {
  margin: 0;
  color: #626870 !important;
  font-size: 16px;
  line-height: 1.6;
}

.grammar-deepening .a1-related {
  margin: 24px 0 0;
}

.grammar-deepening .a1-chapter-grid {
  gap: 14px;
}

.grammar-deepening .a1-chapter-card {
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 7px 22px rgba(47, 67, 78, .055) !important;
}

.grammar-followup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px !important;
}

.grammar-followup h3 {
  margin: 0 0 6px;
}

.grammar-followup .note {
  margin: 0;
}

.grammar-followup-search {
  flex: none;
  min-height: 46px;
  padding: 11px 17px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--cs-search) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(189, 41, 69, .18);
}

.grammar-followup-search:hover,
.grammar-followup-search:focus-visible {
  background: #9f203a !important;
}

@media (max-width: 760px) {
  .grammar-deepening {
    padding: 21px !important;
  }

  .grammar-followup {
    align-items: stretch;
    flex-direction: column;
  }

  .grammar-followup-search {
    width: 100%;
  }
}

/* Cheatsheet: dezelfde rustige glass-vormtaal als de rest van de leeromgeving. */

.cheatsheet-visual-head {
  max-width: none !important;
  margin: 0 0 18px !important;
  padding: 26px 30px !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(237, 244, 250, .82), rgba(255, 255, 255, .7)) !important;
  text-align: left !important;
  box-shadow: 0 12px 35px rgba(47, 67, 78, .075) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.cheatsheet-visual-head .eyebrow {
  color: var(--cs-blue) !important;
  letter-spacing: .13em !important;
}

.cheatsheet-visual-head .title {
  margin: 7px 0 7px !important;
  color: var(--cs-heading) !important;
  font-size: clamp(32px, 4vw, 44px) !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
}

.cheatsheet-visual-head .lead {
  max-width: 780px !important;
  margin: 0 !important;
  color: #626870 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.tense-cheatsheet-standalone {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 14px 40px rgba(47, 67, 78, .08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
}

.compact-cheatsheet {
  padding: 22px !important;
}

.compact-cheatsheet-scroll {
  overflow: auto !important;
  border: 1px solid rgba(73, 111, 130, .12) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.compact-cheatsheet table {
  margin: 0 !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.compact-cheatsheet th,
.compact-cheatsheet td {
  padding: 12px 13px !important;
  border-bottom: 1px solid rgba(73, 111, 130, .1) !important;
}

.compact-cheatsheet thead th {
  background: #496f82 !important;
  color: rgba(255, 255, 255, .96) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}

.compact-cheatsheet thead th small {
  color: rgba(255, 255, 255, .72) !important;
  font-weight: 500 !important;
}

.compact-cheatsheet tbody tr:last-child th,
.compact-cheatsheet tbody tr:last-child td {
  border-bottom: 0 !important;
}

.compact-cheatsheet tbody tr:nth-child(even) th,
.compact-cheatsheet tbody tr:nth-child(even) td {
  background: rgba(237, 244, 250, .44) !important;
}

.compact-cheatsheet tbody th {
  background: rgba(255, 255, 255, .45) !important;
  color: #3f4b53 !important;
  font-weight: 600 !important;
}

.compact-cheatsheet td {
  color: var(--cs-blue) !important;
  font-weight: 600 !important;
}

.compact-compounds {
  gap: 14px !important;
  margin-top: 16px !important;
}

.compact-compounds article,
.tense-cheat-card,
.tense-cheat-command-card,
.tense-cheat-command-note {
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: 0 7px 22px rgba(47, 67, 78, .055) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.compact-compounds article {
  padding: 16px !important;
}

.compact-compounds h4 {
  margin: 0 0 8px !important;
  color: var(--cs-heading) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

.compact-compounds p {
  color: #58646c !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.compact-compounds p b {
  color: var(--cs-blue) !important;
  font-weight: 600 !important;
}

.sheet-notes,
.tense-cheat-irregular-section {
  margin: 0 22px 22px !important;
  padding: 21px !important;
  border: 1px solid rgba(73, 111, 130, .1) !important;
  border-radius: 19px !important;
  background: rgba(237, 244, 250, .62) !important;
}

.tense-cheat-irregular-section > h3 {
  margin: 0 0 14px !important;
  color: var(--cs-heading) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

.tense-cheat-irregulars {
  gap: 12px !important;
}

.tense-cheat-irregulars section {
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .62) !important;
}

.tense-cheat-irregulars h4 {
  margin: 0 0 7px !important;
  color: var(--cs-blue) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.tense-cheat-irregulars p {
  color: #566169 !important;
  line-height: 1.55 !important;
}

.tense-cheat-irregulars p b {
  color: #496f82 !important;
}

.tense-cheat-footnote {
  margin: 14px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(73, 111, 130, .1) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .62) !important;
  color: #59656d !important;
}

.tense-cheat-footnote b {
  color: var(--cs-heading) !important;
}

.tense-cheat-card h4,
.tense-cheat-command-card h4,
.tense-cheat-command-card thead th {
  background: rgba(73, 111, 130, .1) !important;
  color: var(--cs-heading) !important;
}

@media (max-width: 700px) {
  .cheatsheet-visual-head {
    padding: 22px !important;
    border-radius: 20px !important;
  }

  .compact-cheatsheet {
    padding: 12px !important;
  }

  .sheet-notes,
  .tense-cheat-irregular-section {
    margin: 0 12px 14px !important;
    padding: 15px !important;
  }
}

/* Werkwoorddetail: rustige hiërarchie in plaats van losse, zware blokken. */

.verb-sticky-head {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  grid-template-columns: minmax(240px, .8fr) minmax(480px, 1.2fr) !important;
  gap: 24px !important;
  align-items: center !important;
  margin: 14px 0 12px !important;
  padding: 25px 28px !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(125deg, rgba(231, 243, 255, .9), rgba(242, 237, 255, .82) 58%, rgba(255, 242, 235, .76)) !important;
  color: var(--cs-text) !important;
  box-shadow: 0 14px 38px rgba(47, 67, 78, .09) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.verb-sticky-title .eyebrow {
  color: var(--cs-blue) !important;
  font-size: 11px !important;
  letter-spacing: .13em !important;
}

.verb-sticky-title h2 {
  margin: 7px 0 4px !important;
  color: var(--cs-heading) !important;
  font-size: clamp(34px, 4vw, 46px) !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
}

.verb-sticky-title > span {
  margin: 0 !important;
  color: #59636b !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

.verb-sticky-parts {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.verb-sticky-parts > div {
  min-height: 68px !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .58) !important;
}

.verb-sticky-parts span {
  color: #6c747c !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

.verb-sticky-parts b {
  margin-top: 5px !important;
  color: var(--cs-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.word-detail-actions {
  gap: 7px !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .54) !important;
  box-shadow: 0 7px 22px rgba(47, 67, 78, .055) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.word-detail-actions .action-btn {
  min-height: 38px !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(73, 111, 130, .13) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .76) !important;
  color: #49616f !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  box-shadow: none !important;
}

.word-detail-actions .action-btn:hover,
.word-detail-actions .action-btn.on {
  border-color: rgba(53, 107, 151, .25) !important;
  background: var(--cs-blue-soft) !important;
  color: var(--cs-blue) !important;
}

.word-detail-actions .delete-btn {
  margin-left: auto !important;
  color: #9e4655 !important;
}

.word-detail-actions .action-btn:last-child {
  border-color: transparent !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
}

.verb-center-overview {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 0 0 20px !important;
  border: 0 !important;
  background: transparent !important;
}

.verb-center-fact {
  min-height: 78px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .68) !important;
  box-shadow: 0 6px 18px rgba(47, 67, 78, .045) !important;
}

.verb-center-fact span {
  color: #717980 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

.verb-center-fact b {
  color: var(--cs-heading) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

.verb-conjugation-model {
  margin: 0 0 22px !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .57) !important;
  box-shadow: 0 12px 34px rgba(47, 67, 78, .07) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

.verb-conjugation-model > h3 {
  margin: 0 0 5px !important;
  color: var(--cs-heading) !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

.verb-conjugation-model > .note {
  margin: 0 0 18px !important;
  color: #697178 !important;
  font-size: 14px !important;
}

/* Per persoon alle tijden verticaal vergelijken in zes vaste kaarten. */
.verb-person-overview {
  margin: 0 0 22px !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .57) !important;
  box-shadow: 0 12px 34px rgba(47, 67, 78, .07) !important;
}

.verb-person-overview-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.verb-person-overview-head h3 {
  margin: 4px 0 5px !important;
  color: var(--cs-heading) !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

.verb-person-overview-head .note { margin: 0 !important; }

.verb-person-overview-head > span {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(53, 107, 151, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.verb-person-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.verb-person-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(53, 107, 151, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 7px 20px rgba(42, 70, 94, .06);
}

.verb-person-card > header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(53, 107, 151, .13);
  background: linear-gradient(135deg, rgba(221, 238, 252, .8), rgba(248, 235, 239, .66));
}

.verb-person-card > header span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .8);
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 800;
}

.verb-person-card > header h4 {
  min-width: 0;
  margin: 0 !important;
  color: var(--cs-heading) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

.verb-person-tense-list { display: grid; }

.verb-person-tense-row {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 10px;
  align-items: center;
  min-height: 49px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(95, 111, 122, .1);
}

.verb-person-tense-row:last-child { border-bottom: 0; }

.verb-person-tense-row > span {
  color: #707980;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.verb-person-tense-row > b {
  min-width: 0;
  color: var(--cs-spanish-blue, #2d7396);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Eén vaste presentatie voor alle werkwoordtabellen: Spaans in de vaste
   huisstijlblauwe kleur, met de vertaling er direct naast. */
.verb-form-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  white-space: normal;
}

.verb-form-es {
  min-width: 0;
  color: var(--cs-spanish-blue, #2d7396) !important;
  text-align: right;
  overflow-wrap: anywhere;
}

.verb-form-nl {
  min-width: 0;
  color: var(--cs-spanish-blue, #2d7396) !important;
  font-size: .86em;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}

.verb-form-nl.loading { color: #8299a8 !important; font-style: italic; font-weight: 600; }
.verb-form-nl.unavailable { color: #76838b !important; font-size: .78em; font-weight: 600; }

.verb-person-tense-row > .verb-form-pair { min-width: 0; }

@media (max-width: 650px) {
  .verb-form-pair { grid-template-columns: minmax(76px, .9fr) minmax(0, 1.1fr); gap: 9px; }
}

@media (max-width: 980px) {
  .verb-person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .verb-person-overview { padding: 18px 12px !important; }
  .verb-person-overview-head { align-items: start; flex-direction: column; padding-inline: 6px; }
  .verb-person-grid { grid-template-columns: minmax(0, 1fr); }
  .verb-person-tense-row { padding-inline: 12px; }
}

/* Cheatsheet: het visuele kaart-/posteroverzicht terugbrengen. */

.cheatsheet-poster-intro {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 22px 26px 12px !important;
}

.cheatsheet-poster-intro span {
  color: var(--cs-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.cheatsheet-poster-intro b {
  color: #636c73 !important;
  font-size: 14px !important;
  font-weight: 550 !important;
}

.tense-cheat-card-grid.sheet-grid {
  padding: 10px 22px 22px !important;
}

.tense-cheat-sheet-row {
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card {
  overflow: hidden !important;
  border: 1px solid rgba(73, 111, 130, .1) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .75) !important;
  box-shadow: 0 8px 24px rgba(47, 67, 78, .055) !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card h4 {
  min-height: 52px !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  border-bottom: 1px solid rgba(73, 111, 130, .08) !important;
  background: #edf3f6 !important;
  color: var(--cs-heading) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card h4 i {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
  border-radius: 9px !important;
  background: rgba(73, 111, 130, .13) !important;
  color: #496f82 !important;
  font-size: 15px !important;
}

.tense-cheat-card-grid.sheet-grid .sheet-card-perfecto h4,
.tense-cheat-card-grid.sheet-grid .sheet-card-gerundio h4 {
  background: #eef5ef !important;
}

.tense-cheat-card-grid.sheet-grid .sheet-card-perfecto h4 i,
.tense-cheat-card-grid.sheet-grid .sheet-card-gerundio h4 i {
  background: #dcebdd !important;
  color: #42684c !important;
}

.tense-cheat-card-grid.sheet-grid .sheet-card-indefinido h4,
.tense-cheat-card-grid.sheet-grid .sheet-card-imperativo h4 {
  background: #f8efec !important;
}

.tense-cheat-card-grid.sheet-grid .sheet-card-indefinido h4 i,
.tense-cheat-card-grid.sheet-grid .sheet-card-imperativo h4 i {
  background: #efdcd5 !important;
  color: #8d4b3b !important;
}

.tense-cheat-card-grid.sheet-grid .sheet-card-pluscuamperfecto h4,
.tense-cheat-card-grid.sheet-grid .sheet-card-futuro h4 {
  background: #edf3f8 !important;
}

.tense-cheat-card-grid.sheet-grid .sheet-card-condicional h4 {
  background: #f2eff7 !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card table {
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  table-layout: fixed !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card th,
.tense-cheat-card-grid.sheet-grid .tense-cheat-card td {
  padding: 7px 9px !important;
  border-bottom: 1px solid rgba(73, 111, 130, .08) !important;
  color: #55636c !important;
  font-size: 11px !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card td {
  text-align: right !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card td b {
  color: var(--cs-blue) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

@media (max-width: 1100px) {
  .verb-sticky-head {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .verb-center-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .word-detail-actions .delete-btn {
    margin-left: 0 !important;
  }

  .word-detail-actions .action-btn {
    flex: 1 1 calc(50% - 7px) !important;
  }

  .cheatsheet-poster-intro {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 18px 16px 8px !important;
  }

  .tense-cheat-card-grid.sheet-grid {
    padding: 10px 12px 16px !important;
  }

  .tense-cheat-sheet-row .tense-cheat-card {
    flex: 0 0 78vw !important;
    max-width: 78vw !important;
  }
}

/* Eén knopblauw in de hele applicatie; alleen echte zoekacties blijven rood. */

:root {
  --cs-blue: #356b97;
  --cs-blue-soft: #edf4fa;
  --cs-required: #356b97;
  --cs-required-soft: #edf4fa;
  --cs-action: #356b97;
}

button:focus-visible,
a:focus-visible {
  outline-color: rgba(53, 107, 151, .28) !important;
}

.preface-language-switch button.active,
.language-switch button.active,
.nav-level-scope button.active,
.side .nav button.active,
.words-alpha button.active,
.verb-family.active,
.relation-level-buttons button.active,
.relation-categorybar button.active,
.generic-filterbar button.active,
.topic-level-selector button.active,
.book-filterbar button.active,
.filter-line .chip.active,
.segmented button.active,
.dev-tabs button.active,
.study-level-chapters button.active,
.relation-map-quizlet-slot .action-btn.active,
.study-level-chapters > span {
  border-color: var(--cs-blue) !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(53, 107, 151, .2) !important;
}

.side .nav button.active::after {
  background: #fff !important;
}

.primary,
.editor-save,
.new-item-btn,
.hero-btn:not(.secondary),
.practice-settings button,
.practice-actions button:not(.secondary),
.translate-submit,
.explain-btn {
  border-color: var(--cs-blue) !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(53, 107, 151, .18) !important;
}

.primary:hover,
.editor-save:hover,
.new-item-btn:hover,
.hero-btn:not(.secondary):hover,
.practice-settings button:hover,
.practice-actions button:not(.secondary):hover,
.translate-submit:hover,
.explain-btn:hover {
  background: #2d5d83 !important;
}

/* Zoeken is en blijft de enige rode actie. */

.searchbar button,
.grammar-followup-search,
.word-search-submit,
.verb-search-submit,
.example-search-submit {
  border-color: var(--cs-search) !important;
  background: var(--cs-search) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(189, 41, 69, .18) !important;
}

.searchbar button:hover,
.searchbar button:focus-visible,
.grammar-followup-search:hover,
.grammar-followup-search:focus-visible,
.word-search-submit:hover,
.word-search-submit:focus-visible,
.verb-search-submit:hover,
.verb-search-submit:focus-visible,
.example-search-submit:hover,
.example-search-submit:focus-visible {
  background: #9f203a !important;
}

.word-query-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.verb-query-control,
.example-query-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.verb-query-control .verb-search-submit,
.example-query-control .example-search-submit {
  min-width: 112px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.example-query-label > span {
  display: block;
  margin-bottom: 7px;
}

.word-query-control .word-search-submit {
  min-width: 112px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

@media (max-width: 700px) {
  .word-query-control .word-search-submit {
    min-width: 96px;
    padding-inline: 13px;
  }

  .verb-query-control .verb-search-submit,
  .example-query-control .example-search-submit {
    min-width: 96px;
    padding-inline: 13px;
  }
}

/* De startpagina gebruikt dezelfde lichte glass-opening, inclusief het fotovlak. */

.landing-hero.landing-hero-editorial {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .76) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(121, 181, 255, .3), transparent 18rem),
    linear-gradient(125deg, #e7f3ff 0%, #f2edff 55%, #fff2eb 100%) !important;
  box-shadow: var(--cs-shadow) !important;
}

.landing-hero-editorial .landing-hero-photo {
  margin: 18px 18px 0 !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(52, 71, 88, .12) !important;
}

.landing-hero-editorial .landing-module-summary {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-left: 4px solid #d0a543 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Compacte, schaalbare tijdkaarten met horizontale iPhone-navigatie. */

.tense-cheat-card-grid.sheet-grid {
  padding: 8px 18px 20px !important;
}

.tense-cheat-sheet-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card {
  min-width: 0 !important;
  border-radius: 14px !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card h4 {
  min-height: 46px !important;
  padding: 8px 10px !important;
  font-size: clamp(13px, 1.1vw, 15px) !important;
  line-height: 1.15 !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card h4 i {
  width: 25px !important;
  height: 25px !important;
  flex-basis: 25px !important;
  font-size: 13px !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: auto !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card th,
.tense-cheat-card-grid.sheet-grid .tense-cheat-card td {
  padding: 5px 7px !important;
  font-size: clamp(10px, .78vw, 11px) !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card th:first-child {
  width: 74px !important;
  min-width: 74px !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card td b {
  font-size: inherit !important;
  white-space: nowrap !important;
}

.tense-cheat-card-grid.sheet-grid .tense-cheat-card thead th {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  color: #52636e !important;
  font-size: 10px !important;
}

@media (max-width: 1100px) and (min-width: 701px) {
  .tense-cheat-sheet-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tense-cheat-sheet-row .tense-cheat-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 700px) {
  .tense-cheat-card-grid.sheet-grid {
    overflow: visible !important;
    padding: 7px 0 15px !important;
  }

  .tense-cheat-sheet-row {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 4px 14px 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-padding-inline: 14px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .tense-cheat-sheet-row .tense-cheat-card {
    flex: 0 0 min(84vw, 390px) !important;
    width: min(84vw, 390px) !important;
    max-width: min(84vw, 390px) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .tense-cheat-card-grid.sheet-grid .tense-cheat-card h4 {
    min-height: 44px !important;
    padding: 8px 9px !important;
    font-size: 13px !important;
  }

  .tense-cheat-card-grid.sheet-grid .tense-cheat-card th,
  .tense-cheat-card-grid.sheet-grid .tense-cheat-card td {
    padding: 6px 7px !important;
    font-size: 10.5px !important;
  }

  .tense-cheat-card-grid.sheet-grid .tense-cheat-card th:first-child {
    width: 68px !important;
    min-width: 68px !important;
  }

  .sheet-row-scroll-hint {
    margin-top: 2px !important;
    color: var(--cs-blue) !important;
  }
}

/* Cheatsheet als echte klasposter: één raster, één taal en één ritme. */

.tense-cheatsheet-standalone.cheatsheet-poster {
  border: 1px solid #d8d2c4 !important;
  border-radius: 22px !important;
  background:
    linear-gradient(rgba(255, 255, 255, .93), rgba(250, 249, 245, .96)),
    #faf9f5 !important;
  box-shadow: 0 18px 50px rgba(45, 57, 66, .12) !important;
}

.tense-cheatsheet-standalone .cheatsheet-poster-intro {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 3px !important;
  align-items: center !important;
  margin: 18px 18px 10px !important;
  padding: 19px 22px !important;
  border-radius: 15px !important;
  background: #356b97 !important;
  box-shadow: 0 8px 20px rgba(53, 107, 151, .18) !important;
}

.tense-cheatsheet-standalone .cheatsheet-poster-intro span {
  grid-row: 1 / 3 !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  min-width: 86px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: #f3d687 !important;
  color: #274a63 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
}

.tense-cheatsheet-standalone .cheatsheet-poster-intro b {
  color: #fff !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
}

.tense-cheatsheet-standalone .cheatsheet-poster-intro em {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid {
  padding: 8px 18px 22px !important;
}

.poster-sheet-grid .tense-cheat-sheet-row {
  align-items: stretch !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid #d8dee2 !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 5px 14px rgba(40, 57, 69, .07) !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-perfecto h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-gerundio h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-indefinido h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-pluscuamperfecto h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-futuro h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-condicional h4 {
  min-height: 56px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: #356b97 !important;
  color: #fff !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-perfecto h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-gerundio h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-indefinido h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-pluscuamperfecto h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-futuro h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-condicional h4 i {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 8px !important;
  background: #f3d687 !important;
  color: #274a63 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card thead th {
  padding: 8px 10px !important;
  border-bottom: 1px solid #dbc071 !important;
  background: #f7e3aa !important;
  color: #405464 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card thead th:first-child {
  width: 90px !important;
  min-width: 90px !important;
  text-align: left !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody th,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody td {
  padding: 7px 10px !important;
  border-bottom: 1px solid #e8ecee !important;
  background: #fff !important;
  color: #455864 !important;
  font-size: clamp(12px, .9vw, 14px) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody tr:last-child th,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody tr:last-child td {
  border-bottom: 0 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody th {
  width: 90px !important;
  min-width: 90px !important;
  font-weight: 650 !important;
  text-align: left !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody td {
  text-align: right !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody td b {
  color: #356b97 !important;
  font-size: inherit !important;
  font-weight: 750 !important;
}

@media (max-width: 900px) and (min-width: 701px) {
  .poster-sheet-grid .tense-cheat-sheet-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .tense-cheatsheet-standalone .cheatsheet-poster-intro {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 7px !important;
    margin: 12px 12px 8px !important;
    padding: 16px !important;
  }

  .tense-cheatsheet-standalone .cheatsheet-poster-intro span {
    grid-row: auto !important;
    justify-self: start !important;
    min-width: 0 !important;
    padding: 6px 9px !important;
  }

  .tense-cheatsheet-standalone .cheatsheet-poster-intro b {
    font-size: 25px !important;
  }

  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid {
    padding: 4px 0 15px !important;
  }

  .poster-sheet-grid .tense-cheat-sheet-row {
    align-items: stretch !important;
    padding-inline: 12px !important;
  }

  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card {
    flex-basis: min(88vw, 410px) !important;
    width: min(88vw, 410px) !important;
    max-width: min(88vw, 410px) !important;
  }

  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 {
    min-height: 54px !important;
    font-size: 17px !important;
  }

  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card thead th,
  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody th,
  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody td {
    padding: 8px 9px !important;
    font-size: 12.5px !important;
  }

  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card thead th:first-child,
  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody th {
    width: 82px !important;
    min-width: 82px !important;
  }
}

/* Posterbijlage: uitleg en afwijkingen als één scanbare naslagtabel. */

.sheet-notes.sheet-notes-poster {
  overflow: hidden !important;
  margin: 6px 18px 20px !important;
  padding: 0 !important;
  border: 1px solid #d8dee2 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 5px 14px rgba(40, 57, 69, .06) !important;
}

.sheet-notes.sheet-notes-poster > h3 {
  margin: 0 !important;
  padding: 14px 18px !important;
  background: #356b97 !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}

.sheet-notes-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.sheet-notes-table {
  width: 100% !important;
  min-width: 720px !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

.sheet-notes-table thead th {
  padding: 10px 13px !important;
  border-bottom: 1px solid #dbc071 !important;
  background: #f7e3aa !important;
  color: #405464 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.sheet-notes-table thead th:first-child,
.sheet-notes-table tbody th {
  width: 190px !important;
}

.sheet-notes-table tbody th,
.sheet-notes-table tbody td {
  padding: 11px 13px !important;
  border-bottom: 1px solid #e5eaed !important;
  vertical-align: top !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
  text-align: left !important;
}

.sheet-notes-table tbody th {
  background: #edf4fa !important;
  color: #315f83 !important;
  font-weight: 750 !important;
}

.sheet-notes-table tbody td {
  background: #fff !important;
  color: #4c5962 !important;
  font-weight: 450 !important;
}

.sheet-notes-table tbody td b {
  color: #274f6d !important;
  font-weight: 750 !important;
}

.sheet-notes-table tbody tr:nth-child(even) td {
  background: #fafbfc !important;
}

.sheet-notes-table tbody tr:last-child th,
.sheet-notes-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.sheet-notes-table .sheet-reading-rule th,
.sheet-notes-table .sheet-reading-rule td {
  background: #fbf4df !important;
  color: #4f4b3e !important;
}

@media (max-width: 700px) {
  .sheet-notes.sheet-notes-poster {
    margin: 5px 12px 14px !important;
  }

  .sheet-notes.sheet-notes-poster > h3 {
    padding: 13px 14px !important;
    font-size: 18px !important;
  }

  .sheet-notes-table {
    min-width: 650px !important;
  }

  .sheet-notes-table thead th:first-child,
  .sheet-notes-table tbody th {
    width: 155px !important;
  }

  .sheet-notes-table tbody th,
  .sheet-notes-table tbody td {
    font-size: 12.5px !important;
  }
}

/* Vrolijkere posterkleuren, met behoud van dezelfde kaartstructuur. */

.tense-cheatsheet-standalone .cheatsheet-poster-intro {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 5px !important;
  background:
    radial-gradient(circle at 92% 20%, rgba(255, 211, 137, .32), transparent 180px),
    linear-gradient(120deg, #3976a6 0%, #6675b5 58%, #a75f83 100%) !important;
}

.tense-cheatsheet-standalone .cheatsheet-poster-intro b {
  font-size: clamp(25px, 2.5vw, 36px) !important;
}

.tense-cheatsheet-standalone .cheatsheet-poster-intro em {
  color: rgba(255, 255, 255, .86) !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-presente h4 {
  background: #3977a8 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-perfecto h4 {
  background: #4f8a67 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-indefinido h4 {
  background: #c66350 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperfecto h4 {
  background: #4d8793 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-pluscuamperfecto h4 {
  background: #7165a5 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-futuro h4 {
  background: #a97325 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-condicional h4 {
  background: #885e91 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-gerundio h4 {
  background: #518970 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo h4 {
  background: #ba6041 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-perfecto h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-gerundio h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-indefinido h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-pluscuamperfecto h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-futuro h4 i,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-condicional h4 i {
  background: #f7df9c !important;
  color: #314d61 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
}

.sheet-notes.sheet-notes-poster > h3 {
  background: linear-gradient(110deg, #3976a6, #6675b5) !important;
}

/* Doorlopende glass-gradients binnen dezelfde uniforme posteropmaak. */

.poster-sheet-grid .sheet-card-presente {
  --poster-accent: 57, 119, 168;
}

.poster-sheet-grid .sheet-card-perfecto {
  --poster-accent: 79, 138, 103;
}

.poster-sheet-grid .sheet-card-indefinido {
  --poster-accent: 198, 99, 80;
}

.poster-sheet-grid .sheet-card-imperfecto {
  --poster-accent: 77, 135, 147;
}

.poster-sheet-grid .sheet-card-pluscuamperfecto {
  --poster-accent: 113, 101, 165;
}

.poster-sheet-grid .sheet-card-futuro {
  --poster-accent: 169, 115, 37;
}

.poster-sheet-grid .sheet-card-condicional {
  --poster-accent: 136, 94, 145;
}

.poster-sheet-grid .sheet-card-gerundio {
  --poster-accent: 81, 137, 112;
}

.poster-sheet-grid .sheet-card-imperativo {
  --poster-accent: 186, 96, 65;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card {
  border-color: rgba(255, 255, 255, .82) !important;
  background:
    radial-gradient(circle at 94% 4%, rgba(var(--poster-accent), .15), transparent 150px),
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(var(--poster-accent), .065)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 9px 26px rgba(40, 57, 69, .09) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-presente h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-perfecto h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-indefinido h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperfecto h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-pluscuamperfecto h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-futuro h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-condicional h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-gerundio h4,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo h4 {
  background:
    radial-gradient(circle at 92% 5%, rgba(255, 255, 255, .28), transparent 48%),
    linear-gradient(125deg, rgba(var(--poster-accent), .98), rgba(var(--poster-accent), .72)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 i {
  background:
    linear-gradient(145deg, rgba(255, 242, 197, .98), rgba(242, 207, 116, .88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .68),
    0 3px 8px rgba(39, 63, 79, .15) !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card thead th {
  background:
    linear-gradient(100deg, rgba(247, 227, 170, .96), rgba(255, 242, 203, .82)) !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody th,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody td {
  background: rgba(255, 255, 255, .7) !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody tr:nth-child(even) th,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody tr:nth-child(even) td {
  background: rgba(var(--poster-accent), .035) !important;
}

.sheet-reading-lines {
  display: grid !important;
  gap: 8px !important;
}

.sheet-reading-lines > span {
  display: grid !important;
  grid-template-columns: 25px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: start !important;
}

.sheet-reading-lines i {
  display: grid !important;
  place-items: center !important;
  width: 23px !important;
  height: 23px !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #4b82ad, #6574b2) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.sheet-reading-lines em {
  padding-top: 1px !important;
  color: #4c5962 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

/* De gele kolomkop als één doorlopende glass-strook, niet als losse cellen. */

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card thead tr {
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 255, 255, .5), transparent 42%),
    linear-gradient(100deg, rgba(244, 214, 132, .94), rgba(255, 239, 190, .76)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(201, 165, 72, .24) !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card thead th {
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* De twee grote posterbalken gebruiken exact hetzelfde glass-verloop. */

.sheet-notes.sheet-notes-poster {
  margin-right: 18px !important;
  margin-left: 18px !important;
  border-color: rgba(255, 255, 255, .82) !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 20px rgba(53, 107, 151, .12) !important;
}

.sheet-notes.sheet-notes-poster > h3 {
  padding: 19px 22px !important;
  background:
    radial-gradient(circle at 92% 20%, rgba(255, 211, 137, .32), transparent 180px),
    linear-gradient(120deg, #3976a6 0%, #6675b5 58%, #a75f83 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

@media (max-width: 700px) {
  .sheet-notes.sheet-notes-poster {
    margin-right: 12px !important;
    margin-left: 12px !important;
  }

  .sheet-notes.sheet-notes-poster > h3 {
    padding: 16px !important;
  }
}

/* Eén duidelijke, zachte afronding voor alle onderdelen van de Cheatsheet. */

.tense-cheatsheet-standalone.cheatsheet-poster {
  border-radius: 26px !important;
}

.tense-cheatsheet-standalone .cheatsheet-poster-intro {
  overflow: hidden !important;
  border-radius: 20px !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card {
  overflow: hidden !important;
  border-radius: 19px !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 {
  border-radius: 18px 18px 0 0 !important;
}

.sheet-notes.sheet-notes-poster {
  overflow: hidden !important;
  border-radius: 20px !important;
}

.sheet-notes.sheet-notes-poster > h3 {
  border-radius: 19px 19px 0 0 !important;
}

.sheet-notes-table-wrap {
  border-radius: 0 0 19px 19px !important;
}

@media (max-width: 700px) {
  .tense-cheatsheet-standalone.cheatsheet-poster {
    border-radius: 21px !important;
  }

  .tense-cheatsheet-standalone .cheatsheet-poster-intro,
  .sheet-notes.sheet-notes-poster {
    border-radius: 17px !important;
  }

  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card {
    border-radius: 17px !important;
  }
}

/* iPhone: eerst de complete poster tonen; native knijpzoom vergroot en positioneert. */

.cheatsheet-mobile-zoom-hint {
  display: none;
}

.cheatsheet-poster-viewport {
  width: 100%;
}

@media (max-width: 700px) {
  .cheatsheet-mobile-zoom-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 9px;
    color: #526779;
    font-size: 12px;
    font-weight: 650;
  }

  .cheatsheet-mobile-zoom-hint::before {
    content: "↔";
    color: var(--cs-blue);
    font-size: 15px;
  }

  .cheatsheet-poster-viewport {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 14px;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .cheatsheet-poster-viewport > .cheatsheet-poster {
    width: 1120px !important;
    max-width: none !important;
    margin: 0 !important;
    transform: scale(var(--poster-fit-scale, .3));
    transform-origin: left top;
  }

  .cheatsheet-poster-viewport .cheatsheet-poster-intro {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 3px 18px !important;
    margin: 18px 18px 10px !important;
    padding: 19px 22px !important;
  }

  .cheatsheet-poster-viewport .cheatsheet-poster-intro b {
    font-size: 34px !important;
  }

  .cheatsheet-poster-viewport .cheatsheet-poster-intro em {
    font-size: 14px !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid {
    padding: 8px 18px 22px !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-sheet-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card h4 {
    min-height: 56px !important;
    padding: 10px 12px !important;
    font-size: 19px !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card thead th,
  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card tbody th,
  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card tbody td {
    padding: 7px 10px !important;
    font-size: 14px !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card thead th:first-child,
  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card tbody th {
    width: 90px !important;
    min-width: 90px !important;
  }

  .cheatsheet-poster-viewport .sheet-notes.sheet-notes-poster {
    margin: 6px 18px 20px !important;
  }

  .cheatsheet-poster-viewport .sheet-notes.sheet-notes-poster > h3 {
    padding: 19px 22px !important;
    font-size: 20px !important;
  }

  .cheatsheet-poster-viewport .sheet-notes-table {
    min-width: 720px !important;
  }

  .cheatsheet-poster-viewport .sheet-notes-table tbody th,
  .cheatsheet-poster-viewport .sheet-notes-table tbody td {
    font-size: 13px !important;
  }
}

.verb-row.verb-search-target {
  position: relative;
  z-index: 1;
  border-radius: 14px !important;
  background: rgba(214,232,247,.9) !important;
  box-shadow:
    0 0 0 3px rgba(53,107,151,.18),
    0 10px 24px rgba(42,70,94,.12) !important;
  transition: background .25s ease, box-shadow .25s ease;
}

/* Posteruitgangen: Persoon links, daarna drie exact gelijke en gecentreerde kolommen. */

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table.poster-ending-table {
  table-layout: fixed !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table.poster-ending-table th:first-child {
  width: 38% !important;
  min-width: 0 !important;
  text-align: left !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table.poster-ending-table th:not(:first-child),
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table.poster-ending-table td {
  width: 20.666% !important;
  text-align: center !important;
}

/* Alle zes persoonsvormen blijven zichtbaar; kaarten bepalen zelf hun volledige hoogte. */

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card {
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table {
  height: auto !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody tr,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody tr:last-child {
  display: table-row !important;
  visibility: visible !important;
}

/* De vervoegingen op een werkwoordpagina gebruiken dezelfde schaalbare poster. */

.verb-conjugation-viewport {
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 4%, rgba(91,151,205,.12), transparent 260px),
    linear-gradient(145deg, rgba(250,252,255,.86), rgba(246,242,252,.72));
}

.verb-conjugation-poster {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 4px 0;
  border-radius: 20px;
}

.verb-conjugation-poster .verb-sheet-grid {
  padding-top: 14px !important;
}

@media (max-width: 700px) {
  .verb-conjugation-model {
    padding: 18px 12px !important;
  }

  .verb-conjugation-model > h3,
  .verb-conjugation-model > .note {
    padding-right: 6px;
    padding-left: 6px;
  }
}

/* Algemene beheermodus voor vaste paginateksten. */

body:not(.content-editing-enabled) .page-text-toolbar,
body:has(.login-screen:not([hidden])) .page-text-toolbar {
  display: none !important;
}

.page-text-toolbar {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(940px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 22px;
  background: rgba(248,251,255,.84);
  box-shadow: 0 18px 48px rgba(38,65,96,.2);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.page-text-toolbar[hidden] {
  display: none !important;
}

.page-text-toolbar > div {
  min-width: 210px;
  padding: 0 8px;
}

.page-text-toolbar > div b,
.page-text-toolbar > div span {
  display: block;
}

.page-text-toolbar > div b {
  color: #20374d;
  font-size: 15px;
  font-weight: 700;
}

.page-text-toolbar > div span,
.page-text-saved-mark {
  color: #687887;
  font-size: 12px;
}

.page-text-translation-mark {
  padding: 8px 11px;
  border: 1px solid rgba(177,119,0,.24);
  border-radius: 999px;
  background: #fff4cf;
  color: #7b5708;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.page-text-toolbar button {
  min-height: 44px;
  padding: 0 17px;
  border: 0;
  border-radius: 15px;
  background: rgba(227,234,240,.92);
  color: #365064;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.page-text-toolbar button.primary {
  background: #3d77a6;
  color: #fff;
  box-shadow: 0 8px 18px rgba(61,119,166,.22);
}

.page-text-toolbar .page-text-spanish-button {
  border: 1px solid rgba(53,107,151,.18);
  background: rgba(237,244,250,.95);
  color: #356b97;
}

.page-text-toolbar .page-text-dutch-button {
  border: 1px solid rgba(63,126,91,.2);
  background: rgba(239,248,242,.96);
  color: #2f704d;
}

.page-text-spanish-button i {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: 5px;
  border-radius: 8px;
  background: #356b97;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .05em;
}

.page-text-dutch-button i {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: 5px;
  border-radius: 8px;
  background: #3f7e5b;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .05em;
}

.page-text-toolbar button:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}

.page-text-edit-button {
  font-size: 15px !important;
}

.page-text-editable {
  min-width: 1.2em;
  border-radius: 8px;
  outline: 2px solid rgba(61,119,166,.48) !important;
  outline-offset: 4px;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 0 0 6px rgba(61,119,166,.08);
  cursor: text !important;
}

.page-text-editable:focus {
  outline-color: #c92749 !important;
  box-shadow: 0 0 0 7px rgba(201,39,73,.1);
}

.page-text-editable .page-text-spanish,
.page-text-editable .spanish-inline {
  padding: 1px 3px;
  border-radius: 5px;
  background: rgba(53,107,151,.1);
  box-shadow: inset 0 -2px 0 rgba(53,107,151,.42);
}

/* Handmatig via 'Spaans' gemarkeerde paginatekst blijft rood. Dit staat na de
   algemene blauwe Spaanse tekststijl, zodat ook geneste kernwoordkaarttekst
   niet van rood naar blauw terugvalt zodra een beheerder die opslaat. */
#content .page-text-spanish {
  color: var(--cs-spanish-red, #bf2f43) !important;
  font-style: normal;
}

#content .page-text-color[data-page-text-color="red"],
#content .page-text-color[data-page-text-color="red"] *,
.page-text-editor-workspace .page-text-color[data-page-text-color="red"] {color:#bd2845 !important}
#content .page-text-color[data-page-text-color="blue"],
#content .page-text-color[data-page-text-color="blue"] *,
.page-text-editor-workspace .page-text-color[data-page-text-color="blue"] {color:#2875a5 !important}
#content .page-text-color[data-page-text-color="green"],
#content .page-text-color[data-page-text-color="green"] *,
.page-text-editor-workspace .page-text-color[data-page-text-color="green"] {color:#28724b !important}
#content .page-text-color[data-page-text-color="gold"],
#content .page-text-color[data-page-text-color="gold"] *,
.page-text-editor-workspace .page-text-color[data-page-text-color="gold"] {color:#9a6900 !important}
#content .page-text-color[data-page-text-color="purple"],
#content .page-text-color[data-page-text-color="purple"] *,
.page-text-editor-workspace .page-text-color[data-page-text-color="purple"] {color:#7650a9 !important}
#content .page-text-size[data-page-text-size="small"],#content .page-text-size[data-page-text-size="small"] * {font-size:.86em !important}
#content .page-text-size[data-page-text-size="normal"],#content .page-text-size[data-page-text-size="normal"] * {font-size:1em !important}
#content .page-text-size[data-page-text-size="large"],#content .page-text-size[data-page-text-size="large"] * {font-size:1.18em !important}
#content .page-text-size[data-page-text-size="xlarge"],#content .page-text-size[data-page-text-size="xlarge"] * {font-size:1.42em !important}

.page-text-editable .page-text-spanish:empty,
.page-text-editable .spanish-inline:empty,
.page-text-editable .page-text-dutch:empty {
  display: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-text-linked-open {
  overflow: hidden;
}

.page-text-linked-editor {
  position: fixed;
  z-index: 11950;
  inset: 18px 18px 98px;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  overflow: hidden;
  border: 1px solid rgba(61,119,166,.22);
  border-radius: 26px;
  background: #f7f9fc;
  box-shadow: 0 28px 90px rgba(24,48,73,.28);
}

.page-text-formatbar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 18px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(61,119,166,.16);
  background: rgba(255,255,255,.96);
  scrollbar-width: thin;
}

.page-text-format-label {
  display: grid;
  flex: 0 0 auto;
  min-width: 190px;
  margin-right: 6px;
  color: #29465e;
  line-height: 1.2;
}

.page-text-format-label small {margin-top:3px;color:#71808d;font-size:11px;font-weight:500}
.page-text-format-divider {width:1px;height:30px;flex:0 0 1px;margin:0 4px;background:#d9e2e9}
.page-text-formatbar button,
.page-text-formatbar select {
  min-height: 38px;
  flex: 0 0 auto;
  border: 1px solid #d6e0e8;
  border-radius: 10px;
  background: #f7f9fb;
  color: #29465e;
  font: 700 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.page-text-formatbar button {min-width:38px;padding:0 11px;cursor:pointer}
.page-text-formatbar select {padding:0 30px 0 11px;cursor:pointer}
.page-text-formatbar button:hover,
.page-text-formatbar select:hover {border-color:#77a5c8;background:#edf6fd}

.page-text-editor-workspace {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(270px,340px);
  min-height: 0;
  overflow: hidden;
  background: #d9dfe5;
}
.page-text-editor-workspace.no-tables {grid-template-columns:minmax(0,1fr)}

.page-text-document-scroll {
  min-width: 0;
  overflow: auto;
  padding: 24px;
}

.page-text-document-canvas.main {
  display: block;
  width: min(100%, 1480px);
  min-height: 100%;
  margin: 0 auto;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 28px rgba(34,55,74,.17);
}

.page-text-document-canvas #content {width:100%;max-width:none;margin:0;padding:0}
.page-text-document-canvas .page-text-editable {transition:outline-color .16s ease,box-shadow .16s ease}
.page-text-document-canvas .page-text-editable:hover {outline-color:#3d77a6 !important;box-shadow:0 0 0 7px rgba(61,119,166,.12)}

.page-text-table-manager {
  min-width: 0;
  overflow: auto;
  padding: 18px;
  border-left: 1px solid #c8d2db;
  background: #f5f8fa;
}
.page-text-table-manager[hidden] {display:none}
.page-text-table-manager > summary {display:flex;align-items:center;justify-content:space-between;gap:8px;color:#273f54;font-size:18px;font-weight:780;cursor:pointer}
.page-text-table-manager > summary small {color:#75838f;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.page-text-table-manager > p {margin:5px 0 14px;color:#71808d;font-size:12px;line-height:1.4}
.page-table-editor-list {display:grid;gap:10px}
.page-table-editor-card {overflow:hidden;border:1px solid #d5e0e8;border-radius:13px;background:#fff}
.page-table-editor-card > summary {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;cursor:pointer;list-style-position:inside}
.page-table-editor-card > summary span {display:inline-grid;gap:2px;vertical-align:middle}
.page-table-editor-card > summary small {color:#75838f;font-size:10px;font-weight:600}
.page-table-editor-card > p {margin:0;padding:0 12px 10px;color:#6a7884;font-size:11px;line-height:1.4}
.page-table-editor-actions {display:flex;gap:6px;padding:0 12px 10px}
.page-table-editor-actions button,
.page-table-column-controls button {min-height:32px;border:1px solid #cfdae3;border-radius:8px;background:#eef5fa;color:#356b97;font-weight:750;cursor:pointer}
.page-table-editor-actions button {flex:1;padding:0 8px}
.page-table-editor-grid {padding:0 12px 12px;overflow-x:auto}
.page-table-editor-row {display:grid;grid-template-columns:repeat(var(--table-columns),minmax(110px,1fr));gap:6px;min-width:max-content}
.page-table-editor-row > section {display:grid;gap:6px;min-width:110px;padding:8px;border:1px solid #dce4ea;border-radius:9px;background:#fafcfd}
.page-table-editor-row > section > b {overflow:hidden;color:#30495e;font-size:11px;white-space:nowrap;text-overflow:ellipsis}
.page-table-column-controls {display:flex;gap:4px}
.page-table-column-controls button {width:30px;padding:0}
.page-table-column-controls button:disabled {opacity:.35;cursor:default}

.page-text-linked-editor::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(25,42,58,.28);
  content: '';
}

.page-text-linked-editor > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid rgba(61,119,166,.12);
  background: linear-gradient(120deg,#edf6ff,#f6f0ff 58%,#fff4ee);
}

.page-text-linked-editor > header h2,
.page-text-linked-editor > header p {
  margin: 0;
}

.page-text-linked-editor > header h2 {
  margin-top: 4px;
  color: #2f3035;
  font-size: clamp(22px,2.4vw,34px);
}

.page-text-linked-editor > header p {
  margin-top: 6px;
  color: #687887;
  font-size: 14px;
}

.page-text-linked-editor [data-linked-close] {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: #365064;
  font-size: 28px;
  cursor: pointer;
}

.page-text-linked-head,
.page-text-linked-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) 150px;
  gap: 12px;
}

.page-text-linked-head {
  padding: 12px 24px;
  color: #526779;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.page-text-linked-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 0 24px 28px;
}

.page-text-linked-row {
  align-items: start;
}

.page-text-linked-field.page-text-editable {
  min-height: 76px;
  max-height: 260px;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid rgba(61,119,166,.18);
  border-radius: 14px;
  outline: 0 !important;
  background: #fff !important;
  box-shadow: none;
  color: #34383d;
  font: 400 15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.page-text-linked-field.page-text-editable:focus {
  border-color: #3d77a6;
  outline: 3px solid rgba(61,119,166,.13) !important;
  box-shadow: none;
}

.page-text-translation-status {
  align-self: start;
  padding: 9px 10px;
  border-radius: 999px;
  background: #eef2f5;
  color: #526779;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.page-text-translation-status[data-translation-status="current"] {background:#e8f5ed;color:#26704c}
.page-text-translation-status[data-translation-status="check"] {background:#fff3d8;color:#8a5a00}
.page-text-translation-status[data-translation-status="missing"] {background:#fdebed;color:#a82a43}

.translation-field-status {
  margin-left: 5px;
  color: #8a5a00;
  font-size: 10px;
  font-weight: 650;
}

.translation-field-status.is-current {color:#26704c}
.translation-field-status.is-missing {color:#a82a43}

.example-edit-row {
  grid-template-columns: 34px repeat(3,minmax(180px,1fr)) 105px 105px 42px;
}

.verb-example-edit-row {
  grid-template-columns: 34px 145px 165px repeat(3,minmax(190px,1fr)) 95px 105px minmax(140px,.65fr) 42px;
}

@media (max-width: 1100px) {
  .page-text-linked-editor {inset:10px 10px 104px}
  .page-text-editor-workspace {grid-template-columns:minmax(0,1fr) 280px}
  .page-text-document-scroll {padding:14px}
  .page-text-document-canvas.main {padding:14px}
  .page-text-linked-head,.page-text-linked-row {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .page-text-linked-head span {display:none}
  .page-text-translation-status {grid-column:1/-1;justify-self:start}
  .example-edit-row,.verb-example-edit-row {grid-template-columns:34px 1fr 1fr}
}

@media (max-width: 680px) {
  .page-text-linked-editor {inset:6px 6px 174px;border-radius:18px}
  .page-text-linked-editor > header {padding:15px}
  .page-text-linked-editor > header p {display:none}
  .page-text-formatbar {padding:8px 10px}
  .page-text-format-label {display:none}
  .page-text-editor-workspace {grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .page-text-document-scroll {padding:8px}
  .page-text-document-canvas.main {padding:8px;border-radius:12px}
  .page-text-table-manager {max-height:190px;padding:10px;border-top:1px solid #c8d2db;border-left:0}
  .page-text-table-manager:not([open]) {max-height:42px;overflow:hidden}
  .page-text-table-manager > summary {font-size:14px}
  .page-text-table-manager > p {display:none}
  .page-text-linked-head {display:none}
  .page-text-linked-list {padding:12px}
  .page-text-linked-row {grid-template-columns:1fr;padding-bottom:12px;border-bottom:1px solid rgba(61,119,166,.12)}
  .page-text-linked-field::before {display:block;margin-bottom:5px;color:#526779;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
  .page-text-linked-field[lang="nl"]::before {content:'Nederlands'}
  .page-text-linked-field[lang="en"]::before {content:'Engels'}
  .page-text-translation-status {grid-column:auto}
}

@media (max-width: 760px) {
  html,
  body {
    min-height: 100dvh;
    background-color: var(--cs-bg) !important;
  }

  body.content-editing-disabled .main {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body .main .searchbar,
  body.environment-development .main .searchbar {
    display: none !important;
  }

  body .main {
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .page-text-toolbar {
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    max-width: none;
    border-radius: 18px;
  }

  .page-text-toolbar.editing {
    flex-wrap: wrap;
  }

  .page-text-toolbar.editing > div {
    flex: 1 0 100%;
  }

  .page-text-toolbar.editing button {
    flex: 1 1 auto;
    padding-inline: 10px;
  }

  .page-text-saved-mark {
    display: none;
  }

  body:not(.content-editing-disabled):has(.page-text-toolbar:not([hidden])) .main {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:not(.content-editing-disabled):has(.page-text-toolbar.editing:not([hidden])) .main {
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Laat iedere rij van de poster dezelfde kleurreis maken als de titelbalk:
   blauw -> blauwpaars -> warm mauve. */
.poster-sheet-grid .sheet-card-presente,
.poster-sheet-grid .sheet-card-imperfecto,
.poster-sheet-grid .sheet-card-condicional {
  --poster-accent: 61, 119, 166;
  --poster-gradient-start: #3976a6;
  --poster-gradient-end: #507fb0;
}

.poster-sheet-grid .sheet-card-perfecto,
.poster-sheet-grid .sheet-card-pluscuamperfecto,
.poster-sheet-grid .sheet-card-gerundio {
  --poster-accent: 102, 117, 181;
  --poster-gradient-start: #507fb0;
  --poster-gradient-end: #716faf;
}

.poster-sheet-grid .sheet-card-indefinido,
.poster-sheet-grid .sheet-card-futuro,
.poster-sheet-grid .sheet-card-imperativo {
  --poster-accent: 167, 95, 131;
  --poster-gradient-start: #716faf;
  --poster-gradient-end: #a75f83;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 {
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.28), transparent 42%),
    linear-gradient(125deg, var(--poster-gradient-start), var(--poster-gradient-end)) !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card thead tr {
  background:
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.62), transparent 42%),
    linear-gradient(100deg, rgba(var(--poster-accent),.20), rgba(var(--poster-accent),.075)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -1px 0 rgba(var(--poster-accent),.22) !important;
}

/* De rechter posterkaarten mogen hun tabel niet op basis van lange inhoud
   breder maken. De kolommen verdelen altijd de beschikbare kaartbreedte. */
.poster-sheet-grid .sheet-card-perfecto table,
.poster-sheet-grid .sheet-card-pluscuamperfecto table,
.poster-sheet-grid .sheet-card-futuro table,
.poster-sheet-grid .sheet-card-condicional table,
.poster-sheet-grid .sheet-card-gerundio table,
.poster-sheet-grid .sheet-card-imperativo table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-perfecto table th:first-child,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-pluscuamperfecto table th:first-child,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-futuro table th:first-child,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-condicional table th:first-child,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-gerundio table th:first-child {
  width: 35% !important;
  min-width: 0 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table th:first-child {
  width: 24% !important;
  min-width: 0 !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table th:not(:first-child),
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table td {
  width: 38% !important;
  padding-inline: 6px !important;
  font-size: 12.5px !important;
}

.cheatsheet-poster-viewport .sheet-row-scroll-hint {
  display: none !important;
}

.cheatsheet-poster-viewport .poster-sheet-grid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 30px !important;
}

.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-perfecto table th:not(:first-child),
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-perfecto table td,
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-pluscuamperfecto table th:not(:first-child),
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-pluscuamperfecto table td,
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-futuro table th:not(:first-child),
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-futuro table td,
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-condicional table th:not(:first-child),
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-condicional table td,
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-gerundio table th:not(:first-child),
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-gerundio table td {
  padding-right: 12px !important;
  padding-left: 5px !important;
  text-align: left !important;
}

.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-imperativo table th,
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-imperativo table td,
.cheatsheet-poster-viewport .poster-sheet-grid .sheet-card-imperativo table td b {
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.12 !important;
}

/* De werkwoordposter bevat kortere, concrete vormen en kan op iPhone daarom
   op een compacter ontwerpvlak worden geschaald. Dat levert grotere letters op. */
@media (max-width: 700px) {
  .verb-conjugation-viewport > .verb-conjugation-poster {
    width: 1320px !important;
  }

  .verb-conjugation-viewport .poster-sheet-grid {
    padding-right: 24px !important;
    padding-left: 12px !important;
  }

  .verb-conjugation-viewport .poster-sheet-grid .tense-cheat-sheet-row {
    gap: 9px !important;
    margin-bottom: 9px !important;
  }

  .verb-conjugation-viewport .poster-sheet-grid .tense-cheat-card h4 {
    min-height: 58px !important;
    padding: 10px !important;
    font-size: 20px !important;
  }

  .verb-conjugation-viewport .poster-sheet-grid .tense-cheat-card h4 i {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .verb-conjugation-viewport .poster-sheet-grid .tense-cheat-card thead th,
  .verb-conjugation-viewport .poster-sheet-grid .tense-cheat-card tbody th,
  .verb-conjugation-viewport .poster-sheet-grid .tense-cheat-card tbody td {
    padding: 8px 7px !important;
    font-size: 15px !important;
  }

  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-perfecto table th:first-child,
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-pluscuamperfecto table th:first-child,
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-futuro table th:first-child,
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-condicional table th:first-child,
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-gerundio table th:first-child {
    width: 31% !important;
  }

  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-perfecto table th:not(:first-child),
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-perfecto table td,
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-pluscuamperfecto table th:not(:first-child),
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-pluscuamperfecto table td,
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-futuro table th:not(:first-child),
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-futuro table td,
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-condicional table th:not(:first-child),
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-condicional table td,
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-gerundio table th:not(:first-child),
  .verb-conjugation-viewport .poster-sheet-grid .sheet-card-gerundio table td {
    text-align: left !important;
  }
}

/* Op een telefoon is leesbaarheid de standaard. De volledige 3x3-poster
   blijft via de schakelknop beschikbaar als schaalbaar overzicht. */
.cheatsheet-mobile-zoom-hint button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(53,107,151,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #356b97;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(42,70,94,.08);
}

@media (max-width: 700px) {
  .cheatsheet-mobile-zoom-hint {
    flex-wrap: wrap;
    padding-inline: 8px;
  }

  .cheatsheet-poster-viewport.mobile-readable {
    height: auto !important;
    overflow: visible !important;
  }

  .cheatsheet-poster-viewport.mobile-readable > .cheatsheet-poster,
  .verb-conjugation-viewport.mobile-readable > .verb-conjugation-poster {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .cheatsheet-poster-intro {
    display: block !important;
    margin: 10px 0 12px !important;
    padding: 18px !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .cheatsheet-poster-intro b {
    display: block;
    font-size: 25px !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .cheatsheet-poster-intro em {
    display: block;
    margin-top: 4px;
    font-size: 14px !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid {
    width: 100% !important;
    padding: 4px 0 12px !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-sheet-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-card h4 {
    min-height: 58px !important;
    padding: 10px 12px !important;
    font-size: 19px !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-card thead th,
  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-card tbody th,
  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-card tbody td,
  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-card tbody td b {
    padding: 9px 10px !important;
    font-size: 14.5px !important;
    line-height: 1.2 !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-card tbody td b {
    padding: 0 !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .sheet-notes.sheet-notes-poster {
    width: 100% !important;
    margin: 8px 0 16px !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .sheet-notes-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .sheet-notes-table tbody th,
  .cheatsheet-poster-viewport.mobile-readable .sheet-notes-table tbody td {
    padding: 10px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }
}

/* Zoekvelden: zoeken is overal de rode actie, inclusief aanwijzing en invoer. */
.searchbar input,
.word-query-control input,
.verb-query-control input,
.example-query-control input,
input[type="search"],
input[placeholder*="Zoek"],
input[placeholder*="Search"] {
  color: #b51f3d !important;
  caret-color: #c92749 !important;
  border: 1px solid rgba(189, 41, 69, .58) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 0 0 1px rgba(189, 41, 69, .035) !important;
}

.searchbar input::placeholder,
.word-query-control input::placeholder,
.verb-query-control input::placeholder,
.example-query-control input::placeholder,
input[type="search"]::placeholder,
input[placeholder*="Zoek"]::placeholder,
input[placeholder*="Search"]::placeholder {
  color: #c92749 !important;
  opacity: .78 !important;
}

.searchbar input:focus,
.word-query-control input:focus,
.verb-query-control input:focus,
.example-query-control input:focus,
input[type="search"]:focus,
input[placeholder*="Zoek"]:focus,
input[placeholder*="Search"]:focus {
  border-color: var(--cs-search) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(189, 41, 69, .13) !important;
}

.topic-map-connection,
.relation-topic-connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid rgba(53, 107, 151, .18);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(232, 245, 255, .78), rgba(245, 240, 255, .72), rgba(255, 243, 237, .7));
  box-shadow: 0 12px 30px rgba(48, 67, 84, .08);
  backdrop-filter: blur(18px) saturate(1.15);
}

.topic-map-connection div,
.relation-topic-connection div {
  display: grid;
  gap: 4px;
}

.topic-map-connection span,
.relation-topic-connection span {
  color: var(--cs-blue);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.topic-map-connection b,
.relation-topic-connection b {
  color: #344755;
  font-size: 1rem;
}

.topic-map-connection button,
.relation-topic-connection button {
  flex: 0 0 auto;
  border: 1px solid var(--cs-blue);
  border-radius: 14px;
  background: var(--cs-blue);
  color: #fff;
  padding: 11px 16px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(53, 107, 151, .17);
}

@media (max-width: 700px) {
  .topic-map-connection,
  .relation-topic-connection {
    align-items: stretch;
    flex-direction: column;
  }

  .topic-map-connection button,
  .relation-topic-connection button {
    width: 100%;
  }
}

/* De terugdraaiknop blijft in ieder hoofdstuk rustig en herkenbaar. */
:root {
  --cs-quizlet: #4257b2;
  --cs-quizlet-active: #31449a;
}

.chapter-quizlet [data-chapter-quizlet-reset] {
  border-color: #356b97 !important;
  background: #356b97 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(66, 87, 178, .2) !important;
}

.chapter-quizlet [data-chapter-quizlet-reset]:hover,
.chapter-quizlet [data-chapter-quizlet-reset]:focus-visible {
  border-color: #274f70 !important;
  background: #274f70 !important;
  color: #fff !important;
}

.chapter-quizlet-head > div > span,
.chapter-quizlet-head > div > small {
  color: #a71930 !important;
}

/* De volgende themaverdieping is een compacte, volledig aanklikbare lijst. */
.topic-category-route-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.topic-category-route {
  width: 100%;
  min-height: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(53, 107, 151, .15) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .84) !important;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(48, 67, 84, .045) !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.topic-category-route > div {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
}

.topic-category-route > div > b {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif !important;
  font-size: 16px !important;
  font-weight: 680 !important;
}

.topic-category-route > div > i {
  color: var(--cs-blue);
  font-size: 25px;
  font-style: normal;
  line-height: 1;
}

.topic-category-route > p {
  margin: 7px 38px 0 38px !important;
  color: var(--cs-secondary) !important;
  line-height: 1.4 !important;
}

.topic-category-route-preview {
  display: block;
  min-width: 0;
  margin: 7px 38px 0;
  overflow: hidden;
  color: #527187;
  font-size: 11px;
  font-weight: 620;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-category-route:hover,
.topic-category-route:focus-visible {
  border-color: rgba(53, 107, 151, .5) !important;
  background: #fff !important;
  box-shadow: 0 9px 24px rgba(53, 107, 151, .11) !important;
  outline: none;
  transform: translateY(-1px);
}

.topic-category-route:active {
  border-color: var(--cs-blue) !important;
  background: var(--cs-blue-soft) !important;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .topic-category-route-list {
    grid-template-columns: 1fr !important;
  }

  .topic-category-route > p,
  .topic-category-route-preview {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Heldere werkwoordstijduitleg in dezelfde lichte glass-huisstijl. */
.tense-guide {
  margin: 22px 0 !important;
}

.tense-choice {
  padding: 24px 26px !important;
  border: 1px solid rgba(53, 107, 151, .18) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 88% 15%, rgba(121, 181, 255, .24), transparent 18rem),
    linear-gradient(125deg, rgba(231, 243, 255, .9), rgba(242, 237, 255, .88) 55%, rgba(255, 242, 235, .86)) !important;
  color: var(--cs-text) !important;
  box-shadow: 0 12px 34px rgba(48, 67, 84, .08) !important;
  backdrop-filter: blur(18px) saturate(1.12);
}

.tense-choice > span,
.tense-explain-grid > div > span:first-child {
  display: block !important;
  color: var(--cs-blue) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.tense-choice h3 {
  margin: 8px 0 7px !important;
  color: var(--cs-heading) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, sans-serif !important;
  font-size: clamp(23px, 2.2vw, 34px) !important;
  font-weight: 680 !important;
  letter-spacing: -.025em;
}

.tense-choice p {
  margin: 0 !important;
  color: var(--cs-secondary) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.tense-choice p b {
  color: var(--cs-blue) !important;
}

.tense-explain-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr) !important;
  gap: 12px !important;
  margin-top: 12px !important;
  border: 0 !important;
  background: transparent !important;
}

.tense-explain-grid > div {
  padding: 21px 22px !important;
  border: 1px solid rgba(53, 107, 151, .14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 8px 26px rgba(48, 67, 84, .055) !important;
  backdrop-filter: blur(16px) saturate(1.1);
}

.tense-explain-grid > div + div {
  border-left: 1px solid rgba(53, 107, 151, .14) !important;
}

.tense-explain-grid p {
  margin: 9px 0 0 !important;
  color: var(--cs-secondary) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.tense-explain-grid .spanish-inline {
  display: inline !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--cs-blue) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 720 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.tense-formation-layout {
  display: grid;
  grid-template-columns: minmax(230px, .9fr) minmax(260px, 1.1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 15px;
}

.tense-formation-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(53, 107, 151, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .76);
}

.tense-formation-table th,
.tense-formation-table td {
  padding: 8px 11px;
  border-bottom: 1px solid rgba(53, 107, 151, .09);
  text-align: left;
  font-size: 13px;
}

.tense-formation-table th {
  background: var(--cs-blue-soft);
  color: #4c6070;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tense-formation-table tr:last-child td {
  border-bottom: 0;
}

.tense-formation-steps {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(237, 244, 250, .9), rgba(248, 245, 255, .86));
}

.tense-formation-steps > span {
  display: flex !important;
  align-items: center;
  gap: 9px;
  color: #4d5b66 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.tense-formation-steps > span > b {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: var(--cs-blue);
  color: #fff;
  font-size: 11px;
}

.tense-formation-formula {
  margin-top: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(53, 107, 151, .13);
  border-radius: 11px;
  background: #fff;
  color: var(--cs-blue);
  font-size: 18px;
  font-weight: 720;
  text-align: center;
}

.tense-formation-formula i {
  padding: 0 8px;
  color: #8a929a;
  font-style: normal;
}

.tense-formation-steps small {
  color: #68757e;
  line-height: 1.45;
}

.tense-contrast {
  margin-top: 12px !important;
  padding: 17px 20px !important;
  border: 1px solid rgba(205, 168, 75, .28) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(255, 250, 229, .88), rgba(255, 246, 239, .84)) !important;
  box-shadow: 0 7px 22px rgba(48, 67, 84, .045);
}

.tense-register-link {
  margin-top: 28px !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(53, 107, 151, .16) !important;
  border-left: 1px solid rgba(53, 107, 151, .16) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(121, 181, 255, .2), transparent 15rem),
    linear-gradient(125deg, rgba(237, 246, 253, .9), rgba(246, 242, 255, .84), rgba(255, 246, 241, .82)) !important;
  box-shadow: 0 10px 30px rgba(48, 67, 84, .07) !important;
  backdrop-filter: blur(18px) saturate(1.1);
}

.tense-register-link h3 {
  color: var(--cs-heading) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, sans-serif !important;
  font-size: 20px !important;
  font-weight: 680 !important;
}

.tense-register-link p {
  color: var(--cs-secondary) !important;
}

.tense-register-link .action-btn {
  border-color: var(--cs-blue) !important;
  border-radius: 13px !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(53, 107, 151, .18) !important;
}

.tense-register-link .action-btn:hover,
.tense-register-link .action-btn:focus-visible {
  background: #2d5d83 !important;
}

@media (max-width: 800px) {
  .tense-explain-grid,
  .tense-formation-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Gecombineerde werkplek: Leren & oefenen */
.learning-workspace{display:grid;gap:18px;padding-bottom:36px}
.learning-workspace-hero{display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;gap:28px;padding:31px 34px;border:1px solid rgba(255,255,255,.88);border-radius:26px;background:linear-gradient(120deg,rgba(221,238,255,.9),rgba(237,231,255,.78) 52%,rgba(255,239,232,.74));box-shadow:0 18px 44px rgba(47,62,87,.09);backdrop-filter:blur(22px) saturate(145%)}
.learning-workspace-hero .eyebrow{color:#5e62c9}
.learning-workspace-hero h2{margin:5px 0 8px;color:#292b31;font:700 clamp(34px,4vw,56px)/1.05 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.045em}
.learning-workspace-hero p{max-width:850px;margin:0;color:#5e6671;font-size:18px;line-height:1.55}
.learning-workspace-hero aside{display:grid;place-items:center;padding:17px 14px;border:1px solid rgba(255,255,255,.88);border-radius:19px;background:rgba(255,255,255,.54);text-align:center}
.learning-workspace-hero aside span{color:#6a707a;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.learning-workspace-hero aside b{margin:2px 0;color:#356b97;font-size:29px;letter-spacing:-.035em}
.learning-workspace-hero aside small{color:#6f7680;font-size:12px}
.learning-workspace-continue,.learning-workspace-row{width:100%;box-sizing:border-box;font:inherit}
.learning-workspace-continue{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;padding:15px 18px;border:1px solid rgba(102,130,151,.12);border-radius:18px;background:rgba(255,255,255,.82);color:#33414b;text-align:left;cursor:pointer;box-shadow:0 8px 26px rgba(45,53,68,.055)}
.learning-workspace-continue:hover{background:#fff;box-shadow:0 12px 28px rgba(45,53,68,.1);transform:translateY(-1px)}
.learning-workspace-continue>span:nth-child(2){display:grid;gap:2px}
.learning-workspace-continue em,.learning-workspace-section>header>span{color:#c52545;font-size:10px;font-style:normal;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.learning-workspace-continue b{color:#28323a;font-size:18px}
.learning-workspace-continue small{color:#68727b;font-size:13px}
.learning-workspace-continue strong{color:#356b97;font-size:14px;white-space:nowrap}
.learning-workspace-section{display:grid;gap:10px;padding:20px 21px;border:1px solid rgba(255,255,255,.86);border-radius:23px;background:rgba(255,255,255,.5);box-shadow:0 13px 34px rgba(46,56,75,.055);backdrop-filter:blur(20px) saturate(135%)}
.learning-workspace-section>header{display:flex;align-items:baseline;gap:13px;padding:0 3px 4px}
.learning-workspace-section>header h3{margin:0;color:#30353b;font-size:22px;letter-spacing:-.025em}
.learning-workspace-list{display:grid;gap:8px}
.learning-workspace-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:72px;padding:11px 15px;border:1px solid rgba(99,123,141,.08);border-radius:16px;color:#33414b;text-align:left;overflow:hidden}
button.learning-workspace-row{cursor:pointer}
.learning-workspace-row:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,var(--row-tint,rgba(223,238,250,.72)),rgba(255,255,255,.76) 64%);pointer-events:none}
.learning-workspace-row>*{position:relative;z-index:1}
.learning-workspace-row.row-blue,
.learning-workspace-row.row-lilac,
.learning-workspace-row.row-sand,
.learning-workspace-row.row-green{--row-tint:rgba(232,242,249,.82);--row-accent:#39739d}
button.learning-workspace-row:hover{border-color:rgba(53,107,151,.18);box-shadow:0 9px 24px rgba(47,61,80,.085);transform:translateX(2px)}
.learning-workspace-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.75);border-radius:13px;background:rgba(255,255,255,.64);color:var(--row-accent,#39739d);font:750 16px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.learning-workspace-row>span:nth-child(2){display:grid;gap:3px}
.learning-workspace-row b{color:#303940;font-size:17px;letter-spacing:-.012em}
.learning-workspace-row small{color:#68727b;font-size:13px;line-height:1.4}
.learning-workspace-row>strong{color:var(--row-accent,#39739d);font-size:27px;font-weight:450}
.learning-workspace-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.learning-workspace-actions button{border:1px solid rgba(53,107,151,.15);border-radius:999px;background:rgba(255,255,255,.68);color:#356b97;padding:8px 12px;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer}
.learning-workspace-actions button:hover{background:#356b97;color:#fff;border-color:#356b97}

/* Niveau en zoektekst horen zichtbaar bij dezelfde rode zoekactie. */
.searchbar .search-level-select{border:1px solid rgba(194,35,67,.72)!important;color:#b51f3d!important;background-color:rgba(255,255,255,.9)!important}
.searchbar .search-level-select:hover,.searchbar .search-level-select:focus-visible{border-color:#b51f3d!important;outline:2px solid rgba(194,35,67,.11)!important}

@media(max-width:760px){
 .learning-workspace{gap:12px}
 .learning-workspace-hero{grid-template-columns:1fr;padding:24px 21px;border-radius:20px}
 .learning-workspace-hero h2{font-size:34px}
 .learning-workspace-hero p{font-size:15px}
 .learning-workspace-hero aside{grid-template-columns:auto auto 1fr;place-items:center start;gap:9px;padding:12px 14px;text-align:left}
 .learning-workspace-hero aside b{font-size:22px}
 .learning-workspace-continue{grid-template-columns:42px 1fr;padding:13px}
 .learning-workspace-continue>strong{grid-column:2;justify-self:start}
 .learning-workspace-section{padding:14px 12px;border-radius:18px}
 .learning-workspace-section>header{display:grid;gap:3px}
 .learning-workspace-section>header h3{font-size:19px}
 .learning-workspace-row{grid-template-columns:42px minmax(0,1fr) auto;gap:11px;min-height:68px;padding:10px}
 .learning-workspace-icon{width:38px;height:38px;border-radius:12px;font-size:14px}
 .learning-workspace-row b{font-size:16px}
 .learning-workspace-row small{font-size:12px}
 .learning-workspace-split{grid-template-columns:42px minmax(0,1fr)}
 .learning-workspace-split .learning-workspace-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap;margin-top:2px}
 .learning-workspace-actions button{padding:7px 10px}
}

/* Zoekbalk als één rustige glass-bediening. */
body .main .searchbar{
 gap:7px;
 padding:6px;
 border:1px solid rgba(194,35,67,.28)!important;
 border-radius:20px!important;
 background:rgba(255,255,255,.68)!important;
 box-shadow:0 12px 34px rgba(48,60,82,.085)!important;
}
body .main .searchbar input.search-input-accent{
 min-height:50px;
 padding:0 17px!important;
 border:0!important;
 border-radius:14px!important;
 background:rgba(255,255,255,.5)!important;
 box-shadow:none!important;
 color:#394751!important;
 font-size:17px!important;
}
body .main .searchbar input.search-input-accent::placeholder{color:rgba(181,31,61,.68)!important}
body .main .searchbar input.search-input-accent:focus{background:#fff!important;box-shadow:inset 0 0 0 2px rgba(194,35,67,.12)!important}
body .main .searchbar .search-level-select{
 min-width:96px;
 min-height:48px;
 margin:1px 0;
 border:1px solid rgba(194,35,67,.52)!important;
 border-radius:14px!important;
 background-color:rgba(255,255,255,.78)!important;
 box-shadow:none!important;
}
body .main .searchbar button{
 min-width:126px;
 min-height:48px;
 margin:1px;
 border-radius:14px!important;
 box-shadow:0 7px 17px rgba(194,35,67,.18)!important;
}

/* Pagina's met een volwaardige eigen zoekfunctie tonen niet ook de algemene zoekbalk. */
body.local-search-page .main > .shell > .searchbar,
body.local-search-page .mobile-search-button{
 display:none!important;
}

/* Compacte hoofdstukbediening en niveau-navigatie. */
.study-breadcrumb{margin:0 2px 9px;color:#6c747d;font-size:12px}
.study-toolbar{
 gap:12px;
 margin-bottom:12px;
 padding:8px 10px;
 border:1px solid rgba(255,255,255,.82);
 border-radius:17px;
 background:rgba(255,255,255,.6);
 box-shadow:0 8px 24px rgba(47,61,80,.055);
 backdrop-filter:blur(18px) saturate(135%);
}
.study-toolbar>.back{
 min-height:39px;
 margin:0;
 padding:8px 13px!important;
 border:0!important;
 border-radius:12px!important;
 background:rgba(224,237,247,.76)!important;
 color:#356b97!important;
 font-weight:800;
}
.study-toolbar>div{gap:7px}
.study-toolbar>div button{
 min-height:39px;
 padding:8px 13px!important;
 border:1px solid rgba(53,107,151,.16)!important;
 border-radius:12px!important;
 background:rgba(255,255,255,.76)!important;
 color:#4a5964!important;
 font-size:13px;
 font-weight:750;
}
.study-toolbar>div button:hover{background:#fff!important;border-color:rgba(53,107,151,.35)!important;color:#356b97!important}
.study-level-chapters{
 margin-bottom:16px!important;
 padding:9px 11px!important;
 border:1px solid rgba(215,199,168,.68)!important;
 border-radius:17px!important;
 background:linear-gradient(105deg,rgba(250,245,236,.78),rgba(255,255,255,.76))!important;
 box-shadow:0 7px 22px rgba(48,58,72,.045)!important;
}
.study-level-chapters>span{
 min-width:44px;
 height:38px;
 border-radius:12px!important;
 background:#356b97!important;
 color:#fff!important;
}
.study-level-chapters>div{gap:6px!important;scrollbar-width:thin}
.study-level-chapters button{
 min-width:70px;
 height:38px;
 padding:0 11px!important;
 border-color:rgba(170,151,117,.3)!important;
 border-radius:12px!important;
 background:rgba(255,255,255,.68)!important;
 color:#5b6670!important;
 font-size:12px!important;
}
.study-level-chapters button.active{
 border-color:#356b97!important;
 background:#356b97!important;
 color:#fff!important;
 box-shadow:0 5px 13px rgba(53,107,151,.18)!important;
}
@media(max-width:700px){
 body .main .searchbar{gap:4px;padding:4px;border-radius:18px!important}
 body .main .searchbar input.search-input-accent{height:50px!important;min-height:50px;padding:0 11px!important;font-size:15px!important}
 body .main .searchbar .search-level-select{width:66px!important;min-width:66px!important;min-height:46px!important;padding-left:7px!important;font-size:11px!important}
 body .main .searchbar button{min-width:88px!important;min-height:46px!important;padding:0 12px!important}
 .study-toolbar{align-items:stretch;padding:7px}
 .study-toolbar>div{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .study-level-chapters{border-radius:15px!important}
}

/* Relatiekaarten: ook beheerbare knoptekst blijft binnen de beschikbare kolom.
   De teksteditor plaatst rond elke knoptekst een span; die mag niet nogmaals de
   volledige knopbreedte plus zijn eigen boxmodel opeisen. */
.relation-toolbar,
.relation-toolbar > *,
.relation-toolbar .relation-categorybar,
.relation-toolbar .relation-categorybar button {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.relation-toolbar {
  inline-size: 100% !important;
  overflow-x: clip !important;
  contain: inline-size;
}
.relation-toolbar .relation-categorybar {
  inline-size: 100% !important;
  overflow-x: hidden !important;
  contain: inline-size;
}
.relation-toolbar .relation-categorybar button {
  inline-size: 100% !important;
  overflow: hidden !important;
}
.relation-toolbar .relation-categorybar button > span[data-page-text-key] {
  box-sizing: border-box !important;
  display: block !important;
  inline-size: auto !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}

/* De lijstweergave gebruikte vier vaste kolommen. Naast het zijmenu konden die
   samen breder worden dan de hoofdinhoud, vooral als 'Lijst' was onthouden. */
body.relation-maps-page,
body.relation-maps-page .app,
body.relation-maps-page .main,
body.relation-maps-page .shell,
body.relation-maps-page #content,
body.relation-maps-page .relation-map-gallery,
body.relation-maps-page .relation-map-card,
body.relation-maps-page .relation-map-card > * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body.relation-maps-page,
body.relation-maps-page .app,
body.relation-maps-page .main,
body.relation-maps-page .shell,
body.relation-maps-page #content {
  overflow-x: clip !important;
}
body.relation-maps-page .relation-map-gallery.list-view .relation-map-card {
  grid-template-columns:
    minmax(100px, .65fr)
    minmax(130px, .9fr)
    minmax(180px, 1.4fr)
    minmax(130px, .85fr) !important;
}
body.relation-maps-page .relation-map-card > span[data-page-text-key] {
  display: block !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
@media(max-width:1100px){
  body.relation-maps-page .relation-map-gallery.list-view .relation-map-card {
    grid-template-columns:minmax(105px,.4fr) minmax(0,1fr) !important;
  }
}
@media(max-width:620px){
  body.relation-maps-page .relation-map-gallery.list-view .relation-map-card {
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* Cheatsheet: dezelfde lichte glass-gradient als het grammaticaoverzicht. */
.cheatsheet-visual-head.page-intro-hero,
.tense-cheatsheet-standalone.cheatsheet-poster{
  border:1px solid rgba(255,255,255,.8)!important;
  background:linear-gradient(125deg,rgba(220,238,255,.9) 0%,rgba(238,232,255,.86) 58%,rgba(255,240,232,.9) 100%)!important;
  color:var(--cs-text)!important;
  box-shadow:var(--cs-shadow)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%)!important;
  backdrop-filter:blur(26px) saturate(145%)!important;
}
.tense-cheatsheet-standalone .cheatsheet-poster-intro{
  border:1px solid rgba(255,255,255,.86)!important;
  background:linear-gradient(125deg,rgba(220,238,255,.82) 0%,rgba(238,232,255,.78) 58%,rgba(255,240,232,.84) 100%)!important;
  box-shadow:0 10px 30px rgba(55,71,89,.08)!important;
}
.tense-cheatsheet-standalone .cheatsheet-poster-intro b{color:var(--cs-heading)!important}
.tense-cheatsheet-standalone .cheatsheet-poster-intro em{color:var(--cs-secondary)!important}
.sheet-card-deviation{
  min-height:52px;
  margin:0!important;
  padding:9px 10px!important;
  border-top:1px solid rgba(70,83,96,.1)!important;
  background:rgba(231,243,251,.58)!important;
  color:#5c6670!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
.sheet-card-deviation b{color:#356b97!important;font-size:inherit!important}
@media(max-width:700px){.sheet-card-deviation{min-height:0;font-size:10px!important}}

/* Woorden krijgen een directe route terug naar de ruimte waarin ze thuishoren. */
.word-house-connections{
 position:relative;
 display:grid;
 grid-template-columns:54px minmax(240px,1fr) auto;
 align-items:center;
 gap:16px;
 margin:16px 0 25px;
 padding:19px 21px;
 overflow:hidden;
 border:2px solid rgba(53,107,151,.48);
 border-radius:22px;
 background:linear-gradient(125deg,rgba(218,238,249,.97),rgba(235,235,255,.94),rgba(255,240,235,.88));
 box-shadow:0 17px 38px rgba(45,71,95,.14),inset 0 1px 0 rgba(255,255,255,.9);
}
.word-house-connections::before{
 content:"";
 position:absolute;
 inset:0 auto 0 0;
 width:7px;
 background:linear-gradient(180deg,#356b97,#5d83b9);
}
.word-house-connection-icon{
 display:grid;
 place-items:center;
 width:48px;
 height:48px;
 border-radius:15px;
 background:linear-gradient(145deg,#356b97,#4e82a7);
 color:#fff;
 box-shadow:0 9px 21px rgba(53,107,151,.25);
 font-size:30px;
 font-weight:800;
}
.word-house-connection-copy{display:grid;gap:3px}
.word-house-connection-copy span{
 color:#527488;
 font-size:11px;
 font-weight:900;
 letter-spacing:.15em;
 text-transform:uppercase;
}
.word-house-connection-copy b{color:#263e4d;font-size:19px;line-height:1.25}
.word-house-connection-copy b em{color:#356b97;font-style:normal}
.word-house-connection-copy small{color:#5d6d77;font-size:13px;line-height:1.35}
.word-house-connection-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
.word-house-connection-actions button{
 min-height:48px;
 padding:0 17px;
 border:0;
 border-radius:15px;
 color:#fff;
 background:linear-gradient(135deg,#477da3,#396c92);
 box-shadow:0 9px 20px rgba(55,105,143,.24);
 font:inherit;
 font-size:14px;
 font-weight:800;
 cursor:pointer;
}
.word-house-connection-actions button:hover{transform:translateY(-1px);background:linear-gradient(135deg,#3c7198,#2f6389)}
.word-house-connection-actions button i{margin-left:9px;font-style:normal}
.word-space-filter{
 display:grid;
 gap:5px;
 min-width:220px;
}
.word-space-filter>span{
 color:#60717c;
 font-size:11px;
 font-weight:800;
 letter-spacing:.08em;
 text-transform:uppercase;
}
.words-search .word-space-filter select{
 width:100%;
 border-color:rgba(63,116,154,.28);
 background:rgba(239,247,251,.92);
}
@media(max-width:760px){
 .word-house-connections{grid-template-columns:46px 1fr;align-items:start;padding:16px}
 .word-house-connection-icon{width:43px;height:43px;border-radius:13px;font-size:26px}
 .word-house-connection-copy b{font-size:17px}
 .word-house-connection-actions{grid-column:1/-1;justify-content:stretch}
 .word-house-connection-actions button{flex:1 1 145px}
 .word-space-filter{min-width:100%}
}

/* Op een iPhone staan alle woordfilters volledig binnen het scherm. */
@media(max-width:700px){
 .mobile-header .mobile-search-button{color:var(--cs-search,#c92749)!important}
 body.mobile-search-open .mobile-search-button{display:flex!important;background:var(--cs-navy,#17324d)!important;color:#fff!important}
 body.mobile-search-open .main>.shell>.searchbar,
 body.local-search-page.mobile-search-open .main>.shell>.searchbar,
 body.environment-development.mobile-search-open .main>.shell>.searchbar{
  display:flex!important;
  position:fixed!important;
  top:62px!important;
  left:10px!important;
  right:10px!important;
  z-index:5200!important;
  width:auto!important;
  margin:0!important;
 }
 body.environment-development.mobile-search-open .main>.shell>.searchbar{top:94px!important}
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 .app,.main,.shell,.content{max-width:100%;min-width:0;box-sizing:border-box}
 .login-screen,.login-shell,.login-card{max-width:100%;box-sizing:border-box}
 .login-card input{font-size:16px!important}
 .words-toolbar{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
 .words-search{width:100%;min-width:0;grid-template-columns:minmax(0,1fr)!important}
 .words-search>*{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
 .word-query-control{width:100%;min-width:0;grid-template-columns:minmax(0,1fr) minmax(78px,92px)}
 .word-query-control input{min-width:0;width:100%}
 .word-query-control .word-search-submit{min-width:0;width:100%;padding-inline:8px}
 .word-summary.word-summary-inline{width:100%;min-width:0}
}

.admin-word-review-card{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 margin:0 0 24px;
 padding:18px 20px;
 border:1px solid #e2d7b4;
 border-radius:16px;
 background:#fffaf0;
}
.admin-word-review-card h3{margin:3px 0 5px}
.admin-word-review-card p{margin:0;color:var(--muted)}
.vocabulary-coverage{display:grid;grid-template-columns:minmax(300px,1fr) minmax(510px,1.35fr);align-items:start;gap:18px 28px}
.vocabulary-coverage-intro{min-width:0}
.vocabulary-coverage-stats{display:grid;grid-template-columns:repeat(4,minmax(104px,1fr));gap:10px;min-width:0}
.vocabulary-coverage-stats .dev-kpi{min-width:0;margin:0;padding:14px 12px;text-align:center}
.vocabulary-coverage-stats .dev-kpi b{font-size:25px;line-height:1.05;white-space:nowrap}
.vocabulary-coverage-stats .dev-kpi span{display:block;margin-top:5px;line-height:1.25}
.admin-word-review-card .vocabulary-coverage-meta{grid-column:1/-1;padding-top:13px;border-top:1px solid #eadfbe;font-size:14px;line-height:1.5}
.vocabulary-coverage-meta i{padding:0 7px;font-style:normal;color:#a28d58}
@media(max-width:700px){
 .admin-word-review-card{align-items:stretch;flex-direction:column}
 .admin-word-review-card .action-btn{width:100%}
 .vocabulary-coverage{display:flex;gap:16px}
 .vocabulary-coverage-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vocabulary-coverage-meta{display:flex;flex-direction:column;gap:4px}
 .vocabulary-coverage-meta i{display:none}
}

/* Een zoekresultaat laat meteen zien in welke relatiekaart het woord thuishoort. */
.search-relation-suggestions{
 position:relative;
 display:grid;
 grid-template-columns:minmax(210px,.7fr) minmax(0,2fr);
 gap:18px;
 margin:18px 0 24px;
 padding:20px 20px 20px 24px;
 overflow:hidden;
 border:2px solid rgba(53,107,151,.44);
 border-radius:22px;
 background:linear-gradient(125deg,rgba(218,238,249,.97),rgba(235,235,255,.94),rgba(255,240,235,.88));
 box-shadow:0 17px 38px rgba(45,71,95,.14),inset 0 1px 0 rgba(255,255,255,.9);
}
.search-relation-suggestions::before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:linear-gradient(180deg,#356b97,#5d83b9)}
.search-relation-heading{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:3px 5px}
.search-relation-heading span{
 color:#527488;
 font-size:11px;
 font-weight:850;
 letter-spacing:.13em;
 text-transform:uppercase;
}
.search-relation-heading b{color:#263e4d;font-size:20px;line-height:1.22}
.search-relation-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.search-relation-options button{
 display:grid;
 gap:3px;
 min-height:82px;
 padding:12px 14px;
 border:1px solid rgba(255,255,255,.42);
 border-radius:15px;
 background:linear-gradient(135deg,#477da3,#396c92);
 color:#fff;
 text-align:left;
 box-shadow:0 9px 20px rgba(55,105,143,.23);
 cursor:pointer;
}
.search-relation-options button:hover{border-color:rgba(255,255,255,.68);background:linear-gradient(135deg,#3c7198,#2f6389);transform:translateY(-1px)}
.search-relation-options small{color:rgba(255,255,255,.72);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.search-relation-options b{font-size:16px}
.search-relation-options span{color:rgba(255,255,255,.9);font-size:12px}
.search-relation-options i{float:right;color:#fff;font-style:normal;font-weight:900}
@media(max-width:760px){
 .search-relation-suggestions{grid-template-columns:1fr;padding:14px}
 .search-relation-options{display:flex;overflow-x:auto;scroll-snap-type:x proximity}
 .search-relation-options button{flex:0 0 78%;scroll-snap-align:start}
}

/* Flashcards — dezelfde lichte glass-vormtaal als navigatie, zoekbalk en leeromgeving. */
.flashcards-hero{
  border:1px solid rgba(255,255,255,.78)!important;
  background:
    radial-gradient(circle at 92% 12%,rgba(176,211,255,.3),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.62),rgba(245,242,255,.48))!important;
  box-shadow:0 16px 42px rgba(37,45,65,.075)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  backdrop-filter:blur(26px) saturate(145%);
}
.flashcards-hero h2{color:var(--cs-text)!important}
.flashcards-hero p{color:var(--cs-secondary)!important}
.flashcards-hero .eyebrow{color:#39779f!important}
.flashcards-hero aside{
  border:1px solid rgba(255,255,255,.82)!important;
  background:rgba(255,255,255,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 10px 28px rgba(48,62,83,.055);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
.flashcards-hero aside b{color:#39779f!important}
.flashcards-hero aside span{color:var(--cs-secondary)!important}
.flashcard-builder-step{
  border:1px solid rgba(255,255,255,.78)!important;
  background:rgba(255,255,255,.56)!important;
  box-shadow:0 12px 34px rgba(37,45,65,.055)!important;
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  backdrop-filter:blur(24px) saturate(145%);
}
.flashcard-builder-step>span{
  border:1px solid rgba(255,255,255,.75);
  background:rgba(232,242,248,.84)!important;
  color:#39779f!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.flashcard-builder-step h3{color:var(--cs-text)!important}
.flashcard-fields select{
  border:1px solid rgba(29,29,31,.07)!important;
  background:rgba(255,255,255,.62)!important;
  color:var(--cs-text)!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.flashcard-type-grid label{
  border:1px solid rgba(255,255,255,.8)!important;
  background:rgba(255,255,255,.43)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  backdrop-filter:blur(14px) saturate(135%);
}
.flashcard-type-grid label:hover{background:rgba(255,255,255,.66)!important}
.flashcard-type-grid label:has(input:checked){
  border-color:rgba(57,119,159,.3)!important;
  background:rgba(232,242,248,.74)!important;
  box-shadow:inset 0 0 0 1px rgba(57,119,159,.07),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
.flashcard-type-grid input,.flashcard-check input{accent-color:#39779f!important}
.flashcard-type-grid b{color:var(--cs-text)!important}
.flashcard-type-grid small{color:var(--cs-secondary)!important}
.flashcard-start{
  border:1px solid rgba(255,255,255,.3)!important;
  background:linear-gradient(135deg,#39779f,#4d89af)!important;
  box-shadow:0 10px 26px rgba(57,119,159,.2)!important;
}
.flashcard-start:hover{background:linear-gradient(135deg,#326d93,#437fa5)!important}
.flashcard-player,.flashcard-result,.flashcard-empty{
  border:1px solid rgba(255,255,255,.8)!important;
  background:rgba(255,255,255,.6)!important;
  box-shadow:0 18px 48px rgba(37,45,65,.08)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  backdrop-filter:blur(26px) saturate(145%);
}
.flashcard-main{
  border:1px solid rgba(255,255,255,.82)!important;
  background:rgba(255,255,255,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.flashcard-main.revealed{background:rgba(242,237,255,.62)!important}
.flashcard-progress i{background:#39779f!important}
.flashcard-preview-toggle{
  border:1px solid rgba(255,255,255,.82)!important;
  background:rgba(255,255,255,.52)!important;
  color:#39779f!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 26px rgba(37,45,65,.05);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
.flashcard-preview-toggle:hover,.flashcard-preview-toggle.active{background:rgba(232,242,248,.72)!important}
.flashcard-preview{
  border:1px solid rgba(255,255,255,.8)!important;
  background:rgba(255,255,255,.5)!important;
  box-shadow:0 16px 42px rgba(37,45,65,.065)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  backdrop-filter:blur(26px) saturate(145%);
}
.flashcard-preview header>b{background:rgba(232,242,248,.78)!important;color:#39779f!important}
.flashcard-preview-directions button{
  border:1px solid rgba(255,255,255,.82)!important;
  background:rgba(255,255,255,.58)!important;
  color:#526b7b!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.flashcard-preview-directions button.active{border-color:#39779f!important;background:#39779f!important;color:#fff!important}
.flashcard-preview-front,.flashcard-preview-back{
  border:1px solid rgba(255,255,255,.82)!important;
  background:rgba(255,255,255,.56)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 8px 22px rgba(37,45,65,.045);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
}
.flashcard-preview-back{background:rgba(238,244,248,.7)!important}
.flashcard-relation-choice{
  border:1px solid rgba(255,255,255,.82)!important;
  background:rgba(232,242,248,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
.flashcard-relation-choice select{border:1px solid rgba(255,255,255,.82)!important;background:rgba(255,255,255,.65)!important}

/* Compacte bediening boven de inhoud van een relatiekaart. */
#content > .back{
  margin-bottom:10px;
}
.generic-map-header{
  align-items:center;
  gap:16px;
  margin-bottom:10px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:18px;
  background:rgba(255,255,255,.58);
  box-shadow:0 9px 30px rgba(37,45,65,.055);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.generic-map-header > div:first-child{flex:1 1 auto}
.generic-map-header h2{
  margin:3px 0 4px;
  font-size:clamp(2rem,3vw,2.75rem);
  line-height:1.05;
}
.generic-map-header p{
  max-width:900px;
  line-height:1.35;
}
.generic-map-header > .relation-map-show-all{
  min-height:42px;
  padding:9px 14px!important;
  border-radius:12px!important;
  font-size:.95rem;
}
.relation-topic-connection{
  min-height:0;
  margin:10px 0;
  padding:10px 14px;
  border-radius:15px;
}
.generic-map-header > .relation-topic-connection{
  flex:0 1 590px;
  margin:0;
  padding:5px 0 5px 16px;
  border:0;
  border-left:1px solid rgba(53,107,151,.2);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.relation-topic-connection div{
  gap:1px;
}
.relation-topic-connection span{
  font-size:.68rem;
}
.relation-topic-connection b{
  font-size:.92rem;
}
.relation-topic-connection button{
  padding:8px 12px;
  border-radius:11px;
  font-size:.9rem;
}
.relation-level-controls{
  gap:8px 18px;
  margin-bottom:10px;
  padding:8px 10px!important;
  border-radius:15px!important;
}
.relation-level-controls > div{
  gap:7px;
}
.relation-level-controls b{
  font-size:.68rem;
}
.relation-level-buttons{
  gap:4px;
}
.relation-level-buttons button{
  min-height:34px;
  padding:6px 9px;
  border-radius:9px!important;
  font-size:.88rem;
}
.generic-filterbar{
  gap:4px;
  margin-bottom:10px;
  padding:5px!important;
  border-radius:15px!important;
}
.generic-filterbar button{
  min-height:34px;
  padding:6px 10px;
  font-size:.88rem;
}
.generic-map-node.root{
  width:180px;
  min-height:104px;
  padding:8px!important;
  border:1px solid #eadbd2!important;
  border-left:7px solid #bd4d38!important;
  background:#fff7f1!important;
  color:#292b2f!important;
  box-shadow:0 7px 20px rgba(94,69,58,.11)!important;
}
.generic-map-node.root.filtered-root{
  min-height:76px;
  border:1px solid #eadbd2!important;
  border-left:7px solid #bd4d38!important;
  background:#fff7f1!important;
}
.generic-map-node.group{
  border-color:#c7ddea!important;
  border-top-color:#4f86aa!important;
  background:#edf6fb!important;
  box-shadow:0 6px 18px rgba(53,107,151,.11)!important;
}
.generic-map-node.group:hover,
.generic-map-node.group.focused{
  border-color:#4f86aa!important;
  background:#deeff8!important;
  box-shadow:0 10px 24px rgba(53,107,151,.19)!important;
}
.generic-map-node.group .generic-card-front{
  color:#274f6b!important;
}
.generic-root-focus{
  display:block;
  width:100%;
  padding:2px 4px 7px;
  border:0;
  background:transparent;
  color:#292b2f;
  cursor:pointer;
}
.generic-root-focus .generic-card-front,
.generic-root-focus .generic-card-back{
  color:#292b2f!important;
}
.generic-root-focus .generic-card-back{color:#687078!important}
.generic-root-flashcards{
  width:100%;
  min-height:30px;
  padding:5px 7px;
  border:1px solid var(--cs-quizlet);
  border-radius:8px;
  background:var(--cs-quizlet);
  color:#fff;
  font:inherit;
  font-size:.72rem;
  font-weight:750;
  line-height:1.15;
  cursor:pointer;
}
.generic-root-flashcards:hover{
  border-color:var(--cs-quizlet-active);
  background:var(--cs-quizlet-active);
}
@media(max-width:700px){
  .generic-map-header{align-items:stretch;flex-direction:column;padding:11px}
  .generic-map-header > .relation-topic-connection{flex:auto;padding:8px 0 0;border-left:0;border-top:1px solid rgba(53,107,151,.2)}
  .relation-topic-connection{gap:8px;padding:10px}
  .relation-topic-connection button{width:100%;min-height:38px}
  .relation-level-controls{padding:8px 7px!important}
}

/* Cheatsheetinhoud: lichte glass-koppen en een compleet afwijkingenoverzicht. */
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card{
  border-color:rgba(255,255,255,.9)!important;
  background:rgba(255,255,255,.68)!important;
  box-shadow:0 8px 24px rgba(55,71,89,.075)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4,
.sheet-notes.sheet-notes-poster > h3{
  border-bottom:1px solid rgba(255,255,255,.82)!important;
  background:linear-gradient(125deg,rgba(220,238,255,.94) 0%,rgba(238,232,255,.9) 58%,rgba(255,240,232,.94) 100%)!important;
  color:var(--cs-heading)!important;
  box-shadow:none!important;
}
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 i{
  background:rgba(255,255,255,.72)!important;
  color:#356b97!important;
  box-shadow:inset 0 0 0 1px rgba(53,107,151,.13)!important;
}
.sheet-notes-intro{
  margin:0!important;
  padding:12px 18px 13px!important;
  border-bottom:1px solid rgba(70,83,96,.1)!important;
  background:linear-gradient(110deg,rgba(220,238,255,.38),rgba(238,232,255,.3) 58%,rgba(255,240,232,.38))!important;
  color:#4f5d68!important;
  font-size:14px!important;
  line-height:1.5!important;
}
.sheet-notes-table{min-width:980px!important}
.sheet-notes-table thead th{
  background:rgba(220,238,255,.72)!important;
  color:#344f63!important;
}
.sheet-notes-table thead th:first-child,
.sheet-notes-table tbody th{width:190px!important}
.sheet-notes-table thead th:nth-child(2){width:37%!important}
.sheet-notes-table .sheet-irregular-examples{
  color:#b14936!important;
  font-weight:700!important;
}
.sheet-irregular-example-list{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start}
.sheet-irregular-example-list>span{display:grid;grid-template-rows:auto auto;min-width:120px;line-height:1.25}
.sheet-irregular-example-list b{color:#b14936!important;font-size:12px;font-weight:800}
.sheet-irregular-example-list small{display:block;margin-top:3px;color:#39805a!important;font-size:10px;font-weight:750;line-height:1.25}
.sheet-pattern-summary{padding:18px;background:rgba(255,255,255,.55)}
.sheet-pattern-summary>h3{margin:0 0 13px;color:var(--cs-heading);font-size:20px}
.sheet-pattern-summary>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.sheet-pattern-summary article{
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(231,243,251,.78),rgba(255,255,255,.7));
  box-shadow:0 5px 16px rgba(55,71,89,.055);
}
.sheet-pattern-summary article:last-child:nth-child(odd){grid-column:1/-1}
.sheet-pattern-summary h4{margin:0 0 7px;color:#356b97;font-size:15px}
.sheet-pattern-summary p{margin:0;color:#4f5e68;font-size:12px;line-height:1.55}
@media(max-width:700px){
  .sheet-notes-intro{padding:14px!important;font-size:12.5px!important}
  .sheet-pattern-summary{padding:14px}
  .sheet-pattern-summary>div{grid-template-columns:1fr}
  .sheet-pattern-summary article:last-child:nth-child(odd){grid-column:auto}
}

/* Werkwoordstijd en patroon vormen samen één rustige kolom. */
.sheet-notes-table.sheet-notes-table-compact{min-width:680px!important}
.sheet-notes-table.sheet-notes-table-compact thead th:first-child{width:46%!important}
.sheet-notes-table.sheet-notes-table-compact tbody th{width:auto!important;background:#edf4fa!important}
.sheet-notes-table.sheet-notes-table-compact tbody th strong{
  display:block;
  margin-bottom:7px;
  color:#315f83;
  font-size:14px;
  font-weight:850;
  line-height:1.25;
}
.sheet-notes-table.sheet-notes-table-compact tbody th span{
  display:block;
  color:#52616d;
  font-weight:500;
  line-height:1.48;
}
@media(max-width:700px){
  .sheet-notes-table.sheet-notes-table-compact{min-width:0!important;table-layout:auto!important}
  .sheet-notes-table.sheet-notes-table-compact thead{display:none}
  .sheet-notes-table.sheet-notes-table-compact tbody,
  .sheet-notes-table.sheet-notes-table-compact tr,
  .sheet-notes-table.sheet-notes-table-compact th,
  .sheet-notes-table.sheet-notes-table-compact td{display:block;width:100%!important}
  .sheet-notes-table.sheet-notes-table-compact tr{border-bottom:1px solid #dfe7ec}
  .sheet-notes-table.sheet-notes-table-compact tbody th{padding:13px 14px 10px!important;border-bottom:0!important}
  .sheet-notes-table.sheet-notes-table-compact tbody td{padding:11px 14px 14px!important;border-bottom:0!important}
  .sheet-notes-table.sheet-notes-table-compact tbody th strong{font-size:15px}
  .sheet-notes-table.sheet-notes-table-compact .sheet-irregular-example-list{gap:9px 14px}
}

/* Hoofdstukken: na het weglaten van de cijferkolom blijft iedere kaart horizontaal. */
.book-chapter-row,
.b1-book-chapter-row {
  grid-template-columns:minmax(0,1fr) auto!important;
  width:100%!important;
}
.book-chapter-copy {min-width:0!important}
.book-chapter-copy b,.book-chapter-copy em {max-width:none!important}
.book-chapter-action {grid-column:2!important;align-self:center!important;white-space:nowrap}

/* Flashcards gebruikt exact dezelfde glass-gradient als Cheatsheet Tijden. */
.flashcards-hero {
  border:1px solid rgba(255,255,255,.8)!important;
  background:linear-gradient(125deg,rgba(220,238,255,.9) 0%,rgba(238,232,255,.86) 58%,rgba(255,240,232,.9) 100%)!important;
  color:var(--cs-text)!important;
  box-shadow:var(--cs-shadow)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%)!important;
  backdrop-filter:blur(26px) saturate(145%)!important;
}
@media(max-width:700px){
  .book-chapter-row,.b1-book-chapter-row{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .book-chapter-action{grid-column:1!important;justify-self:start}
}

/* Vaste taalhiërarchie: Spaans in teksten blauw; alleen woord- en flashcards zijn rood. */
#content [lang="es"],#content .spanish-inline,#content .spanish-table-text,#content .spanish-sentence,#content .example-es{color:var(--cs-spanish-blue)!important;font-family:inherit!important;font-style:normal!important;letter-spacing:normal!important;text-transform:none!important}
#content .spanish-inline,#content .spanish-table-text,#content .spanish-sentence{font-size:inherit!important}
#content .spanish-inline{padding:0!important}

/* Tweetalige kaarten gebruiken voor beide talen exact dezelfde typografie. */
#content .rich-curated-word>b,#content .rich-curated-word>span,
#content .topic-word-card>.spanish-sentence,#content .topic-word-card>b{font-family:inherit!important;font-size:16px!important;font-style:normal!important;font-weight:700!important;letter-spacing:normal!important;line-height:1.35!important;text-transform:none!important}
#content .rich-curated-word>.spanish-inline,#content .topic-word-card>.spanish-sentence{color:var(--cs-spanish-blue)!important}
#content .rich-curated-word>span,#content .topic-word-card>b{color:#35434c!important}
#content .word-flip-card .word-card-spanish h3,#content .word-flip-card .word-card-back>h3{color:var(--cs-spanish-red)!important;font-family:inherit!important}

#content .flashcard-preview-front b,#content .flashcard-preview-back b,
#content .culture-all-word-front b,#content .culture-all-word-back b,
#content .chapter-quizlet-front,#content .chapter-quizlet-back,
#content .relation-all-card-front,#content .relation-all-card-back,
#content .relation-learning-active .generic-card-front,#content .relation-learning-active .generic-card-back{font-family:inherit!important;font-size:14px!important;font-style:normal!important;font-weight:800!important;letter-spacing:normal!important;line-height:1.3!important;text-transform:none!important}
#content .flashcard-language-es,#content .culture-all-word-back b,#content .chapter-quizlet-back,#content .relation-all-card-back,#content .relation-learning-active .generic-card-front{color:var(--cs-spanish-red)!important}
#content .flashcard-language-translation,#content .culture-all-word-front b,#content .chapter-quizlet-front,#content .relation-all-card-front,#content .relation-learning-active .generic-card-back{color:#35434c!important}

#content .topic-example-reference>.spanish-sentence,#content .example-sentence-card>.example-es{color:var(--cs-spanish-blue)!important;font-family:inherit!important;font-size:1.35rem!important;font-weight:450!important;line-height:1.4!important}
#content .topic-example-reference .topic-example-headword{color:var(--cs-spanish-blue)!important;font-size:16px!important;font-weight:700!important}
@media(max-width:700px){#content .topic-example-reference>.spanish-sentence,#content .example-sentence-card>.example-es{font-size:1.15rem!important}}
#content .example-sentence-row>.spanish-sentence,#content .example-sentence-row>.example-es{color:var(--cs-spanish-blue)!important;font-family:inherit!important;font-size:16px!important;font-weight:500!important;line-height:1.4!important}@media(max-width:700px){#content .example-sentence-row>.spanish-sentence,#content .example-sentence-row>.example-es{font-size:15px!important}}

/* Bekende vertalingen verschijnen tijdens het lezen via hover, focus of tik. */
#content :is([lang="es"],.spanish-inline,.spanish-table-text,.spanish-sentence,.example-es):not(.flashcard-player *,.flashcard-practice-grid *,.flashcard-preview *,.culture-all-word-card *,.rich-curated-word *,.topic-word-card *,.word-flip-card *,.chapter-quizlet-card *,.relation-all-item *,.generic-map-stage *){
  cursor:default;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(45,115,150,.35);
  text-underline-offset:4px;
}
#content .spanish-hover-active{
  text-decoration-color:var(--cs-spanish-blue)!important;
  text-decoration-thickness:2px!important;
}
.spanish-hover-tooltip{
  position:fixed;
  z-index:24000;
  width:max-content;
  max-width:min(360px,calc(100vw - 24px));
  padding:10px 13px 11px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:12px;
  background:#263945;
  color:#fff;
  box-shadow:0 12px 30px rgba(26,43,54,.24);
  font-family:inherit;
  line-height:1.35;
  pointer-events:none;
}
.spanish-hover-tooltip[hidden]{display:none!important}
.spanish-hover-tooltip>span{
  display:block;
  margin-bottom:3px;
  color:#b9d9ea;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.spanish-hover-tooltip>b{display:block;font-size:15px;font-weight:700;letter-spacing:normal;text-transform:none}
@media(max-width:700px){.spanish-hover-tooltip{max-width:calc(100vw - 20px);padding:9px 12px}.spanish-hover-tooltip>b{font-size:14px}}

/* Werkwoordfilters lichtblauw; op alle flashcards is de vertaling blauw en het Spaans rood. */
.verb-tools .verb-search select{border-color:#bfd6e2!important;background:#edf7fc!important;color:#294f65!important}
.verb-tools .verb-filter-groups{border-color:#c7dce7!important;background:#e7f3fa!important}
.verb-tools .verb-filter-groups section{border-color:#cfdee7!important;background:#f4f9fc!important}
.verb-tools .verb-filter-groups .verb-family{border-color:#bdd5e2!important;background:#e8f4fa!important;color:#285d79!important}
.verb-tools .verb-filter-groups .verb-family:hover{border-color:#7faac0!important;background:#d9edf7!important}
.verb-tools .verb-filter-groups .verb-family.active{border-color:#2f6f99!important;background:#2f6f99!important;color:#fff!important}
#content .flashcard-language-translation,#content .culture-all-word-front b,#content .chapter-quizlet-front,#content .relation-all-card-front,#content .relation-learning-active .generic-card-back{color:var(--cs-spanish-blue,#2d7396)!important}
#content .flashcard-language-es,#content .culture-all-word-back b,#content .chapter-quizlet-back,#content .relation-all-card-back,#content .relation-learning-active .generic-card-front{color:var(--cs-spanish-red,#bf2f43)!important}

/* Sitebrede uniformiteitsronde 2026.08.18 --------------------------------- */

:root {
  --cs-radius-control: 12px;
  --cs-radius-card: 18px;
  --cs-radius-hero: 24px;
  --cs-control-height: 44px;
  --cs-filter-surface: #eaf4fa;
  --cs-filter-border: #c5dce8;
  --cs-card-border: rgba(53, 107, 151, .14);
  --cs-card-shadow: 0 10px 28px rgba(39, 67, 87, .07);
}

/* Gemeenschappelijke kaartopbouw, zonder pagina-eigen kleurbetekenis te wissen. */
#content :is(
  .panel,.page-intro-hero,.books-hero,.learning-hero,.practice-hero,
  .translate-hero,.flashcards-hero,.reference-hub-hero,.verb-intro,
  .verb-detail-hero,.topic-hero,.rich-theme-hero,.a1-book-hero,
  .search-result-group,.example-sentence-card,.thematic-relation-card,
  .relation-map-card,.rich-theme-card,.a1-chapter-card,.learning-level-card,
  .practice-card,.favorite-verb-card,.word-flip-card,.flashcard-builder-step
) {
  min-width: 0;
  border-color: var(--cs-card-border) !important;
  border-radius: var(--cs-radius-card) !important;
  box-shadow: var(--cs-card-shadow) !important;
}

#content :is(
  .page-intro-hero,.books-hero,.learning-hero,.practice-hero,.translate-hero,
  .flashcards-hero,.reference-hub-hero,.verb-intro,.verb-detail-hero,
  .topic-hero,.rich-theme-hero,.a1-book-hero
) {
  border-radius: var(--cs-radius-hero) !important;
}

#content :is(
  p,li,dd,td,th,.search-result-row,.search-example-result,
  .example-translation,.book-chapter-copy,.topic-detail-heading,
  .relation-topic-index-row,.rich-curated-word,.form-pair
) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Functionele keuzes blijven overal lichtblauw en hebben dezelfde aanraakmaat. */
#content :is(
  .words-search,.verb-search,.verb-filter-groups,.book-filterbar,
  .family-filterbar,.health-filterbar,.house-filterbar,.generic-filterbar,
  .relation-categorybar,.relation-toolbar,.search-result-filters,
  .example-sentences-toolbar,.activity-page-filters,.site-audit-filters,
  .flashcard-fields,.flashcard-preview-toolbar,.rich-theme-level-filter
) {
  border-color: var(--cs-filter-border) !important;
  border-radius: var(--cs-radius-card) !important;
  background: var(--cs-filter-surface) !important;
}

#content :is(
  .words-search,.verb-search,.book-filterbar,.family-filterbar,
  .health-filterbar,.house-filterbar,.generic-filterbar,.relation-toolbar,
  .search-result-filters,.example-sentences-toolbar,.activity-page-filters,
  .site-audit-filters,.flashcard-fields
) :is(input,select,button),
#content :is(.verb-family,.level-button,.relation-level-buttons button) {
  min-height: var(--cs-control-height);
  border-radius: var(--cs-radius-control) !important;
}

#content :is(.words-search,.verb-search,.example-sentences-toolbar) select,
#content :is(.book-filterbar,.family-filterbar,.health-filterbar,.house-filterbar,.generic-filterbar) select,
#content :is(.search-result-filters,.activity-page-filters,.site-audit-filters,.flashcard-fields) select {
  border-color: #b9d3e1 !important;
  background-color: #f7fbfd !important;
  color: #294f65 !important;
}

/* Knoppen, terugbediening, badges en uitklappers delen één rustige maatvoering. */
#content :is(.back,.practice-back,.hero-btn,.book-chapter-action button,
  .relation-card-actions button,.relation-all-flashcard-btn,
  .flashcard-start,.flashcard-preview-toggle,.gente-reader-button) {
  min-height: var(--cs-control-height);
  border-radius: var(--cs-radius-control) !important;
}

#content :is(.study-badge,.landing-level,.book-level,.example-level,
  .line-level,.relation-card-level,.practice-tense-badge,.b1-topic-count,
  .word-summary-inline) {
  border-radius: 999px !important;
  white-space: nowrap;
}

#content details > summary {
  min-height: var(--cs-control-height);
  border-radius: var(--cs-radius-control);
  cursor: pointer;
}

/* Registers, zoekresultaten, voorbeelden en relaties mogen logisch teruglopen. */
#content :is(.search-result-row,.search-example-result,.relation-topic-index-row,
  .book-chapter-row,.b1-book-chapter-row,.verb-row) {
  min-width: 0;
}

#content :is(.rich-theme-word-grid,.a1-chapter-grid,.learning-level-grid,
  .favorite-verb-grid,.culture-all-word-grid,.flashcard-preview-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

#content .example-sentence-card,
#content .thematic-relation-card,
#content .search-result-group {
  overflow: hidden;
}

#content :is(.example-sentence-card,.topic-example-reference) .example-translation {
  color: var(--cs-text) !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* Flashcards: de taalrichting blijft altijd visueel herkenbaar. */
#content :is(.flashcard-language-translation,.culture-all-word-front b,
  .chapter-quizlet-front,.relation-all-card-front,
  .relation-learning-active .generic-card-back) {
  color: var(--cs-spanish-blue, #2d7396) !important;
}

#content :is(.flashcard-language-es,.culture-all-word-back b,
  .chapter-quizlet-back,.relation-all-card-back,
  .relation-learning-active .generic-card-front) {
  color: var(--cs-spanish-red, #bf2f43) !important;
}

/* Lange vervoegingen en vertalingen blijven binnen hun kaart. */
#content :is(.tense-cheat-card,.selected-verb-conjugation,.verb-conjugation-model) table {
  max-width: 100%;
}

#content :is(.tense-cheat-card,.selected-verb-conjugation,.verb-conjugation-model) :is(th,td,td b,.form-pair,.form-nl) {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Imperativo: persoon links, bevestigend en ontkennend exact gelijk en gecentreerd. */
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table {
  width: 100% !important;
  table-layout: fixed !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table th:first-child,
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table tbody th {
  width: 22% !important;
  text-align: left !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table th:not(:first-child),
.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table td {
  width: 39% !important;
  padding-inline: 7px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .sheet-card-imperativo table td b {
  display: block;
  width: 100%;
  text-align: center !important;
}

/* Desktop blijft een echte 3x3-cheatsheet; mobiel één gecentreerde kolom. */
@media (min-width: 1101px) {
  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-sheet-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) and (min-width: 701px) {
  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-sheet-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .mobile-header {
    min-height: 58px;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .mobile-header button,
  .mobile-menu-button,
  .mobile-search-button {
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
  }

  .side {
    width: min(88vw, 360px);
    max-width: 100%;
    overflow-x: hidden;
  }

  .side :is(a,button) {
    min-height: 44px;
  }
}

@media (max-width: 700px) {
  .environment-banner {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 9.5px;
    line-height: 1.3;
  }

  body.environment-development .app {
    padding-top: 42px;
  }

  body.environment-development .side {
    top: 42px;
    height: calc(100vh - 42px);
  }

  .environment-banner:not([hidden]) ~ .login-screen > .language-switch {
    top: 52px;
  }

  .login-screen {
    width: 100%;
    padding: 12px;
    overflow-x: hidden;
  }

  .login-shell,
  .login-card {
    width: 100%;
    min-width: 0;
  }

  #content :is(.panel,.page-intro-hero,.books-hero,.learning-hero,
    .practice-hero,.translate-hero,.flashcards-hero,.reference-hub-hero,
    .verb-intro,.verb-detail-hero,.topic-hero,.rich-theme-hero,.a1-book-hero) {
    border-radius: 17px !important;
  }

  #content :is(.words-search,.verb-search,.search-result-filters,
    .example-sentences-toolbar,.activity-page-filters,.site-audit-filters,
    .flashcard-fields) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 12px !important;
  }

  #content :is(.words-search,.verb-search,.search-result-filters,
    .example-sentences-toolbar,.activity-page-filters,.site-audit-filters,
    .flashcard-fields) :is(label,input,select,button) {
    width: 100%;
    min-width: 0;
  }

  #content :is(.search-result-row,.search-example-result,
    .relation-topic-index-row,.book-chapter-row,.b1-book-chapter-row) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #content :is(.search-result-items,.book-chapter-list,.rich-theme-word-grid,
    .a1-chapter-grid,.learning-level-grid,.favorite-verb-grid,
    .culture-all-word-grid,.flashcard-preview-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cheatsheet-poster-viewport.mobile-readable {
    width: 100% !important;
    max-width: 560px !important;
    margin-inline: auto !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-sheet-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .poster-sheet-grid .tense-cheat-card {
    width: 100% !important;
    max-width: 560px !important;
    margin-inline: auto !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .sheet-card-imperativo table th:first-child,
  .cheatsheet-poster-viewport.mobile-readable .sheet-card-imperativo table tbody th {
    width: 20% !important;
  }

  .cheatsheet-poster-viewport.mobile-readable .sheet-card-imperativo table th:not(:first-child),
  .cheatsheet-poster-viewport.mobile-readable .sheet-card-imperativo table td {
    width: 40% !important;
    padding-inline: 5px !important;
  }

  #content :is(.example-sentence-card,.topic-example-reference,
    .thematic-relation-card,.relation-map-card) {
    padding: 15px !important;
  }
}

@media (max-width: 390px) {
  #content { font-size: 15px; }

  #content :is(.tense-cheat-card,.selected-verb-conjugation,.verb-conjugation-model) :is(th,td) {
    padding-inline: 7px !important;
  }
}

/* Leerroute: hoofdstukken hebben een eigen kleur; onderdelen gebruiken een lichtere afgeleide. */
.learning-route-list>.learning-route-unit:nth-child(6n+1){--chapter-accent:#2f78a8;--chapter-soft:#edf7fd;--chapter-sub:#b9d9eb}
.learning-route-list>.learning-route-unit:nth-child(6n+2){--chapter-accent:#b8563f;--chapter-soft:#fff1ec;--chapter-sub:#e7bbae}
.learning-route-list>.learning-route-unit:nth-child(6n+3){--chapter-accent:#a76d00;--chapter-soft:#fff8e5;--chapter-sub:#e6cd91}
.learning-route-list>.learning-route-unit:nth-child(6n+4){--chapter-accent:#7651a3;--chapter-soft:#f5effd;--chapter-sub:#cfbde3}
.learning-route-list>.learning-route-unit:nth-child(6n+5){--chapter-accent:#287b72;--chapter-soft:#edf9f7;--chapter-sub:#afd9d3}
.learning-route-list>.learning-route-unit:nth-child(6n){--chapter-accent:#a23a5a;--chapter-soft:#fff0f5;--chapter-sub:#dfb4c3}
.learning-route-list>.learning-route-unit{border-color:var(--chapter-sub)!important;box-shadow:0 8px 22px rgba(36,58,72,.07)}
.learning-route-list>.learning-route-unit>summary,
.learning-route-list>.learning-route-unit.learning-route-in_progress>summary,
.learning-route-list>.learning-route-unit.learning-route-completed>summary{border-left:8px solid var(--chapter-accent)!important;background:linear-gradient(90deg,var(--chapter-soft),#fff 72%)!important}
.learning-route-list>.learning-route-unit>summary>.learning-route-number{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--chapter-accent);color:#fff!important;font-size:16px!important}
.learning-route-list>.learning-route-unit>summary .learning-route-copy small{color:var(--chapter-accent)!important}
.learning-route-list>.learning-route-unit>summary .learning-route-copy b{font-size:20px!important}
.learning-route-list>.learning-route-unit .learning-route-unit-parts{gap:10px;padding:12px 14px 14px 24px;border-top:1px solid var(--chapter-sub);background:var(--chapter-soft)}
.learning-route-list>.learning-route-unit .learning-route-unit-parts .learning-route-row,
.learning-route-list>.learning-route-unit .learning-route-unit-parts .learning-route-row.learning-route-in_progress,
.learning-route-list>.learning-route-unit .learning-route-unit-parts .learning-route-row.learning-route-completed{border:1px solid var(--chapter-sub)!important;border-left:4px solid var(--chapter-sub)!important;background:rgba(255,255,255,.88)!important}
.learning-route-list>.learning-route-unit .learning-route-unit-parts .learning-route-row:hover,
.learning-route-list>.learning-route-unit .learning-route-unit-parts .learning-route-row:focus-visible{border-color:var(--chapter-accent)!important;box-shadow:0 6px 16px rgba(36,58,72,.08)!important}
.learning-route-list>.learning-route-unit .learning-route-unit-parts .learning-route-number{color:var(--chapter-accent)!important}
.learning-route-list>.learning-route-unit .learning-route-unit-parts .learning-route-copy small{color:var(--chapter-accent)!important}
@media(max-width:720px){.learning-route-list>.learning-route-unit .learning-route-unit-parts{padding:10px}.learning-route-list>.learning-route-unit>summary>.learning-route-number{width:40px;height:40px}}

/* Menuhiërarchie en compacte tijdsuitleg — 2026.08.19. */
.side .nav .nav-group-label {
  margin-top: 19px;
  margin-bottom: 7px;
  padding: 0 2px 6px;
  border-bottom: 2px solid rgba(189, 36, 67, .18);
  color: #bd2443 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 .tense-card-heading {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 .tense-card-heading b {
  color: inherit;
  font: inherit;
  line-height: 1.12;
}

.tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 .tense-card-heading small {
  color: #586a76;
  font: 700 10.5px/1.35 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  opacity: 1;
  text-shadow: none;
  text-transform: none;
}

@media (max-width: 700px) {
  .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card h4 .tense-card-heading small {
    font-size: 9.5px;
  }
}

/* Voorbeeldzinnen: maak van de actieve filters direct een tweetalige oefenronde. */
.example-learning-method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 17px 0;
}

.example-learning-method > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid rgba(57, 119, 159, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .76);
}

.example-learning-method > div > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #39779f;
  color: #fff;
  font-weight: 900;
}

.example-learning-method p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--cs-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.example-learning-method b {
  color: var(--cs-heading);
  font-size: 14px;
}

.example-flashcard-launcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin: 16px 0 20px;
  padding: 20px 22px;
  border: 1px solid rgba(57, 119, 159, .2);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(222, 239, 249, .86), rgba(246, 242, 252, .78));
  box-shadow: 0 12px 30px rgba(37, 45, 65, .07);
}

.example-flashcard-launcher h3 {
  margin: 3px 0 5px;
  color: var(--cs-heading);
  font-size: clamp(20px, 2vw, 27px);
}

.example-flashcard-launcher p {
  max-width: 760px;
  margin: 0;
  color: var(--cs-secondary);
  line-height: 1.45;
}

.example-flashcard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.example-flashcard-actions button {
  min-height: 48px;
  padding: 11px 17px;
  border: 1px solid rgba(57, 119, 159, .24);
  border-radius: 13px;
  background: #39779f;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(57, 119, 159, .16);
}

.example-flashcard-actions button:last-child {
  background: #fff;
  color: #39779f;
}

.example-view-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 10px;
}

.example-view-row > div > span {
  display: block;
  margin-bottom: 6px;
  color: var(--cs-secondary);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.example-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(57, 119, 159, .18);
  border-radius: 12px;
  background: rgba(224, 236, 243, .7);
}

.example-view-toggle button {
  min-height: 38px;
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cs-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.example-view-toggle button.active {
  background: #39779f;
  color: #fff;
  box-shadow: 0 4px 12px rgba(57, 119, 159, .18);
}

.example-view-row small {
  max-width: 460px;
  color: var(--cs-secondary);
  line-height: 1.4;
  text-align: right;
}

.example-sentence-list {
  overflow: hidden;
  border: 1px solid #d5dfe5;
  border-radius: 14px;
  background: #fff;
}

.example-sentence-list .example-sentence-row:last-child {
  border-bottom: 0;
}

.example-sentence-list.example-view-spanish .example-translation {
  display: none !important;
}

.example-sentence-list.example-view-spanish .example-sentence-row {
  grid-template-columns: 38px minmax(0, 1fr);
}

.example-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 11px 0;
}

.example-pagination button {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(57, 119, 159, .24);
  border-radius: 11px;
  background: #fff;
  color: #39779f;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.example-pagination button:disabled {
  cursor: default;
  opacity: .42;
}

.example-pagination span {
  color: var(--cs-secondary);
  font-size: 13px;
  text-align: center;
}

.example-pagination span b {
  color: var(--cs-heading);
}

.flashcard-main-wrap {
  position: relative;
}

.flashcard-main-wrap .flashcard-main {
  width: 100%;
}

.flashcard-spanish-audio {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
}

.flashcard-spanish-audio button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(191, 47, 67, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: var(--cs-spanish-red, #bf2f43);
  box-shadow: 0 6px 18px rgba(37, 45, 65, .1);
}

/* Op breed scherm vormen de drie cheatsheetrijen één gelijkmatig 3×3-raster. */
@media (min-width: 1101px) {
  .cheatsheet-poster-viewport .tense-cheat-card-grid.sheet-grid.poster-sheet-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) auto !important;
    grid-auto-flow: row !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-sheet-row {
    height: 100% !important;
    margin-bottom: 12px !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card {
    height: 100% !important;
  }

  .cheatsheet-poster-viewport .poster-sheet-grid .tense-cheat-card h4 {
    height: 74px !important;
    min-height: 74px !important;
    flex: 0 0 74px !important;
  }
}

@media (max-width: 700px) {
  .example-learning-method {
    grid-template-columns: minmax(0, 1fr);
  }

  .example-flashcard-launcher {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 17px;
  }

  .example-flashcard-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .example-flashcard-actions button {
    width: 100%;
  }

  .example-view-row {
    display: grid;
    align-items: stretch;
  }

  .example-view-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .example-view-row small {
    text-align: left;
  }

  .example-pagination {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .example-pagination span {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

/* Werkwoordbeheer: de leesbare stand is een echt kaartrooster.
   De drie HTML-rijen worden alleen in deze stand uitgepakt, zodat de negen
   kaarten niet als smalle posterstroken naast elkaar kunnen belanden. */
.verb-conjugation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -5px 0 18px;
}

.verb-conjugation-summary span {
  padding: 6px 10px;
  border: 1px solid rgba(53, 107, 151, .16);
  border-radius: 999px;
  background: rgba(232, 244, 250, .78);
  color: #356b97;
  font-size: 12px;
  font-weight: 800;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable {
  height: auto !important;
  overflow: visible !important;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable > .verb-conjugation-poster {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .tense-cheat-card-grid.sheet-grid.poster-sheet-grid.verb-sheet-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px !important;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .verb-sheet-grid > .tense-cheat-sheet-row {
  display: contents !important;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .verb-sheet-grid .tense-cheat-card {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .verb-sheet-grid .tense-cheat-card h4 {
  height: 86px !important;
  min-height: 86px !important;
  flex: 0 0 86px !important;
  overflow: hidden !important;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .verb-sheet-grid .tense-cheat-card table {
  height: auto !important;
  table-layout: fixed !important;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .verb-sheet-grid .tense-cheat-card :is(th, td, td b) {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .verb-sheet-grid .sheet-row-scroll-hint {
  display: none !important;
}

@media (max-width: 1100px) and (min-width: 701px) {
  .cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .tense-cheat-card-grid.sheet-grid.poster-sheet-grid.verb-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .verb-conjugation-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 14px;
  }

  .cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .tense-cheat-card-grid.sheet-grid.poster-sheet-grid.verb-sheet-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 4px 0 12px !important;
  }

  .cheatsheet-poster-viewport.verb-conjugation-viewport.mobile-readable .verb-sheet-grid .tense-cheat-card h4 {
    height: auto !important;
    min-height: 70px !important;
    flex-basis: auto !important;
  }
}
/* Houd de verticale klokoefeningen ook na de iPadOS-theme overrides intact. */
.practice-settings.practice-clock-settings{align-items:flex-end}
.practice-clock-options{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;flex:1 1 560px;min-width:0;margin:0;padding:0;border:0}
.practice-clock-options legend{margin:0 0 7px;color:#4c626f;font-size:12px;font-weight:720}
.practice-settings .practice-clock-option{display:flex!important;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #b8d1df;border-radius:12px;background:rgba(255,255,255,.84);color:var(--navy)!important;font-size:15px!important;font-weight:750!important;cursor:pointer}
.practice-settings .practice-clock-option input{width:18px!important;min-width:18px!important;height:18px!important;min-height:18px;margin:0;accent-color:#337ba3}
.practice-settings .practice-clock-option.active{border-color:#337ba3;background:#337ba3!important;color:#fff!important;box-shadow:0 8px 18px rgba(51,123,163,.22)}
.practice-clock-settings #practiceStart{align-self:flex-end}
@media(max-width:700px){.practice-clock-settings #practiceStart{width:100%}}

/* Ontwikkelpreview cheatsheet: hoog contrast voor scherm en afdruk. */
.cheatsheet-visual-head :is(.eyebrow,.title,.lead),
.cheatsheet-poster,
.cheatsheet-poster :is(h3,h4,th,td,p,small,em,strong),
.cheatsheet-poster .tense-card-heading :is(b,small),
.cheatsheet-poster .sheet-notes-intro,
.cheatsheet-poster .sheet-notes-table :is(thead th,tbody th,tbody td),
.cheatsheet-poster .sheet-notes-table.sheet-notes-table-compact tbody th :is(strong,span),
.cheatsheet-poster .sheet-pattern-summary :is(h3,h4,p),
.cheatsheet-poster .sheet-reading-lines :is(em,i){
  color:#111!important;
}

.cheatsheet-poster .cheatsheet-poster-titleline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px 18px;
}
.cheatsheet-poster .cheatsheet-poster-titleline>b{
  margin-right:auto;
  color:#111!important;
}
.cheatsheet-poster .cheatsheet-poster-form{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  color:#111!important;
  font-size:13px;
  white-space:nowrap;
}
.cheatsheet-poster .cheatsheet-poster-form strong{color:#111!important}
.cheatsheet-poster .cheatsheet-poster-form i{
  color:#111!important;
  font-style:normal;
  font-weight:700;
}
#content .tense-cheatsheet-standalone .cheatsheet-poster-intro .cheatsheet-poster-form{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(45,115,150,.18)!important;
  box-shadow:0 8px 20px rgba(38,64,86,.08)!important;
  color:#111!important;
}
#content .cheatsheet-poster .cheatsheet-poster-titleline .cheatsheet-poster-form strong{
  color:#111!important;
  background:transparent!important;
}
.cheatsheet-poster .spanish-ending,
.cheatsheet-poster .spanish-inline,
.cheatsheet-poster .sheet-irregular-example-list b,
.cheatsheet-poster .sheet-reading-lines b{
  color:#ef001f!important;
}
.cheatsheet-poster .tense-card-heading>b,
.cheatsheet-poster .tense-cheat-card tbody th,
.cheatsheet-poster .tense-cheat-card tbody td,
.cheatsheet-poster .tense-cheat-card tbody td b{color:#111!important}
.cheatsheet-poster .tense-cheat-card .spanish-ending{color:#ef001f!important}
.cheatsheet-poster .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card tbody td b.spanish-ending{
  color:#ef001f!important;
}
.cheatsheet-poster .cheatsheet-poster-form i .spanish-ending{color:#ef001f!important}
.cheatsheet-poster .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table :is(thead th,tbody th),
.cheatsheet-poster .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table tbody td,
.cheatsheet-poster .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table tbody td b{
  color:#111!important;
}
.cheatsheet-poster .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table tbody td b.spanish-ending,
.cheatsheet-poster .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .tense-cheat-card table tbody td .spanish-ending{
  color:#ef001f!important;
}
.cheatsheet-poster .tense-cheat-card-grid.sheet-grid.poster-sheet-grid .poster-ending-table thead th .spanish-ending{
  color:#111!important;
}
.cheatsheet-poster .tense-formula{white-space:nowrap}
#content .cheatsheet-poster .tense-cheat-card .tense-formula,
#content .cheatsheet-poster .tense-cheat-card td.spanish-table-text,
#content .cheatsheet-poster .tense-cheat-card td.spanish-table-text b{
  color:#ef001f!important;
}

/* Deze twee regels staan bewust ná de algemene posterregels hierboven. */
#content .cheatsheet-poster .tense-cheat-card .verb-form-es,
#content :is(.selected-verb-conjugation,.verb-person-overview,.tense-section) .verb-form-es{
  color:var(--cs-spanish-blue,#2d7396)!important;
}
#content .cheatsheet-poster .tense-cheat-card .verb-form-nl,
#content :is(.selected-verb-conjugation,.verb-person-overview,.tense-section) .verb-form-nl{
  color:var(--cs-spanish-blue,#2d7396)!important;
}
/* Houd Spaans en Nederlands in alle postertabellen in vaste kolommen.  Deze
   regels staan bewust laat in het bestand: de compacte posterregels mogen de
   twee talen niet opnieuw tegen elkaar aan drukken. */
#content .cheatsheet-poster .tense-cheat-card .verb-form-pair{
  display:grid!important;
  grid-template-columns:minmax(112px,48%) minmax(0,1fr)!important;
  align-items:baseline!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
}
#content .cheatsheet-poster .tense-cheat-card .verb-form-pair .verb-form-es,
#content .cheatsheet-poster .tense-cheat-card .verb-form-pair .verb-form-nl{
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
#content .cheatsheet-poster .tense-cheat-card .verb-form-pair .verb-form-es{text-align:right!important}
#content .cheatsheet-poster .tense-cheat-card .verb-form-pair .verb-form-nl{text-align:left!important}
.cheatsheet-poster .tense-cheat-card h4 i{
  color:#111!important;
}
.cheatsheet-poster .tense-cheat-card h4 .tense-card-heading b{
  color:#111!important;
}
.cheatsheet-poster .sheet-notes-table.sheet-notes-table-compact tbody th strong{
  color:#ef001f!important;
  font-size:13px!important;
}
.cheatsheet-poster .sheet-notes-table.sheet-notes-table-compact tbody th span{
  color:#111!important;
  font-size:12px!important;
}
.cheatsheet-poster .sheet-irregular-example-list b,
.cheatsheet-poster .sheet-irregular-example-list small{
  font-size:12px!important;
  line-height:1.3!important;
}
#content .cheatsheet-poster .sheet-notes-table .sheet-irregular-example-list .spanish-example,
#content .cheatsheet-poster .sheet-pattern-summary .spanish-inline,
#content .cheatsheet-poster .sheet-reading-lines b{
  color:#ef001f!important;
}
.cheatsheet-poster .sheet-irregular-example-list small{
  color:#111!important;
  font-weight:500!important;
}

@media(max-width:700px){
  #content .cheatsheet-poster .tense-cheat-card .verb-form-pair{
    grid-template-columns:minmax(94px,46%) minmax(0,1fr)!important;
    gap:11px!important;
  }
  .cheatsheet-poster .cheatsheet-poster-titleline{align-items:flex-start;gap:7px 12px}
  .cheatsheet-poster .cheatsheet-poster-titleline>b{flex-basis:100%}
  .cheatsheet-poster .cheatsheet-poster-form{font-size:12px}
}

@media print{
  .public-cheatsheet-nav,
  .cheatsheet-visual-head,
  .cheatsheet-mobile-zoom-hint{display:none!important}
  .public-cheatsheet-page,
  .public-cheatsheet-page .main,
  .public-cheatsheet-page .shell,
  .public-cheatsheet-page .content,
  .cheatsheet-poster-viewport{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    overflow:visible!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .cheatsheet-poster-viewport>.cheatsheet-poster{
    width:100%!important;
    max-width:none!important;
    transform:none!important;
  }
  .cheatsheet-poster,
  .cheatsheet-poster *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* Werkwoorddetail: geef de inhoudskolom werkelijk de meeste ruimte. De eerdere
   absolute minimumbreedte van de Spaanse helft kon de Nederlandse helft tot
   enkele pixels reduceren, waardoor "ik adem in" letter voor letter afbrak. */
#content .cheatsheet-poster .verb-sheet-grid .tense-cheat-card:not(.sheet-card-imperativo) table{
  width:100%!important;
  table-layout:fixed!important;
}
#content .cheatsheet-poster .verb-sheet-grid .tense-cheat-card:not(.sheet-card-imperativo) table :is(thead th:first-child,tbody th){
  width:24%!important;
  min-width:0!important;
}
#content .cheatsheet-poster .verb-sheet-grid .tense-cheat-card:not(.sheet-card-imperativo) table :is(thead th:last-child,tbody td){
  width:76%!important;
  min-width:0!important;
}
#content .cheatsheet-poster .verb-sheet-grid .tense-cheat-card .verb-form-pair{
  display:grid!important;
  grid-template-columns:minmax(0,42%) minmax(0,58%)!important;
  gap:10px!important;
  width:100%!important;
}
#content .cheatsheet-poster .verb-sheet-grid .tense-cheat-card .verb-form-pair :is(.verb-form-es,.verb-form-nl){
  min-width:0!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
@media(max-width:700px){
  #content .cheatsheet-poster .verb-sheet-grid .tense-cheat-card:not(.sheet-card-imperativo) table :is(thead th:first-child,tbody th){
    width:28%!important;
  }
  #content .cheatsheet-poster .verb-sheet-grid .tense-cheat-card:not(.sheet-card-imperativo) table :is(thead th:last-child,tbody td){
    width:72%!important;
  }
  #content .cheatsheet-poster .verb-sheet-grid .tense-cheat-card .verb-form-pair{
    grid-template-columns:minmax(0,44%) minmax(0,56%)!important;
    gap:8px!important;
  }
}