/* =========================================================
   Einbürgerungstest ZH — Trainer
   Page CSS on top of /design-system/system.css.
   Green (--signal) = correct. Page-local red = wrong.
   ========================================================= */

:root {
  --gkt-wrong: #ff5d5d;
  --gkt-wrong-soft: rgba(255, 93, 93, 0.14);
  --gkt-right-soft: rgba(141, 255, 31, 0.12);
}
body.theme-light {
  --gkt-wrong: #d63030;
  --gkt-wrong-soft: rgba(214, 48, 48, 0.10);
  --gkt-right-soft: rgba(90, 170, 20, 0.12);
}

body { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas-deep); }
.gkt { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: var(--space-32) var(--space-20) var(--space-96); }
.view[hidden] { display: none !important; }

/* ---------- LOGIN ---------- */
.view-login { display: flex; justify-content: center; padding-top: var(--space-64); }
.login-card { max-width: 420px; width: 100%; padding: var(--space-40) var(--space-32); text-align: left; }
.login-chip { margin-bottom: var(--space-16); display: inline-block; }
.login-title {
  font-family: var(--font-display); font-size: var(--size-30); font-weight: var(--weight-bold);
  line-height: 1.1; color: var(--ink-strong); margin-bottom: var(--space-8);
}
.login-sub { color: var(--ink-mute); font-size: var(--size-14); margin-bottom: var(--space-24); }
.field-label { display: block; font-size: var(--size-13); font-weight: var(--weight-medium); color: var(--ink-mute); margin-bottom: var(--space-8); }
.field {
  width: 100%; padding: var(--space-14) var(--space-16);
  font: inherit; font-size: var(--size-16); color: var(--ink-strong);
  background: var(--canvas-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
body.theme-light .field { background: var(--canvas); color: var(--ink-strong); }
.field:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--accent-ring-soft); }
.login-error { color: var(--gkt-wrong); font-size: var(--size-14); margin-top: var(--space-12); }
.login-btn { margin-top: var(--space-20); width: 100%; justify-content: center; }

/* ---------- HOME ---------- */
.home-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-32); }
.home-title {
  font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 42px); font-weight: var(--weight-bold);
  color: var(--ink-strong); margin-top: var(--space-8); letter-spacing: -0.01em;
}
.lernstand { position: relative; width: 96px; height: 96px; flex: none; }
.lernstand-ring, .result-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--ink-faint); stroke-width: 8; }
.ring-fg {
  fill: none; stroke: var(--brand-accent); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 213.6; stroke-dashoffset: 213.6;
  transition: stroke-dashoffset 0.9s var(--ease-out, ease);
}
.lernstand-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lernstand-txt b { font-family: var(--font-display); font-size: var(--size-20); color: var(--ink-strong); }
.lernstand-txt span { font-size: var(--size-10); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-16); margin-bottom: var(--space-24); }
.mode-card {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-24); border: 1px solid var(--border-strong);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.mode-card:hover { transform: translateY(-2px); border-color: var(--brand-accent); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.25)); }
.mode-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mode-emoji { font-size: 28px; line-height: 1; }
.mode-card h3 { font-family: var(--font-display); font-size: var(--size-20); font-weight: var(--weight-bold); color: var(--ink-strong); }
.mode-card p { font-size: var(--size-14); line-height: 1.55; color: var(--ink-mute); flex: 1; }
.mode-go { font-size: var(--size-14); font-weight: var(--weight-semibold); color: var(--brand-accent); }
.mode-time-row { display: flex; gap: var(--space-8); }
.time-pick {
  padding: var(--space-8) var(--space-14); border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); font-size: var(--size-13); font-weight: var(--weight-medium);
  color: var(--ink-mute); transition: all 0.15s ease;
}
.time-pick:hover { border-color: var(--brand-accent); color: var(--ink-strong); }

/* ---------- FILTER ---------- */
.filter-block { padding: var(--space-24); }
.filter-block h4 { font-family: var(--font-display); font-size: var(--size-15); font-weight: var(--weight-semibold); color: var(--ink-strong); margin-bottom: var(--space-12); }
.area-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16); }
.area-chip {
  font: inherit; font-size: var(--size-13); font-weight: var(--weight-medium); cursor: pointer;
  padding: var(--space-8) var(--space-14); border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: transparent; color: var(--ink-mute);
  transition: all 0.15s ease;
}
.area-chip.active { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--ink-on-light); }
.area-chip .n { opacity: 0.7; font-weight: var(--weight-regular); }
.tier-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-full); overflow: hidden; }
.tier-seg button {
  font: inherit; font-size: var(--size-13); font-weight: var(--weight-medium); cursor: pointer;
  padding: var(--space-8) var(--space-14); border: none; background: transparent; color: var(--ink-mute);
}
.tier-seg button.active { background: var(--brand-accent); color: var(--ink-on-light); }
.filter-note { margin-top: var(--space-12); font-size: var(--size-13); color: var(--ink-mute); }

