/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --forest: #23423D;
  --forest2: #315B54;
  --sage: #6F8F7D;
  --sageSoft: #EAF0E7;
  --sand: #F8F5EF;
  --sand2: #F2EDE3;
  --gold: #D9A85F;
  --goldSoft: #FFF4DD;
  --white: #FFFFFF;
  --ink: #1C2A2D;
  --muted: #66756E;
  --line: #E2DCCC;
  --green: #12805C;
  --greenSoft: #EAF8F1;
  --warn: #B76B12;
  --warnSoft: #FFF6E8;
  --reading: #27667A;
  --readingSoft: #EAF4F7;
  --writing: #9A5B32;
  --writingSoft: #FBF0E8;
  --violet: #675184;
  --violetSoft: #F2EDF8;
  --bg: #FBF9F4;
  --shadow: 0 18px 42px rgba(47, 55, 48, .10);
  --softShadow: 0 8px 22px rgba(47, 55, 48, .06);
}

/* ===== BASE RESET ===== */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 }
button, input, textarea, select { font: inherit }
button { cursor: pointer }
a { color: inherit; text-decoration: none }

/* ===== TYPOGRAPHY ===== */
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  color: var(--forest);
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.005em;
  margin: 0 0 14px;
  color: var(--forest);
}
h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--forest);
}
p { line-height: 1.58; color: var(--muted) }
.lead { font-size: 19px; max-width: 620px }

/* ===== SHARED COMPONENTS ===== */
.btn {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--forest), var(--forest2));
  color: white;
  padding: 13px 20px;
  font-weight: 850;
  box-shadow: 0 10px 20px rgba(35, 66, 61, .18);
}
.btn:hover { transform: translateY(-1px) }
.btn.secondary {
  background: white;
  color: var(--forest);
  border: 1px solid #D4CCBE;
  box-shadow: 0 4px 10px rgba(47, 55, 48, .04);
}
.btn.ghost { background: transparent; color: var(--forest); box-shadow: none }
.btn.green { background: linear-gradient(135deg, #12805C, #189E72) }

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 25px;
  font-weight: 950;
  color: var(--forest);
  letter-spacing: -.035em;
}
.logo svg { filter: drop-shadow(0 10px 16px rgba(35, 66, 61, .16)) }

.kicker {
  display: inline-flex;
  background: var(--sageSoft);
  color: var(--forest);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-style: italic;
}

.pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--sageSoft);
  color: var(--forest);
  font-size: 12px;
  font-weight: 900;
}
.pill.gold { background: var(--goldSoft); color: #8A5A13 }
.pill.green { background: var(--greenSoft); color: #067647 }

.card {
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--softShadow);
}

.progress-track {
  height: 10px;
  background: #E8E1D6;
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0;
}
.progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sage), var(--green));
}

/* ===== PUBLIC LAYOUT ===== */
.public-header {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 44px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.public-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}
.public-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 26px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items: center;
}
.hero-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .82)),
    radial-gradient(circle at top right, rgba(217, 168, 95, .22), transparent 36%);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.mock-window {
  background: white;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  margin-top: 18px;
}
.mock-top {
  height: 52px;
  background: var(--forest);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  font-weight: 850;
}
.mock-body { padding: 20px; background: #FBF9F4 }
.mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 38px;
}

.public-footer {
  background: var(--forest);
  color: white;
  margin-top: 40px;
  padding: 38px 44px 24px;
}
.footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .8fr .8fr .9fr;
  gap: 32px;
}
.public-footer p, .public-footer a, .footer-bottom { color: #E7EFEA }
.footer-col { display: flex; flex-direction: column; gap: 10px }
.partner-box {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  padding: 16px;
}
.partner-logo {
  background: var(--sand);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.partner-logo img { width: 150px; max-width: 100%; height: auto; border-radius: 8px }
.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, .16);
  max-width: 1180px;
  margin: 24px auto 16px;
}
.footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

