/* ===== Tanulókártya — grafit-antracit téma ===== */

:root {
  color-scheme: dark;
  --page: #131416;
  --surface: #1c1e21;
  --surface-2: #24262a;
  --border: rgba(255, 255, 255, 0.08);
  --ink: #f2f2ef;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;

  --accent: #3987e5;      /* elsődleges (kék) */
  --accent-hover: #2a78d6;
  --state-known: #199e70; /* biztos tudás */
  --state-learning: #3987e5; /* tanulás alatt */
  --state-fresh: #6b6a65; /* még új */
  --good: #0ca30c;
  --bad: #e66767;
  --warn: #e8c170;        /* figyelmeztetés (pl. kézzel javított kép, áthelyeződött válasz) */
  --danger: #d03b3b;

  --radius: 12px;
  --radius-sm: 8px;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}

h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 0 0 0.5rem; }
p { margin: 0.25rem 0 0.75rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.9em; }
.muted { color: var(--muted); font-size: 0.92rem; }

/* ===== navigáció ===== */
.topnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topnav-inner {
  max-width: 1080px; margin: 0 auto; padding: 0.6rem 1rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: 0.01em; }
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.brand-big { font-size: 1.8rem; margin-bottom: 0.25rem; }
.nav-links { display: flex; gap: 0.25rem; flex: 1; }
@media (max-width: 640px) {
  /* v2.31: a „Kártyáim” linkkel telefonon (főleg adminnál) már nem fér ki egy sorba */
  .nav-links { flex: 1 1 100%; flex-wrap: wrap; } /* saját sor, azon belül tördel */
}
.nav-links a {
  color: var(--ink-2); padding: 0.35rem 0.75rem; border-radius: var(--radius-sm);
}
.nav-links a:hover { background: var(--surface-2); text-decoration: none; }
.nav-links a.active { background: var(--surface-2); color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .nav-links a { padding: 0.35rem 0.55rem; } } /* az alapszabály után, hogy érvényesüljön */
.nav-user { display: flex; align-items: center; gap: 0.6rem; }
.nav-email { color: var(--muted); font-size: 0.85rem; }
.nav-version { white-space: nowrap; }
.instructor-summary { margin: 0.35rem 0 0; }
a.nav-version:hover, .nav-version.active { text-decoration: none; color: var(--ink); border-color: var(--accent); }
/* képernyőn rejtett, felolvasóval elérhető (v2.39: az oldalcím a menüből látszik, a h1 csak a felolvasónak) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== elrendezés ===== */
.container { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.section-title { margin-top: 2rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

/* ===== gombok, űrlapok ===== */
.btn {
  display: inline-block; border: 1px solid transparent; cursor: pointer;
  border-radius: var(--radius-sm); padding: 0.5rem 1rem;
  font-size: 0.95rem; font-family: inherit; text-align: center;
  background: var(--surface-2); color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: transparent; color: var(--bad); border-color: transparent; }
.btn-danger:hover { background: rgba(208, 59, 59, 0.15); }
/* zöld / piros keretes gomb (v2.39: magyarázat értékelése — a badge-good / badge-bad színeivel) */
.btn-outline-good { background: transparent; color: #7fd88f; border-color: rgba(12, 163, 12, 0.5); }
.btn-outline-good:hover { background: rgba(12, 163, 12, 0.14); border-color: var(--good); }
.btn-outline-bad { background: transparent; color: var(--bad); border-color: rgba(208, 59, 59, 0.5); }
.btn-outline-bad:hover { background: rgba(208, 59, 59, 0.14); border-color: var(--bad); }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.85rem; }
.btn-block { display: block; width: 100%; }
.btn:disabled { opacity: 0.35; cursor: default; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="file"], input[type="datetime-local"], select, textarea {
  background: var(--page); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; font-family: inherit; font-size: 0.95rem;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
textarea { width: 100%; resize: vertical; font-size: 0.95rem; }
label { display: block; font-size: 0.92rem; color: var(--ink-2); }
label > input, label > select { display: block; margin-top: 0.3rem; width: 100%; }
.form-grid { display: grid; gap: 0.9rem; max-width: 480px; }
.form-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.form-row input { flex: 1; min-width: 180px; }
.input-narrow { max-width: 160px; }
.inline-form { display: inline-block; margin: 0; }
.rename-form { display: flex; gap: 0.4rem; align-items: center; }
.rename-form input { min-width: 200px; }
fieldset.checkbox-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; }
fieldset.checkbox-group legend { font-size: 0.85rem; color: var(--muted); padding: 0 0.35rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.45rem; padding: 0.15rem 0; font-size: 0.95rem; }
.checkbox-label input { width: auto; margin: 0; }

/* ===== jelzések ===== */
.alert {
  border-radius: var(--radius-sm); padding: 0.7rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--border); font-size: 0.95rem;
}
.alert-ok { border-color: rgba(12, 163, 12, 0.4); background: rgba(12, 163, 12, 0.1); }
.alert-error { border-color: rgba(208, 59, 59, 0.5); background: rgba(208, 59, 59, 0.12); }
.alert-code { border-color: rgba(57, 135, 229, 0.5); background: rgba(57, 135, 229, 0.1); }
.code-display {
  font-size: 1.3rem; letter-spacing: 0.15em; font-weight: 700;
  background: var(--page); padding: 0.15em 0.5em; border-radius: 6px;
}
.badge {
  display: inline-block; font-size: 0.78rem; padding: 0.12rem 0.55rem;
  border-radius: 999px; background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
}
.badge-good { color: #7fd88f; border-color: rgba(12, 163, 12, 0.5); }
.badge-bad { color: var(--bad); border-color: rgba(208, 59, 59, 0.5); }
.badge-muted { color: var(--muted); }
.text-good { color: #7fd88f; }
.text-bad { color: var(--bad); }

/* ===== belépés ===== */
.login-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--page); }
.login-wrap { width: 100%; max-width: 420px; padding: 1rem; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; }
.login-sub { color: var(--muted); margin-bottom: 1.5rem; }
.login-form label { margin-top: 0.9rem; }
.login-form .btn { margin-top: 1.4rem; }
.login-note { color: var(--muted); font-size: 0.85rem; margin-top: 1.25rem; }

/* ===== tananyag-választó, KPI ===== */
.course-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pill {
  padding: 0.4rem 0.95rem; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); color: var(--ink-2); font-size: 0.95rem;
}
.pill:hover { text-decoration: none; border-color: var(--accent); }
.pill-active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.9rem 1rem;
}
.kpi-value { font-size: 1.7rem; font-weight: 700; }
.kpi-label { color: var(--muted); font-size: 0.85rem; }

/* ===== fejezetek ===== */
.start-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.start-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.9rem; }
.chapter-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.chapter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.chapter-count { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.chapter-form { display: flex; gap: 0.5rem; margin-top: auto; }
.chapter-form select { flex: 1; }

.progress-bar {
  height: 10px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; display: flex;
}
.progress-bar .seg { height: 100%; }
.progress-bar .seg + .seg { margin-left: 2px; }
.seg-known { background: var(--state-known); }
.seg-learning { background: var(--state-learning); }
.progress-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.25rem; }
.dot-known { background: var(--state-known); }
.dot-learning { background: var(--state-learning); }
.dot-fresh { background: var(--state-fresh); }