/* ---------- QUIZ ---------- */
.quiz-top { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-12); }
.quiz-mode { flex: 1; font-size: var(--size-13); font-weight: var(--weight-medium); color: var(--ink-mute); text-align: center; }
.quiz-timer {
  font-family: var(--font-mono); font-size: var(--size-15); font-weight: var(--weight-bold);
  color: var(--ink-strong); background: var(--canvas-elev); border: 1px solid var(--border-strong);
  padding: var(--space-8) var(--space-14); border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}
.quiz-timer.warn { color: var(--gkt-wrong); border-color: var(--gkt-wrong); animation: timerPulse 1s infinite; }
@keyframes timerPulse { 50% { opacity: 0.55; } }

.quiz-progress { height: 4px; border-radius: 2px; background: var(--ink-faint); overflow: hidden; margin-bottom: var(--space-20); }
.quiz-progress-fill { height: 100%; width: 0; background: var(--brand-accent); border-radius: 2px; transition: width 0.3s ease; }

.quiz-card { padding: var(--space-32); }
.quiz-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-16); }
.quiz-area { font-size: var(--size-12); }
.quiz-count { font-family: var(--font-mono); font-size: var(--size-13); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.quiz-question {
  font-family: var(--font-display); font-size: clamp(19px, 2.8vw, 24px); font-weight: var(--weight-semibold);
  line-height: 1.35; color: var(--ink-strong); margin-bottom: var(--space-24);
}

.quiz-options { display: flex; flex-direction: column; gap: var(--space-12); }
.opt {
  display: flex; align-items: flex-start; gap: var(--space-14); text-align: left;
  font: inherit; font-size: var(--size-16); line-height: 1.5; color: var(--ink-strong);
  padding: var(--space-16); min-height: 56px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.opt:hover:not(:disabled) { border-color: var(--brand-accent); background: var(--hover-dark); }
body.theme-light .opt:hover:not(:disabled) { background: var(--hover-light); }
.opt:active:not(:disabled) { transform: scale(0.995); }
.opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.opt:disabled { cursor: default; }
.opt .letter {
  flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--size-13); font-weight: var(--weight-bold);
  border: 1px solid var(--border-strong); border-radius: 50%; color: var(--ink-mute);
}
.opt.is-right { border-color: var(--signal); background: var(--gkt-right-soft); }
.opt.is-right .letter { border-color: var(--signal); color: var(--signal); }
body.theme-light .opt.is-right .letter { color: #4a8a10; border-color: #4a8a10; }
body.theme-light .opt.is-right { border-color: #4a8a10; }
.opt.is-wrong { border-color: var(--gkt-wrong); background: var(--gkt-wrong-soft); animation: optShake 0.35s ease; }
.opt.is-wrong .letter { border-color: var(--gkt-wrong); color: var(--gkt-wrong); }
.opt.is-dim { opacity: 0.45; }
.opt.is-picked { border-width: 2px; }
@keyframes optShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.feedback { margin-top: var(--space-24); padding-top: var(--space-20); border-top: 1px solid var(--border-strong); }
.feedback-head { font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-bold); margin-bottom: var(--space-8); }
.feedback-head.ok { color: var(--signal); }
body.theme-light .feedback-head.ok { color: #4a8a10; }
.feedback-head.nok { color: var(--gkt-wrong); }
.feedback-explain { font-size: var(--size-15); line-height: 1.6; color: var(--ink-mute); }
.feedback-aid {
  margin-top: var(--space-16); padding: var(--space-16);
  background: var(--canvas-deep); border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
}
body.theme-light .feedback-aid { background: var(--canvas); }
.aid-label { display: block; font-size: var(--size-12); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: var(--space-8); }
.feedback-aid p { font-size: var(--size-15); line-height: 1.6; color: var(--ink-strong); }

.quiz-actions { display: flex; gap: var(--space-12); margin-top: var(--space-24); justify-content: flex-end; }

/* ---------- RESULT ---------- */
.view-result { position: relative; display: flex; justify-content: center; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.result-card { max-width: 640px; width: 100%; padding: var(--space-40); text-align: center; }
.result-card.fail-shake { animation: failShake 0.5s ease; }
@keyframes failShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.result-ring-wrap { position: relative; width: 148px; height: 148px; margin: 0 auto var(--space-20); }
.result-ring .ring-bg { stroke-width: 10; }
.result-ring .ring-fg { stroke-width: 10; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.result-ring .ring-fg.pass { stroke: var(--signal); }
body.theme-light .result-ring .ring-fg.pass { stroke: #4a8a10; }
.result-ring .ring-fg.fail { stroke: var(--gkt-wrong); }
.result-ring-txt { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; flex-direction: row; gap: 4px; align-items: center; }
.result-ring-txt b { font-family: var(--font-display); font-size: 40px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.result-ring-txt span { font-size: var(--size-15); color: var(--ink-mute); }
.result-headline { font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); font-weight: var(--weight-bold); color: var(--ink-strong); margin-bottom: var(--space-8); }
.result-sub { color: var(--ink-mute); font-size: var(--size-15); line-height: 1.6; margin-bottom: var(--space-24); }
.result-breakdown { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-24); text-align: left; }
.bd-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: var(--space-12); align-items: center; font-size: var(--size-13); color: var(--ink-mute); }
.bd-row .bd-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--ink-faint); overflow: hidden; }
.bd-row .bd-fill { height: 100%; border-radius: 3px; background: var(--brand-accent); }
.bd-row b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.result-actions { display: flex; gap: var(--space-12); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-24); }
.result-review { text-align: left; display: flex; flex-direction: column; gap: var(--space-12); }
.review-item { padding: var(--space-16); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.review-item .rq { font-weight: var(--weight-semibold); color: var(--ink-strong); font-size: var(--size-14); margin-bottom: var(--space-8); }
.review-item .ra { font-size: var(--size-13); line-height: 1.5; color: var(--ink-mute); }
.review-item .ra b.right { color: var(--signal); }
body.theme-light .review-item .ra b.right { color: #4a8a10; }
.review-item .ra b.wrong { color: var(--gkt-wrong); }
.review-item .rx { margin-top: var(--space-8); font-size: var(--size-13); color: var(--ink-mute); line-height: 1.5; }
.review-title { font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-bold); color: var(--ink-strong); margin-top: var(--space-8); }

/* ---------- STATS ---------- */
.stats-head { display: flex; align-items: center; gap: var(--space-16); margin-bottom: var(--space-24); }
.stats-head h1 { font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); font-weight: var(--weight-bold); color: var(--ink-strong); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-12); margin-bottom: var(--space-16); }
.stat-card { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-4); }
.stat-card b { font-family: var(--font-display); font-size: var(--size-28); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.stat-card span { font-size: var(--size-12); color: var(--ink-mute); }
.stats-block { padding: var(--space-24); margin-bottom: var(--space-16); }
.stats-block h4 { font-family: var(--font-display); font-size: var(--size-15); font-weight: var(--weight-semibold); color: var(--ink-strong); margin-bottom: var(--space-16); }
.stats-hint { font-size: var(--size-13); color: var(--ink-mute); margin: calc(-1 * var(--space-8)) 0 var(--space-16); }
.as-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: var(--space-12); align-items: center; margin-bottom: var(--space-10, 10px); font-size: var(--size-13); }
.as-row .as-name { color: var(--ink-mute); }
.as-row .as-bar { height: 8px; border-radius: 4px; background: var(--ink-faint); overflow: hidden; }
.as-row .as-fill { height: 100%; border-radius: 4px; background: var(--brand-accent); }
.as-row b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.box-bars { display: flex; align-items: flex-end; gap: var(--space-12); height: 120px; }
.box-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); height: 100%; justify-content: flex-end; }
.box-bar .bb-fill { width: 100%; max-width: 56px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--accent-violet); min-height: 2px; }
.box-bar.hot .bb-fill { background: var(--gkt-wrong); }
.box-bar.done .bb-fill { background: var(--signal); }
body.theme-light .box-bar.done .bb-fill { background: #4a8a10; }
.box-bar span { font-size: var(--size-11, 11px); color: var(--ink-mute); }
.box-bar b { font-size: var(--size-12); color: var(--ink-strong); }
.hist-row { display: flex; justify-content: space-between; gap: var(--space-12); padding: var(--space-10, 10px) 0; border-bottom: 1px solid var(--border-strong); font-size: var(--size-13); }
.hist-row:last-child { border-bottom: none; }
.hist-row .hd { color: var(--ink-mute); }
.hist-row b { font-variant-numeric: tabular-nums; }
.hist-row .pass { color: var(--signal); font-weight: var(--weight-bold); }
body.theme-light .hist-row .pass { color: #4a8a10; }
.hist-row .fail { color: var(--gkt-wrong); font-weight: var(--weight-bold); }
.hard-row { padding: var(--space-10, 10px) 0; border-bottom: 1px solid var(--border-strong); font-size: var(--size-13); }
.hard-row:last-child { border-bottom: none; }
.hard-row .hq { color: var(--ink-strong); margin-bottom: 2px; }
.hard-row .hm { color: var(--ink-mute); font-size: var(--size-12); }
.stats-danger { display: flex; justify-content: flex-end; margin-top: var(--space-8); }
.stats-danger .btn { color: var(--gkt-wrong); }
.empty-note { font-size: var(--size-13); color: var(--ink-mute); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  .gkt { padding: var(--space-20) var(--space-16) var(--space-64); }
  .home-head { flex-direction: row; align-items: flex-start; }
  .lernstand { width: 76px; height: 76px; }
  .quiz-card { padding: var(--space-20); }
  .quiz-actions { position: sticky; bottom: var(--space-12); }
  .quiz-actions .btn { flex: 1; justify-content: center; }
  .result-actions .btn { flex: 1 1 40%; justify-content: center; }
  .as-row { grid-template-columns: 1fr auto; }
  .as-row .as-bar { grid-column: 1 / -1; }
}