/* ============================================================
   DutchTutor — Gezellig Theme
   Main app: Schetsboek (warm notebook, Nunito, sticker cards)
   Landing:  Orange → Yellow gradient with pixel robots
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --bg:             #FFFBA7;
  --surface:        #FFFFFF;
  --surface-2:      #F4FBF0;
  --ink:            #2D2D2D;
  --ink-muted:      #7C7C7C;
  --border:         #E8DDD0;

  --tulip:          #D4826E;
  --tulip-dark:     #BE6A58;
  --sun:            #FFD93D;
  --sky:            #60C6F7;
  --mint:           #4ECDC4;
  --lavender:       #C084FC;
  --coral:          #FF9F43;

  /* backward-compat aliases */
  --primary:        #D4826E;
  --primary-dark:   #BE6A58;
  --success:        #4ECDC4;
  --danger:         #D4826E;
  --warning:        #FFD93D;
  --blue:           #60C6F7;

  --radius:         14px;
  --radius-pill:    999px;
  --sticker-shadow: 4px 4px 0 #2D2D2D;
  --sticker-border: 2px solid #2D2D2D;
  --shadow:         4px 4px 0 #2D2D2D;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Body — same gradient as landing, fixed so it feels continuous ── */
body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  background-color: #FFFBA7;
  background-image:
    radial-gradient(circle, rgba(45,45,45,.07) 1.2px, transparent 1.2px),
    linear-gradient(150deg, #FFFBA7 0%, #C1EBE9 55%, #E6EEC9 100%);
  background-size: 24px 24px, 100% 100%;
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
}

/* ── Layout ──────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; min-height: 100vh; }

header {
  background: linear-gradient(135deg, #5BABA6 0%, #4A9B96 100%);
  color: white;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 3px solid #2D2D2D;
  box-shadow: 0 3px 0 #2D2D2D;
}

header h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: opacity .15s;
}
header h1:hover { opacity: .82; }

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
}

.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid #2D2D2D;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #2D2D2D;
  background: #5BABA6;
  overflow: hidden;
  flex: 0 0 auto;
}

.brand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

nav { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }

nav a,
nav button {
  font-family: 'Caveat', 'Nunito', cursive;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.18);
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
nav a:hover,
nav button:hover { background: rgba(255,255,255,0.32); border-color: white; }

nav a.active,
nav button.active { background:#FFD93D; color:#2D2D2D; border-color:#2D2D2D; box-shadow:2px 2px 0 #2D2D2D; }

main { flex:1; padding:1.75rem 1.5rem; max-width:900px; margin:0 auto; width:100%; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: white;
  border-radius: var(--radius);
  border: var(--sticker-border);
  box-shadow: var(--sticker-shadow);
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: card-enter 0.2s ease-out both;
}
.card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #2D2D2D; }

#page-topics  .card { background: #FFFBEB; }
#page-news    .card { background: #EEF8F5; }
#page-reading .card { background: #F0FFFE; }
#page-plan    .card { background: #F8F0FF; }
#page-reports .card { background: #FFF5EB; }
#page-session .card { background: white;   }

.card-title { font-size:1rem; font-weight:700; margin-bottom:.75rem; }

/* ── Topic grid ──────────────────────────────────────────────── */
.topic-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.85rem; }

.topic-card {
  background: #FFFBEB;
  border: var(--sticker-border);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow);
  padding: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: card-enter 0.2s ease-out both;
}
.topic-card:hover { transform: rotate(1deg) translate(-2px,-2px); box-shadow: 6px 6px 0 #2D2D2D; }
.topic-card h3 { font-size:.9rem; font-weight:700; }
.topic-card p  { font-size:.8rem; color:var(--ink-muted); margin-top:.25rem; }

.topics-page {
  padding-top: .15rem;
}

.topic-jump {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.75rem;
}

.topic-jump-label {
  font-size: .8rem;
  font-weight: 800;
  color: var(--ink-muted);
  margin-right: .15rem;
}

.level-jump {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  font-size: .82rem;
  padding: .3rem .9rem;
  border-radius: var(--radius-pill);
  border: 2px solid #2D2D2D;
  box-shadow: 2px 2px 0 #2D2D2D;
  color: #2D2D2D;
  text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease;
}

.level-jump:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #2D2D2D;
}

.topic-level-section {
  margin-bottom: 2.25rem;
  scroll-margin-top: 1rem;
}