/* ===== gyakorlás ===== */
.practice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.practice-scope { color: var(--muted); }
.pool-info { display: flex; gap: 1.1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.88rem; margin-bottom: 0.9rem; }
.pool-info b { color: var(--ink-2); }
.question-card { padding: 1.5rem; }
.question-meta { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.question-text { font-size: 1.15rem; font-weight: 600; margin-bottom: 1.25rem; }
/* válaszlehetőségek: megfordítható kártyák */
.options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem;
  perspective: 1200px;
}
.flip-card {
  background: transparent; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  perspective: 1000px; min-height: 200px;
}
.flip-card:disabled { cursor: default; }
.flip-inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.55rem; padding: 1rem 0.85rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip-front {
  position: relative; height: 100%;
  border-top: 3px solid var(--accent);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.flip-card:not(.flipped):not(:disabled):hover .flip-front,
.flip-card:not(.flipped):focus-visible .flip-front {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.flip-back {
  position: absolute; inset: 0; overflow: auto;
  transform: rotateY(180deg);
}
/* billentyű-jelzés (v2.20): csak egeres/billentyűzetes eszközön */
.key-hint {
  position: absolute; top: 0.45rem; left: 0.55rem;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
  display: none; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; line-height: 1;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 5px;
}
.key-help { display: none; font-size: 0.82rem; text-align: center; margin: 0.6rem 0 0; }
kbd {
  font: inherit; font-size: 0.8em; font-weight: 600; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 0.3rem;
}
@media (hover: hover) and (pointer: fine) {
  .key-hint { display: inline-flex; }
  .key-help { display: block; }
  /* hely a jelzésnek: ne takarja a képet / a szöveg elejét (a képes kártya saját paddingjánál erősebb) */
  .flip-front, .flip-card-image .flip-front.flip-face { padding-top: 1.9rem; }
}
.flip-text { display: block; font-size: 0.95rem; line-height: 1.4; overflow-wrap: anywhere; }
.flip-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 auto;
  font-size: 1.15rem; font-weight: 700;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
}
.flip-back.back-correct { border-color: var(--good); border-top: 3px solid var(--good); background: linear-gradient(160deg, rgba(12, 163, 12, 0.16), var(--surface)); }
.flip-back.back-correct .flip-icon { background: rgba(12, 163, 12, 0.2); color: #7fd88f; border-color: var(--good); }
.flip-back.back-wrong { border-color: var(--danger); border-top: 3px solid var(--danger); background: linear-gradient(160deg, rgba(208, 59, 59, 0.16), var(--surface)); }
.flip-back.back-wrong .flip-icon { background: rgba(208, 59, 59, 0.2); color: var(--bad); border-color: var(--danger); }
.flip-back.back-neutral { opacity: 0.75; border-top: 3px solid var(--state-fresh); }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .flip-card:not(.flipped):not(:disabled):hover .flip-front { transform: none; }
}
@media (max-width: 640px) {
  .options { grid-template-columns: 1fr; }
  .flip-card { min-height: 110px; }
}

/* képek (SVG): világos keretben, mert az ábrák többnyire átlátszó hátterűek,
   sötét vonalakkal — a grafit témán enélkül olvashatatlanok lennének */
.svg-frame {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0.6rem;
  background: #f4f4f1; border-radius: var(--radius-sm);
}
/* a display:flex felülírná a böngésző [hidden] szabályát */
.svg-frame[hidden] { display: none; }
.svg-frame img {
  display: block; width: 100%; height: auto; max-height: 200px;
  object-fit: contain;
}
.question-image { margin: -0.25rem 0 1.25rem; }
.question-image img { max-height: 380px; }
.flip-card-image .flip-face { padding: 0.6rem; }
.flip-card-image .flip-front .svg-frame img { max-height: 190px; }
.svg-frame-small { padding: 0.35rem; }
.svg-frame-small img { max-height: 80px; }
.flip-card-image .flip-back { justify-content: flex-start; gap: 0.4rem; }
.flip-card-image .flip-back .flip-text { font-size: 0.88rem; }
@media (max-width: 640px) {
  .question-image img { max-height: 260px; }
  .flip-card-image .flip-front .svg-frame img { max-height: 160px; }
}

/* admin: kérdés-előnézet */
.preview-options { display: grid; gap: 0.7rem; }
.preview-options-images { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.preview-option {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.preview-option.preview-correct { border-color: var(--good); background: rgba(12, 163, 12, 0.08); }
.preview-option-head { display: flex; gap: 0.5rem; align-items: center; }
.preview-option-text { font-size: 0.95rem; line-height: 1.4; }
.preview-options + .feedback-block { margin-top: 1.25rem; }

/* admin: képcsere (régi és új kép egymás mellett) */
.image-edit-link { align-self: flex-start; }
.question-image + .image-edit-link { display: inline-block; margin: -0.6rem 0 1.25rem; }
.image-edit-question { font-size: 1.05rem; line-height: 1.45; margin-bottom: 1rem; }
.image-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.image-compare-col { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.image-compare-col figcaption { font-weight: 600; color: var(--ink-2); }
.image-compare-col .svg-frame img { max-height: 420px; }
.code-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem; line-height: 1.45; tab-size: 2; white-space: pre;
}
.image-input-form, .image-save-form { display: grid; gap: 0.9rem; }
@media (max-width: 720px) { .image-compare { grid-template-columns: 1fr; } }

/* admin: SVG-kódszerkesztő élő előnézettel */
.svg-editor { display: grid; gap: 0.9rem; }
.svg-editor-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem; align-items: start;
}
.svg-editor-code { display: grid; gap: 0.6rem; }
.svg-editor-code textarea { min-height: 24rem; overflow: auto; }
.svg-editor-preview { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.live-current .svg-frame img { max-height: 150px; }
.live-status { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--muted); }
.live-status.live-ok { color: var(--good); }
.live-status.live-error { color: var(--bad); }
.svg-editor.live-stale #live-frame { opacity: 0.35; }
.label-panel {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem 0.8rem; margin: 0;
}
.label-panel[hidden] { display: none; }
.label-panel:disabled { opacity: 0.55; }
.label-panel legend { padding: 0 0.3rem; font-weight: 600; color: var(--ink-2); }
.label-panel p { margin: 0 0 0.6rem; font-size: 0.88rem; }
.label-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.5rem 0.8rem; }
.label-field { display: flex; align-items: center; gap: 0.4rem; }
.label-field input { flex: 1; min-width: 0; margin: 0; }
.label-num { color: var(--muted); font-size: 0.85rem; min-width: 1.6rem; text-align: right; }

/* admin: telefonos nézet — a tanulói oldal 640 px alatti szabályai egy 375 px széles
   telefonon: 343 px-es kártya (375 − 2×16 px margó), benne 1,1rem belső margó;
   kérdéskép legfeljebb 260 px, válaszkép (1 oszlopos kártyán) legfeljebb 160 px magas */
.view-switch { display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0.9rem; }
.view-switch[hidden] { display: none; }
.view-switch-label { color: var(--muted); font-size: 0.88rem; margin-right: 0.2rem; }
.view-switch .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.question-card[data-view="phone"] {
  max-width: 343px; margin-inline: auto; padding: 1.1rem; border-radius: 22px;
  box-shadow: 0 0 0 10px var(--surface-2), 0 0 0 11px var(--border);
}
.question-card[data-view="phone"] .question-image img { max-height: 260px; }
.question-card[data-view="phone"] .preview-options-images { grid-template-columns: 1fr; }
.question-card[data-view="phone"] .preview-option .svg-frame img { max-height: 160px; }
.svg-editor-preview[data-view="phone"] .svg-frame { max-width: 308px; }
.svg-editor-preview[data-view="phone"][data-kind="question"] .svg-frame img { max-height: 260px; }
.svg-editor-preview[data-view="phone"][data-kind="option"] .svg-frame { max-width: 290px; }
.svg-editor-preview[data-view="phone"][data-kind="option"] .svg-frame img { max-height: 160px; }

/* admin: kézi javítás jelzése és .md-blokk */
.edited-note { font-size: 0.88rem; color: var(--ink-2); margin: 0 0 1rem; }
.badge-edited { color: var(--warn); border-color: rgba(232, 193, 112, 0.45); }
.md-export .copy-row { align-items: center; margin-bottom: 0.6rem; }
.md-details summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.md-details textarea { margin-top: 0.5rem; min-height: 14rem; overflow: auto; }

/* admin: hibajelentésből indított képjavítás */
.report-image-fix { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 0.8rem; }
.report-image-fix .muted { font-size: 0.85rem; }
.report-banner { border-color: rgba(230, 103, 103, 0.35); }
.report-banner h2 { margin-bottom: 0.3rem; }
.report-banner-message { font-style: italic; color: var(--ink-2); margin: 0 0 0.8rem; }
.report-close { display: grid; gap: 0.5rem; }
.report-close textarea:disabled { opacity: 0.5; }

/* képjelölés (tanulói jelentés és admin nézet): a pötty a kép saját arányában ül */
.report-image { margin: 0.6rem 0; display: grid; gap: 0.4rem; }
.report-image[hidden] { display: none; }
.report-image-title { margin: 0; font-size: 0.92rem; }
.report-image-choices { display: grid; gap: 0.1rem; }
.report-mark { display: grid; gap: 0.4rem; }
.report-mark[hidden] { display: none; }
.report-mark p { margin: 0; font-size: 0.85rem; }
.mark-pad {
  position: relative; display: inline-block; width: 100%; max-width: 320px; line-height: 0;
  background: #f4f4f1; border-radius: var(--radius-sm); overflow: hidden;
}
#report-mark-pad { cursor: crosshair; }
.mark-pad img { display: block; width: 100%; height: auto; }
.mark-dot {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 3px solid #e03131; background: rgba(224, 49, 49, 0.25);
  box-shadow: 0 0 0 2px #fff; pointer-events: none;
}
.mark-dot[hidden] { display: none; }
.mark-view { display: grid; gap: 0.4rem; margin: 0 0 0.8rem; }
.mark-view p { margin: 0; font-size: 0.9rem; }

/* admin: kérdéslista bélyegképekkel */
.question-filters { margin-bottom: 1rem; }
.cell-thumb { width: 104px; }
.thumb-link { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.svg-frame-thumb { width: 84px; padding: 0.2rem; }
.svg-frame-thumb img { max-height: 56px; }
.thumb-more { font-size: 0.8rem; color: var(--muted); }

/* admin: automatikus képellenőrzés (figyelmeztetések) */
.lint-box { border-color: rgba(232, 193, 112, 0.35); }
.lint-box .issue-list li, .lint-list li { color: var(--warn); }
.lint-list { margin: 0.2rem 0 0; }
.lint-list[hidden] { display: none; }

/* admin: közös képtár */
.shared-image { border-color: rgba(57, 135, 229, 0.35); }
.shared-image p { margin: 0 0 0.4rem; }
.usage-list { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; }
.library-item { display: grid; gap: 0.5rem; align-content: start; }
.library-item .svg-frame img { max-height: 120px; }

/* admin: képverziók */
.reason-field input { margin-top: 0.3rem; }
.change-kind { margin: 0; }
.change-kind p { margin: 0.35rem 0 0; font-size: 0.88rem; }
.revision-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.revision {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center;
  padding: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.revision-meta { font-size: 0.9rem; line-height: 1.4; min-width: 0; }
.revision-reason { color: var(--ink-2); overflow-wrap: anywhere; }
.revision-option { font-size: 0.85rem; overflow-wrap: anywhere; }
.revision-option-changed { color: var(--warn); }
@media (max-width: 640px) {
  .revision { grid-template-columns: 90px minmax(0, 1fr); }
  .revision form { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .svg-editor-grid { grid-template-columns: 1fr; }
  .svg-editor-preview { position: static; }
  .svg-editor-code textarea { min-height: 16rem; }
}

.feedback { margin-top: 1.25rem; }
.feedback-banner {
  font-weight: 700; padding: 0.6rem 1rem; border-radius: var(--radius-sm); margin-bottom: 0.9rem;
}
.feedback-banner.fb-good { background: rgba(12, 163, 12, 0.14); color: #7fd88f; }
.feedback-banner.fb-bad { background: rgba(208, 59, 59, 0.14); color: var(--bad); }
.feedback-block { background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.source-line { color: var(--muted); font-size: 0.85rem; margin-bottom: 0; }
/* csoport-összehasonlítás */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
.compare-card { margin-bottom: 0; }
.compare-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.7rem; }
.compare-row { display: grid; grid-template-columns: 1fr; gap: 0.2rem; margin-bottom: 0.55rem; font-size: 0.88rem; }
.compare-row b { font-variant-numeric: tabular-nums; }
.compare-label { color: var(--muted); }
.compare-bar { height: 12px; }
.seg-avg { background: var(--state-fresh); }
.compare-note { margin: 0.4rem 0 0; }

.report-area { margin-top: 0.9rem; border-top: 1px dashed var(--border); padding-top: 0.7rem; }
.report-area .btn-ghost { color: var(--muted); }
#report-form { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.report-actions { display: flex; gap: 0.5rem; }

.session-bar {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--ink-2); font-size: 0.92rem; margin-top: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.6rem 1rem;
}

/* ===== napi cél és sorozat (v2.21) ===== */
.goal-card { margin-bottom: 1rem; }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.goal-edit { font-size: 0.85rem; }
.goal-body { display: flex; align-items: center; gap: 1.25rem; }
.goal-progress { flex: 1 1 auto; min-width: 0; }
.goal-text { margin: 0.5rem 0 0; }
.goal-streak { flex: 0 0 auto; text-align: center; min-width: 6.5rem; }
.goal-streak-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--warn); }
.goal-streak-label { font-size: 0.85rem; color: var(--ink-2); }
.goal-best { font-size: 0.78rem; }
.goal-form input[type=number] { width: 7rem; }
@media (max-width: 520px) { .goal-body { flex-direction: column; align-items: stretch; } }

/* ===== Kártyáim (v2.31) ===== */
.cards-filters { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: flex-end; margin: 0.6rem 0; }
.cards-filters label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--ink-2); min-width: 0; }
.cards-filters input, .cards-filters select { width: auto; max-width: 18rem; margin-top: 0.2rem; }
.cards-filters .btn[hidden] { display: none; }
.cards-count { margin: 0.2rem 0 0.4rem; font-size: 0.88rem; }
.cards-table tr[hidden] { display: none; }
.cards-q { max-width: 32rem; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .cards-filters label, .cards-filters input, .cards-filters select { width: 100%; max-width: none; }
    /* telefonon soronként egy kártya: a kérdés felül, alatta címkézett adatok */
    /* .data-table.cards-table: a később álló .data-table td szabálynál erősebb kell */
    .data-table.cards-table thead { display: none; }
    .data-table.cards-table tr { display: block; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
    .data-table.cards-table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.1rem 0;
                                 border: none; text-align: right; }
    .data-table.cards-table td::before { content: attr(data-label); color: var(--muted); text-align: left; flex: 0 0 auto; }
    .data-table.cards-table td.cards-q { display: block; max-width: none; padding-bottom: 0.35rem; text-align: left;
                                         font-weight: 600; }
    .data-table.cards-table td.cards-q::before { content: none; }
    .data-table.cards-table td.cards-na { display: none; } /* még nem gyakorolt: az üres („–”) adatsorok nélkül */
    .data-table.cards-table tr[hidden] { display: none; }
}