/* ===== TRAINING / APP LAYOUT ===== */
.app-screen { min-height: 100vh; background: var(--bg) }
.app-header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.app-left, .app-right { display: flex; align-items: center; gap: 18px }
.context-pill {
  background: var(--sand2);
  border: 1px solid var(--line);
  color: var(--forest);
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 850;
}
.app-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 26px 46px;
}
.choice-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.choice-header h1 { font-size: 42px }
.learning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.path-card {
  cursor: pointer;
  transition: .16s;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.path-card:hover { transform: translateY(-2px); box-shadow: var(--shadow) }
.path-card.reading {
  background: var(--readingSoft);
  box-shadow: inset 0 0 0 1px #C9DEE5;
  border-color: transparent;
}
.path-card.writing {
  background: var(--writingSoft);
  box-shadow: inset 0 0 0 1px #EBD3C2;
  border-color: transparent;
}
.path-card.reading h2,
.path-card.reading .path-icon { color: var(--reading) }
.path-card.writing h2,
.path-card.writing .path-icon { color: var(--writing) }
.path-card.reading .btn { background: var(--reading); box-shadow: none }
.path-card.writing .btn { background: var(--writing); box-shadow: none }
.path-top {
  display: grid;
  grid-template-columns: 1fr 74px;
  gap: 16px;
}
.path-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  display: grid;
  place-items: center;
}
.path-icon svg { width: 34px; height: 34px }
.task-list { display: grid; gap: 12px; margin-top: 16px }
.task-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 17px;
  border-radius: 20px;
  background: white;
  border: 1px solid var(--line);
}
.task-item:hover { border-color: #CDBFAD; box-shadow: var(--softShadow) }
.session-note {
  background: var(--greenSoft);
  border: 1px solid #BDE7D4;
  color: #067647;
  border-radius: 20px;
  padding: 16px 18px;
  font-weight: 800;
  margin-bottom: 20px;
}
.feedback-list { display: grid; gap: 12px; margin-top: 18px }
.feedback-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: #FBF9F4;
}
.feedback-card.good { background: var(--greenSoft); border-color: #BDE7D4 }
.feedback-card.warn { background: var(--warnSoft); border-color: #F3D3A2 }
textarea {
  width: 100%;
  min-height: 280px;
  border: 1px solid #D5CCBD;
  border-radius: 20px;
  padding: 20px;
  line-height: 1.6;
  font-size: 16px;
}
.wordcount {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

/* ===== PLAYER LAYOUT ===== */
.player-screen { min-height: 100vh; background: #F3EFE7 }
.player-header {
  height: 74px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  background: white;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.player-center {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  color: var(--forest);
  font-weight: 900;
}
.timer {
  background: var(--forest);
  color: white;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
}
.player-main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 30px 26px 110px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px;
}
.paper {
  background: white;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 34px;
  box-shadow: var(--shadow);
}
.instruction {
  position: relative;
  border-left: 5px solid var(--gold);
  padding: 14px 18px 14px 54px;
  background: var(--goldSoft);
  border-radius: 16px;
  margin: 18px 0 26px;
}
.instruction::before {
  content: "1";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--gold);
  display: grid;
  place-items: center;
  color: #3E2A0C;
  font-weight: 900;
  font-size: 14px;
}
.exercise-box {
  background: #FBF9F4;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
}
.exercise-box::before {
  content: "2 \00b7  Løs opgaven";
  display: block;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--forest);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.ad {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 15px;
}
.match-row {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 14px;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin: 10px 0;
}
select {
  border: 1px solid #D5CCBD;
  border-radius: 12px;
  padding: 10px;
  background: white;
}
.side-panel { display: grid; gap: 16px; align-content: start }
.help-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--softShadow);
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  z-index: 60;
}
.bottom-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 920px) {
  .hero-grid, .feature-grid, .footer-grid,
  .learning-grid, .player-main { grid-template-columns: 1fr }
  .public-header, .app-header { padding: 0 18px }
  .public-nav { display: none }
  h1 { font-size: 40px }
  .player-header {
    grid-template-columns: 1fr;
    height: auto;
    padding: 14px 18px;
  }
  .player-center { justify-content: flex-start; flex-wrap: wrap }
  .ad-grid { grid-template-columns: 1fr }
  .match-row { grid-template-columns: 1fr }
}

