:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  --ink: #eff6f7;
  --accent: #a9e7da;
  --accent-ink: #12333a;
  --muted: #b6cccf;
  --line: #506d78;
  --panel: #122b35;
  --control: #1b3945;
  --hover: #284e59;
  --base: #0a1720;
  --glow: #173844;
  --header: #0c2029;
  --card-line: #9f89c9;
  --card-label: #d8c7ff;
  --card-front: radial-gradient(ellipse at top left, #34495d, #111f31 82%);
  --study-tool-bg: #282238;
  --favorite-bg: #192f3b;
  --favorite-color: #ece5ff;
  --favorite-on-bg: #3b3423;
  --favorite-on-ink: #ffe296;
  --favorite-on-line: #e5be65;
  --card-back: linear-gradient(145deg, #1b4448, #142834);
  --focus: #f3d58f;
  --status: #ffd2a9;
  --shadow: #0004;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #18343b;
  --accent: #206054;
  --accent-ink: #fff;
  --muted: #46646b;
  --line: #a4bdbb;
  --panel: #fff;
  --control: #f4f9f7;
  --hover: #e1eeea;
  --base: #f7f9f6;
  --glow: #e0f0eb;
  --header: #fafffc;
  --card-line: #9c87bd;
  --card-label: #654b8a;
  --card-front: radial-gradient(ellipse at top left, #eee8fa, #fbfafc 82%);
  --study-tool-bg: #f1ebfa;
  --favorite-bg: #f6f0ff;
  --favorite-color: #523878;
  --favorite-on-bg: #fff1ce;
  --favorite-on-ink: #624308;
  --favorite-on-line: #a77e31;
  --card-back: linear-gradient(145deg, #e0f2ea, #fbfdfa);
  --focus: #80591e;
  --status: #863d1d;
  --shadow: #23434c20;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(ellipse at top right, var(--glow), transparent 65%), var(--base);
}
header { background: var(--header); border-bottom: 1px solid var(--line); }
.bar, main { max-width: 1000px; margin: auto; padding: 1rem 1.5rem; }
.bar, .header-tools, nav, .actions { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; }
.bar { justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--accent); font-size: 1.3rem; font-weight: 750; text-decoration: none; }
main { padding-top: 2rem; }
h1, h2, h3, p { margin: 0 0 .75rem; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.15; }
h2 { font-size: 1.35rem; }
.eyebrow { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 750; color: var(--accent); }
.muted, small { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; margin: 1rem 0; }
.narrow { max-width: 30rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .7rem; }
.stat { background: var(--control); border-radius: 12px; padding: .7rem 1rem; }
.stat b { display: block; font-size: 1.45rem; }
.row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row p { margin: 0; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; }
button, .field { border: 1px solid var(--line); background: var(--control); color: var(--ink); border-radius: 10px; padding: .5rem .8rem; }
button { cursor: pointer; }
button:hover, button[aria-current="page"] { background: var(--hover); }
button[aria-current="page"] { font-weight: 700; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button.primary:hover { filter: brightness(.93); }
button:disabled { opacity: .5; cursor: wait; }
:where(button, input, select, textarea, a):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
#theme { min-width: 5rem; }
label { display: block; font-weight: 650; margin: .65rem 0; }
.field { display: block; width: 100%; margin-top: .3rem; }
textarea { min-height: 7rem; resize: vertical; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.badge { background: var(--control); border: 1px solid var(--line); border-radius: 100px; padding: .2rem .65rem; font-size: .83rem; font-weight: 650; }
#status { min-height: 1.5rem; color: var(--status); }
.review { max-width: 900px; margin: 0 auto; }
.study-top { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.study-top h1, .study-top label { margin-bottom: 0; }
.study-collection { width: min(100%, 17rem); color: var(--muted); font-size: .9rem; }
.review-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.review-meta p { min-width: 0; margin: 0; color: var(--muted); font-weight: 650; overflow-wrap: anywhere; }
.review-meta .badge { justify-self: end; }
.study-tools { margin: 0 0 1.6rem; padding: .65rem; border: 1px solid var(--card-line); border-radius: 13px; background: var(--study-tool-bg); }
.study-tools button, .study-navigation button { min-height: 2.75rem; }
.study-navigation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: .7rem; margin-top: 1.25rem; }
.study-navigation label { margin: 0; min-width: 0; }
.study-navigation select { text-overflow: ellipsis; }
.study-navigation button:disabled { cursor: default; }
.study-progress { margin: .7rem 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.study-card, .study-card:hover {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: transparent;
  perspective: 1600px;
  text-align: left;
}
.study-card-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.study-card[aria-pressed="true"] .study-card-inner { transform: rotateY(180deg); }
.study-face {
  grid-area: 1 / 1;
  display: flex;
  min-width: 0;
  min-height: clamp(23rem, 63vh, 40rem);
  flex-direction: column;
  gap: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid var(--card-line);
  border-radius: 26px;
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: 0 16px 45px var(--shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.study-front { justify-content: center; align-items: center; text-align: center; background: var(--card-front); }
.study-back { background: var(--card-back); transform: rotateY(180deg); }
.study-face[aria-hidden="true"] { pointer-events: none; }
.face-label { color: var(--card-label); text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; font-weight: 750; }
.question-text { max-width: 24ch; font-size: clamp(1.6rem, 4.4vw, 2.7rem); line-height: 1.28; font-weight: 750; text-wrap: balance; }
.answer-text { font-size: clamp(1.05rem, 2.3vw, 1.4rem); line-height: 1.65; }
.flip-hint { color: var(--muted); font-size: .88rem; }
.study-back .flip-hint { margin-top: auto; }
.grade-actions { justify-content: center; margin-top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .study-card-inner { transition: none; } }
@media (max-width: 560px) {
  .bar, main { padding-left: .85rem; padding-right: .85rem; }
  .panel { padding: 1rem; }
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; padding-block: .7rem; }
  .header-tools { display: contents; }
  .bar #theme { grid-area: 1 / 2; min-height: 2.75rem; }
  .bar nav { grid-column: 1 / -1; gap: .35rem; }
  .bar nav:empty { display: none; }
  .bar nav button { flex: 1 0 auto; min-height: 2.75rem; padding-inline: .55rem; font-size: .88rem; }
  main { padding-top: 1rem; }
  .study-card, .study-face { border-radius: 20px; }
}
.inline-option { display: flex; align-items: center; gap: .55rem; }
.favorite-button { display: inline-flex; align-items: center; gap: .5rem; border-radius: 2rem; border-color: var(--card-line); background: var(--favorite-bg); color: var(--favorite-color); font-weight: 650; padding: .42rem .85rem; }
.favorite-button [aria-hidden] { font-size: 1.65rem; line-height: 1; }
.favorite-button[aria-pressed="true"] { color: var(--favorite-on-ink); border-color: var(--favorite-on-line); background: var(--favorite-on-bg); }
@media (max-width: 560px) {
  .study-face { min-height: clamp(18rem, 45svh, 23rem); }
  .study-top { gap: .5rem; margin-bottom: .85rem; }
  .study-collection { width: 100%; }
  .study-tools { gap: .4rem; margin-bottom: .85rem; }
  .study-tools button { flex: 1 1 8rem; text-wrap: balance; padding-inline: .5rem; font-size: .88rem; }
  .favorite-button, .study-navigation select, .grade-actions button { min-height: 2.75rem; }
  .review-meta { grid-template-columns: 1fr auto; }
  .review-meta .badge { grid-row: 2; justify-self: start; }
  .study-navigation { grid-template-columns: 1fr 1fr; }
  .study-navigation label { grid-column: 1 / -1; grid-row: 1; }
}
.card-picture { display: block; max-width: 100%; max-height: 20rem; object-fit: contain; border-radius: .65rem; }
.study-back .card-picture { align-self: center; }
.editor-picture .card-picture { max-height: 10rem; }
.card-search { display: flex; align-items: end; gap: .55rem; margin: 1rem 0; }
.card-search label { flex: 1; min-width: 0; margin: 0; }
.card-search button, .card-search .field { min-height: 2.75rem; }
.favorite-controls { display: flex; justify-content: center; align-items: end; gap: .55rem; flex-wrap: wrap; }
.favorite-controls label { margin: 0; color: var(--muted); font-size: .85rem; min-width: 9rem; }
.favorite-controls select { padding-block: .3rem; }
.favorite-controls button { min-height: 2.6rem; }
.review-meta:has(.favorite-controls label) { grid-template-columns: minmax(0,1fr) auto auto; }
.rubric-form { align-items: end; }
.rubric-form label { margin: 0; flex: 1 1 10rem; }
.editor-side { margin-block: 1rem; }
.format-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; }
.format-toolbar button { min-height: 2.75rem; }
.format-preview { margin-top: .55rem; color: var(--muted); }
.format-preview summary { cursor: pointer; }
.format-preview div { color: var(--ink); margin-top: .45rem; }
.mark-gelb, .mark-gelb:hover { background: #ffdf82; color: #382600; }
.mark-gruen, .mark-gruen:hover { background: #a8e7a9; color: #123718; }
.mark-blau, .mark-blau:hover { background: #a8d9ff; color: #123556; }
.mark-rosa, .mark-rosa:hover { background: #ffc0db; color: #4c1532; }
@media (max-width: 700px) {
  .review-meta:has(.favorite-controls label) { grid-template-columns: 1fr auto; }
  .review-meta:has(.favorite-controls label) .favorite-controls { grid-row: 2; grid-column: 1 / -1; justify-content: start; }
  .review-meta:has(.favorite-controls label) .badge { grid-column: 2; grid-row: 1; }
  .favorite-controls button, .favorite-controls select { min-height: 2.75rem; }
}

.row .favorite-controls { justify-content: start; }
.row .rubric-form { width: 100%; margin: .3rem 0; }
.editor-heading { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: .65rem; }
.editor-heading h2 { margin: 0; }
.format-toolbar { align-items: end; }
.format-toolbar label { font-size: .83rem; margin: 0; color: var(--muted); }
.format-toolbar select { display: block; min-height: 2.75rem; padding: .4rem; border: 1px solid var(--line); border-radius: 9px; background: var(--control); color: var(--ink); }
.rich-input { min-height: 7rem; font-weight: 400; }
.rich-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.editor-list, .rich-input ol, .rich-input ul { padding-left: 2.15em; margin: .25em 0; white-space: normal; }
ol.editor-list, .rich-input ol { list-style: none; counter-reset: card-items; }
ol.editor-list > li, .rich-input ol > li { position: relative; counter-increment: card-items; }
ol.editor-list > li::before, .rich-input ol > li::before { content: counter(card-items) ".)"; position: absolute; right: calc(100% + .55em); }
.dash-list { list-style-type: "–  "; }
.study-dictation { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: .55rem; }
#dictation-add { align-items: end; }
#dictation-add label { flex: 1 1 11rem; margin: 0; }
.study-dictation button, #dictation-add button { min-height: 2.75rem; }
.grade-actions button:disabled { cursor: default; }
@media (max-width: 700px) {
  .review-meta .study-dictation { grid-column: 1 / -1; justify-content: start; }
  .review-meta:has(.favorite-controls label) .study-dictation { grid-row: 3; }
}
.editor-rubric { align-items: end; margin: .65rem 0 1rem; }
.editor-rubric label { flex: 1 1 10rem; margin: 0; }
.editor-rubric button { min-height: 2.75rem; }

[data-card-picture] { cursor: zoom-in; }
.editor-picture button { display: block; margin: .65rem auto; }
.picture-dialog {
  width: min(96vw, 75rem);
  max-width: none;
  max-height: 94dvh;
  padding: clamp(.7rem, 2vw, 1.25rem);
  color: var(--ink);
  background: var(--control);
  border: 1px solid var(--card-line);
  border-radius: 18px;
}
.picture-dialog::backdrop { background: rgb(0 0 0 / .8); }
.picture-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .65rem; }
.picture-toolbar h2 { margin: 0; font-size: 1.15rem; }
.picture-toolbar button { min-height: 2.75rem; }
.picture-toolbar form { margin: 0; }
.picture-viewport { overflow: auto; height: min(72dvh, 60rem); background: #090f16; overscroll-behavior: contain; touch-action: none; }
.picture-viewport img {
  display: block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  width: calc(100% * var(--zoom, 1));
  height: calc(100% * var(--zoom, 1));
  max-width: none;
  object-fit: contain;
}

.guide-goals { display: flex; flex-wrap: wrap; gap: .65rem; margin-block: .6rem; }
#guide-goal fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.guide-goals label { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem; background: var(--control); border: 1px solid var(--line); border-radius: 10px; margin: 0; }
.guide-paths { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.guide-paths .panel { margin: 0; }
.guide-dashboard { margin-top: 1rem; }

.legal-footer { max-width: 1000px; margin: 2rem auto 0; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--line); }
.legal-footer nav { gap: .5rem 1.1rem; }
.legal-footer a, .legal-content a, header .bar > a:not(.brand) { color: var(--accent); overflow-wrap: anywhere; }
.legal-content { max-width: 53rem; }
.legal-content address { font-style: normal; }
.legal-content address + p { margin-top: .65rem; }
.legal-content section > :last-child { margin-bottom: 0; }

.progress-lights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .75rem 0 1rem; }
.progress-red { --light-ink: #ffb9bc; --light-line: #c96c75; --light-bg: #4a2835; }
.progress-yellow { --light-ink: #ffe199; --light-line: #c99d42; --light-bg: #453921; }
.progress-green { --light-ink: #aef0c7; --light-line: #56ae80; --light-bg: #173c34; }
:root[data-theme="light"] .progress-red { --light-ink: #7e202d; --light-line: #bd6874; --light-bg: #fae7ea; }
:root[data-theme="light"] .progress-yellow { --light-ink: #684900; --light-line: #a5812d; --light-bg: #fff2d0; }
:root[data-theme="light"] .progress-green { --light-ink: #145735; --light-line: #5a9674; --light-bg: #e3f4e9; }
.progress-light, .progress-badge { color: var(--light-ink); border-color: var(--light-line); background: var(--light-bg); }
.progress-light { display: grid; justify-items: center; gap: .18rem; text-align: center; padding: .65rem .2rem; }
.progress-light:not(:disabled):hover { color: var(--light-ink); background: var(--light-bg); border-color: currentColor; }
.progress-light:disabled { opacity: .75; }
.progress-light strong { font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1.2; }
.progress-light small { color: inherit; }
.progress-light-dot { display: inline-block; width: .63rem; height: .63rem; border-radius: 50%; background: currentColor; flex: none; }
@media (max-width: 390px) { .progress-lights { gap: .35rem; } .progress-light { font-size: .86rem; } }

.collection-stack-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.collection-stack-heading h2 { margin:0; }
.collection-stack-heading summary { cursor:pointer; padding:.55rem .75rem; border:1px solid var(--line); border-radius:10px; }
.collection-stacks > details { margin-bottom:0; }
.collection-stacks > .actions { margin-top:.75rem; }
.card-print-dialog { margin:auto; }
.card-print-dialog > header { position:static; padding:0; background:transparent; border:0; }
.card-print-dialog > footer { margin:0; }
.print-pick-question { white-space:pre-wrap; }
.print-error:empty { display:none; }

.welcome-tile {
  max-width: 48rem;
  margin: clamp(.5rem, 4vh, 2.5rem) auto;
  padding: clamp(1.25rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 3vw, 28px);
  background: var(--panel);
  box-shadow: 0 18px 48px var(--shadow);
}
.welcome-tile h1 { font-size: clamp(1.85rem, 6vw, 3.4rem); line-height: 1.1; margin: .4rem 0 1rem; }
.welcome-tile > p:not(.eyebrow) { max-width: 58ch; }
.welcome-tile .actions { margin-top: 1.25rem; }
.welcome-signature { color: var(--muted); }
.welcome-signature strong { color: var(--accent); }
.tour-tile .study-card { margin-top: 1.25rem; }
.tour-tile .study-face { min-height: clamp(14rem, 43vh, 24rem); }