/* ===== jelvények (v2.27) ===== */
.badge-news { border-left: 3px solid var(--warn); }
.badge-list { list-style: none; margin: 0.4rem 0 0.6rem; padding: 0; display: grid; gap: 0.5rem; }
.badge-grid { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.badge-item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.badge-symbol { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.3rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  background: rgba(232, 193, 112, 0.18); color: var(--warn); border: 1px solid rgba(232, 193, 112, 0.5); }
/* zárolt: csak a jel és a cím halványabb — a feltétel (a hasznos információ) olvasható marad */
.badge-item.locked .badge-symbol, .badge-item.locked b { opacity: 0.55; }
.badge-item.locked .badge-symbol { background: transparent; color: var(--muted); border-color: var(--border); }
.badge-date { font-size: 0.8rem; color: var(--ink-2); }

/* ===== bemutató (v2.26) ===== */
.onboarding .onb-step h3 { margin: 0.9rem 0 0.4rem; }
.onboarding .onb-step p { margin: 0 0 0.6rem; }
.onboarding [hidden] { display: none !important; } /* a .btn/.onb-step display-e ne írja felül */
.onb-counter { margin: 0; font-size: 0.85rem; min-height: 1.2em; }
.onb-actions { flex-wrap: wrap; }

/* ===== folytatás (v2.25) ===== */
.resume-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-left: 3px solid var(--accent); }
.resume-text { flex: 1 1 16rem; min-width: 0; }
.resume-text h2 { margin-bottom: 0.2rem; }
.resume-text p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .resume-card .btn { width: 100%; } }