/* ===== ADMIN LAYOUT ===== */
.admin-screen { background: var(--sand2) }

.admin-layout {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--forest);
  color: white;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-sidebar-logo {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.admin-badge {
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  border-radius: 6px;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.admin-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  transition: background .15s, color .15s;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.admin-nav-item:hover,
.admin-nav-item.active {
  background: rgba(255,255,255,.12);
  color: white;
}

.admin-sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-logout { color: rgba(255,180,180,.9) !important }

.admin-main {
  flex: 1;
  overflow: auto;
}

.admin-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 40px;
}

.admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
}

.admin-page-header h1 {
  font-size: 30px;
  margin: 4px 0 0;
}

.admin-page-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
  padding-top: 4px;
}

.admin-breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.admin-breadcrumb a { color: var(--sage) }

.admin-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--sand);
}

.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #F0EDE6;
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none }

.admin-table-actions {
  text-align: right;
  white-space: nowrap;
}

.admin-table-actions form,
.admin-table-actions a,
.admin-table-actions button {
  display: inline-block;
  margin-left: 4px;
}

.admin-content-preview {
  font-size: 13px;
  color: var(--muted);
  max-width: 300px;
}

.admin-empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

.admin-inline-link {
  display: inline-block;
  margin-right: 8px;
  font-size: 13px;
  color: var(--forest);
  text-decoration: underline;
}

.text-muted { color: var(--muted) }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.admin-stat-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.admin-stat-value {
  font-size: 42px;
  font-weight: 900;
  color: var(--forest);
  line-height: 1;
}

.admin-stat-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.admin-stat-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--sage);
}

.admin-section h2 { font-size: 20px; margin-bottom: 14px }

.admin-quick-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-form { max-width: 640px }

.form-group { margin-bottom: 20px }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  background: white;
  color: var(--ink);
  transition: border-color .15s;
}

.form-control:focus {
  outline: none;
  border-color: var(--sage);
}

.form-hint {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
}

.admin-json-label-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.admin-json-editor {
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  resize: vertical;
}

.admin-json-hint {
  margin: -10px 0 20px;
  font-size: 13px;
}

.admin-json-hint summary {
  cursor: pointer;
  color: var(--sage);
  padding: 4px 0;
}

.admin-json-template { margin-bottom: 14px }

.admin-json-template pre {
  background: var(--sand2);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  overflow-x: auto;
  margin: 4px 0 0;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.admin-errors {
  background: #FFF0F0;
  border: 1px solid #FFCDD2;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #B71C1C;
}

.admin-errors p { margin: 2px 0; color: #B71C1C }

.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 10px;
  box-shadow: none;
}

.btn.danger {
  background: linear-gradient(135deg, #B71C1C, #C62828);
  color: white;
  border: 0;
  box-shadow: 0 4px 10px rgba(183,28,28,.18);
}

.flash {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
}

.flash-notice {
  background: var(--greenSoft);
  color: #067647;
  border-bottom: 1px solid #A7F3D0;
}

.flash-alert {
  background: var(--warnSoft);
  color: var(--warn);
  border-bottom: 1px solid #FED7AA;
}

/* ===== MODULE SELECTOR ===== */
.module-selector-course {
  margin-bottom: 28px;
}

.module-selector-course h3 {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 10px;
}

.module-selector-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.module-selector-btn {
  border: 2px solid var(--line);
  border-radius: 16px;
  background: white;
  padding: 14px 22px;
  cursor: pointer;
  font-weight: 700;
  color: var(--forest);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color .15s, box-shadow .15s;
  min-width: 110px;
}

.module-selector-btn:hover {
  border-color: var(--sage);
  box-shadow: var(--softShadow);
}

.module-selector-btn.active {
  border-color: var(--forest);
  background: var(--sageSoft);
}

.module-selector-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--forest);
}