.topic-level-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  border: 2px solid #2D2D2D;
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 #2D2D2D;
  padding: .65rem 1.1rem;
  margin-bottom: 1rem;
}

.topic-level-strip strong {
  font-size: 1rem;
  font-weight: 800;
}

.topic-level-summary {
  font-size: .8rem;
  font-weight: 700;
  opacity: .72;
}

.topic-count {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 800;
  opacity: .75;
}

.level-strip-A1 { background: #FFD93D; color: #2D2D2D; }
.level-strip-A2 { background: #60C6F7; color: #2D2D2D; }
.level-strip-B1 { background: #4ECDC4; color: white; }
.level-strip-B2 { background: #C084FC; color: white; }

.topic-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .7rem;
}

.topics-page .topic-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 110px;
  padding: 1rem .75rem;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.topics-page .topic-tile h3 {
  font-size: .85rem;
  line-height: 1.35;
  color: var(--ink);
}

.topic-icon {
  font-size: 2.1rem;
  line-height: 1;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.12));
}

.topic-status {
  font-size: .68rem;
  font-weight: 800;
  padding: .15rem .55rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid #2D2D2D;
  box-shadow: 2px 2px 0 #2D2D2D;
  background: white;
}

/* ── News list ───────────────────────────────────────────────── */
.news-card {
  color: inherit;
  text-decoration: none;
}

.news-card h3 {
  margin-top: .75rem;
  line-height: 1.35;
}

.news-card p {
  margin-top: .55rem;
  line-height: 1.55;
}

.news-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

.info-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: .18rem .65rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid #2D2D2D;
  box-shadow: 2px 2px 0 #2D2D2D;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
}

.source-pill {
  background: #FFF8F0;
  color: var(--ink);
}

.date-pill {
  background: white;
  color: var(--ink-muted);
}

.pending-pill {
  background: #F1F0EE;
  color: var(--ink-muted);
}

.score-pill {
  background: #4ECDC4;
  color: white;
}

.btn-disabled,
.btn-disabled:hover {
  background: #F1F0EE;
  color: var(--ink-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: 2px 2px 0 #2D2D2D;
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(45, 45, 45, .38);
}

.modal-card {
  width: min(420px, 100%);
  background: white;
  border: var(--sticker-border);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 #2D2D2D;
  padding: 1.25rem;
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: .45rem;
}

.modal-card p {
  color: var(--ink-muted);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  margin-top: .55rem;
}

.detail-back {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.link-pill {
  background: white;
  color: var(--ink);
  text-decoration: none;
}

.link-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #2D2D2D;
}

.audio-player-wrap {
  background: white;
  border: var(--sticker-border);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow);
  padding: .75rem;
  margin-bottom: 1rem;
}

.audio-player-wrap audio {
  display: block;
  width: 100%;
}

.audio-toggle-btn {
  justify-content: center;
  min-width: 6.7rem;
}

.question-list {
  margin-top: .75rem;
  padding-left: 1.15rem;
}

.question-list li {
  margin-bottom: .55rem;
  line-height: 1.5;
}

/* ── Reports list ────────────────────────────────────────────── */
.reports-list {
  gap: .85rem;
}

.report-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.report-card-main {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.report-card h3 {
  font-size: 1rem;
}

/* ── Account / Profile ──────────────────────────────────────── */
.account-notice {
  background: #FFFBEB;
  border: var(--sticker-border);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 #2D2D2D;
  font-weight: 800;
  margin-bottom: 1rem;
  padding: .8rem 1rem;
}

.account-credit-balance {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 800;
  color: var(--tulip);
}

.account-overview-card {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.account-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1.5px dashed var(--border);
  padding-bottom: 1rem;
}

.account-overview-header h3 {
  font-size: 1.2rem;
}

.account-credit-summary {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: .15rem;
  min-width: 8rem;
  text-align: right;
}

.account-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(230px, .9fr);
  gap: .85rem;
}

.account-panel {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: .9rem;
}

.account-panel-title {
  color: var(--ink-muted);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.account-panel .inline-actions {
  margin-top: auto;
}

.account-support-note {
  border-top: 1px dashed var(--border);
  padding-top: .65rem;
}

.account-support-note a {
  color: var(--tulip-dark);
  font-weight: 800;
}

.account-usage-card {
  margin-top: 1rem;
}

.account-usage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.account-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .75rem;
}