/* ===== magabiztosság (v2.24) ===== */
.confidence { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  margin: 0.6rem 0 0.2rem; color: var(--ink-2); font-size: 0.92rem; }
.confidence[hidden] { display: none; }
.explain-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 0.6rem;
                font-size: 0.9rem; color: var(--ink-2); }
.explain-rate[hidden] { display: none; }
.explain-rate-status { margin: 0.5rem 0 0; font-size: 0.9rem; }
.confidence-status { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* ===== „Hibáim” mód (v2.23) ===== */
/* v2.38: a nehézség, a Gyakorlás indítása és a Hibáim gyakorlása egy sorban, balra zárva (korábban a Hibáim
   gomb külön oszlopban, jobbra igazítva lógott az indítósor alatt) */
.start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
@media (max-width: 640px) {
  .start-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .start-actions .start-form > * { flex: 1 1 auto; }
  .start-actions .mistakes-btn { text-align: center; }
}
.practice-scope .badge { margin-right: 0.35rem; }

/* ===== csoportkihívás és rangsor (v2.22) ===== */
.challenge-card { margin-bottom: 1rem; }
.challenge-note { font-size: 0.8rem; margin: 0.25rem 0 0; }
.goal-head { flex-wrap: wrap; }
.goal-head h2 { overflow-wrap: anywhere; }
.leaderboard li.lb-detached { margin-top: 0.9rem; position: relative; }
.leaderboard li.lb-detached::before { content: "…"; position: absolute; top: -1.05rem; left: 1.4rem; color: var(--muted); }
.nick-line { display: block; font-size: 0.82rem; color: var(--muted); }
.nick-line b { color: var(--ink-2); }
.row-mine td, li.row-mine { background: rgba(57, 135, 229, 0.10); }
.leaderboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.leaderboard li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 0.5rem; align-items: baseline;
  padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); }
.lb-rank { color: var(--muted); text-align: right; }
.lb-name { font-weight: 600; overflow-wrap: anywhere; }
.lb-count { color: var(--ink-2); font-size: 0.9rem; white-space: nowrap; }
.lb-note { margin: 0.6rem 0 0; font-size: 0.88rem; }
.challenge-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin: 0.4rem 0 0.6rem; }
.challenge-form input[type=number] { width: 8rem; }
.challenge-form .muted { font-size: 0.82rem; }

/* ===== aktivitási hőtérkép (v2.21) ===== */
.heatmap-card { margin-bottom: 1rem; }
.heatmap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.heatmap-head h2 .muted { font-size: 0.85rem; font-weight: 400; }
.heatmap-scroll { overflow-x: auto; padding-bottom: 0.25rem; }
.heatmap { display: flex; gap: 3px; width: max-content; }
.hm-week, .hm-weekdays { display: grid; grid-template-rows: 1rem repeat(7, 12px); gap: 3px; }
.hm-weekdays span { font-size: 0.65rem; line-height: 12px; color: var(--muted); padding-right: 0.25rem; }
.hm-month { font-size: 0.65rem; line-height: 1rem; color: var(--muted); white-space: nowrap; width: 12px; overflow: visible; }
.hm-cell { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); }
.hm-cell.hm-l1 { background: rgba(25, 158, 112, 0.30); }
.hm-cell.hm-l2 { background: rgba(25, 158, 112, 0.55); }
.hm-cell.hm-l3 { background: rgba(25, 158, 112, 0.80); }
.hm-cell.hm-l4 { background: var(--state-known); border-color: #7fd8b4; }
.hm-cell.hm-future { background: transparent; border-color: transparent; }
.hm-legend { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; margin-top: 0.5rem; flex-wrap: wrap; }
.hm-legend-note { margin-left: 0.4rem; }
.hm-streak { font-size: 0.85rem; margin: 0.4rem 0 0; }

/* ===== mikor tanulsz (v2.29) ===== */
.chart-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 800px) { .chart-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.timing-insight { margin: 0 0 0.3rem; font-weight: 600; color: var(--ink); }

/* ===== fejlődési görbe (v2.28) ===== */
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.chart-filter { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--ink-2); }
.chart-filter select { max-width: 16rem; width: auto; margin-top: 0; }
.chart-note { font-size: 0.85rem; margin: 0 0 0.5rem; }