.module-selector-check {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
}

/* ===== QUESTION TYPE UIs ===== */
.fillblank-text {
  font-size: 18px;
  line-height: 2.2;
  color: var(--ink);
}

.fillblank-input {
  display: inline-block;
  width: 120px;
  border: 0;
  border-bottom: 2px solid var(--forest);
  border-radius: 0;
  padding: 2px 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--forest);
  background: transparent;
  text-align: center;
  margin: 0 4px;
}

.fillblank-input:focus {
  outline: none;
  border-bottom-color: var(--green);
}

.odd-para {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.odd-sentence-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: 15px;
  line-height: 1.5;
}

.odd-sentence-option:hover {
  border-color: var(--sage);
  background: var(--sageSoft);
}

.odd-sentence-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--forest);
}

/* ===== RESULTS DASHBOARD ===== */
.results-list {
  display: grid;
  gap: 16px;
  max-width: 800px;
}

.results-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.results-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
}

.results-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.results-score-badge {
  font-size: 28px;
  font-weight: 900;
  color: var(--forest);
  background: var(--sageSoft);
  border-radius: 14px;
  padding: 10px 18px;
  flex-shrink: 0;
  line-height: 1;
}

.results-score-badge.perfect {
  background: var(--greenSoft);
  color: var(--green);
}

.results-answers {
  border-top: 1px solid var(--line);
  padding: 14px 24px;
  display: grid;
  gap: 12px;
}

.results-answer-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.results-feedback {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.results-feedback-item {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.results-feedback-item.ok {
  background: var(--greenSoft);
  color: #067647;
}

.results-feedback-item.wrong {
  background: var(--warnSoft);
  color: var(--warn);
}

.results-card-footer {
  border-top: 1px solid var(--line);
  padding: 12px 24px;
  font-size: 12px;
  color: var(--muted);
  background: var(--sand);
}

.results-retry-link {
  color: var(--sage);
  font-weight: 700;
  text-decoration: underline;
}

/* ===== TASK PLAYER COMPONENTS ===== */
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sage);
  margin-bottom: 8px;
}

.task-paper { overflow: hidden }

.task-masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.task-kind {
  display: flex;
  align-items: center;
  gap: 12px;
}

.task-kind-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--sageSoft);
  color: var(--forest);
  font-size: 20px;
  font-weight: 900;
  flex: 0 0 auto;
}

.task-kind-copy { display: grid; gap: 3px }
.task-kind-copy small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
}
.task-kind-copy strong {
  color: var(--forest);
  font-size: 14px;
}

.task-progress { width: min(240px, 36%); display: grid; gap: 6px }
.task-progress-copy {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.task-progress-track {
  height: 7px;
  background: #E7E2D8;
  border-radius: 999px;
  overflow: hidden;
}
.task-progress-track span {
  display: block;
  height: 100%;
  background: var(--sage);
  border-radius: inherit;
  transition: width .2s ease;
}

.task-tip {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.task-tip summary {
  padding: 13px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--forest);
  list-style: none;
}
.task-tip summary::-webkit-details-marker { display: none }
.task-tip summary::before { content: "\2736  "; color: var(--green) }
.task-tip[open] summary { border-bottom: 1px solid var(--line) }
.task-tip > p { padding: 12px 16px; margin: 0; font-size: 13px }

/* ===== MODULE CHOICE CARDS ===== */
.module-selector-course h3 {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin-bottom: 10px;
}
.module-selector {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.module-choice {
  min-height: 140px;
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--sage);
  background: white;
  border-radius: 16px;
  padding: 16px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: .15s;
  width: 100%;
}
.module-choice:hover { border-color: var(--sage); background: var(--sageSoft); transform: translateY(-2px) }
.module-choice.active { border-color: var(--forest); background: var(--sageSoft) }
.module-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.module-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 42px;
  line-height: 1;
  color: var(--forest);
  font-weight: 500;
}
.module-check {
  font-size: 11px;
  color: var(--green);
  font-weight: 800;
}