.account-usage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .75rem;
}

.account-usage-recent {
  margin-top: 1.2rem;
}

.account-usage-recent h3 {
  font-size: .95rem;
  margin-bottom: .65rem;
}

.account-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .75rem;
  align-items: center;
  padding: .55rem 0;
  border-top: 1px dashed var(--border);
}

/* ── Reading list ────────────────────────────────────────────── */
.reading-level-section {
  margin-bottom: 2rem;
}

.reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.reading-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 145px;
  padding: 0;
  overflow: hidden;
}

.reading-card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .65rem;
  color: inherit;
  text-decoration: none;
  padding: 1.1rem;
}

.reading-card-link h3 {
  padding-right: 2.2rem;
}

.reading-card-link:hover h3 {
  text-decoration: underline;
}

.reading-card h3 a {
  color: inherit;
  text-decoration: none;
}

.reading-card h3 a:hover {
  text-decoration: underline;
}

.reading-card p {
  color: var(--ink-muted);
  font-size: .9rem;
  line-height: 1.55;
}

.reading-delete-form {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 2;
  margin: 0;
}

.reading-delete-btn {
  width: 1.8rem;
  height: 1.8rem;
  justify-content: center;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: 2px 2px 0 #2D2D2D;
}

/* ── Reading detail ──────────────────────────────────────────── */
.reading-text-card {
  line-height: 1.8;
}

.reading-text-card p + p {
  margin-top: .9rem;
}

.reading-practice-card {
  margin-top: 1rem;
}

.reading-result {
  margin-top: 1rem;
}

.reading-result-status {
  color: var(--ink-muted);
  font-size: .9rem;
  font-weight: 700;
}

.reading-result-card {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.reading-result-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.reading-transcript {
  background: #FFF8F0;
  border: 1.5px dashed #2D2D2D;
  border-radius: var(--radius);
  padding: .65rem .8rem;
  line-height: 1.55;
  font-size: .9rem;
}

.reading-diff-box {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  line-height: 2;
  font-size: .95rem;
}

.reading-word {
  border-radius: 5px;
  padding: .05rem .22rem;
}

.reading-word.correct {
  color: var(--ink);
}

.reading-word.wrong {
  background: #FDE2DE;
  color: #A63E2D;
  border: 1px solid rgba(166, 62, 45, .18);
}

.reading-word.missing {
  background: #FFF3B8;
  color: #8A6500;
  border: 1px solid rgba(138, 101, 0, .18);
  text-decoration: line-through;
}

.reading-said {
  color: var(--ink-muted);
  font-size: .75rem;
  font-style: italic;
  margin-right: .15rem;
}

.reading-diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .78rem;
  color: var(--ink-muted);
}

.reading-diff-legend .reading-word {
  font-weight: 800;
}