/* ===== statisztika ===== */
.chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.9rem; }
.chart-card { margin-bottom: 0.9rem; }
.chart-box { position: relative; height: 260px; }
.chart-box-donut { height: 260px; }
@media (max-width: 800px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== táblázatok ===== */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.data-table th, .data-table td {
  text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr:last-child td { border-bottom: none; }
.cell-question { max-width: 420px; }
.actions { white-space: nowrap; }
.actions form { margin-right: 0.2rem; }

/* ===== admin ===== */
.admin-nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; margin-top: 1.25rem; }
.admin-nav-card { color: var(--ink); display: block; }
.admin-nav-card:hover { text-decoration: none; border-color: var(--accent); }
.admin-nav-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0; }
.chapter-admin-head { display: flex; gap: 1rem; align-items: flex-start; }
.order-controls { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.order-num { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.chapter-admin-title { flex: 1; display: grid; gap: 0.4rem; }
.chapter-admin-meta { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 0.88rem; }
.chapter-admin-actions {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--border);
}
.schedule-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.schedule-form label { font-size: 0.85rem; }
.access-details summary { cursor: pointer; color: var(--accent); }
.access-form { margin-top: 0.5rem; display: grid; gap: 0.2rem; min-width: 220px; }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 860px) { .admin-two-col { grid-template-columns: 1fr; } }
.input-months { width: 4.2rem; padding: 0.3rem 0.4rem; }
.extend-form { display: inline-flex; gap: 0.25rem; align-items: center; }
.report-card { border-left: 3px solid var(--accent); }
.report-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.report-question { font-weight: 600; }
.report-message { background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin: 0.6rem 0; }
.report-message h3 { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.report-message p { margin-bottom: 0; }

/* oktatói válasz a hibajelentésre (admin: elküldött + szerkesztő, tanuló: ablak + Profil) */
.reply-text {
  overflow-wrap: anywhere;
  background: var(--surface-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 0.8rem 1rem; line-height: 1.55;
}
.reply-line { margin: 0 0 0.75rem; }
.reply-line:last-child { margin-bottom: 0; }
/* az oktató magyarázatában a sortörések megmaradnak */
.reply-body { white-space: pre-line; }
.reply-when, .reply-hint { font-size: 0.85rem; margin: 0.35rem 0 0; }
.reply-sent { margin: 0.6rem 0; }
.reply-sent h3 {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.reply-sent h3 .badge { text-transform: none; letter-spacing: 0; }
.reply-compose { margin: 0.6rem 0 0.8rem; }
.reply-compose summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.92rem; }
.reply-compose form { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.reply-compose .report-actions { flex-wrap: wrap; }

.reply-item { padding: 0.9rem 0; border-top: 1px solid var(--border); }
.reply-item:first-of-type { border-top: none; padding-top: 0.2rem; }
.reply-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 0.45rem; }
.reply-question { font-weight: 600; margin: 0 0 0.35rem; }
.reply-own { font-size: 0.9rem; margin: 0 0 0.6rem; }

.reply-dialog {
  width: min(560px, calc(100% - 2rem)); max-height: 85vh; overflow: auto;
  padding: 0; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.reply-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.reply-dialog-inner { padding: 1.4rem 1.5rem; }
.reply-dialog h2 { margin-bottom: 0.3rem; }
.reply-dialog h2:focus { outline: none; }
.reply-intro { margin: 0 0 0.9rem; font-size: 0.92rem; }
.reply-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 640px) {
  .reply-dialog-inner { padding: 1.1rem; }
  .reply-actions .btn { flex: 1 1 auto; }
}

.issue-list { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; font-size: 0.9rem; color: var(--ink-2); }
.issue-list-error li { color: var(--bad); }
.flash-area:empty { display: none; }

/* ===== profil ===== */
.profile-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.4rem;
  font-size: 0.95rem; align-items: baseline;
}
.profile-label { color: var(--muted); }

/* ===== üres állapot ===== */
.empty-state {
  text-align: center; padding: 2.5rem 1rem; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
  margin-bottom: 1rem;
}
.empty-state h2 { color: var(--ink-2); }

@media (max-width: 640px) {
  .topnav-inner { gap: 0.5rem; }
  .nav-email { display: none; }
  .question-card { padding: 1.1rem; }
}

/* ===== haladási igazolás (v2.33) ===== */
.stats-actions { margin: -0.5rem 0 1rem; }
.cert-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.cert-actions .btn[hidden] { display: none; }
.certificate h1 { margin: 0.1rem 0 0.8rem; }
.cert-brand { margin: 0; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cert-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0 0 1rem; }
.cert-facts dt { color: var(--muted); }
.cert-facts dd { margin: 0; overflow-wrap: anywhere; }
.cert-summary { margin: 0 0 1rem; }
.cert-note { color: var(--muted); font-size: 0.85rem; margin-top: 1rem; }
.cert-sign { display: flex; gap: 2rem; margin-top: 2.5rem; color: var(--muted); font-size: 0.85rem; }
.cert-sign > div { flex: 1 1 0; text-align: center; }
.cert-line { display: block; border-bottom: 1px solid var(--muted); height: 2rem; margin-bottom: 0.25rem; }
.cert-line-inline { height: 1.2rem; max-width: 16rem; margin: 0; }
@media (max-width: 640px) { .cert-table th, .cert-table td { padding: 0.35rem 0.3rem; font-size: 0.8rem; } }

@media print {
    @page { size: A4; margin: 14mm; }
    /* color-scheme: világos — különben a háttérnyomtatásnál fekete a margó, és az űrlapmezők sötétek */
    :root { color-scheme: light; --page: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; --ink-2: #222;
            --muted: #444; --border: #999; --grid: #bbb; }
    body { background: #fff; color: #000; }
    .topnav, .no-print, .btn { display: none !important; }
    .container { max-width: none; padding: 0; }
    .data-table th, .data-table td { border-bottom: 1px solid #999; color: #000; }
    .data-table tr { break-inside: avoid; }
    .table-wrap { overflow: visible; }
    a { color: #000; text-decoration: none; }
    /* a haladási igazolás tömören (16 fejezet egy oldalon) */
    /* saját lap: kisebb lapmargó + belső térköz — ha a nyomtatási párbeszédben „Margók: Nincs” van, a lap
       szélétől akkor is marad szegély (a vízszintes térköz minden oldalon él) */
    @page cert { size: A4; margin: 8mm; }
    .certificate { page: cert; border: none; box-shadow: none; padding: 6mm 8mm; background: #fff; font-size: 10pt; }
    .cert-table { font-size: 9pt; }
    .cert-table th { text-transform: none; letter-spacing: 0; font-size: 8.5pt; }
    .cert-table th, .cert-table td { padding: 0.15rem 0.35rem; }
    .cert-table th.num, .cert-table td.num { white-space: nowrap; width: 1%; }
    .cert-note, .cert-sign { break-inside: avoid; }
    /* a magyarázat és az aláírás-sor együtt marad; a térköz padding (a margó oldaltörésnél elveszne) */
    .cert-note { break-after: avoid; }
    /* csoportos kiállítás (v2.40): tagonként új lap */
    .cert-batch .certificate + .certificate { break-before: page; }
    .cert-sign { margin-top: 0; padding-top: 1.5rem; }
    /* a színes grafikonok (v2.43) nyomtatásban is: fehér lapon világos sín, a jelmagyarázat színei is */
    .certificate { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cert-visual, .cert-activity { break-inside: avoid; }
    /* .certificate előtaggal: a képernyős szabályok a fájlban később állnak, azonos erősségnél azok nyernének */
    .certificate .cd-track { stroke: #eceef1; }
    .certificate .cd-arc.cf-new { stroke: #d3d7dd; }
    .certificate .cd-num { fill: #111; }
    .certificate .cd-cap { fill: #555; }
    .certificate .cert-kpi { border-top-color: #d9dce1; border-right-color: #d9dce1; border-bottom-color: #d9dce1; }
    .certificate .cert-kpi span { color: #555; }
    .certificate rect.cf-new { fill: #e4e7eb; }
    .certificate .seg-new { background: #d3d7dd; }
    .certificate .ca-base { stroke: #cfd3d8; }
    .certificate .cert-donut { width: 30mm; height: 30mm; }
    .certificate .cert-kpi b { font-size: 13pt; }
    /* egylapos igazolás (v2.44): a keret-táblázat sávjai minden oldalon ismétlődnek (a belső térköz helyett), a lap
       a szerver becslése szerint kicsinyítve (--cert-zoom, legfeljebb 70%-ig), tömör táblázat és grafikonblokk */
    .certificate { zoom: var(--cert-zoom, 1); padding: 0 8mm; }
    .cert-page { display: table; width: 100%; border-collapse: collapse; }
    .cert-page > thead { display: table-header-group; }
    .cert-page > tfoot { display: table-footer-group; }
    .cert-page > tbody { display: table-row-group; }
    .cert-page > * > tr { display: table-row; }
    .cert-page > * > tr > td { display: table-cell; padding: 0; }
    .cert-page-space { height: 9mm; }
    .certificate h1 { margin: 0 0 2mm; font-size: 16pt; }
    .cert-facts { margin-bottom: 2mm; gap: 0.4mm 4mm; }
    .certificate .cert-visual { gap: 5mm; margin: 0 0 2mm; }
    .certificate .cert-donut { width: 24mm; height: 24mm; }
    .certificate .cert-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2mm; }
    .certificate .cert-kpi { padding: 1mm 2mm; }
    .certificate .cert-kpi b { font-size: 12pt; }
    .certificate .cert-kpi span { font-size: 7.5pt; }
    .cert-summary { margin: 0 0 2mm; }
    .cert-table { table-layout: fixed; width: 100%; }
    .cert-table th:nth-child(2) { width: 11mm; }
    .cert-table th.c-bar { width: 64mm; }
    .cert-table th:last-child { width: 17mm; }
    .certificate .cert-counts { display: inline; margin-left: 2mm; color: #555; }
    .certificate .cert-counts-head { display: inline; font-weight: normal; }
    .certificate .cert-bar { width: 20mm; }
    .certificate .cert-activity { margin: 2mm 0 0; }
    .certificate .cert-subhead { font-size: 8.5pt; margin: 0 0 1mm; }
    .certificate .cert-act-svg { height: 11mm; }
    .certificate .cert-legend { margin-top: 1mm; font-size: 7.5pt; }
    .certificate .cert-note { font-size: 7.5pt; margin-top: 2mm; }
    .certificate .cert-sign { padding-top: 1rem; }
}

/* ===== magyarázat-visszajelzések (v2.34) ===== */
.filter-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; margin: 0.8rem 0 1rem; }
.filter-row label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--ink-2); }
.filter-row label.checkbox-line { flex-direction: row; align-items: center; gap: 0.4rem; }
/* a „label > input { width: 100% }” alapszabály a jelölőnégyzetet is kinyújtotta, a felirat összenyomódott (v2.40) */
.filter-row label.checkbox-line > input { display: inline-block; width: auto; margin-top: 0; }
.filter-row select { width: auto; max-width: 20rem; margin-top: 0.2rem; }
.explain-q { max-width: 34rem; overflow-wrap: anywhere; }

/* ===== admin irányítópult (v2.35) ===== */
.kpi-link { color: inherit; }
.kpi-link:hover { text-decoration: none; border-color: var(--accent); }
.kpi-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.text-warn { color: var(--warn); }
.admin-subhead { font-size: 1rem; color: var(--muted); margin: 1.5rem 0 0.6rem; font-weight: 600; }
.wrap-anywhere { overflow-wrap: anywhere; }

/* ===== belépőkártyák (v2.36): 2 × 5 cédula / A4 — a nyomtatható terület 182 × 269 mm (14 mm-es margó),
   ebből 180 × 265 mm-t használunk (kerekítési tartalék) ===== */
.slips { display: none; }
.slip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0.6rem 0 0.2rem; }
.slip-actions .btn[hidden] { display: none; }
@media print {
    body.print-slips > *:not(.slips) { display: none !important; }
    body.print-slips .slips { display: block; }
    .slips-page { display: grid; grid-template-columns: repeat(2, 90mm); grid-auto-rows: 53mm; break-after: page; }
    .slips-page:last-child { break-after: auto; }
    /* körvonal (outline) keret helyett: a szomszédos cédulák vonala egybeesik, nem duplázódik */
    .slip { box-sizing: border-box; outline: 1px dashed #777; outline-offset: -0.5px; padding: 4mm 5mm; overflow: hidden; color: #000;
            font-size: 9.5pt; line-height: 1.3; break-inside: avoid; }
    .slip p { margin: 0; }
    .slip-brand { font-size: 9pt; color: #444; }
    /* legfeljebb 2 sor: nagyon hosszú névnél se szoruljon ki a kód */
    .slip-name { font-weight: 700; font-size: 11pt; margin: 1mm 0 2mm !important; overflow-wrap: anywhere;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .slip-data { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6mm 3mm; margin: 0 0 2mm; }
    .slip-data dt { color: #444; }
    .slip-data dd { margin: 0; overflow-wrap: anywhere; }
    .slip-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13pt; font-weight: 700;
                 letter-spacing: 0.08em; }
    .slip-note { font-size: 8pt; color: #444; }
}

/* ===== admin főoldal elrendezése (v2.39) ===== */
.layout-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem 0.6rem; }
.layout-toolbar[hidden], .layout-toolbar .btn[hidden], .layout-help[hidden] { display: none; }
.layout-status { font-size: 0.88rem; }
.layout-help { margin: -0.3rem 0 0.9rem; font-size: 0.88rem; }
.layout-blocks { display: flex; flex-direction: column; }
.layout-blocks > [data-sort-key] { margin-bottom: 1.25rem; }
.layout-blocks > .layout-block > .kpi-row, .layout-blocks > .layout-block > .admin-nav-grid { margin-bottom: 0; margin-top: 0; }
.layout-blocks > .layout-block > .admin-subhead { margin-top: 0; }
.layout-block > .section-title:first-child { margin-top: 0; }
.layout-block > :last-child, .layout-blocks > .card:last-child { margin-bottom: 0; }
.layout-bar { display: flex; justify-content: flex-end; margin: -0.6rem 0 0.8rem; }
.layout-bar-top { margin-top: 0; } /* tananyag-választó nélküli oldalon (Profil, admin főoldal) */
.stats-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; }
.layout-editing [data-sort-key] { position: relative; outline: 1px dashed rgba(57, 135, 229, 0.55); outline-offset: 3px; }
.layout-editing .layout-blocks > [data-sort-key] { outline-offset: 6px; padding-top: 1.9rem; }
.layout-handle { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; z-index: 3; }
/* a blokkok fogantyúja balra: ne keveredjen a benne lévő csempék (jobb felső) fogantyújával */
.layout-handle-block { right: auto; left: 4px; }
.layout-handle button { font: inherit; font-size: 0.85rem; line-height: 1; min-width: 1.9rem; min-height: 1.9rem;
                        border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2);
                        color: var(--ink); cursor: pointer; }
.layout-handle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.layout-grip { cursor: grab; touch-action: none; }
.layout-dragging { opacity: 0.55; }
.layout-dragging .layout-grip { cursor: grabbing; }
.layout-editing .kpi { padding-top: 2.3rem; }
/* érintőképernyőn nagyobb célterület */
@media (pointer: coarse) {
    .layout-handle button { min-width: 2.6rem; min-height: 2.6rem; font-size: 1rem; }
    .layout-editing .kpi { padding-top: 3rem; }
    .layout-editing .layout-blocks > [data-sort-key] { padding-top: 2.7rem; }
}
/* szerkesztés közben az eszköztár lebeg (a „Kész” görgetés után is látszik) */
.layout-editing .layout-toolbar { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; background: var(--surface);
                                  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.7rem;
                                  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); max-width: calc(100vw - 2rem); }
@media print { .layout-toolbar, .layout-help, .layout-handle { display: none !important; } }

/* ===== változásnapló (v2.39) ===== */
.changelog-intro { margin: 0 0 1rem; }
.changelog-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; font-size: 1.15rem; margin: 0 0 0.6rem; }
.changelog-date { font-weight: normal; font-size: 0.85rem; }
.changelog-items { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.changelog-items .badge { font-size: 0.7rem; vertical-align: 1px; }

/* ===== csoportos haladási igazolás (v2.40) ===== */
.cert-batch .certificate { margin-bottom: 1.5rem; }

/* ===== csoport-statisztika csempék (v2.43) ===== */
.stat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; }
.legend-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; }
.seg-known { background: var(--good); }
.seg-learning { background: var(--accent); }
.seg-new { background: rgba(255, 255, 255, 0.16); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1rem; }
a.stat-tile { color: inherit; display: flex; flex-direction: column; gap: 0.85rem; margin: 0;
  transition: border-color 0.15s, transform 0.15s; }
a.stat-tile:hover, a.stat-tile:focus-visible { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.stat-tile-head { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.stat-tile-title { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; overflow-wrap: anywhere; }
.stat-tile-main { display: flex; align-items: center; gap: 1rem; }
.ring { width: 4.5rem; height: 4.5rem; flex: none; }
.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex: none; }
.ring-caption { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 6; }
.ring-value { fill: none; stroke: var(--good); stroke-width: 6; stroke-linecap: round; }
.ring-text { fill: var(--ink); font-size: 12px; font-weight: 700; }
.stat-kpis { margin: 0; display: grid; gap: 0.2rem; font-size: 0.9rem; flex: 1; min-width: 0; }
.stat-kpis div { display: flex; justify-content: space-between; gap: 0.8rem; }
.stat-kpis dt { color: var(--muted); }
.stat-kpis dd { margin: 0; font-weight: 600; white-space: nowrap; }
.trend { font-size: 0.8rem; font-weight: 600; }
.trend-up { color: #7fd88f; }
.trend-down { color: var(--bad); }
.trend-flat { color: var(--muted); }
.stack-bar { display: flex; height: 0.65rem; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.stack-bar .seg { height: 100%; }
.stack-bar-empty { background: transparent; border: 1px dashed var(--border); }
.stack-bar-mini { height: 0.45rem; width: 7rem; margin: 0.2rem 0; }
.spark { display: flex; align-items: stretch; gap: 2px; height: 2.2rem; }
/* oszloponként teljes magasságú érzékelő sáv, benne az oszlop — a 0 napra is rá lehet mutatni */
.spark-col { flex: 1; position: relative; display: flex; align-items: flex-end; }
.spark-col i { display: block; width: 100%; background: var(--accent); opacity: 0.8; border-radius: 1px 1px 0 0; }
.spark-col i.spark-zero { height: 2px !important; background: rgba(255, 255, 255, 0.12); opacity: 1; }
.spark-col:hover i { opacity: 1; background: #6aa9f0; }
.spark-col:hover i.spark-zero { background: rgba(255, 255, 255, 0.35); }
/* buborék a pontos értékkel (v2.43, mint az admin főoldal aktivitás-diagramja) */
.spark-col:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: #0d0e10; color: var(--ink); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.55rem; font-size: 0.78rem; font-weight: 600; z-index: 5; pointer-events: none;
}
.spark-col:nth-child(-n+8):hover::after { left: 0; transform: none; }
.spark-col:nth-last-child(-n+8):hover::after { left: auto; right: 0; transform: none; }
.spark-small { height: 1.6rem; margin-top: 0.3rem; }
.stat-flags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.badge-warn { color: var(--warn); border-color: rgba(232, 193, 112, 0.45); }
.stat-kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-kpi { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.stat-kpi-ring { flex-direction: row; align-items: center; gap: 0.8rem; }
.stat-kpi-label { color: var(--muted); font-size: 0.85rem; }
.stat-kpi-value { font-size: 1.6rem; font-weight: 700; }
.meter { height: 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--good); }
.stat-two-col { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.stat-two-col > .card { margin: 0; }
@media (max-width: 760px) { .stat-two-col { grid-template-columns: minmax(0, 1fr); } }
.chapter-bar { margin-bottom: 0.8rem; }
.chapter-bar-head { display: flex; justify-content: space-between; gap: 0.8rem; align-items: center; font-size: 0.9rem; margin-bottom: 0.25rem; }
/* a jobb oldali adat (százalék vagy nyitás) mindig egy sorban, azonos szélességben és magasságban */
.chapter-bar-meta { flex: none; width: 11.5rem; text-align: right; white-space: nowrap; font-size: 0.82rem; }
/* a szöveges változat is a jelvény méretét kapja (azonos belső térköz, átlátszó keret) */
.chapter-bar-meta { padding: 0.12rem 0.55rem; border: 1px solid transparent; border-radius: 999px; line-height: 1.5; }
.badge.chapter-bar-meta { text-align: center; font-size: 0.82rem; }
@media (max-width: 520px) { .chapter-bar-head { flex-wrap: wrap; } .chapter-bar-meta { width: auto; } }
.chapter-bar-name { overflow-wrap: anywhere; }
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.attention-list li:last-child { border-bottom: 0; }
.attention-text { display: flex; flex-direction: column; font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; }
.avatar-bad { background: rgba(208, 59, 59, 0.18); color: var(--bad); }
.avatar-warn { background: rgba(232, 193, 112, 0.16); color: var(--warn); }
.th-sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit;
  letter-spacing: inherit; cursor: pointer; }
.th-sort::after { content: " \2195"; opacity: 0.4; }
th[aria-sort="ascending"] .th-sort::after { content: " \25B2"; opacity: 0.85; }
th[aria-sort="descending"] .th-sort::after { content: " \25BC"; opacity: 0.85; }

/* ===== haladási igazolás grafikonjai (v2.43) ===== */
.cert-visual { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin: 0.2rem 0 1rem; }
.cert-donut { width: 8.5rem; height: 8.5rem; flex: none; }
.cd-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 14; }
.cd-arc { fill: none; stroke-width: 14; }
.cd-arc.cf-known { stroke: #2ea043; }
.cd-arc.cf-learning { stroke: #3987e5; }
.cd-arc.cf-new { stroke: #5a5e66; }
.cd-num { fill: var(--ink); font-size: 18px; font-weight: 700; }
.cd-cap { fill: var(--muted); font-size: 7.5px; }
/* a nyomtatott kép tömör elrendezése a képernyőn is (v2.44): négy csempe egy sorban, telefonon 2 × 2 */
.cert-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; flex: 1; min-width: min(16rem, 100%); }
@media (max-width: 760px) { .cert-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cert-counts { margin-left: 0.6rem; color: var(--muted); white-space: nowrap; }
.cert-counts-head { font-weight: normal; text-transform: none; letter-spacing: 0; }
.cert-table th.c-bar { white-space: nowrap; }
.cert-kpi { border: 1px solid var(--border); border-left-width: 5px; padding: 0.4rem 0.7rem; }
.cert-kpi b { display: block; font-size: 1.35rem; line-height: 1.2; }
.cert-kpi span { color: var(--muted); font-size: 0.8rem; }
.ck-known { border-left-color: #2ea043; }
.ck-learning { border-left-color: #3987e5; }
.ck-new { border-left-color: #8a8f98; }
.ck-acc { border-left-color: #e8a33d; }
.cert-bar-cell { white-space: nowrap; }
.cert-bar { width: 5.5rem; height: 0.6rem; vertical-align: middle; margin-right: 0.4rem; border-radius: 3px; }
rect.cf-known { fill: #2ea043; }
rect.cf-learning { fill: #3987e5; }
rect.cf-new { fill: rgba(255, 255, 255, 0.12); }
.cert-activity { margin: 0.8rem 0 0.2rem; }
.cert-subhead { margin: 0 0 0.3rem; font-weight: 600; font-size: 0.9rem; }
.cert-act-svg { display: block; width: 100%; height: 3.2rem; }
.ca-bar { fill: #3987e5; }
.ca-base { stroke: var(--border); stroke-width: 1; }
.cert-act-axis { display: flex; justify-content: space-between; font-size: 0.75rem; }
.cert-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; margin: 0.6rem 0 0; font-size: 0.8rem; }
/* a nyomtatási keret-táblázat képernyőn nem látszik (v2.44) — @media screen: a fájl végén álló szabály különben a
   nyomtatásiakat is felülírná */
@media screen {
  .cert-page, .cert-page > thead, .cert-page > tbody, .cert-page > tfoot, .cert-page > * > tr, .cert-page > * > tr > td {
    display: block; padding: 0; border: 0; }
  .cert-page-space { display: none; }
}

/* ===== csoport-diagramok (v2.44) ===== */
.stat-challenge { display: flex; align-items: center; gap: 1rem; }
.stat-challenge h2 { margin: 0 0 0.2rem; }
.stat-challenge p { margin: 0; }
.ring-challenge { stroke: #e8a33d; }
.heatmap-wrap { overflow-x: auto; padding: 0.2rem 0; }
.heat-grid { display: grid; grid-template-columns: 2rem repeat(24, minmax(0.85rem, 1fr)); gap: 2px; min-width: 30rem; }
.heat-label { font-size: 0.7rem; color: var(--muted); line-height: 1; display: flex; align-items: center; }
.heat-cell { position: relative; height: 1.15rem; border-radius: 2px; background: rgba(255, 255, 255, 0.05); }
.heat-cell.heat-on { background: rgba(57, 135, 229, var(--heat, 0.5)); }
.heat-cell:hover { outline: 1px solid var(--ink); z-index: 4; }
.heat-cell:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: #0d0e10; color: var(--ink); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.55rem; font-size: 0.78rem; font-weight: 600; z-index: 5; pointer-events: none;
}
.heat-cell.heat-top:hover::after { bottom: auto; top: calc(100% + 6px); }
.heat-cell.heat-left:hover::after { left: 0; transform: none; }
.heat-cell.heat-right:hover::after { left: auto; right: 0; transform: none; }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.5rem; }
.heat-swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; background: #3987e5; }

/* ===== kérdés-elemzés (v2.45) ===== */
.qa-filter { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: flex-end; }
.qa-filter label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; flex: 1 1 12rem; min-width: 0;
  font-size: 0.85rem; color: var(--muted); }
.qa-filter select { width: 100%; }
.qa-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: 0.75rem; margin: 0 0 0.8rem; }
a.qa-view { margin: 0; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.1rem; color: inherit;
  transition: border-color 0.15s; }
a.qa-view:hover, a.qa-view:focus-visible { text-decoration: none; border-color: var(--accent); }
a.qa-view.qa-view-active { border-color: var(--accent); background: rgba(57, 135, 229, 0.12); }
.qa-view-count { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.qa-view-label { color: var(--ink-2); font-size: 0.88rem; }
.qa-summary { margin: 0 0 1rem; }
.qa-section h2 { margin-bottom: 0.2rem; }
.qa-section-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.qa-section-head h2 { margin: 0; }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: 1rem; margin-top: 0.8rem; }
.qa-card { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.qa-head { display: flex; justify-content: space-between; gap: 0.8rem; align-items: flex-start; }
.qa-id { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.qa-chapter { font-size: 0.82rem; overflow-wrap: anywhere; }
/* hibaarány-plecsni: piros 50% fölött, sárga 25% fölött, különben zöld */
.qa-rate { flex: none; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 3px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.qa-rate b { font-size: 1.05rem; }
.qa-rate span { font-size: 0.68rem; color: var(--muted); }
.qa-rate-bad { border-color: var(--bad); }
.qa-rate-bad b { color: var(--bad); }
.qa-rate-warn { border-color: var(--warn); }
.qa-rate-warn b { color: var(--warn); }
.qa-rate-ok { border-color: var(--good); }
.qa-rate-ok b { color: #7fd88f; }
.qa-text { margin: 0; overflow-wrap: anywhere; }
.qa-meta { margin: -0.3rem 0 0; font-size: 0.85rem; }
.qa-options { display: flex; flex-direction: column; gap: 0.4rem; }
.qa-option-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.qa-option { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 5.5rem 2.8rem; gap: 0.5rem; align-items: center;
  font-size: 0.88rem; }
.qa-letter { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.qa-correct .qa-letter { background: rgba(12, 163, 12, 0.18); border-color: rgba(12, 163, 12, 0.55); color: #7fd88f; }
.qa-trap .qa-letter { background: rgba(208, 59, 59, 0.2); border-color: rgba(208, 59, 59, 0.6); color: var(--bad); }
.qa-option-text { overflow-wrap: anywhere; color: var(--ink-2); }
.qa-correct .qa-option-text, .qa-trap .qa-option-text { color: var(--ink); }
.qa-trap .qa-option-text { font-weight: 600; }
.qa-old { margin-left: 0.35rem; }
.qa-bar { height: 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.qa-bar i { display: block; height: 100%; background: #6b6a65; border-radius: 999px; }
.qa-correct .qa-bar i { background: var(--good); }
.qa-trap .qa-bar i { background: var(--bad); }
.qa-pick { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.qa-trap-line { margin: 0; font-size: 0.88rem; color: var(--bad); }
.qa-note { margin: 0; font-size: 0.8rem; }
.qa-stats { margin: 0; display: grid; gap: 0.15rem; font-size: 0.86rem; }
.qa-stats div { display: flex; justify-content: space-between; gap: 0.8rem; }
.qa-stats dt { color: var(--muted); }
.qa-stats dd { margin: 0; text-align: right; }
.qa-advice { margin: 0; padding: 0.45rem 0.65rem; font-size: 0.88rem; border-left: 3px solid var(--warn);
  background: rgba(232, 193, 112, 0.08); border-radius: 0 6px 6px 0; }
.qa-actions { display: flex; gap: 0.5rem; margin-top: auto; }
/* az előnézet széles kártyáján az eloszlás, a számok és a javaslat egy olvasható szélességű oszlopban */
.qa-preview .qa-options, .qa-preview .qa-stats, .qa-preview .qa-advice { max-width: 46rem; }
.qa-preview .qa-options { margin-bottom: 0.7rem; }
.qa-preview .qa-advice { margin-top: 0.7rem; }
/* telefonon a sáv a szöveg alá kerül */
@media (max-width: 520px) {
  .qa-option { grid-template-columns: 1.6rem minmax(0, 1fr) 2.8rem; row-gap: 0.2rem; }
  .qa-bar { grid-column: 2 / 4; grid-row: 2; }
}
.qa-actions .inline-form { display: inline-flex; }
.qa-undo { margin: -0.4rem 0 1rem; }

/* ===== Csoportok oldal csempékkel (v2.46) ===== */
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 1rem; }
.grp-tile, .grp-new { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.grp-new { border-style: dashed; justify-content: center; }
.grp-new h2 { margin: 0; }
.grp-new p { margin: 0; font-size: 0.85rem; }
.grp-new .btn { align-self: flex-start; }
.grp-head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.grp-avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.grp-avatar-lg { width: 3.6rem; height: 3.6rem; font-size: 1.1rem; }
.grp-avatar-c0 { background: rgba(57, 135, 229, 0.18); color: #7fb2f0; }
.grp-avatar-c1 { background: rgba(25, 158, 112, 0.2); color: #6fd3ae; }
.grp-avatar-c2 { background: rgba(232, 163, 61, 0.18); color: #f0c078; }
.grp-avatar-c3 { background: rgba(127, 119, 221, 0.2); color: #b3adf0; }
.grp-avatar-c4 { background: rgba(63, 171, 184, 0.2); color: #85d3dc; }
.grp-avatar-c5 { background: rgba(216, 90, 48, 0.2); color: #f0a080; }
.grp-title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.grp-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); overflow-wrap: anywhere; }
.grp-name:hover { color: var(--accent); }
.grp-title code { align-self: flex-start; font-size: 0.78rem; }
.grp-main { display: flex; align-items: center; gap: 1rem; }
.grp-facts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.grp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.grp-course { color: var(--ink); border-color: rgba(57, 135, 229, 0.4); }
.grp-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.ring-track.ring-none { stroke-dasharray: 3 4; stroke-width: 3; }
.ring-text-small { font-size: 9px; font-weight: 600; fill: var(--muted); }
/* csoportoldal: fejléc és beállítás-csempék */
.grp-hero { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.grp-hero-title { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.grp-hero-stats { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.grp-hero-stats div { display: flex; flex-direction: column; }
.grp-hero-stats dt { color: var(--muted); font-size: 0.8rem; }
.grp-hero-stats dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
.grp-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1rem; }
.grp-set { margin: 0; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.grp-set h2 { margin: 0; }
.grp-set p { margin: 0; font-size: 0.86rem; }
.grp-set .access-form { margin: 0; }
.grp-set-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.grp-set-form input[type="text"], .grp-set-form input[type="number"] { flex: 1 1 10rem; min-width: 0; width: auto; }
.grp-set-row { display: flex; align-items: center; gap: 0.9rem; }
.grp-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.grp-big { font-size: 1.6rem; font-weight: 700; }
.grp-list { margin: 0; padding-left: 1.1rem; }
.grp-danger { border-color: rgba(208, 59, 59, 0.45); }
.grp-danger h2 { color: var(--bad); }
.grp-danger .inline-form { align-self: flex-start; }
/* kapcsoló a jelölőnégyzetből (JS nélkül is működik: a mentés gombbal megy) */
.grp-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; flex: 1 1 auto; }
.grp-switch input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 2.5rem; height: 1.4rem; flex: none;
  margin: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.16); position: relative; cursor: pointer;
  transition: background 0.15s; }
.grp-switch input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.4rem - 6px);
  height: calc(1.4rem - 6px); border-radius: 50%; background: #fff; transition: transform 0.15s; }
.grp-switch input[type="checkbox"]:checked { background: var(--good); }
.grp-switch input[type="checkbox"]:checked::after { transform: translateX(1.1rem); }
.grp-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-kpi-tiles.grp-summary { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
/* „Új csoport” csempe (v2.46): teljes szélesség, két fél — adatok és a legutóbbi tananyagok */
.grp-grid > .grp-new { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem;
  align-items: start; }
.grp-new-main { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.grp-new-main .btn { align-self: flex-start; }
.grp-new-courses { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.grp-new-courses legend { padding: 0; margin-bottom: 0.4rem; font-weight: 700; }
.grp-new-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.2rem 1rem; }
.grp-new-list .checkbox-label span { overflow-wrap: anywhere; }
@media (max-width: 760px) { .grp-grid > .grp-new { grid-template-columns: minmax(0, 1fr); } }
/* lezárt csoport (v2.46): halványabb csempe a lista végén */
.grp-tile.grp-closed { opacity: 0.62; border-style: dashed; }
.grp-tile.grp-closed:hover, .grp-tile.grp-closed:focus-within { opacity: 0.92; }
.grp-tile.grp-closed .grp-avatar { filter: grayscale(0.8); }
.grp-closed-badge { align-self: flex-start; }
.grp-actions .grp-close { display: inline-flex; margin-left: auto; }
.grp-warnbox { border-color: rgba(232, 193, 112, 0.35); }
.grp-set .inline-form { align-self: flex-start; }
/* lezárt csoport a Csoportstatisztikák oldalon (v2.46) */
a.stat-tile.stat-tile-closed { opacity: 0.6; border-style: dashed; }
a.stat-tile.stat-tile-closed:hover, a.stat-tile.stat-tile-closed:focus-visible { opacity: 0.92; }
/* a csoportcsempe egésze a csoport oldalára visz (v2.46): a név linkje kiterjesztve; a gombok és a gyűrű buborékja fölötte */
.grp-tile { position: relative; transition: border-color 0.15s, transform 0.15s; }
.grp-tile:hover, .grp-tile:focus-within { border-color: var(--accent); }
.grp-tile .grp-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.grp-tile .grp-name:focus-visible { outline: none; }
.grp-tile:has(.grp-name:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.grp-tile .grp-actions, .grp-tile .grp-main .ring { position: relative; z-index: 1; }
/* admin oldal-lábléc (v2.46): az oldal erőforrás-igénye apró betűvel */
.perf-footer { max-width: 1100px; margin: 2rem auto 1rem; padding: 0 1rem; text-align: center; font-size: 0.72rem;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.perf-footer span { white-space: nowrap; } /* v2.46.1: egy sor — telefonon csak a részek között törik */
@media print { .perf-footer { display: none !important; } }