/* ===== ADMIN CONTENT VIEW ===== */
.content-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 20px;
}

.filter-group {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.admin-filter-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 7px;
}

.education-tabs { display: flex; gap: 6px }
.education-tab {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}
.education-tab:hover { border-color: var(--sage); background: var(--sageSoft) }
.education-tab.active { background: var(--forest); color: white; border-color: var(--forest) }

.admin-module-tabs { display: flex; gap: 6px }
.admin-module-tab {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--forest);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  text-decoration: none;
  display: block;
}
.admin-module-tab:hover { border-color: var(--sage); background: var(--sageSoft) }
.admin-module-tab.active { background: var(--forest); color: white; border-color: var(--forest) }

.admin-status-pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
}

.area-stack { display: grid; gap: 18px }
.area-panel { overflow: hidden; padding: 0 !important }
.area-head {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--readingSoft);
  border-bottom: 1px solid #C9DEE5;
}
.area-head.writing { background: var(--writingSoft); border-bottom-color: #EBD3C2 }
.area-title { display: flex; align-items: center; gap: 12px }
.area-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: white;
  color: var(--reading);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  flex: 0 0 auto;
}
.area-head.writing .area-icon { color: var(--writing) }
.area-head h2 { font-family: Inter, sans-serif; font-size: 17px; margin: 0 0 2px }
.area-head p { margin: 0; font-size: 12px }

.set-list { padding: 8px }
.set-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
}
.set-row:last-child { border-bottom: 0 }
.set-number {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--readingSoft);
  color: var(--reading);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  flex: 0 0 auto;
}
.set-row.writing .set-number { background: var(--writingSoft); color: var(--writing) }
.set-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.set-title-line strong { color: var(--forest) }
.set-meta {
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.row-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}
.row-actions form { display: contents }
.reading-btn { background: var(--reading) !important; color: white !important }
.writing-btn { background: var(--writing) !important; color: white !important }

/* ===== ADMIN USERS ===== */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--sageSoft);
  color: var(--forest);
  display: inline-grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  flex: 0 0 auto;
}
.user-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 18px;
}
.user-role-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.user-role-pill.admin {
  background: var(--goldSoft);
  color: #8A5A13;
}
.user-role-pill.student {
  background: var(--sageSoft);
  color: var(--forest);
}

/* ===== ADMIN FEEDBACK CRITERIA ===== */
.criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.criterion-card {
  border-top: 5px solid var(--sage);
  padding: 20px;
}

.criterion-card:nth-child(2) { border-top-color: var(--gold) }
.criterion-card:nth-child(3) { border-top-color: var(--violet) }
.criterion-card:nth-child(4) { border-top-color: var(--writing) }

.criterion-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.criterion-card-head h2 {
  font-size: 17px;
  margin: 6px 0 0;
}

.criterion-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.criterion-status-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
}

.criterion-status-pill.active {
  background: var(--greenSoft);
  color: #067647;
}

.criterion-status-pill.inactive {
  background: var(--sand2);
  color: var(--muted);
}

.admin-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
}

