:root {
  --bg: #f5f2ec;
  --surface: #fffdf9;
  --surface-2: #f0ebe2;
  --ink: #1f2328;
  --muted: #6b6f76;
  --line: #e4ddd1;
  --accent: #1f7a5c;
  --accent-ink: #ffffff;
  --accent-soft: #e2f0e9;
  --warn: #a86a12;
  --warn-soft: #fbf0d9;
  --bad: #b8392b;
  --bad-soft: #f8e2de;
  --rec: #d64533;
  --shadow: 0 1px 2px rgba(31, 35, 40, .05), 0 8px 24px rgba(31, 35, 40, .06);
  --radius: 18px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --surface: #1c2024;
    --surface-2: #23282d;
    --ink: #ecebe7;
    --muted: #9ba1a8;
    --line: #2e343a;
    --accent: #4db48b;
    --accent-ink: #0d1f18;
    --accent-soft: #1d3a2f;
    --warn: #e0a84a;
    --warn-soft: #3a2f1b;
    --bad: #ec7a6c;
    --bad-soft: #3d2320;
    --rec: #ef6b5a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

/* ---------- vázszerkezet ---------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.nav {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 2px;
  padding: 20px 12px; border-right: 1px solid var(--line); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; padding: 4px 10px 20px; }
.logo {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-size: 15px;
}
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--muted); text-decoration: none; cursor: pointer; font-weight: 500;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.aktiv { background: var(--accent-soft); color: var(--accent); }
.nav .ic { width: 18px; text-align: center; font-size: 16px; }
.main { padding: 36px 40px 80px; max-width: 980px; width: 100%; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .nav {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; z-index: 10;
    flex-direction: row; justify-content: space-around; padding: 6px 4px;
    border-right: 0; border-top: 1px solid var(--line);
  }
  .brand { display: none; }
  .nav a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 11px; }
  .main { padding: 20px 16px 100px; }
}

/* ---------- tipográfia ---------- */
h1 { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }
.alcim { color: var(--muted); margin: 0 0 28px; }
.muted { color: var(--muted); }
.kicsi { font-size: 13px; }

/* ---------- elemek ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}
.grid { display: grid; gap: 16px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .g3, .g2, .g4 { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 12px;
  padding: 10px 16px; cursor: pointer; font-weight: 500; transition: background .15s, transform .05s;
  text-decoration: none; color: var(--ink);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.fo { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.fo:hover { filter: brightness(1.06); }
.btn.nagy { padding: 14px 22px; font-size: 16px; border-radius: 14px; }
.btn.kicsi { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.btn.szellem { background: transparent; border-color: transparent; color: var(--muted); }
.btn.szellem:hover { color: var(--ink); background: var(--surface-2); }
.sor { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn.fo .kbd { color: inherit; border-color: currentColor; opacity: .7; }
.kbd { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; margin-left: 2px; }

.chip {
  display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 500;
  background: var(--surface-2); color: var(--muted);
}
.chip.zold { background: var(--accent-soft); color: var(--accent); }

input[type=text], input[type=date], select, textarea {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { display: block; font-weight: 500; margin: 14px 0 6px; }

/* ---------- Ma ---------- */
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }
.hero .fo-kartya { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.szamok { display: flex; gap: 28px; }
.szam b { display: block; font-family: var(--display); font-size: 40px; line-height: 1; font-weight: 600; }
.szam span { color: var(--muted); font-size: 13px; }
.tipp { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 14px 16px; border-radius: 0 12px 12px 0; }
.stat b { font-family: var(--display); font-size: 28px; font-weight: 600; }
.stat .muted { font-size: 13px; }
.sav { position: relative; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: visible; margin-top: 10px; }
.sav > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--accent); }
.sav > u { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink); opacity: .35; }
.hetek { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin-top: 12px; }
.hetek div { height: 30px; border-radius: 6px; background: var(--surface-2); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.hetek .f1 { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.hetek .f2 { background: color-mix(in srgb, var(--accent) 32%, var(--surface-2)); }
.hetek .f3 { background: color-mix(in srgb, var(--warn) 28%, var(--surface-2)); }
.hetek .f4 { background: color-mix(in srgb, var(--bad) 22%, var(--surface-2)); }
.hetek .most { outline: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.jelmagyarazat { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.jelmagyarazat i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- kártya-edzés ---------- */
.edzes-fej { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.edzes-fej .sav { flex: 1; margin: 0; }
.tanulo {
  min-height: 360px; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 36px 28px 28px; gap: 8px;
}
.tanulo .cimke { margin-bottom: 14px; }
.mondat { font-family: var(--display); font-size: clamp(26px, 4vw, 38px); line-height: 1.2; font-weight: 600; max-width: 720px; }
.mondat.kozepes { font-size: clamp(22px, 3.2vw, 30px); }
.forditas { font-size: 18px; color: var(--muted); }
.osztrak { font-size: 14px; color: var(--muted); }
.osztrak b { color: var(--ink); font-weight: 500; }
.megj { font-size: 14px; background: var(--surface-2); border-radius: 10px; padding: 6px 12px; margin-top: 6px; }
.rejtett { filter: blur(9px); user-select: none; cursor: pointer; transition: filter .2s; }
.vezerlok { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 22px; flex-wrap: wrap; }

.mikrofon {
  width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .1s, background .2s;
}
.mikrofon svg { width: 34px; height: 34px; }
.mikrofon:hover { transform: scale(1.04); }
.mikrofon.felvesz { background: var(--rec); animation: pulzus 1.3s infinite; }
.mikrofon.dolgozik { background: var(--muted); cursor: progress; }
.mikrofon.kicsi { width: 52px; height: 52px; }
.mikrofon.kicsi svg { width: 22px; height: 22px; }
@keyframes pulzus {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rec) 55%, transparent); }
  70% { box-shadow: 0 0 0 18px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.mik-felirat { font-size: 13px; color: var(--muted); min-height: 20px; }

.eredmeny { width: 100%; max-width: 620px; margin-top: 18px; border-radius: 14px; padding: 16px 18px; text-align: left; display: flex; gap: 16px; align-items: center; }
.eredmeny.ertheto { background: var(--accent-soft); }
.eredmeny.majdnem { background: var(--warn-soft); }
.eredmeny.meg_nem { background: var(--bad-soft); }
.gyuru { --p: 0; --c: var(--accent); flex: none; width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--c) 18%, transparent) 0);
  display: grid; place-items: center; }
.gyuru span { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.eredmeny.majdnem .gyuru { --c: var(--warn); }
.eredmeny.meg_nem .gyuru { --c: var(--bad); }
.eredmeny .cim { font-weight: 600; }
.eredmeny.ertheto .cim { color: var(--accent); }
.eredmeny.majdnem .cim { color: var(--warn); }
.eredmeny.meg_nem .cim { color: var(--bad); }
.szavak { margin-top: 4px; }
.szavak span.hibas { color: var(--bad); text-decoration: underline wavy; text-underline-offset: 4px; font-weight: 600; }
.hallott { font-size: 13px; color: var(--muted); }
.gepeles { display: flex; gap: 8px; width: 100%; max-width: 520px; margin-top: 14px; }

.ertekelo { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }

.osszegzes { text-align: center; padding: 48px 28px; }
.osszegzes .nagyszam { font-family: var(--display); font-size: 64px; font-weight: 600; line-height: 1; }

/* ---------- kategóriák ---------- */
.katlista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kat { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.kat h3 { font-size: 16px; margin: 0; }
.kat .sor { margin-top: auto; }
.szekcio { margin: 34px 0 14px; display: flex; align-items: baseline; gap: 12px; }
.szekcio h2 { margin: 0; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; gap: 12px; min-height: 360px; max-height: calc(100vh - 290px); overflow-y: auto; padding: 18px; }
.buborek { max-width: 78%; padding: 12px 16px; border-radius: 16px; line-height: 1.45; }
.buborek.o { background: var(--surface-2); border-top-left-radius: 4px; align-self: flex-start; }
.buborek.en { background: var(--accent); color: var(--accent-ink); border-top-right-radius: 4px; align-self: flex-end; }
.buborek.visszajelzes { background: var(--warn-soft); align-self: stretch; max-width: 100%; border-radius: 12px; }
.buborek .nev { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.buborek .de { font-family: var(--display); font-size: 19px; }
.buborek .segitseg { margin-top: 8px; font-size: 13px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.buborek .eszkozok { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.buborek.tanar-valasz { max-width: 88%; }
.buborek.tanar-valasz p { margin: 0 0 8px; }
.buborek.tanar-valasz ul { margin: 4px 0 8px; padding-left: 20px; }
.beiro { display: flex; gap: 10px; align-items: center; padding: 14px; border-top: 1px solid var(--line); }
.beiro input { flex: 1; }
.gepel { display: flex; gap: 4px; padding: 12px 16px; }
.gepel i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: pont 1s infinite; }
.gepel i:nth-child(2) { animation-delay: .15s; } .gepel i:nth-child(3) { animation-delay: .3s; }
@keyframes pont { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- szkript ---------- */
textarea.szkript { min-height: 420px; font: 14px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; resize: vertical; }
.modul-elo { border-top: 1px solid var(--line); padding: 10px 0; }
.modul-elo:first-child { border-top: 0; }
.elonezet-sor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.elonezet-sor .de { font-weight: 500; }

/* ---------- ütemterv ---------- */
.fazis { position: relative; padding: 0 0 26px 30px; }
.fazis::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 0; width: 2px; background: var(--line); }
.fazis:last-child::before { display: none; }
.fazis .pont { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.fazis.aktiv .pont { background: var(--accent); border-color: var(--accent); }
.fazis .datum { font-size: 13px; color: var(--muted); }
.kat-sor { display: grid; grid-template-columns: 56px 1fr 120px auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kat-sor .sav { margin: 0; }
@media (max-width: 760px) { .kat-sor { grid-template-columns: 44px 1fr auto; } .kat-sor .sav { display: none; } }

/* ---------- egyéb ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 12px; transition: all .25s; pointer-events: none; z-index: 50; max-width: 90vw;
}
.toast.lathato { opacity: 1; transform: translateX(-50%) translateY(0); }
.betolt { display: grid; place-items: center; min-height: 240px; color: var(--muted); }
.spin { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: forog .8s linear infinite; }
@keyframes forog { to { transform: rotate(360deg); } }
.ures { text-align: center; padding: 40px 20px; color: var(--muted); }

/* ---------- költséges (API) funkciók jelölése ---------- */
.dij {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--warn); color: #fff; font: 700 12px/1 var(--ui); vertical-align: 1px; flex: none;
}
.nav a .dij { margin-left: auto; }
.dij-magyarazat { margin-top: auto; padding: 12px 10px 0; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.dij-sor { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--warn); margin: -14px 0 18px; }
.card .dij-sor { margin: 12px 0 0; }
@media (max-width: 760px) {
  .dij-magyarazat { display: none; }
  .nav a { position: relative; }
  .nav a .dij { position: absolute; top: 2px; right: 6px; width: 14px; height: 14px; font-size: 10px; }
}

/* ---------- költségsáv ---------- */
.koltseg-sav { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 18px; padding: 16px 20px; margin-bottom: 16px;
  border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.k-cimke { font-size: 12px; color: var(--muted); font-weight: 500; }
.k-nagy { font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--warn); }
.k-kozep { font-weight: 600; }
.k-kicsi { font-size: 12px; color: var(--muted); margin-top: 4px; }
.k-jobb select { margin-top: 4px; padding: 7px 10px; font-size: 13px; }
.ar-cimke { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: right; }
@media (max-width: 760px) { .koltseg-sav { grid-template-columns: 1fr 1fr; } .k-jobb { grid-column: 1 / -1; } }

/* ---------- szótár ---------- */
.n-der { color: #2f6fd0; } .n-die { color: #c2413a; } .n-das { color: #2f8f4e; }
@media (prefers-color-scheme: dark) { .n-der { color: #7fb0ff; } .n-die { color: #ff8f86; } .n-das { color: #72d196; } }
.szo-link { cursor: pointer; border-bottom: 1.5px dotted color-mix(in srgb, var(--accent) 60%, transparent); }
.szo-link:hover { background: var(--accent-soft); border-radius: 4px; }
.buborek.en .szo-link { border-bottom-color: currentColor; }
.szo-pop { position: absolute; z-index: 40; max-width: 300px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 14px; }
.szo-pop .pop-de { font-family: var(--display); font-size: 18px; }
.szo-mondat { font-size: clamp(30px, 5vw, 44px); }
.nyelvtan { font-size: 14px; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 6px 12px; }
.pelda { margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.pelda > div:first-child { font-family: var(--display); font-size: 19px; }
.szuro { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 760px) { .szuro { grid-template-columns: 1fr 1fr; } .szuro input { grid-column: 1 / -1; } }
.szo-sor { display: grid; grid-template-columns: 40px 1.2fr 1.2fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.szo-sor:last-child { border-bottom: 0; }
.szo-sor .de { font-weight: 600; }
@media (max-width: 760px) { .szo-sor { grid-template-columns: 34px 1fr 1fr; } .szo-sor > div:last-child { grid-column: 2 / -1; justify-content: flex-start !important; } }
/* hangszóró a német szó mellett (Szótár, Szókártyák) */
.hangszoro { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 8px; padding: 0; vertical-align: middle; border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.hangszoro svg { width: 16px; height: 16px; }
.hangszoro:hover, .hangszoro:focus-visible { color: var(--brand); border-color: var(--brand); }
.kv-szo .hangszoro { width: 42px; height: 42px; margin-left: 14px; }
.kv-szo .hangszoro svg { width: 22px; height: 22px; }
#lista .szo-sor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; }   /* fix címkeoszlop: a magyar szavak minden sorban egy vonalban */
@media (max-width: 760px) { #lista .szo-sor { grid-template-columns: 1fr 1fr; } #lista .szo-sor > div:last-child { grid-column: 1 / -1; } }
.chip.allapot-tanul { background: var(--warn-soft); color: var(--warn); }
.chip.allapot-megy { background: var(--accent-soft); color: var(--accent); }
.kinyer-sor { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kinyer-sor:last-child { border-bottom: 0; }

/* ---------- diagramok ---------- */
.diagram { width: 100%; height: 140px; display: block; }
.d-racs { stroke: var(--line); stroke-width: 1; }
.d-tengely { fill: var(--muted); font-size: 11px; font-family: var(--ui); }
.d-vonal { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.d-jel { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.d-talalat { fill: transparent; }
.d-pont:hover .d-jel { r: 6; }
.diagram-ures { padding: 30px 0; text-align: center; }

/* ---------- gyorsasági kör ---------- */
.gyors-kartya { min-height: 380px; justify-content: center; }
.visszaszamlalo { width: 100%; max-width: 520px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 18px; }
.visszaszamlalo i { display: block; height: 100%; width: 100%; background: var(--warn); border-radius: 99px; }
.hangszint { width: 100%; max-width: 520px; height: 4px; border-radius: 99px; background: transparent; overflow: hidden; }
.hangszint i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .05s; }
.g-allapot { font-weight: 600; min-height: 24px; margin-top: 10px; color: var(--muted); }
.g-allapot.beszel { color: var(--accent); }
.g-allapot.jo { color: var(--accent); }
.g-allapot.kozepes { color: var(--warn); }
.g-allapot.rossz { color: var(--bad); }
.g-sor { display: grid; grid-template-columns: 1fr 80px 60px auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.g-sor:last-child { border-bottom: 0; }
.g-sor .de { font-weight: 600; }
.g-ertek { font-weight: 600; text-align: right; color: var(--muted); }
.g-ertek.jo, .g-ertek.ertheto { color: var(--accent); }
.g-ertek.majdnem { color: var(--warn); }
.g-ertek.meg_nem { color: var(--bad); }
@media (max-width: 760px) { .g-sor { grid-template-columns: 1fr 64px 48px; } .g-sor > div:last-child { grid-column: 1 / -1; } }

/* ---------- gyakorlat-csempék ---------- */
.gyak-racs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .gyak-racs { grid-template-columns: 1fr; } }
.gyak-csempe { display: flex; flex-direction: column; gap: 8px; }
.gyak-csempe h3 { margin: 0; font-size: 17px; }
.gyak-csempe p { margin: 0 0 6px; }
.gyak-csempe .sor { margin-top: auto; }
.gyak-ikon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 18px; }

/* ---------- fejlődés ---------- */
.hang-sor { border-bottom: 1px solid var(--line); }
.hang-sor:last-child { border-bottom: 0; }
.hang-fej { display: grid; grid-template-columns: 150px 1fr 44px 70px; gap: 10px; align-items: center; padding: 10px 0; cursor: pointer; }
.hang-fej .sav { margin: 0; }
.hiba-sav > i { background: var(--warn); }
.hang-szam { font-weight: 600; text-align: right; }
.trend { font-size: 12px; color: var(--muted); text-align: right; }
.trend.javul { color: var(--accent); }
.trend.romlik { color: var(--bad); }
.hang-reszlet { padding: 0 0 12px; }
.szo-hiba-sor { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.szo-hiba-sor:last-child { border-bottom: 0; }
@media (max-width: 760px) { .hang-fej { grid-template-columns: 110px 1fr 40px; } .hang-fej .trend { grid-column: 1 / -1; text-align: left; } }

/* ---------- navigáció: mobil „Több” menü ---------- */
.tobb-gomb { display: none; }
@media (max-width: 760px) {
  .nav .masodlagos { display: none; }
  .tobb-gomb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; font-size: 11px;
    background: none; border: 0; color: var(--muted); cursor: pointer; font-family: inherit; }
}
}

.tobb-lap { display: none; }
@media (max-width: 760px) {
  .tobb-lap { display: block; position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 30; background: var(--surface);
    border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 6px; }
  .tobb-lap[hidden] { display: none; }
  .tobb-lap a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px; color: var(--ink);
    text-decoration: none; font-weight: 500; cursor: pointer; }
  .tobb-lap a:hover { background: var(--surface-2); }
  .tobb-lap a .dij { margin-left: auto; }
  .tobb-lap a .ic { width: 20px; text-align: center; }
}

/* ---------- lyukas mondat ---------- */
.lyuk { display: inline-block; min-width: 3em; border-bottom: 3px solid var(--accent); color: transparent; line-height: 1.1; }
.lyuk.jo { color: var(--accent); border-bottom-color: var(--accent); }
.lyuk.rossz { color: var(--bad); border-bottom-color: var(--bad); }
.lyuk-eredmeny { padding: 10px 16px; border-radius: 12px; }
.lyuk-eredmeny.jo { background: var(--accent-soft); }
.lyuk-eredmeny.rossz { background: var(--bad-soft); }

/* ---------- valódi hangok ---------- */
.v-sor { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.v-sor:last-child { border-bottom: 0; }
.v-sor .de { font-weight: 600; }
@media (max-width: 760px) { .v-sor { grid-template-columns: 1fr; } .v-sor > .sor { justify-content: flex-start !important; } }
.valodi-chip { background: var(--warn-soft); color: var(--warn); }
.felvevo .mondat { font-size: clamp(28px, 4.2vw, 40px); }
.d-sor { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.d-sor:last-child { border-bottom: 0; }
.d-sor select { margin-top: 6px; }

/* rácselemek ne feszíthessék szét az oldalt keskeny kijelzőn */
.app > *, .grid > *, .katlista > *, .gyak-racs > * { min-width: 0; }
select { max-width: 100%; text-overflow: ellipsis; }
.szo-hiba-sor > div, .v-sor > div, .g-sor > div { min-width: 0; overflow-wrap: anywhere; }

/* ---------- párbeszédek ---------- */
.pb-vezerlo { display: flex; flex-direction: column; gap: 14px; }
.szegmens { display: inline-flex; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; align-self: flex-start; }
.szegmens button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 500; color: var(--muted); }
.szegmens button.aktiv { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kapcsolo { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; cursor: pointer; }
.pb-chat { max-height: calc(100vh - 360px); min-height: 320px; }
.buborek.en .nev { color: inherit; opacity: .8; }
.buborek.en .pb-hu { color: inherit; opacity: .85; }
.pb-sajat { min-width: 260px; }
.pb-feladat { font-weight: 500; }
.pb-sugo { font-family: var(--display); font-size: 19px; margin-top: 6px; }
.pb-sugo .szo-link { border-bottom-color: currentColor; }
.pb-ered { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.pb-pont { font-weight: 700; background: var(--surface); color: var(--ink); border-radius: 99px; padding: 1px 8px; }
.pb-pont.ertheto { color: var(--accent); } .pb-pont.majdnem { color: var(--warn); } .pb-pont.meg_nem { color: var(--bad); }
.pb-hallott { opacity: .85; }
.pb-sajathang { background: transparent; color: inherit; border-color: currentColor; }
.pb-bevitel { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pb-bevitel > div:first-child > div { flex-direction: row !important; flex-wrap: wrap; }
.pb-gombok { gap: 6px; }
.pb-osszegzes { margin: 0 16px 16px; box-shadow: none; background: var(--surface-2); }
.pb-eredmenyek { display: flex; gap: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pb-eredmenyek b { color: var(--ink); }

/* ---------- napi minimum ---------- */
.minimum { display: flex; flex-direction: column; gap: 14px; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.minimum.kesz { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.min-fej { display: flex; gap: 14px; align-items: center; }
.min-gyuru { --p: 0; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--accent) 16%, transparent) 0); }
.min-gyuru > span { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.min-gyuru.nagy { width: 60px; height: 60px; }
.min-gyuru.nagy > span { width: 48px; height: 48px; font-size: 14px; }
.min-lista { display: flex; flex-direction: column; }
.min-tetel { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.min-pipa { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.min-tetel.kesz .min-pipa { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.min-tetel.kesz .min-cim b { color: var(--muted); }
.min-cim { display: flex; justify-content: space-between; gap: 10px; }
.min-szam { font-size: 13px; color: var(--muted); white-space: nowrap; }
.min-szoveg .sav { margin: 6px 0 4px; height: 6px; }
.min-reszlet { color: var(--accent); font-weight: 500; }
.min-miert { margin-top: 2px; }
.min-tetel.kesz .min-miert, .min-tetel.kesz .sav { display: none; }
.min-lab { justify-content: space-between; align-items: center; }
.min-kesz-szoveg { font-weight: 600; color: var(--accent); }
.het-pottyok { display: flex; gap: 5px; }
.potty { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600;
  background: var(--surface-2); color: var(--muted); }
.potty.kesz { background: var(--accent); color: var(--accent-ink); }
.potty.kimaradt { background: var(--bad-soft); color: var(--bad); }
.potty.reszben { background: var(--warn-soft); color: var(--warn); }
.potty.ma { outline: 2px solid var(--ink); color: var(--ink); }
.potty.elotte { opacity: .35; }
.min-jel { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff;
  font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.min-jel.kesz { background: var(--accent); }
.minimum-sav { display: flex; gap: 12px; align-items: center; text-align: left; margin: 20px auto 0; max-width: 560px;
  padding: 12px 16px; border-radius: 14px; background: var(--warn-soft); }
.minimum-sav.kesz { background: var(--accent-soft); }
.minimum-sav > div { flex: 1; }
@media (max-width: 760px) {
  .nav a { position: relative; }
  .nav .min-jel { position: absolute; top: 0; right: 4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  .min-lab { flex-direction: column; align-items: stretch; }
  .het-pottyok { justify-content: center; }
}

/* ---- bemutató sáv ---- */
.demo-sav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
.demo-sav .cim { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.demo-sav .cimke { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent);
  padding: 4px 8px; border-radius: 99px; }
.demo-sav .jobb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.valto { display: inline-flex; background: var(--surface-2); border-radius: 99px; padding: 3px; gap: 3px; }
.valto button { appearance: none; border: 0; background: transparent; color: var(--ink); font: 600 13px/1 var(--ui); padding: 8px 12px; border-radius: 99px; cursor: pointer; }
.valto button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.flags { display: inline-flex; gap: 4px; }
.demo-sav .logo { width: 36px; height: 36px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line); }
.flag { width: 20px; height: 14px; border-radius: 2px; background: linear-gradient(#A3161A 0 33.33%, #fff 33.33% 66.66%, #A3161A 66.66%); box-shadow: 0 0 0 1px var(--line); }
.flag.de { background: linear-gradient(#000 0 33.33%, #DD0000 33.33% 66.66%, #FFCE00 66.66%); }

/* ---- szókártyák / Anki ---- */
.anki-kartya { display: grid; gap: 12px; margin-bottom: 8px; }
.anki-fej { display: flex; align-items: center; gap: 12px; }
.anki-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 600 20px/1 var(--display); flex: none; }
.anki-opciok { display: grid; gap: 6px; }
.anki-opciok .check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.anki-opciok input { accent-color: var(--accent); width: 16px; height: 16px; }
.anki-hogyan summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.anki-hogyan ol { margin: 8px 0; padding-left: 20px; font-size: 14px; display: grid; gap: 4px; }
/* ---- heti összefoglaló ---- */
.heti { margin-bottom: 16px; border-left: 4px solid var(--accent); }
.heti-lista { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; }
.heti-lista li { font-size: 14px; }
@media (max-width: 760px) {
}
@media (max-width: 760px) { .demo-sav { padding: 8px 12px; gap: 8px; font-size: 13px; } .demo-sav .cimke { display: none; } .valto button { padding: 7px 10px; } }

/* ================= ÚJ FELÜLET: fehér, nyugodt, egy képernyő = egy dolog ================= */
:root { --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F4F1; --ink:#1B1A18; --muted:#6E6B66; --line:#ECEAE6;
  --accent:#1B1A18; --accent-ink:#FFFFFF; --accent-soft:#F3F2EF; --ok:#2E7D5B; --ok-soft:#E8F3EC; --brand:#A3161A;
  --shadow:none; --radius:20px; }
@media (prefers-color-scheme: dark) { :root { --bg:#121212; --surface:#121212; --surface-2:#1E1E1D; --ink:#F2F1EE; --muted:#A3A09A; --line:#2A2928;
  --accent:#F2F1EE; --accent-ink:#121212; --accent-soft:#232322; --ok:#5FCF94; --ok-soft:#15291D; --brand:#D3262C; } }
body { background: var(--bg); font-size: 16px; }
.card { box-shadow: none; }
.app { grid-template-columns: 232px 1fr; }
.nav { background: var(--bg); padding: 28px 14px; gap: 4px; }
.brand { padding: 4px 12px 28px; font-size: 15px; }
.brand .flag { width: 18px; height: 12px; }
.nav a { padding: 11px 14px; border-radius: 12px; font-weight: 500; }
.nav a.aktiv { background: var(--surface-2); color: var(--ink); }
.nav .ic { width: 20px; height: 20px; display: grid; place-items: center; }
.nav .ic svg { width: 20px; height: 20px; }
.main { max-width: 1060px; margin: 0 auto; padding: 48px 48px 140px; }
.demo-sav { background: var(--bg); border-bottom: 1px solid var(--line); }
.demo-sav .cimke { background: var(--surface-2); color: var(--muted); }
h1 { font-size: 40px; letter-spacing: -.02em; }
.alcim { font-size: 17px; }
/* siker = zöld, a fő gomb fekete */
.eredmeny.ertheto { background: var(--ok-soft); } .eredmeny.ertheto .cim { color: var(--ok); } .eredmeny.ertheto .gyuru { --c: var(--ok); }
.chip.zold, .chip.allapot-megy { background: var(--ok-soft); color: var(--ok); }
.buborek .nev { color: var(--muted); }
.mikrofon { box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 18%, transparent); }
/* képek */
.kep { margin: 0; position: relative; overflow: hidden; border-radius: 28px; background: var(--surface-2); }
.kep img { display: block; width: 100%; height: 100%; object-fit: cover; animation: kep-be .5s ease; }
@keyframes kep-be { from { opacity: 0; } to { opacity: 1; } }
.kep-hely { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--muted) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 6%, var(--surface-2)), var(--surface-2) 60%, color-mix(in srgb, var(--ok) 7%, var(--surface-2))); }
.kep-hely svg { width: 96px; height: 64px; }
.kep-ma { aspect-ratio: 1 / 1; }
.kep-jelenet { aspect-ratio: auto; min-height: 420px; height: 100%; }
.kep-banner { aspect-ratio: 16 / 7; max-height: 340px; width: 100%; margin-bottom: 28px; }
.kep-ablak { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 20px; }
.kep-ell { aspect-ratio: 3 / 2; border-radius: 14px; }
.kep-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
/* Ma */
.ma-lap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: calc(100vh - 220px); }
.ma-szoveg { display: grid; gap: 18px; justify-items: start; }
.ma-felso { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ma-szoveg h1 { font-size: clamp(40px, 5vw, 60px); margin: 0; line-height: 1.02; }
.ma-lead { margin: 0; font-size: 19px; color: var(--muted); max-width: 30ch; line-height: 1.45; }
.ma-lead b { color: var(--ink); }
.ma-start { font-size: 18px; padding: 18px 28px; border-radius: 16px; }
.ma-tempo { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: 99px; padding: 4px; }
.ma-tempo button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 500 13px/1 var(--ui); padding: 8px 14px; border-radius: 99px; cursor: pointer; }
.ma-tempo button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ma-lepesek { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ma-lepesek li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ml-ikon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 12px; color: var(--ink); }
.ma-lepesek li.kesz { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.ma-lepesek li.kesz .ml-ikon { background: var(--ok-soft); color: var(--ok); }
.ma-lepesek li.most { color: var(--ink); border-color: var(--ink); }
.ma-apro { margin: 0; font-size: 13px; color: var(--muted); }
/* feladat: kép balra, kártya jobbra */
.jelenet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: stretch; }
.jelenet .tanulo { border: 0; padding: 32px 8px; justify-content: center; min-height: 420px; }
.edzes-fej { margin-bottom: 24px; }
/* haladássáv */
.napi-sav { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 14px; margin: -24px 0 28px; padding: 14px 0;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.napi-sav[hidden] { display: none; }
.ns-lepes { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-pottyok { display: flex; gap: 6px; }
.ns-pottyok i { width: 22px; height: 4px; border-radius: 4px; background: var(--line); }
.ns-pottyok i.kesz { background: var(--ok); }
.ns-pottyok i.most { background: var(--ink); }
body.napi-fut .minimum-sav .btn { display: none; }
.btn.napi-tovabb { order: -1; }
/* paradicsom-óra */
.paradicsom { position: fixed; right: 28px; bottom: 28px; z-index: 45; appearance: none; border: 0; background: var(--bg); cursor: pointer;
  display: grid; justify-items: center; gap: 2px; padding: 10px 12px 10px; border-radius: 22px; box-shadow: 0 8px 30px rgba(0,0,0,.10); color: var(--ink); }
.paradicsom[hidden] { display: none; }
.paradicsom svg { width: 58px; height: 58px; overflow: visible; }
.paradicsom .p-ures { fill: color-mix(in srgb, #E2483D 18%, var(--bg)); }
.paradicsom .p-tele { fill: #E2483D; transition: y .5s linear, height .5s linear; }
.paradicsom .p-fenyes { stroke: rgba(255,255,255,.55); }
.paradicsom .p-level { fill: #4E9A5B; }
.paradicsom .p-szar { stroke: #3F7F4A; }
.paradicsom .p-szunet { fill: var(--ink); opacity: 0; }
.paradicsom.all .p-szunet { opacity: .75; }
.paradicsom.szunet .p-tele { fill: #6FAE7D; }
.paradicsom.szunet .p-ures { fill: color-mix(in srgb, #6FAE7D 18%, var(--bg)); }
.p-ido { font: 600 15px/1 var(--ui); font-variant-numeric: tabular-nums; }
.p-cim { font-size: 11px; color: var(--muted); }
/* szünet, nap vége */
.napi-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); }
.napi-ablak { max-width: 440px; width: 100%; text-align: center; display: grid; gap: 10px; justify-items: center; background: var(--bg); padding: 20px 20px 26px; border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.12); }
.napi-nagy-ido { font: 600 64px/1 var(--display); font-variant-numeric: tabular-nums; }
.napi-vege { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; text-align: center; }
.napi-vege .kep-ma { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .main { padding: 20px 16px 150px; }
  .demo-sav { flex-wrap: nowrap; padding: 8px 12px; }
  .demo-sav .cim > span { display: none; }
  .demo-sav .jobb { flex-wrap: nowrap; gap: 6px; }
  .demo-sav .jobb .btn.szellem { display: none; }
  h1 { font-size: 30px; }
  .ma-lap { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
  .ma-lap .kep-ma { order: -1; aspect-ratio: 4 / 3; border-radius: 22px; }
  .ma-szoveg h1 { font-size: 38px; }
  .ma-start { width: 100%; }
  .jelenet { grid-template-columns: 1fr; gap: 0; }
  .kep-jelenet { min-height: 0; height: auto; aspect-ratio: 16 / 9; border-radius: 20px; }
  .jelenet .tanulo { min-height: 0; padding: 20px 0; }
  .kep-banner { aspect-ratio: 16 / 9; border-radius: 20px; margin-bottom: 18px; }
  .napi-sav { margin: -8px 0 16px; padding: 10px 0; }
  .ns-pottyok i { width: 14px; }
  .paradicsom { right: 12px; bottom: 82px; padding: 8px 10px; border-radius: 18px; }
  .paradicsom svg { width: 44px; height: 44px; }
  .nav { background: var(--bg); }
}

/* ---- felső vízszintes menü, teljes szélességű tartalom ---- */
.app { display: block; min-height: 0; }
.main { max-width: 1440px; margin: 0 auto; padding: 36px 48px 140px; }
.fejlec { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 20px; padding: 10px 28px; flex-wrap: nowrap; height: 60px; }
.fejlec .cim { flex: none; }
.fejlec .jobb { flex: none; flex-wrap: nowrap; }
@media (min-width: 761px) {
  .fejlec .nav { position: static; height: auto; flex: 1; flex-direction: row; justify-content: center; gap: 2px; padding: 0; border: 0; background: transparent; }
  .fejlec .nav a { padding: 8px 14px; gap: 8px; font-size: 14px; white-space: nowrap; }
  .fejlec .nav .masodlagos { display: flex; }
  .napi-sav { top: 60px; }
}
@media (max-width: 1540px) and (min-width: 761px) { .fejlec .jobb .btn.szellem { display: none; } }
@media (max-width: 1500px) and (min-width: 761px) { .fejlec .cimke { display: none; } .fejlec { gap: 12px; padding: 10px 20px; } }
@media (max-width: 1180px) and (min-width: 761px) { .fejlec .nav a > span:not(.ic) { display: none; } .fejlec .nav a { padding: 9px 11px; } }
@media (min-width: 761px) {
  .jelenet { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
  .jelenet .tanulo { min-height: 480px; }
  .kep-jelenet { min-height: 480px; }
}
/* ---- párbeszéd: színpad, a szöveg a szereplők feletti buborékokban ---- */
.szinpad { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; max-height: calc(100vh - 250px); min-height: 420px; width: 100%; background: var(--surface-2); }
.szinpad > .kep { position: absolute; inset: 0; border-radius: 0; }
.szinpad .chat.pb-chat { position: absolute; inset: 0; display: block; min-height: 0; max-height: none; overflow: visible; padding: 0; background: transparent; }
.szinpad .ures { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); background: rgba(255,255,255,.92); color: #1B1A18; padding: 10px 18px; border-radius: 99px; font-size: 14px; white-space: nowrap; }
.szinpad .buborek { position: absolute; top: 5%; max-width: 44%; background: #FFFFFF; color: #1B1A18; border: 2px solid #1B1A18; border-radius: 22px; padding: 12px 18px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.08); animation: bub-be .25s ease; }
.szinpad .buborek.o { left: 4%; right: auto; border-top-left-radius: 22px; }
.szinpad .buborek.en { right: 4%; left: auto; border-top-right-radius: 22px; }
.szinpad .buborek::after { content: ""; position: absolute; bottom: -14px; width: 22px; height: 22px; background: #FFFFFF; border: 2px solid #1B1A18; border-top: 0; border-left: 0; transform: rotate(45deg); }
.szinpad .buborek.o::after { left: 28%; }
.szinpad .buborek.en::after { right: 28%; }
.szinpad .buborek.regi { display: none; }
.szinpad .buborek .de { font-size: 21px; color: #1B1A18; }
.szinpad .buborek .pb-feladat { font-family: var(--display); font-size: 21px; font-weight: 400; color: #1B1A18; }   /* a magyar sor ugyanúgy néz ki, mint a német */
.szinpad .buborek .nev { color: #6E6B66; }
.szinpad .buborek .muted { color: #4B4945; }
.szinpad .buborek .btn { background: #F5F4F1; color: #1B1A18; border-color: #E4E1DC; }
.szinpad .pb-sugo { font-family: var(--display); font-size: 20px; margin-top: 4px; }
@keyframes bub-be { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.pb-alatt { margin-top: 16px; display: grid; gap: 12px; }
.pb-alatt .pb-bevitel { border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; }
.pb-vezerlo { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pb-vezerlo #pb-mod-leiras { display: none; }
.pb-vezerlo label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.pb-vezerlo > * { flex: none; width: auto; margin: 0; }
.pb-vezerlo > .sor { gap: 14px; justify-content: flex-start; }
.pb-fej h1 { font-size: 28px; margin: 0; }
.pb-fej .alcim { margin: 2px 0 14px; font-size: 15px; }
.pb-alatt:empty { display: none; }
@media (max-width: 760px) {
  .main { padding: 20px 16px 150px; }
  .fejlec { height: auto; padding: 8px 12px; gap: 8px; }
  .pb-vezerlo .szegmens { width: 100%; }
  .fejlec .jobb { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .fejlec .valto button { font-size: 12px; padding: 7px 9px; }
  .szinpad { aspect-ratio: auto; max-height: none; overflow: visible; background: none; border-radius: 0; display: flex; flex-direction: column; }
  .szinpad > .kep { position: relative; inset: auto; order: 2; aspect-ratio: 16 / 9; border-radius: 20px; }
  .szinpad .chat.pb-chat { position: relative; inset: auto; order: 1; min-height: 140px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 0 0 18px; }
  .szinpad .ures { position: static; transform: none; align-self: center; white-space: normal; text-align: center; background: var(--surface-2); color: var(--ink); }
  .szinpad .buborek { position: relative; top: auto; left: auto; right: auto; max-width: 86%; padding: 10px 14px; border-radius: 16px; }
  .szinpad .buborek.o { align-self: flex-start; left: auto; }
  .szinpad .buborek.en { align-self: flex-end; right: auto; }
  .szinpad .buborek .de, .szinpad .buborek .pb-feladat { font-size: 17px; }
  .jelenet .tanulo, .kep-jelenet { min-height: 0; }
}

/* ---- asztali gépen nincs oldalgörgetés: minden a menüsáv alatti helyre igazodik ---- */
@media (min-width: 761px) {
  html, body { height: 100%; overflow: hidden; }
  .app { height: calc(100dvh - 60px); }
  .main { height: 100%; overflow-y: auto; display: flex; flex-direction: column; padding: 24px 40px 24px; }
  .main > * { flex: none; }
  .main > :last-child { flex: 1 1 auto; min-height: 0; }
  .napi-sav { position: static; margin: 0 0 14px; padding: 0 0 12px; }
  .edzes-fej { margin-bottom: 14px; }
  /* Ma */
  .ma-lap { height: 100%; min-height: 0; gap: 48px; }
  .ma-lap .kep-ma { height: 100%; max-height: 100%; width: auto; max-width: 100%; aspect-ratio: 1 / 1; justify-self: end; }
  /* feladat */
  .main > :last-child > .jelenet { height: 100%; }
  .jelenet { height: 100%; min-height: 0; }
  /* a feladatoldalak képe mindenhol egyforma: 341,5 × 460 px-es álló kép (alacsony képernyőn arányosan kisebb) */
  .jelenet .kep-jelenet { min-height: 0; height: min(100%, 460px); aspect-ratio: 683 / 920; width: auto; max-width: 100%; justify-self: center; align-self: center; background: none; }
  /* paradicsom-óra: alul egy kis fül az idővel, egérrel felcsúszik a teljes óra – így nem lóg bele a tartalomba */
  .paradicsom { bottom: 0; right: 28px; padding: 7px 16px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,.07); transform: translateY(calc(100% - 30px)); transition: transform .2s ease .4s; }
  .paradicsom:hover, .paradicsom:focus-visible { transform: none; transition-delay: 0s; }
  .paradicsom .p-ido { order: -1; line-height: 16px; margin-bottom: 4px; }
  .paradicsom .p-ido::before { content: "▴ "; color: var(--muted); font-size: 11px; }
  .paradicsom.all .p-ido::before { content: "⏸ "; }
  .paradicsom.szunet .p-ido::before { content: "☕ "; }
  /* gyorsasági kör kezdőlapja: balra cím + leírás, jobbra a kép (vágás nélkül), alatta a két kártya – görgetés nélkül kifér */
  .main > div:has(> .kep-banner) { display: grid; grid-template-columns: minmax(0, 1fr) 341.5px; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 40px; align-content: start; }
  .main > div:has(> .kep-banner) > .kep-banner { grid-column: 2; grid-row: 1 / 3; width: 100%; aspect-ratio: 1792 / 1024; max-height: none; margin: 0; background: none; border-radius: 20px; }
  .main > div:has(> .kep-banner) > h1 { grid-column: 1; grid-row: 1; align-self: end; }
  .main > div:has(> .kep-banner) > .alcim { grid-column: 1; grid-row: 2; align-self: start; margin: 0; font-size: 15px; }
  .main > div:has(> .kep-banner) > .grid { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; align-items: start; }
  .card:has(> #g-tempo) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; row-gap: 6px; align-items: center; }
  .card:has(> #g-tempo) > h3 { grid-column: 1 / -1; margin-bottom: 6px; }
  .card:has(> #g-tempo) > label { grid-row: 2; margin: 0; white-space: nowrap; font-size: 14px; }
  .card:has(> #g-tempo) > select { grid-row: 3; margin: 0; width: 100%; }
  .card:has(> #g-tempo) > .sor { grid-row: 4; grid-column: 1; margin-top: 12px; }
  .card:has(> #g-tempo) > p { grid-row: 4; grid-column: 2 / -1; margin: 12px 0 0; }
  .main > div:has(> .kep-banner) { margin-right: 96px; }   /* jobbra hely a paradicsom-órának */
  .main > div:has(> .kep-banner) .grid > .card { padding: 18px 20px; }
  .card:has(> #g-tempo) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.45fr) minmax(0, .55fr); }
  .card:has(> #g-tempo) > select { font-size: 14px; }
  /* grafikon: a „Legjobb kör / Eddigi körök” a cím mellé kerül, így a grafikon eredeti magasságában elfér */
  .main > div:has(> .kep-banner) .card:has(> svg) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .main > div:has(> .kep-banner) .card:has(> svg) > h3 { grid-column: 1; grid-row: 1; margin: 0; }
  .main > div:has(> .kep-banner) .card:has(> svg) > .muted { grid-column: 1; grid-row: 2; align-self: start; }
  .main > div:has(> .kep-banner) .card:has(> svg) > .sor { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: start; }
  .main > div:has(> .kep-banner) .card:has(> svg) > svg { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
  .jelenet .tanulo { min-height: 0; height: 100%; overflow-y: auto; justify-content: safe center; padding: 12px 8px; }
  .tanulo .mondat { font-size: clamp(24px, 3.2vw, 36px); }
  .osszegzes, .napi-vege { align-self: center; justify-content: center; }
  .napi-vege .kep-ma { max-height: 42vh; width: auto; }
  /* párbeszéd */
  .pb-nezet { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .pb-nezet > * { flex: none; }
  .pb-nezet .szinpad { flex: 1 1 auto; min-height: 260px; max-height: none; aspect-ratio: auto; }
  /* a kép középen mindig egészben látszik (nincs levágott fej), a vendég buboréka tőle balra, a tiéd jobbra.
     A kép szélességét (--kep-w) az extra.js számolja a színpad méretéből. */
  .pb-nezet .szinpad { display: grid; grid-template-columns: minmax(0, 1fr) var(--kep-w, 50%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 22px; align-items: center; overflow: visible; background: none; border-radius: 0; }
  .pb-nezet .szinpad .chat.pb-chat { display: contents; }
  .pb-nezet .szinpad > .kep { position: relative; inset: auto; grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 24px; }
  .pb-nezet .szinpad .buborek { position: relative; top: auto; left: auto; right: auto; grid-row: 1; max-width: none; z-index: 1; align-self: start; margin-top: 4%; }
  .pb-nezet .szinpad .buborek.o { grid-column: 1; }
  .pb-nezet .szinpad .buborek.en { grid-column: 3; }
  .pb-nezet .szinpad .buborek::after { bottom: auto; top: 26px; }
  .pb-nezet .szinpad .buborek.o::after { left: auto; right: -13px; transform: rotate(-45deg); }
  .pb-nezet .szinpad .buborek.en::after { right: auto; left: -13px; transform: rotate(135deg); }
  .pb-nezet .szinpad .ures { grid-column: 2; grid-row: 1; align-self: start; margin-top: 4%; z-index: 1; }
  /* magas képernyőn: buborékok felül egy sorban, a kép alattuk középen */
  .pb-nezet .szinpad.felul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
  .pb-nezet .szinpad.felul > .kep { grid-column: 1 / -1; grid-row: 2; width: var(--kep-w); justify-self: center; align-self: start; }
  .pb-nezet .szinpad.felul .buborek { grid-row: 1; margin-top: 0; align-self: end; max-width: 92%; }
  .pb-nezet .szinpad.felul .buborek.o { grid-column: 1; justify-self: start; }
  .pb-nezet .szinpad.felul .buborek.en { grid-column: 2; justify-self: end; }
  .pb-nezet .szinpad.felul .buborek::after { top: auto; bottom: -14px; transform: rotate(45deg); }
  .pb-nezet .szinpad.felul .buborek.o::after { right: auto; left: 28%; }
  .pb-nezet .szinpad.felul .buborek.en::after { left: auto; right: 28%; }
  .pb-nezet .szinpad.felul .ures { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-top: 0; }
  /* párbeszéd: a felső menü elbújik (egérrel a „Menü” fülre állva lenyílik), a cím és az alcím egy sorban, kisebb mikrofon – így a jelenet kapja a helyet */
  body:has(.pb-nezet) .fejlec { position: fixed; top: 0; left: 0; right: 0; transform: translateY(-100%); transition: transform .2s ease .35s, box-shadow .2s; }
  body:has(.pb-nezet) .fejlec::after { content: "▾ Menü"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 3px 16px 5px; font-size: 12px; color: var(--muted); background: #FFFFFF; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; cursor: pointer; }
  body:has(.pb-nezet) .fejlec:hover, body:has(.pb-nezet) .fejlec:focus-within { transform: none; transition-delay: 0s; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
  body:has(.pb-nezet) .fejlec:hover::after, body:has(.pb-nezet) .fejlec:focus-within::after { visibility: hidden; }
  body:has(.pb-nezet) .app { height: 100dvh; }
  body:has(.pb-nezet) .main { padding-top: 18px; padding-bottom: 14px; }
  .pb-nezet { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; }
  .pb-nezet > * { grid-column: 1 / -1; }
  .pb-nezet > h1 { grid-column: 1; grid-row: 1; }
  .pb-nezet > .alcim { grid-column: 2; grid-row: 1; margin: 0; }
  .pb-nezet > .pb-vezerlo { grid-row: 2; margin: 10px 0 12px; align-self: start; }
  .pb-nezet > .szinpad { grid-row: 3; align-self: stretch; min-height: 200px; }
  .pb-nezet > .pb-alatt { grid-row: 4; align-self: end; }
  .pb-nezet > [hidden] { display: none; }
  .pb-alatt .pb-bevitel { padding: 8px 14px; }
  .pb-alatt .mikrofon { width: 60px; height: 60px; }
  .pb-alatt .mikrofon svg { width: 26px; height: 26px; }
  .pb-fej .alcim { margin-bottom: 10px; }
  .pb-alatt { margin-top: 10px; }
  .pb-alatt:has(> .pb-bevitel[hidden]):not(:has(.pb-osszegzes)) { display: none; }
  .kep-banner { max-height: 30vh; }
}

/* ---- Gyakorlás és Szókártyák: kompakt csempék, hogy kiférjenek egy képernyőre ---- */
@media (min-width: 761px) {
  .main:has(.katlista) { display: block; }
  .main:has(.katlista) h1 { font-size: 30px; margin: 0; }
  .main:has(.katlista) .alcim { margin: 2px 0 10px; font-size: 14px; }
  .main:has(.katlista) .szekcio { margin: 14px 0 8px; }
  .main:has(.katlista) .szekcio h2 { font-size: 17px; }
  .main:has(.katlista) .szekcio .muted { display: none; }
  .katlista, .gyak-racs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
  .katlista .kat, .gyak-racs .gyak-csempe { padding: 12px 14px; gap: 6px; border-radius: 14px; }
  .katlista .kat h3, .gyak-csempe h3 { font-size: 14px; }
  .katlista .kat .sav, .katlista .pb-eredmenyek, .gyak-csempe p, .gyak-csempe .gyak-ikon { display: none; }
  .katlista .kat .muted.kicsi { font-size: 12px; }
  .katlista .kat .btn.kicsi { padding: 5px 9px; font-size: 12px; }
  .main:has(.katlista) .kep-banner { display: none; }
  .anki-kartya { padding: 12px 16px; gap: 8px; }
  .anki-kartya .anki-opciok { display: flex; gap: 16px; flex-wrap: wrap; }
  .anki-kartya .anki-fej .muted { display: none; }
}

/* ---- fülek ---- */
.lapozo { display: flex; flex-direction: column; min-height: 0; }
.lap-fulek { align-self: flex-start; margin: 4px 0 14px; }
.lap-fulek button { font-size: 14px; padding: 9px 16px; }
.lap-panel[hidden] { display: none; }
.anki-gomb { margin: 6px 0 0; }
.main:has(.anki-gomb) .alcim { margin-bottom: 8px; }
@media (min-width: 761px) {
  .lap-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
  .lap-panel > * { flex: none; margin: 0 !important; }
  .fejl-nezet { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .fejl-nezet > * { flex: none; }
  .fejl-nezet > .lapozo { flex: 1 1 auto; }
  .fejl-nezet .alcim { margin-bottom: 6px; }
  .lap-panel > .grid.g2 { flex: 1 1 auto; min-height: 0; }
  .lap-panel > .grid.g2 > .card, .lap-panel > .card:only-child { overflow-y: auto; min-height: 0; }
  .lap-panel > .card:only-child { flex: 1 1 auto; }
  .lap-panel .grid.g4 .card.stat { padding: 14px 16px; }
  .lap-panel .vonal-diagram, .lap-panel svg { max-height: 20vh; }
  .lap-panel .heti { padding: 14px 18px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .fejl-nezet .alcim, .main:has(.lapozo) .alcim { display: none; }
  .main h1 { font-size: 30px; }
}
@media (min-width: 761px) {
  .katlista, .gyak-racs { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  /* Szótár: a teljes lista egyben, az oldal görgethető (nem lapoz) */
  .main > div:has(> .card #lista) { display: block; }
  .main > div:has(> .card #lista) > .card:has(#lista) { overflow: visible; }
  /* Ütemterv: a négy szakasz egymás mellett */
  .card:has(> .fazis) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; overflow-y: auto; min-height: 0; }
  .card:has(> .fazis) .fazis { padding: 30px 0 0; }
  .card:has(> .fazis) .fazis::before { left: 18px; right: -24px; top: 8px; bottom: auto; width: auto; height: 2px; }
  .card:has(> .fazis) .fazis h2 { font-size: 18px; }
  .card:has(> .fazis) .kat-sor { font-size: 13px; grid-template-columns: 1fr 70px; padding: 5px 0; }
  .card:has(> .fazis) .kat-sor > .muted { display: none; }
  .card:has(> .fazis) .fazis p.muted { font-size: 14px; }
}

/* ---- vékony, egysoros felső sáv a feladatok fölött; a tanulókártya nem görget ---- */
.napi-sav { gap: 12px; padding: 0 0 8px; margin: 0 0 10px; font-size: 13px; min-height: 0; }
.napi-sav .ns-pottyok i { height: 3px; width: 16px; }
.napi-sav .ns-lepes { flex: 0 1 auto; }
.napi-sav #ns-tovabb { padding: 3px 8px; font-size: 12px; margin-left: auto; }
.napi-sav .edzes-fej { flex: 1 1 auto; margin: 0; gap: 10px; min-width: 120px; }
.napi-sav .edzes-fej .btn { padding: 3px 8px; font-size: 12px; }
.napi-sav .edzes-fej .sav { height: 4px; }
.napi-sav .edzes-fej #szamlalo { font-size: 12px; }
.edzes-fej { margin: 0 0 10px; gap: 10px; }
.edzes-fej .btn.kicsi { padding: 3px 8px; font-size: 12px; }
.edzes-fej .sav { height: 4px; }
@media (min-width: 761px) {
  /* ha egy oldal nem fér ki, görgethető; a tanulós oldalak (feladat, párbeszéd, szókártya) úgy vannak méretezve, hogy kiférjenek */
  .main { overflow-x: hidden; overflow-y: auto; }
  .jelenet .tanulo { overflow: hidden; gap: 4px; padding: 4px 8px; }
  .tanulo .cimke { margin-bottom: 6px; }
  .tanulo .mondat { font-size: clamp(22px, 2.6vw, 34px); }
  .tanulo .forditas { font-size: 16px; }
  .tanulo .vezerlok { margin-top: 10px; gap: 8px; }
  .tanulo .vezerlok .btn { padding: 8px 14px; }
  .tanulo .mikrofon { width: 66px; height: 66px; }
  .tanulo .mikrofon svg { width: 28px; height: 28px; }
  .tanulo .eredmeny { margin-top: 8px; padding: 10px 14px; }
  .tanulo .ertekelo { margin-top: 10px; }
  .tanulo:has(#ered:not(:empty)) .gepel-link, .tanulo:has(#ered:not(:empty)) .mik-felirat:empty { display: none; }
  .tanulo:has(#ered:not(:empty)) .mikrofon { width: 52px; height: 52px; }
  .main:has(.lapozo) .lap-panel { overflow-y: auto; }
}

/* ---- Szókártyák: teljes képernyős fordítós kártya ---- */
.kv { display: flex; flex-direction: column; min-height: 0; height: 100%; gap: 12px; }
.kv-fej { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.kv-fej h1 { font-size: 30px; margin: 0; }
.kv-eszk { display: flex; align-items: center; gap: 10px; position: relative; }
.kv-eszk .ma-tempo button { font-size: 13px; }
.kv-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; gap: 6px; padding: 12px; width: 280px; box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.kv-halad { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; flex: none; }
.kv-halad i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .3s; }
.kv-szinpad { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; perspective: 1600px; }
.kv-kartya { position: relative; width: min(680px, 100%); height: 100%; max-height: 460px; min-height: 260px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.2,1); cursor: pointer; outline: none; }
.kv-kartya.fordult { transform: rotateY(180deg); }
.kv-oldal { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--bg);
  box-shadow: 0 18px 50px rgba(0,0,0,.07); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px 32px; text-align: center; }
.kv-hat { transform: rotateY(180deg); }
.kv-cimkek { position: absolute; top: 18px; left: 20px; display: flex; gap: 6px; }
.kv-sz { position: absolute; bottom: 16px; right: 22px; }
.kv-szo { font: 600 clamp(34px, 5vw, 56px)/1.1 var(--display); letter-spacing: -.01em; }
.kv-szo.kv-hu { font-family: var(--ui); font-weight: 600; font-size: clamp(28px, 4vw, 44px); }
.kv-hat .kv-szo { font-size: clamp(28px, 4vw, 44px); }
.kv-alatt { font-size: 18px; color: var(--muted); }
.kv-at { font-size: 15px; color: var(--muted); } .kv-at b { color: var(--ink); font-weight: 500; }
.kv-kerdes { font-size: 15px; }
.kv-nyelvtan { font-size: 14px; background: var(--surface-2); border-radius: 99px; padding: 4px 12px; }
.kv-megj { font-size: 14px; color: var(--muted); max-width: 46ch; }
.kv-pelda { border-top: 1px dashed var(--line); padding-top: 10px; font-size: 15px; max-width: 52ch; }
.kv-pelda > div:first-child { font-family: var(--display); font-size: 18px; }
.kv-vege { cursor: default; }
.kv-gombok { flex: none; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 64px; align-items: center; }
.kv-q { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; min-width: 120px; padding: 10px 16px; border-radius: 14px; }
.kv-q > span:not(.kbd) { grid-column: 1; font-size: 11px; color: var(--muted); font-weight: 400; }
.kv-q .kbd { grid-row: 1 / span 2; grid-column: 2; }
.kv-q.ujra { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); color: var(--bad); }
.kv-q.jo { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); color: var(--ok); }
/* ---- lapozás a hosszú listákban ---- */
.lap-kont { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lap-lista { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.lapozas { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 2px; border-top: 1px solid var(--line); margin-top: 6px; }
.lapozas[hidden] { display: none; }
.szekcio:has(+ #kinyeres), #kinyeres { display: none; }
@media (min-width: 761px) {
  .main:has(.lapozo) .lap-panel { overflow: hidden; }
  .lap-panel > .grid.g2 > .card, .lap-panel > .card:only-child { overflow: hidden; display: flex; flex-direction: column; }
  .lap-panel > .grid.g2 > .card > h3, .lap-panel > .card:only-child > h3 { flex: none; }
}
@media (max-width: 760px) {
  .kv-kartya { height: 52vh; }
  .kv-q { min-width: 0; flex: 1 1 40%; }
}

@media (min-width: 761px) {
  .lt-flex:not([hidden]) { display: flex !important; flex-direction: column; min-height: 0; }
  .lt-flex > * { flex: none; }
  .lt-flex > .lt-elem { flex: 1 1 auto !important; min-height: 0; }
  .lt-grid { grid-template-rows: minmax(0, 1fr); min-height: 0; flex: 1 1 auto; }
  .lt-grid > .lt-elem { min-height: 0; }
  .main > .lt-elem { flex: 1 1 auto; min-height: 0; }
}

@media (min-width: 761px) {
  .card:has(> .fazis) { overflow: visible; align-content: start; flex: none; }   /* teljes magasságban; ha nem fér ki, az oldal görgethető */
  .card:has(> .fazis) .kat-sor { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 8px; align-items: center; padding: 3px 0; font-size: 12.5px; border: 0; }
  .card:has(> .fazis) .kat-sor > span:not(.muted) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card:has(> .fazis) .kat-sor .sav { height: 4px; margin: 0; }
  .card:has(> .fazis) .fazis { padding-bottom: 0; }
}

@media (min-width: 761px) {
  .main > div:has(#lista) > .alcim { display: none; }
  .main > div:has(#lista) > h1 { font-size: 30px; margin-bottom: 12px; }
  .main > div:has(#lista) > .card:has(.szuro) { padding: 12px 14px; margin-bottom: 12px !important; }
  .main > div:has(#lista) .szuro + .sor { margin-top: 8px !important; }
  #lista .szo-sor { padding-top: 7px; padding-bottom: 7px; }
}

/* ---- ráhúzáskor piros kiemelés (menü, gombok, választók) ---- */
.nav a:hover, .tobb-lap a:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg)); }
.nav a:hover .ic svg { stroke: var(--brand); }
.btn:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--bg)); }
.btn.fo:hover, .demo-sav .btn.fo:hover { background: var(--brand); border-color: var(--brand); color: #FFFFFF; filter: none; }
.btn.szellem:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--bg)); border-color: transparent; }
.ma-tempo button:hover, .szegmens button:hover, .valto button:hover { color: var(--brand); }
.ma-tempo button[aria-pressed="true"]:hover, .szegmens button.aktiv:hover { color: var(--brand); }
.btn:disabled:hover { color: inherit; border-color: var(--line); background: var(--surface); }
.mikrofon:hover { background: var(--brand); }
.ma-lepesek li:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.kv-oldal:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.paradicsom:hover { box-shadow: 0 8px 30px color-mix(in srgb, var(--brand) 25%, transparent); }

@media (prefers-color-scheme: dark) { .min-jel:not(.kesz) { background: #A3161A; color: #FFFFFF; } }