/* ── Level badges ────────────────────────────────────────────── */
.level-badge {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .7rem;
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid #2D2D2D;
  box-shadow: 2px 2px 0 #2D2D2D;
}
.badge-A1 { background:#FFD93D; color:#2D2D2D; }
.badge-A2 { background:#60C6F7; color:#2D2D2D; }
.badge-B1 { background:#4ECDC4; color:white; }
.badge-B2 { background:#C084FC; color:white; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .875rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 2px solid #2D2D2D;
  box-shadow: 3px 3px 0 #2D2D2D;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  line-height: 1.4;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn:hover   { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #2D2D2D; }
.btn:active  { transform: translate(2px,2px);   box-shadow: 1px 1px 0 #2D2D2D; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:2px 2px 0 #2D2D2D !important; pointer-events:none; }

.btn-primary          { background:var(--tulip); color:white; }
.btn-primary:hover    { background:var(--tulip-dark); }
.btn-secondary        { background:var(--sky); color:#2D2D2D; }
.btn-secondary:hover  { background:#4BB3E8; }
.btn-danger           { background:#D4826E; color:white; }
.btn-danger:hover     { background:#BE6A58; }
.btn-ghost            { background:white; color:var(--ink); border-style:dashed; }
.btn-ghost:hover      { background:var(--bg); }

/* ── Error pages ─────────────────────────────────────────────── */
.not-found-card {
  background: #FFFBEB;
  border: var(--sticker-border);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  margin: 3rem auto 0;
  max-width: 680px;
  padding: 1.4rem;
}

.not-found-code {
  align-self: start;
  background: var(--sun);
  border: var(--sticker-border);
  border-radius: 10px;
  box-shadow: 3px 3px 0 #2D2D2D;
  font-family: 'Pixelify Sans', 'Nunito', sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  padding: .45rem .75rem;
}

.not-found-copy h2 {
  font-size: 1.45rem;
  margin-bottom: .4rem;
}

.not-found-copy code {
  background: rgba(255,255,255,.7);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: .08rem .3rem;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  grid-column: 1 / -1;
}

/* ── Session view ────────────────────────────────────────────── */
#session-view { display:flex; flex-direction:column; height:calc(100vh - 145px); min-height:560px; }

.session-header {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem;
  padding:.75rem 1rem;
  background:white;
  border:var(--sticker-border); border-radius:var(--radius);
  box-shadow:var(--sticker-shadow);
}
.session-header h2 { font-size:1.05rem; font-weight:800; line-height:1.3; }

.session-header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.session-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
}

.session-main.materials-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.conversation {
  flex:1; overflow-y:auto;
  border:var(--sticker-border); border-radius:var(--radius);
  padding:1rem; background:rgba(255,255,255,.88);
  display:flex; flex-direction:column; gap:.75rem;
  min-height:0;
}

.session-materials {
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
  background: rgba(255,255,255,.9);
  border: var(--sticker-border);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow);
  padding: 1rem;
  font-size: .86rem;
}

.session-materials-title {
  font-weight: 900;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .74rem;
  margin-bottom: .9rem;
}

.session-material-section + .session-material-section {
  margin-top: 1rem;
}

.session-material-section h3 {
  font-size: .86rem;
  margin-bottom: .5rem;
}

.session-material-list {
  display: grid;
  gap: .35rem;
}

.session-material-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--border);
}

.session-material-row span,
.session-material-card span {
  color: var(--ink-muted);
  font-size: .8rem;
  line-height: 1.35;
}

.session-material-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .55rem .65rem;
  margin-bottom: .5rem;
}

.turn { max-width:min(76%, 680px); padding:.75rem 1rem; font-size:.9rem; line-height:1.55; }

.turn.user {
  align-self:flex-end;
  background:var(--tulip); color:white;
  border:2px solid #2D2D2D; border-radius:18px 18px 4px 18px;
  box-shadow:3px 3px 0 #2D2D2D;
}
.turn.assistant {
  align-self:flex-start;
  background:#FFF8F0; color:var(--ink);
  border:2px solid #2D2D2D; border-radius:18px 18px 18px 4px;
  box-shadow:3px 3px 0 #E8DDD0;
}
.turn .role-label { font-size:.7rem; font-weight:700; opacity:.7; margin-bottom:.25rem; display:flex; align-items:center; gap:.4rem; }

.replay-btn {
  background:none; border:1.5px solid rgba(255,255,255,.7); border-radius:5px;
  cursor:pointer; font-size:.7rem; padding:.1rem .35rem; color:white; opacity:.85;
  line-height:1.4; flex-shrink:0; transition:opacity .15s, background .15s;
}
.replay-btn:hover    { opacity:1; background:rgba(255,255,255,.25); }
.replay-btn:disabled { opacity:.35; cursor:default; }

/* ── Record button ───────────────────────────────────────────── */
.record-area { display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:1rem 0 .5rem; }

.session-composer {
  background: rgba(255,255,255,.86);
  border: var(--sticker-border);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow);
  margin-top: 1rem;
  padding: .9rem;
}

.session-actions {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  gap: .75rem;
  width: 100%;
  align-items: center;
}

.session-text-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
}

.session-text-form input {
  min-width: 0;
}

.record-toggle-btn {
  justify-content: center;
  min-width: 8rem;
}

.record-toggle-btn.recording {
  background: linear-gradient(135deg, #BE6A58, #D4826E);
  color: white;
  animation: tulip-pulse 1.2s ease-out infinite;
}

.record-toggle-btn:disabled {
  background: #C0B8B0;
  cursor: not-allowed;
  transform: none !important;
  animation: none;
  box-shadow: 2px 2px 0 #2D2D2D !important;
}

.record-hint { font-size:.8rem; color:var(--ink-muted); font-weight:600; }
.status-bar  { font-size:.8rem; color:var(--ink-muted); min-height:1.2rem; text-align:center; }

/* ── Plan view ───────────────────────────────────────────────── */
.plan-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1rem; }

.stat-card {
  background:white; border:var(--sticker-border); border-radius:var(--radius);
  box-shadow:var(--sticker-shadow); padding:1.25rem 1rem; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #2D2D2D; }
.stat-card .stat-num   { font-size:2.2rem; font-weight:800; line-height:1; margin-bottom:.3rem; color:var(--tulip); }
.stat-card .stat-label { font-size:.75rem; color:var(--ink-muted); font-weight:600; margin-top:.25rem; }

.plan-topic-row { display:flex; align-items:center; gap:.75rem; padding:.75rem 0; border-bottom:2px dashed var(--border); }
.plan-topic-row:last-child { border-bottom:none; }
.plan-topic-info { flex:1; }
.plan-topic-info h4    { font-size:.9rem; font-weight:700; }
.plan-topic-info .meta { font-size:.75rem; color:var(--ink-muted); margin-top:.15rem; }

.status-pill { font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:var(--radius-pill); border:1.5px solid #2D2D2D; box-shadow:2px 2px 0 #2D2D2D; }
.status-not_started { background:#F1F0EE; color:#7C7C7C; }
.status-learning    { background:#60C6F7; color:#2D2D2D; }
.status-reviewing   { background:#FFD93D; color:#2D2D2D; }
.status-mastered    { background:#4ECDC4; color:white;   }
.due-badge { font-size:.7rem; font-weight:800; color:var(--tulip); margin-left:.5rem; }

/* ── Report view ─────────────────────────────────────────────── */
.score-circle {
  width:88px; height:88px;
  border-radius:60% 40% 55% 45% / 45% 55% 40% 60%;
  background:white; border:3px solid #2D2D2D; box-shadow:4px 4px 0 #2D2D2D;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:800; color:var(--tulip);
  margin:0 auto 1rem;
  animation:wobble-idle 5s ease-in-out infinite;
}

.report-detail-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-back {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.report-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.report-hero-main {
  flex: 1;
  min-width: 0;
}

.report-hero-main h2 {
  font-size: 1.2rem;
  line-height: 1.3;
}

.report-score-block {
  text-align: center;
  min-width: 5rem;
}

.report-score {
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--warning);
}

.report-score-denom {
  font-size: .72rem;
  color: var(--ink-muted);
  font-weight: 800;
  margin-top: .15rem;
}

.report-section p {
  font-size: .9rem;
  line-height: 1.6;
}

.report-good-title {
  color: var(--success);
}

.report-wrong {
  color: var(--danger);
  text-decoration: line-through;
  font-weight: 700;
}

.report-arrow {
  font-weight: 800;
  margin: 0 .25rem;
}

.vocab-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.vocab-chip {
  background: #F1F0EE;
  border: 1.5px solid #2D2D2D;
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0 #2D2D2D;
  padding: .2rem .65rem;
  font-size: .8rem;
  font-weight: 800;
}

.error-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.error-item {
  background:#FFF5EB;
  border-left:4px solid var(--coral); border:2px solid #2D2D2D;
  border-radius:0 10px 10px 0;
  padding:.5rem .75rem; font-size:.875rem; box-shadow:3px 3px 0 #2D2D2D;
}
.error-item .correction { color:var(--mint); font-weight:700; }


/* ── Filter bar ──────────────────────────────────────────────── */
.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }

.filter-btn {
  font-family:'Nunito',sans-serif; font-weight:700; font-size:.8rem;
  padding:.3rem .85rem; border-radius:var(--radius-pill);
  border:2px solid #2D2D2D; background:white; box-shadow:2px 2px 0 #2D2D2D;
  cursor:pointer; transition:transform .1s ease, box-shadow .1s ease;
}
.filter-btn:hover  { transform:translate(-1px,-1px); box-shadow:3px 3px 0 #2D2D2D; }
.filter-btn:active { transform:translate(1px,1px);   box-shadow:1px 1px 0 #2D2D2D; }
.filter-btn.active { background:var(--tulip); color:white; }

/* ── Forms ───────────────────────────────────────────────────── */
textarea, input[type=text], select {
  font-family:'Nunito',sans-serif; font-size:.9rem;
  background:white; border:2px solid var(--border); border-radius:10px;
  padding:.5rem .75rem; color:var(--ink); width:100%; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
textarea:focus, input[type=text]:focus, select:focus {
  border-color:var(--tulip);
  box-shadow:0 0 0 3px rgba(255,107,107,.15);
}

input[type=range] {
  -webkit-appearance:none; height:6px;
  background:var(--border); border-radius:999px; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px;
  background:var(--tulip); border:2px solid white; border-radius:50%;
  box-shadow:0 1px 4px rgba(255,107,107,.5); cursor:pointer;
}
input[type=range]::-moz-range-thumb {
  width:18px; height:18px;
  background:var(--tulip); border:2px solid white; border-radius:50%; cursor:pointer;
}

/* ── Misc ────────────────────────────────────────────────────── */
.material-text { font-size:.8rem; }
.loading { text-align:center; padding:2rem; color:var(--ink-muted); font-size:.9rem; }

.spinner {
  display:inline-block; width:22px; height:22px;
  border:3px solid var(--border); border-top-color:var(--tulip);
  border-radius:50%; animation:spin .7s linear infinite;
  margin-right:.5rem; vertical-align:middle;
}

.typing-dot { display:inline-flex; gap:4px; padding:.75rem 1rem; }
.typing-dot span { width:7px; height:7px; border-radius:50%; animation:bounce .8s infinite; }
.typing-dot span:nth-child(1) { background:var(--tulip); animation-delay:0s; }
.typing-dot span:nth-child(2) { background:var(--sun);   animation-delay:.15s; }
.typing-dot span:nth-child(3) { background:var(--mint);  animation-delay:.3s; }

/* ════════════════════════════════════════════════════════════
   Cover / Landing — Dark pixel-grid night sky with robots
   ════════════════════════════════════════════════════════════ */
#cover-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Soft pastel gradient + schetsboek dot-grid — same world as main app */
  background-color: #FFFBA7;
  background-image:
    radial-gradient(circle, rgba(45,45,45,.07) 1.2px, transparent 1.2px),
    linear-gradient(150deg, #FFFBA7 0%, #C1EBE9 55%, #E6EEC9 100%);
  background-size: 24px 24px, 100% 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

#cover-skip {
  position: fixed;
  top: 1.1rem; right: 1.4rem;
  z-index: 10001;
  background: rgba(255,255,255,.45);
  border: 1.5px solid rgba(45,45,45,.2);
  border-radius: 999px;
  color: #5A5A5A;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  padding: .3rem .9rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#cover-skip:hover { background: rgba(255,255,255,.75); color: #2D2D2D; }

/* ── Floating pixel particles ────────────────────────────────── */
.cover-sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.spark {
  position: absolute;
  width: 4px; height: 4px;
  image-rendering: pixelated;
  animation: spark-rise linear infinite;
  bottom: -8px;
}
/* Each spark: position, colour, unique speed — vivid so they show on light bg */
.sp-1  { left:  6%; background: #FF6B6B; animation-duration: 5.0s; animation-delay: 0.0s; }
.sp-2  { left: 14%; background: #C084FC; animation-duration: 7.2s; animation-delay: 1.4s; }
.sp-3  { left: 23%; background: #FF9F43; animation-duration: 4.6s; animation-delay: 0.7s; }
.sp-4  { left: 33%; background: #4ECDC4; animation-duration: 6.5s; animation-delay: 2.1s; }
.sp-5  { left: 44%; background: #FF6B6B; animation-duration: 5.8s; animation-delay: 0.3s; }
.sp-6  { left: 55%; background: #60C6F7; animation-duration: 4.2s; animation-delay: 1.8s; }
.sp-7  { left: 65%; background: #C084FC; animation-duration: 6.8s; animation-delay: 0.9s; }
.sp-8  { left: 75%; background: #FF9F43; animation-duration: 5.4s; animation-delay: 1.2s; }
.sp-9  { left: 85%; background: #4ECDC4; animation-duration: 4.8s; animation-delay: 2.6s; }
.sp-10 { left: 93%; background: #FF6B6B; animation-duration: 6.1s; animation-delay: 0.5s; }

/* ── Robot face wraps ────────────────────────────────────────── */
.cover-face-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 0 2.25rem;
  position: relative;
  z-index: 10000;
}

/* Speech bubble — white sticker on dark, pops cleanly */
.face-bubble {
  background: white;
  border: 2px solid #2D2D2D;
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  padding: 9px 14px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .8rem;
  color: #2D2D2D;
  text-align: center;
  line-height: 1.4;
  position: relative;
  max-width: 148px;
  animation: bubble-bob 3s ease-in-out infinite;
}
.face-bubble::before {
  content: '';
  position: absolute;
  bottom: -13px; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #2D2D2D;
}
.face-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: white;
}

/* SVG pixel robot */
.px-robot-svg {
  display: block;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.22));
}

/* Pixel mouth alternating animation */
.px-mouth-c { animation: px-mouth-cycle 1s steps(1) infinite; }
.px-mouth-o { animation: px-mouth-cycle 1s steps(1) infinite; animation-delay: -0.5s; }
.cover-face-wrap:last-of-type .px-mouth-c { animation-delay: -0.5s; }
.cover-face-wrap:last-of-type .px-mouth-o { animation-delay: 0s; }

/* ── Center cover content ────────────────────────────────────── */
.cover-content {
  flex: 1;
  max-width: 460px;
  text-align: center;
  padding: 1.5rem 1rem;
  position: relative;
  z-index: 10000;
}

/* Title: Pixelify Sans — pixel-art style, readable at large sizes */
.cover-title {
  font-family: 'Pixelify Sans', monospace;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  color: #2D2D2D;
  line-height: 1.25;
  margin-bottom: .9rem;
  text-shadow: 2px 2px 0 rgba(255,255,255,.6);
  animation: hero-rise .5s ease-out both;
  animation-delay: .08s;
  letter-spacing: .02em;
}

.cover-sub {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(.88rem, 2.2vw, 1rem);
  color: #4A4A4A;
  font-weight: 600;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  animation: hero-rise .5s ease-out both;
  animation-delay: .18s;
}

/* Sticker-style CTA — white pill, tulip text, stands out on dark */
.cover-cta {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  padding: .75rem 2.2rem;
  border-radius: 999px;
  background: var(--tulip);
  color: white;
  border: 2px solid #2D2D2D;
  box-shadow: 5px 5px 0 #2D2D2D;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
  animation: hero-rise .5s ease-out both, cta-breathe 2.8s ease-in-out 1s infinite;
  animation-delay: .28s, 1s;
}
.cover-cta:hover  { transform:translateY(-2px); box-shadow:6px 7px 0 #2D2D2D; background:var(--tulip-dark); }
.cover-cta:active { transform:translate(2px,2px);   box-shadow:2px 2px 0 #2D2D2D; }

.cover-hint {
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(45,45,45,.55);
  margin-top: .85rem;
  animation: hero-rise .5s ease-out both;
  animation-delay: .36s;
}

/* Feature cards — white schetsboek sticker cards */
.cover-features {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.75rem;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.cover-feat {
  background: white;
  border-radius: 14px;
  border: 2px solid #2D2D2D;
  box-shadow: 3px 3px 0 rgba(0,0,0,.18);
  padding: .7rem 1rem;
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .85rem;
  transition: transform .15s ease, box-shadow .15s ease;
  animation: card-enter .35s ease-out both;
}
.cover-feat:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(0,0,0,.18); }
.cover-feat:nth-child(1) { animation-delay:.42s; }
.cover-feat:nth-child(2) { animation-delay:.54s; }
.cover-feat:nth-child(3) { animation-delay:.66s; }

.feat-icon { font-size:1.5rem; line-height:1; flex-shrink:0; }
.cover-feat-text { display:flex; flex-direction:column; gap:.15rem; }
.cover-feat strong { font-family:'Pixelify Sans',monospace; font-size:.75rem; color:#2D2D2D; letter-spacing:.03em; }
.cover-feat small  { font-family:'Nunito',sans-serif; font-size:.74rem; color:#7C7C7C; font-weight:600; line-height:1.4; }

.cover-footer {
  margin-top: 1.5rem;
  font-family: 'Caveat', cursive;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(45,45,45,.5);
  animation: hero-rise .5s ease-out both;
  animation-delay: .85s;
}

/* Hide robots on narrow screens */
@media (max-width: 700px) {
  .cover-face-wrap { display: none; }
  .cover-content { max-width: 100%; padding: 1.5rem; }
}

/* Cover exit */
#cover-overlay.cover-exit {
  animation: cover-slide-out .4s ease-in forwards;
  pointer-events: none;
}

/* ── Utility ─────────────────────────────────────────────────── */
.hidden       { display:none !important; }
.text-muted   { color:var(--ink-muted); }
.mt-1         { margin-top:.5rem; }
.flex         { display:flex; }
.gap-1        { gap:.5rem; }
.items-center { align-items:center; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar       { width:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(45,45,45,.2); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(45,45,45,.35); background-clip:padding-box; }

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes spin  { to { transform:rotate(360deg); } }
@keyframes bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

@keyframes card-enter {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes tulip-pulse {
  0%   { box-shadow:4px 4px 0 #2D2D2D, 0 0 0 0   rgba(212,130,110,.5); }
  70%  { box-shadow:4px 4px 0 #2D2D2D, 0 0 0 16px rgba(212,130,110,0); }
  100% { box-shadow:4px 4px 0 #2D2D2D, 0 0 0 0   rgba(212,130,110,0); }
}
@keyframes wobble-idle {
  0%,100% { border-radius:60% 40% 55% 45% / 45% 55% 40% 60%; }
  25%     { border-radius:45% 55% 40% 60% / 60% 40% 55% 45%; }
  50%     { border-radius:55% 45% 60% 40% / 40% 60% 45% 55%; }
  75%     { border-radius:40% 60% 45% 55% / 55% 45% 60% 40%; }
}
@keyframes px-mouth-cycle {
  0%,  49% { opacity:1; }
  50%, 100% { opacity:0; }
}
@keyframes bubble-bob {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-7px); }
}
@keyframes hero-rise {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes cta-breathe {
  0%,100% { box-shadow:5px 5px 0 #2D2D2D; }
  50%     { box-shadow:5px 5px 0 #2D2D2D, 0 0 0 8px rgba(255,107,107,.25); }
}
@keyframes cover-slide-out {
  from { opacity:1; transform:translateY(0)   scale(1); }
  to   { opacity:0; transform:translateY(-24px) scale(.97); }
}
@keyframes spark-rise {
  0%   { transform: translateY(0);      opacity: 0;   }
  8%   { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-98vh);  opacity: 0;   }
}

/* Server-rendered app helpers */
.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
}

.meta {
  color: var(--ink-muted);
  font-size: .85rem;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  max-width: 720px;
}

.textarea-large {
  min-height: 260px;
}

.inline-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

.nav-profile {
  font-size: .8rem;
  color: white;
  opacity: .9;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.nav-profile a {
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}

.nav-profile a:hover {
  text-decoration: underline;
}

.landing-page {
  min-height: calc(100vh - 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 0;
}

.landing-content {
  max-width: 460px;
  text-align: center;
}

.landing-robot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.landing-actions {
  justify-content: center;
}

.landing-actions .cover-cta {
  text-decoration: none;
}

.legal-links {
  margin-top: .9rem;
}

.legal-links a {
  color: inherit;
  font-weight: 800;
}

.legal-page {
  line-height: 1.65;
  max-width: 760px;
  margin: 1rem auto;
}

.legal-page h2 {
  font-size: 1.6rem;
  margin-bottom: .25rem;
}

.legal-page h3 {
  font-size: 1rem;
  margin-top: 1.15rem;
  margin-bottom: .35rem;
}

.legal-page ul {
  margin-left: 0;
  padding-left: 1.75rem;
}

.legal-page li {
  padding-left: .25rem;
  margin-bottom: .25rem;
}

.legal-page a {
  color: var(--tulip-dark);
  font-weight: 800;
}

@media (max-width: 800px) {
  .landing-page {
    min-height: auto;
  }

  .landing-robot {
    display: none;
  }

  #session-view {
    height: auto;
    min-height: 0;
  }

  .session-header,
  .session-actions,
  .session-text-form,
  .report-card,
  .report-hero-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .session-main {
    display: flex;
    flex-direction: column;
  }

  .session-materials {
    max-height: none;
  }

  .account-event-row,
  .account-usage-header,
  .account-overview-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .account-credit-summary {
    align-items: flex-start;
    text-align: left;
  }

  .account-overview-grid {
    grid-template-columns: 1fr;
  }

  .not-found-card {
    grid-template-columns: 1fr;
    margin-top: 1rem;
  }

  .not-found-code {
    justify-self: start;
  }

  .report-score-block {
    text-align: left;
  }

  .turn {
    max-width: 92%;
  }
}