/* ===== RESUME PANEL ===== */
.resume-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin: 0 0 24px;
  padding: 22px 26px;
  background: linear-gradient(115deg, var(--forest), #315B54);
  color: white;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.resume-eyebrow {
  display: block;
  color: #CFE0D8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.resume-panel h2 { color: white; margin: 0 0 4px; font-size: 22px }
.resume-panel p { color: #E4EEE9; margin: 0 0 10px; font-size: 14px }

.resume-meta {
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  color: #F5F8F6;
  font-size: 13px;
  font-weight: 700;
}

.resume-progress-track {
  margin-top: 10px;
  max-width: 380px;
  height: 6px;
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  overflow: hidden;
}

.resume-progress-track span {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: inherit;
}

.resume-panel .btn {
  background: white;
  color: var(--forest);
  box-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== APP TOAST ===== */
.app-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--forest);
  color: white;
  padding: 13px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 700;
  z-index: 150;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}

.app-toast.app-toast-alert { background: var(--warn) }

/* ===== TURBO CONFIRM DIALOG ===== */
.turbo-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 37, 34, .52);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 200;
  opacity: 0;
  transition: opacity .15s;
}

.turbo-confirm-backdrop.open { opacity: 1 }

.turbo-confirm-dialog {
  width: min(420px, 100%);
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(24, 44, 40, .18);
  text-align: center;
}

.turbo-confirm-dialog p {
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: none;
}

.turbo-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ===== PUBLIC INFO PAGES ===== */
.public-info-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 80px) 26px 80px;
}

.info-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
}

.info-hero h1 { font-size: clamp(40px, 5vw, 58px) }

.info-visual {
  background: var(--forest);
  border-radius: 26px;
  padding: 28px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
}

.info-visual h2 { color: white; margin-bottom: 10px }
.info-visual p { color: rgba(255,255,255,.82); margin: 0 }

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

.info-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--softShadow);
}

.info-number {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sageSoft);
  color: var(--forest);
  font-weight: 900;
  margin-bottom: 16px;
  font-size: 14px;
}

.info-section {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}

.info-section h2 { font-size: 32px }

.info-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.info-checks li {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
}

.info-checks li::before {
  content: "✓";
  color: var(--green);
  font-weight: 900;
  flex-shrink: 0;
}

.info-cta {
  background: linear-gradient(135deg, var(--forest), #315B54);
  color: white;
  border-radius: 26px;
  padding: clamp(26px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
}

.info-cta h2 { color: white; margin-bottom: 6px }
.info-cta p { color: rgba(255,255,255,.8); margin: 0 }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 32px;
  align-items: start;
}

.contact-form {
  background: white;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 28px;
  box-shadow: var(--softShadow);
  display: grid;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field { display: grid; gap: 6px }
.field label { font-weight: 800; color: var(--forest); font-size: 14px }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid #CFC8BC;
  border-radius: 10px;
  padding: 11px 13px;
  background: white;
  color: var(--ink);
  font-size: 14px;
}
.field textarea { min-height: 140px; resize: vertical }

.form-note { font-size: 13px; color: var(--muted); margin: 0 }

@media (max-width: 920px) {
  .info-hero, .info-grid, .contact-grid { grid-template-columns: 1fr }
  .info-checks { grid-template-columns: 1fr }
  .form-row { grid-template-columns: 1fr }
  .info-cta { display: grid }
}

/* ===== ADMIN QUESTION TYPE MODAL ===== */
.type-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 37, 34, .52);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 100;
}

.type-modal-backdrop[hidden] { display: none }

.type-modal-dialog {
  width: min(620px, 100%);
  background: white;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(24, 44, 40, .18);
}

.type-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.type-modal-head h2 { margin: 0 0 4px; font-size: 22px }
.type-modal-head p { margin: 0; font-size: 13px }

.modal-close-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--sand2);
  color: var(--forest);
  font-size: 20px;
  font-weight: 900;
  flex-shrink: 0;
  cursor: pointer;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.type-card {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 3px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, background .15s;
  background: white;
}

.type-card:hover {
  border-color: var(--forest);
  background: var(--sageSoft);
}

.type-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sageSoft);
  color: var(--forest);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
}

.type-card strong {
  display: block;
  color: var(--forest);
  font-size: 14px;
  font-weight: 800;
}

.type-card small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ===== QUESTION EDITOR ===== */
.question-editor-form { width: 100% }

.question-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 20px;
  align-items: start;
}

.editor-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.editor-tab {
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s;
}

.editor-tab:hover { color: var(--forest) }
.editor-tab.active { color: var(--forest); border-bottom-color: var(--gold) }

.question-preview-sidebar {
  position: sticky;
  top: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--softShadow);
}

.preview-head {
  padding: 13px 16px;
  background: var(--forest);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.preview-head strong { font-size: 13px }

.preview-kind-badge {
  font-size: 11px;
  background: rgba(255,255,255,.18);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

.preview-body { padding: 14px; min-height: 180px; font-size: 13px }
.preview-empty { color: var(--muted); font-size: 13px; margin: 0 }
.preview-error { color: var(--warn); font-size: 11px; font-family: monospace; margin: 0; word-break: break-all }

.preview-description {
  font-size: 12px; color: var(--muted); margin-bottom: 10px;
  padding: 7px 10px; background: var(--goldSoft);
  border-left: 3px solid var(--gold); border-radius: 0 7px 7px 0;
}

.preview-ads { display: grid; gap: 6px; margin-bottom: 12px }
.preview-ad-card { background: var(--sand); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 12px }
.preview-ad-card b { color: var(--forest) }
.preview-ad-card p { margin: 2px 0 0; color: var(--muted); font-size: 11px }

.preview-stmt {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 6px 8px; background: white; border: 1px solid var(--line);
  border-radius: 8px; font-size: 12px; margin-bottom: 4px;
}

.preview-correct {
  font-weight: 800; color: var(--forest); background: var(--sageSoft);
  border-radius: 5px; padding: 1px 7px; white-space: nowrap; font-size: 11px;
}

.preview-text { font-size: 13px; line-height: 1.9; margin: 0 }
.preview-blank {
  display: inline-block; border-bottom: 2px solid var(--forest);
  min-width: 50px; color: var(--sage); font-style: italic; padding: 0 3px; cursor: help;
}

.preview-paragraph { margin-bottom: 12px }
.preview-odd-sentence { display: block; padding: 4px 8px; border-radius: 6px; font-size: 12px; margin-bottom: 3px; color: var(--ink) }
.preview-odd-sentence.odd { background: var(--warnSoft); color: var(--warn); font-weight: 700 }

.preview-pair {
  display: grid; grid-template-columns: 1fr 18px 1fr; gap: 4px;
  align-items: center; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line);
}
.preview-pair:last-child { border-bottom: 0 }
.preview-arrow { text-align: center; color: var(--sage) }

.preview-prompt { font-size: 12px; line-height: 1.6; padding: 9px 10px; background: var(--sand); border-radius: 8px; margin-bottom: 9px; color: var(--ink) }
.preview-meta { font-size: 11px; color: var(--muted); margin-bottom: 8px }
.preview-criteria { display: flex; flex-wrap: wrap; gap: 4px }
.preview-criteria-tag { font-size: 10px; background: var(--sageSoft); color: var(--forest); border-radius: 999px; padding: 2px 8px; font-weight: 700 }

/* ===== STRUCTURED QUESTION EDITOR ===== */
.structured-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--sand);
}

.structured-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.struct-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.struct-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
}

.struct-row-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.struct-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.struct-row-remove {
  border: 0;
  background: var(--warnSoft);
  color: var(--warn);
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  margin-top: 2px;
  transition: background .15s, color .15s;
}
.struct-row-remove:hover { background: var(--warn); color: white; }

.blank-row { align-items: center; }
.blank-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  min-width: 70px;
  flex-shrink: 0;
}

.odd-index-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.criteria-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.criteria-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 14px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 8px;
  user-select: none;
}
.criteria-checkbox-label input { margin: 0; cursor: pointer; }
.criteria-checkbox-label:has(input:checked) {
  background: var(--sageSoft);
  border-color: var(--sage);
  color: var(--forest);
  font-weight: 600;
}

/* ===== READING QUESTION TYPES ===== */

.inline-select {
  display: inline-block;
  width: auto;
  min-width: 120px;
  margin: 0 4px;
  padding: 5px 8px;
  border: 1px solid var(--sage);
  border-radius: 8px;
  background: var(--sageSoft);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  vertical-align: baseline;
  cursor: pointer;
}

.dense-copy { font-size: 14px; line-height: 1.68; color: var(--ink) }
.dense-copy p { margin: 0 0 12px }
.dense-copy p:last-child { margin-bottom: 0 }
.dense-copy h2 { font-size: 20px; margin-bottom: 12px }

.long-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 860px) { .long-layout { grid-template-columns: 1fr } }

.scroll-pane { max-height: 440px; overflow-y: auto; padding-right: 4px }

.person-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px }
.person-tab {
  border: 1px solid var(--line);
  background: white;
  border-radius: 11px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.person-tab.active { background: var(--forest); color: white; border-color: var(--forest) }

.chat { display: grid; gap: 10px }
.bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--sageSoft);
  font-size: 14px;
  line-height: 1.5;
}
.bubble.me { justify-self: end; background: var(--forest); color: white }
.bubble-select {
  border: 2px dashed var(--sage);
  border-radius: 12px;
  padding: 8px 12px;
  background: white;
  font-size: 13px;
  min-width: 180px;
  color: var(--ink);
  cursor: pointer;
}

.word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 14px;
  background: var(--sand2);
  border-radius: 12px;
}
.word-chip {
  border: 1px solid #CFC6B7;
  background: white;
  color: var(--forest);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 13px;
  display: inline-block;
}

.choice-stack { display: grid; gap: 9px }
.choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .14s, background .14s;
}
.choice:has(input:checked) { border-color: var(--sage); background: var(--sageSoft) }
.choice input[type="radio"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--forest) }

.dense-list { display: grid; gap: 7px }
.dense-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.dense-card b { display: block; color: var(--forest); font-size: 12px; margin-bottom: 3px }
.dense-card p { font-size: 12px; line-height: 1.5; margin: 0; color: var(--muted) }

.section-gap {
  margin: 9px 0;
  padding: 9px 12px;
  background: var(--goldSoft);
  border: 1px solid var(--gold);
  border-radius: 8px;
}
.section-gap select {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

/* ===== EXERCISE EDITOR TWO-COLUMN LAYOUT ===== */
.exercise-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 20px;
  align-items: start;
}

.publish-sidebar {
  position: sticky;
  top: 20px;
  padding: 20px;
}

.publish-sidebar h2 { font-size: 18px; margin-bottom: 4px }
.publish-sidebar > p { font-size: 13px; margin: 0 0 4px }

.exercise-checklist {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.exercise-check {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: start;
}

.check-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--warnSoft);
  color: var(--warn);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

.check-icon.ok {
  background: var(--greenSoft);
  color: var(--green);
}

.exercise-check strong { display: block; font-size: 13px; color: var(--forest); margin-bottom: 2px }
.exercise-check small { font-size: 12px; color: var(--muted) }

.publish-actions {
  display: grid;
  gap: 8px;
  padding-top: 16px;
}

.publish-actions .btn { width: 100%; justify-content: center }

/* ===== DRAG REORDER ===== */
.drag-handle {
  color: var(--muted);
  font-size: 16px;
  cursor: grab;
  padding: 0 4px;
  user-select: none;
  text-align: center;
}

tr[draggable] { cursor: default }
tr[draggable].dragging { opacity: .45 }
tr[draggable].drag-over td { border-top: 2px solid var(--forest) }