:root{
  /* közös térközök */
  --terkoz-cim:8px;
  --terkoz-gomb:12px;
  --terkoz-tartalom:16px;
  --terkoz-szakasz:24px;
  /* felület */
  --paper:#F8F6F0;
  --paper-2:#F0EDE4;
  --card:#FFFFFF;
  /* vonalak: hajszálvékony, meleg szürke; az ink csak fókuszra és kiemelt gombra */
  --line:#E2DDD0;
  --line-2:#CFC9BA;
  --grid:rgba(31,79,216,.07);
  /* szöveg */
  --ink:#23263A;
  --ink-2:#585C72;
  --ink-3:#6A6E81;
  /* színek */
  --pen:#2B57D6;
  --pen-dark:#1E43B3;
  --pen-soft:#EAF0FD;
  --pen-line:#C3D1F6;
  --red:#C43A23;
  --red-soft:#FBEDE9;
  --red-line:#F1C9C0;
  --hl:#FFE45C;
  --hl-soft:#FFF6CC;
  --hl-line:#F1E19A;
  --ok:#177342;
  --ok-soft:#E5F4EA;
  --ok-line:#BFE3CC;
  /* árnyék: lágy, kétrétegű */
  --shadow-s:0 1px 2px rgba(35,38,58,.05),0 4px 12px -6px rgba(35,38,58,.10);
  --shadow-m:0 2px 4px rgba(35,38,58,.05),0 14px 30px -14px rgba(35,38,58,.18);
  --r-s:8px;
  --r-m:12px;
  --r-l:16px;
  --font-display:"Bricolage Grotesque","Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --max:1080px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- tipográfia: kevés, tiszta lépcső ---------- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:700;line-height:1.06}
h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:600}
h3{font-size:1.22rem;font-weight:600}
h4{font-size:1.02rem;font-weight:600}
p{margin:0 0 .95em}
b,strong{font-weight:600}
a{color:var(--pen)}
a[role=link]{cursor:pointer;text-decoration:underline;text-decoration-color:var(--pen-line);text-underline-offset:3px}
a[role=link]:hover{text-decoration-color:var(--pen)}
a[role=link].btn,a[role=link].mod,a[role=link].brand,a[role=link].pill,.lesson-nav a[role=link],.top nav a[role=link],.crumbs a[role=link]{text-decoration:none}
button{font:inherit;cursor:pointer}
input,select{font:inherit}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.prose{max-width:66ch}
.prose h3{margin:0 0 8px}
.prose h3:not(:first-child){margin-top:18px}
/* "eyebrow": egyetlen kis címke-stílus az egész anyagban */
.kicker,.flow .k,.callout .lab,.bubble b.who,.demo .tag,.lesson .lno,.lhead .lno{
  font-family:var(--font-body);font-weight:600;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)
}

/* ---------- fejléc ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(248,246,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.2rem}
.brand .brand-pet{width:52px;height:52px;flex:none;display:inline-flex}
.fejlec-kezdolap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-s);background:transparent;color:var(--ink-2);cursor:pointer}
.fejlec-kezdolap:hover{background:var(--paper-2);color:var(--ink)}
.top-spacer{flex:1}
.xp{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--ink-2)}
.xp .bar{width:120px;height:8px;border-radius:99px;background:var(--paper-2);border:1px solid var(--line);position:relative;overflow:hidden}
.xp .bar i{position:absolute;inset:0;right:auto;background:var(--pen);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.xp .lvl{background:var(--pen-soft);color:var(--pen);padding:2px 10px;border-radius:99px;font-weight:600;font-size:.85rem}
@media (max-width:640px){.xp .bar{width:70px}.xp .lbl{display:none}}

/* ---------- gombok ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 18px;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:var(--card);color:var(--ink);font:600 1rem/1.375 var(--font-body);text-align:center;text-decoration:none;max-width:100%;
  box-shadow:var(--shadow-s);transition:transform .12s,box-shadow .12s,background .12s,border-color .12s;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-m);border-color:var(--ink-3)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.primary{background:var(--pen);color:#fff;border-color:var(--pen)}
.btn.primary:hover{background:var(--pen-dark);border-color:var(--pen-dark)}
.btn.hl{background:var(--hl-soft);border-color:var(--hl-line)}
.btn.ghost{box-shadow:none;background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--paper-2);transform:none;box-shadow:none;border-color:transparent;color:var(--ink)}
.btn.sm{min-height:48px;padding:12px 18px;font-size:1rem;border-radius:var(--r-m)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- kezdőlap ---------- */
.hero{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
@media (max-width:820px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
.hero .kicker{display:inline-block;color:var(--pen);margin-bottom:16px}
.hero h1 .u{background:linear-gradient(transparent 62%,var(--hl-soft) 62%,var(--hl-soft) 94%,transparent 94%)}
.hero p.lead{font-size:1.12rem;color:var(--ink-2);max-width:50ch;margin-top:14px}
.hero .facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin:18px 0 26px;color:var(--ink-2);font-size:.95rem}
.hero .facts span b{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--ink);margin-right:5px}
.cta{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;width:fit-content;max-width:100%;align-items:stretch}.cta>.btn{margin:0;width:100%}

/* demo kártya: az élő kifejezés-megoldó */
.demo{
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-m);border-radius:var(--r-l);
  padding:22px 20px 18px;position:relative;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px;
}
.demo .tag{position:absolute;top:-11px;left:16px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:2px 10px;color:var(--pen)}
.demo .expr{min-height:110px;display:flex;flex-direction:column;justify-content:center;gap:10px}

/* ---------- kifejezés tokenjei ---------- */
.tokens{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--font-mono);font-size:1.3rem;font-weight:500;line-height:1}
.tokens .tk{padding:6px 8px;border-radius:6px;background:transparent;transition:background .25s,transform .25s}
.tokens .tk.op{color:var(--ink-2)}
.tokens .tk.hot{background:var(--hl);transform:translateY(-2px)}
.tokens .tk.res{background:var(--pen);color:#fff;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.tokens .tk.paren{color:var(--pen)}
.tokens .tk.exp{font-size:.68em;align-self:flex-start;padding:2px 4px;margin-left:-8px}   /* kitevő felső indexben, a ^ nem látszik */
.tokens.sm{font-size:1.1rem}
@keyframes pop{from{transform:scale(.6)}to{transform:scale(1)}}
/* Erősorrend-ház: négy emelet, a műveletek chipként az emeletükön, a következő lépés sárga */
.haz{position:relative;margin:30px 0 8px;border:1.5px solid var(--ink);border-radius:0 0 8px 8px;background:var(--card)}
.haz .teto{position:absolute;left:-1.5px;right:-1.5px;top:-20px;height:20px}
.haz .teto svg{display:block;width:100%;height:100%}
.haz .emelet{display:flex;align-items:center;gap:8px;padding:6px 10px;border-top:1px solid var(--line);min-height:40px}
.haz .emelet:nth-of-type(2){border-top:0}
.haz .elab{font-family:var(--font-body);font-weight:600;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);width:126px;flex:none}
.haz .chips{display:flex;flex-wrap:wrap;gap:6px}
.haz .chip{font-family:var(--font-mono);font-size:.95rem;padding:3px 8px;border:1px solid var(--line-2);border-radius:6px;background:var(--card);white-space:nowrap}
.haz .chip.hot{background:var(--hl);border-color:var(--ink);font-weight:600}
.haz .ures{color:var(--ink-3);font-size:.85rem;padding:3px 4px}
@media (max-width:480px){.haz .elab{width:86px;font-size:.66rem}}
/* lapkák: a kék doboz az x (kinyitva sárga, benne a szám), a sárga korong 1 egység; a Dobozgép, az Összevonó és a Mérleg ugyanezt a képet használja */
.tiles{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.tiles .tg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:5px 7px;border:1px dashed var(--line-2);border-radius:8px}
.tile{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;font-family:var(--font-mono);font-weight:700;font-size:.95rem;position:relative;flex:none}
.tile.box{background:var(--pen);color:#fff;border-radius:6px}
.tile.box.vy{background:#2E8B57}
.tile.unit{background:var(--hl);border:1.5px solid var(--ink);border-radius:50%;font-size:.8rem;font-weight:600}
.tile.neg{background:transparent;color:var(--red);border:1.5px dashed var(--red)}
.tile.box.open{background:var(--hl);color:var(--ink);border:1.5px solid var(--ink)}
.tile.wide{width:auto;padding:0 8px}
.tile.gone::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--red);font-size:1.4rem;background:rgba(255,255,255,.6);border-radius:inherit}
.tiles .op{font-family:var(--font-mono);font-weight:600;color:var(--ink-2);padding:0 2px}
.tiles .lbl{font-family:var(--font-mono);font-weight:600;padding-left:4px}
.tiles .more{font-size:.85rem;color:var(--ink-3)}
/* Összevonó: a tagok chipjei, betű szerint színezve; Lebontogató: a gép láncai */
.terms{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px;min-height:32px}
.terms .chip{font-family:var(--font-mono);font-size:1rem;padding:4px 10px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--card)}
.terms .chip.vx{background:var(--pen-soft);border-color:var(--pen);color:var(--pen)}
.terms .chip.vy{background:#E4F3E6;border-color:#2E8B57;color:#1F6B41}
.terms .chip.vc{background:var(--paper-2);border-color:var(--ink-3);color:var(--ink-2)}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--font-mono)}
.chain .box{padding:5px 10px;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);white-space:nowrap}
.chain .box.x{background:var(--pen);color:#fff;border-color:var(--pen);font-weight:700}
.chain .box.res{background:var(--hl);font-weight:700}
.chain .box.inv{border-style:dashed;color:var(--pen)}
.chain .arr{color:var(--ink-3);font-size:1.1rem}
.chain.back{opacity:.95}
img.pet{cursor:pointer}
img.pet.woof{animation:woof .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes woof{0%{transform:scale(1)}30%{transform:scale(1.14) rotate(-7deg)}60%{transform:scale(1.06) rotate(5deg)}100%{transform:scale(1)}}
.step-note{font-size:.95rem;color:var(--ink-2);min-height:1.4em}
.step-note b{color:var(--pen)}

/* ---------- szekciók ---------- */
.section{padding:52px 0}
.section + .section{border-top:1px solid var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.section-head p{color:var(--ink-2);margin:8px 0 0;max-width:60ch}

/* ---------- tanmenet-térkép ---------- */
.map{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.map{grid-template-columns:1fr}}
.mod{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;
  border:1px solid var(--line);background:var(--card);padding:16px 18px;text-decoration:none;color:inherit;border-radius:var(--r-m);
  position:relative;transition:transform .12s,box-shadow .12s,border-color .12s;
}
.mod.ready:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);border-color:var(--pen-line)}
.mod.ready{cursor:pointer}
.mod .no{font-family:var(--font-display);font-weight:600;font-size:1.6rem;line-height:1.1;color:var(--pen);padding-top:2px}
.mod h3{font-size:1.1rem;margin-bottom:4px}
.mod .topics{font-size:.92rem;color:var(--ink-2);margin:0;line-height:1.5}
.mod .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.mod .meta > .num{white-space:nowrap}
.mod .pill{border-radius:99px;padding:2px 10px;background:var(--hl-soft);color:var(--ink);border:1px solid var(--hl-line)}
.mod .pill.soon{background:var(--paper-2);color:var(--ink-3);border-color:var(--line)}
.mod .pill.done{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.mod .freq{color:var(--ink-3);font-weight:600;font-size:.8rem;order:9;flex-basis:100%}   /* a téma súlya a vizsgán, halkan, külön sorban */
.mod.soon{background:transparent;border-style:dashed;border-color:var(--line-2)}
.mod.soon .no{color:var(--ink-3)}
.mod.full{grid-column:1/-1;background:var(--pen-soft);border-color:var(--pen-line)}
.mod .prog{height:6px;border-radius:99px;background:var(--paper-2);flex:1;max-width:160px;position:relative;overflow:hidden}
.mod .prog i{position:absolute;inset:0;right:auto;background:var(--pen);border-radius:99px}

/* hogyan épül egy modul */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:24px 0;border:1px solid var(--line);background:var(--card);border-radius:var(--r-m);overflow:hidden}
@media (max-width:820px){.flow{grid-template-columns:1fr}}
.flow > div{padding:18px;border-right:1px solid var(--line)}
.flow > div:last-child{border-right:0}
@media (max-width:820px){.flow > div{border-right:0;border-bottom:1px solid var(--line)}.flow > div:last-child{border-bottom:0}}
.flow .k{color:var(--pen)}
.flow h3{margin-bottom:8px}
.flow h4{margin:6px 0 6px}
.flow p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.5}

/* feladattípusok */
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.types > div{border:1px solid var(--line);padding:14px 16px;background:var(--card);border-radius:var(--r-m)}
.types b{display:block;font-family:var(--font-display);font-weight:600}
.types small{color:var(--ink-2)}

/* jelvények */
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{border:1px solid var(--line);padding:10px 14px;background:var(--card);display:flex;gap:12px;align-items:center;min-width:220px;border-radius:var(--r-m)}
.badge .ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;background:var(--paper-2);color:var(--ink-2)}
.badge.got .ico{background:var(--hl);color:var(--ink)}
.badge.got{border-color:var(--hl-line);box-shadow:var(--shadow-s)}
.badge:not(.got){opacity:.65}
.badge small{display:block;color:var(--ink-2);font-size:.82rem}

footer{padding:32px 0 56px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between}

/* ---------- modul-oldal ---------- */
.modhead{padding:26px 0 20px;border-bottom:1px solid var(--pen-line);background:var(--pen-soft)}
.modhead .wrap{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
@media (max-width:720px){.modhead .wrap{grid-template-columns:1fr}}
.modhead h2{font-size:clamp(1.4rem,2.4vw,1.7rem)}
.crumbs{font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--ink-3)}
.crumbs a{text-decoration:none}
.modhead p{color:var(--ink-2);margin:8px 0 0;max-width:62ch}
.modhead .stats{display:flex;gap:22px;font-weight:600;font-size:.85rem;color:var(--ink-2)}
.modhead .stats b{font-family:var(--font-display);font-size:1.5rem;font-weight:600;display:block;line-height:1.1;color:var(--ink)}
/* modul-oldal: kompakt, egysoros fejléc – a lecke tartalma kapja a helyet */
.modhead.compact{padding:12px 0 10px}
.modhead.compact .wrap{align-items:center;gap:12px}
.modhead.compact .crumbs{margin-bottom:0;font-size:.78rem}
.modhead.compact h2{font-size:1.3rem;line-height:1.2}
.modhead.compact .stats{gap:14px;font-size:.78rem;color:var(--ink-3)}
.modhead.compact .stats b{display:inline;font-size:.95rem;margin-right:4px;color:var(--ink)}
@media (max-width:720px){.modhead.compact .wrap{grid-template-columns:1fr auto}.modhead.compact .stats{flex-direction:column;gap:2px;align-items:flex-end}}

.lesson-nav{background:var(--paper);border-bottom:1px solid var(--line)}
@media (max-width:640px){.lesson-tabs a .lt{display:none}.lesson-tabs a.on .lt{display:inline}}
.lesson-nav .wrap{padding-top:8px;padding-bottom:8px}
.lesson-nav a{white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem;padding:8px 12px;border:1px solid transparent;border-radius:var(--r-s)}
.lesson-nav a:hover{background:var(--card);border-color:var(--line)}
.lesson-nav a.done{color:var(--ok)}
.lesson-nav a.test{margin-left:auto;background:var(--hl-soft);border-color:var(--hl-line)}

.lesson{padding:48px 0;border-bottom:1px solid var(--line)}
.lesson:last-of-type{border-bottom:0}
.lhead{display:flex;gap:14px;align-items:baseline;margin-bottom:10px}
.lesson .lno,.lhead .lno{color:var(--pen);white-space:nowrap;font-size:.8rem}
.lesson .goal{color:var(--ink-2);margin-bottom:28px;max-width:62ch}
.blocks{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}

/* tartalmi blokkok: bal oldali színsáv, halvány háttér, címke a szöveg felett */
.callout{border:1px solid var(--line);border-left:3px solid var(--pen);padding:14px 18px 14px 18px;background:var(--card);position:relative;max-width:760px;border-radius:0 var(--r-m) var(--r-m) 0}
.callout .lab{display:block;margin-bottom:6px;color:var(--pen)}
.callout.trap{border-left-color:var(--red);background:var(--red-soft);border-color:var(--red-line);border-left-color:var(--red)}
.callout.trap .lab{color:var(--red)}
.callout.tip{border-left-color:var(--pen)}
.callout.rule{background:var(--hl-soft);border-color:var(--hl-line);border-left-color:#E0B800}
.callout.rule .lab{color:#8A6D00}
/* vizsgafeladat-idézet: semleges, szürke él, összecsukható megoldás */
.callout p:last-child{margin-bottom:0}
.callout ul{margin:.3em 0 0;padding-left:1.2em}
.callout li{margin:.3em 0}
.mark{background:linear-gradient(transparent 55%,var(--hl) 55%,var(--hl) 92%,transparent 92%);padding:0 2px}
.wrong{color:var(--red);text-decoration:line-through;text-decoration-thickness:1.5px}
.right{color:var(--ok);font-weight:600}
/* rossz → jó összevetés (vs helper): két külön chip, nyíllal; a színek nem folynak össze */
.vs{display:inline;max-width:100%;margin:0 .05em 0 .3em;font-family:var(--font-body);font-weight:500;vertical-align:baseline}   /* magyar szavak, ezért törzsbetű (a matekban mono volt); a chipek sorba rendezett egységek: keskeny kijelzőn egészben törnek új sorba, a záró írásjel az utolsó chip mellett marad */
.vs s,.vs b{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;vertical-align:baseline}
.vs s{color:var(--red);text-decoration:none;position:relative;background:var(--card);border:1px solid var(--red-line);border-radius:6px;padding:.05em .45em;line-height:1.35}
.vs s::after{content:"";position:absolute;left:.25em;right:.25em;top:50%;height:1.5px;background:var(--red);transform:rotate(-16deg);border-radius:1px}   /* ferde áthúzás: nem esik egybe a mínusszal */
.vs s.long::after{transform:rotate(-5deg)}   /* hosszú kifejezésnél laposabb, hogy a chipben maradjon */
.vs i{font-style:normal;color:var(--ink-3);margin:0 .35em}
.vs b{color:var(--ok);font-weight:600;background:var(--card);border:1px solid var(--ok-line);border-radius:6px;padding:.05em .45em;line-height:1.35}

.math{font-family:var(--font-mono);font-weight:500;white-space:normal;overflow-wrap:anywhere}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-size:.9em;line-height:1.05;margin:0 3px}
.frac > span:first-child{border-bottom:1.5px solid currentColor;padding:0 3px}
.frac > span:last-child{padding:0 3px}
sup{font-size:.7em}

/* kéthasábos magyarázat */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:760px){.split{grid-template-columns:minmax(0,1fr)}}

/* eszköz-panel: a füzetrács a motívum, halványan */
.tool{
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-s);border-radius:var(--r-m);overflow:hidden;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}
.tool .thead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--paper-2);color:var(--ink);padding:10px 16px;border-bottom:1px solid var(--line)}
.tool .thead h4{font-size:.98rem}
.tool .thead .sub{font-size:.85rem;color:var(--ink-2)}
.tool .tbody{padding:18px 16px}
.tool .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.tool .row:has(>.btn)>:is(input[type=text],input[type=number],select){min-height:48px;line-height:1.375}
.tool label{font-weight:600;font-size:.9rem;color:var(--ink-2)}
.tool input[type=text],.tool input[type=number],.tool select{
  min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card);font-weight:500;font-size:1rem;min-width:0
}
.tool input:focus-visible,.ansrow input:focus-visible{outline:none;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.tool input[type=text].wide{flex:1;min-width:220px;font-family:var(--font-mono);font-size:1.1rem}
.tool input[type=range]{accent-color:var(--pen);width:220px;max-width:100%}
/* példasor: halk, a tool alján; nem verseng a bevitel–magyarázat egységgel */
.examples{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin-top:16px;padding-top:10px;border-top:1px dashed var(--line);font-size:.84rem;color:var(--ink-3)}
.examples .exl{font-weight:600;margin-right:2px}
.examples button{border:0;background:none;padding:3px 5px;font-family:var(--font-mono);font-size:.84rem;color:var(--ink-2);border-radius:4px;text-decoration:underline dotted var(--line-2);text-underline-offset:3px;min-height:28px}
.examples button:hover{color:var(--pen);background:var(--pen-soft);text-decoration-color:var(--pen)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-s);overflow:hidden;background:var(--card)}
.seg button{border:0;background:transparent;padding:8px 14px;font-weight:600;min-height:40px;border-right:1px solid var(--line);color:var(--ink-2)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--pen);color:#fff}
.readout{font-family:var(--font-display);font-weight:600;font-size:1.5rem}
.readout small{font-family:var(--font-body);font-weight:500;font-size:.9rem;color:var(--ink-2)}
svg.viz{width:100%;height:auto;display:block;overflow:visible}
svg.viz text{font-family:var(--font-body);font-weight:600}
.stepper{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* témák a vizsgán: sávos lista */
.temak{display:grid;gap:6px}
.temarow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.9rem}
.temaname{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.temabar{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.temabar i{display:block;height:100%;background:var(--pen);border-radius:99px}
.temaval{color:var(--ink-2);font-size:.82rem;white-space:nowrap}
@media (max-width:640px){.temarow{grid-template-columns:minmax(0,1fr) auto}.temabar{grid-column:1 / -1;order:2}.temaval{order:1}}
/* előjel-játék */
.game-q{font-family:var(--font-mono);font-size:2rem;font-weight:500;text-align:center;padding:14px 0;min-height:70px}
.game-ans{display:flex;gap:12px;justify-content:center}
.game-ans .btn{font-size:1.8rem;width:90px;height:64px;font-family:var(--font-mono)}
.game-hud{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px;color:var(--ink-2)}
.game-hud .t{font-family:var(--font-display);font-size:1.4rem;color:var(--ink)}
.flash-ok{animation:flashok .4s}
.flash-bad{animation:flashbad .4s}
@keyframes flashok{0%{background:var(--ok-soft)}100%{background:transparent}}
@keyframes flashbad{0%{background:var(--red-soft)}100%{background:transparent}}

/* hatvány-vizualizáció */
.pow-grid{display:grid;gap:3px;justify-content:start}
.pow-grid i{width:14px;height:14px;background:var(--pen);display:block;border-radius:3px;animation:pop .3s both}
.pow-chain{font-family:var(--font-mono);font-size:1.2rem;font-weight:500;word-break:break-word}

/* ---------- gyakorlás ---------- */
.practice{border:1px solid var(--line);background:var(--card);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s)}
.practice .phead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.practice .phead h4{font-size:1rem}
.practice .pbody{padding:20px 18px}
.levels{display:flex;gap:8px;flex-wrap:wrap}
.levels button{border:1px solid var(--line-2);background:var(--card);padding:8px 14px;font-weight:600;min-height:44px;border-radius:var(--r-s);color:var(--ink-2);text-align:left}
.levels button:hover{border-color:var(--ink-3);color:var(--ink)}
.levels button.on{background:var(--pen-soft);color:var(--pen);border-color:var(--pen-line)}
.levels button .d{display:block;font-size:.74rem;font-weight:500;opacity:.8}
.task{display:grid;gap:16px}
.task .q{font-size:1.15rem;line-height:1.5}
.task .q .math{font-size:1.15em}
.task .prog-dots{display:flex;gap:6px}
.task .prog-dots i{width:10px;height:10px;border-radius:99px;background:var(--line)}
.task .prog-dots i.ok{background:var(--ok)}
.task .prog-dots i.bad{background:var(--red)}
.task .prog-dots i.cur{background:var(--pen)}
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.opt{border:1px solid var(--line-2);background:var(--card);padding:12px 14px;text-align:left;font-weight:500;border-radius:var(--r-s);min-height:48px;font-size:1.05rem;transition:background .12s,border-color .12s}
.opt:hover{background:var(--pen-soft);border-color:var(--pen-line)}
.opt.sel{background:var(--pen);color:#fff;border-color:var(--pen)}
.opt.ok{background:var(--ok-soft);border-color:var(--ok)}
.opt.bad{background:var(--red-soft);border-color:var(--red)}
.opt:disabled{cursor:default}
.ansrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ansrow input{min-height:48px;max-width:100%;line-height:1.375;padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--r-s);font-size:1.15rem;font-weight:500;width:180px;font-family:var(--font-mono);background:var(--card)}
/* fogalmazás-műhely és mintafogalmazás */
.fm .fm-tema{flex:1 1 16rem;min-width:0;max-width:100%}
.fm-feladat{margin:4px 0 6px;line-height:1.55}
.fm-sablon{margin:0 0 12px;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.fm .fm-cim,.fm .fm-iras{width:100%;box-sizing:border-box;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card);color:var(--ink);font:inherit;padding:10px 12px}
.fm .fm-cim{margin-bottom:8px}
.fm .fm-iras{min-height:260px;line-height:1.6;resize:vertical}
.fm .fm-cim:focus-visible,.fm .fm-iras:focus-visible{outline:none;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.fm-sor{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:8px 0 4px;font-size:.92rem}
.fm-szamlalo{font-weight:600}.fm-szamlalo.jo{color:var(--ok)}.fm-szamlalo.kozel{color:var(--ink)}.fm-szamlalo.rossz{color:var(--red)}
.fm-ido,.fm-mentve{color:var(--ink-3);font-size:.88rem}
.fm-jelzesek{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px}
.fm-j{padding:6px 10px;border-radius:var(--r-s);font-size:.93rem;line-height:1.45;border:1px solid var(--line)}
.fm-j.ok{background:var(--ok-soft);border-color:var(--ok-line)}.fm-j.figyelj{background:var(--hl-soft);border-color:var(--hl-line)}.fm-j.hiba{background:var(--red-soft);border-color:var(--red-line)}
.fm-alcim{margin:18px 0 8px;font-family:var(--font-display);font-size:1rem}
.fm-rubrika{display:grid;gap:10px}
.fm-szempont{border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px 10px;margin:0}
.fm-szempont legend{font-weight:600;padding:0 4px}
.fm-plafon{font-weight:400;color:var(--red);font-size:.88rem}
.fm .fm-szint{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-weight:400;font-size:.94rem;line-height:1.45;color:var(--ink)}
.fm-szint b{white-space:nowrap}
.fm .fm-szint.tiltott{color:var(--ink-3)}
.fm-osszeg{font-weight:600;margin:10px 0}
.fm-gombok{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.fm-uzenet{color:var(--ink-2);font-size:.93rem;margin:4px 0}
.fm-minta{margin:12px 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);line-height:1.7}
.fm-minta h4{margin:0 0 8px;font-family:var(--font-display)}
.fm-minta p{margin:0 0 10px}
.fm-szerep{display:inline-block;font-size:.72rem;font-weight:600;line-height:1.3;padding:1px 6px;margin-right:2px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper-2);vertical-align:1px}
.fm-szerep.fm-erv,.fm-szerep.fm-atv,.fm-szerep.fm-eng,.fm-szerep.fm-caf{background:var(--pen-soft);border-color:var(--pen-line);color:var(--pen-dark)}
.fm-szerep.fm-elm{background:var(--hl-soft);border-color:var(--hl-line);color:var(--ink)}
.fm-szerep.fm-all,.fm-szerep.fm-zar{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.fm-megj{color:var(--ink-3);font-size:.9rem}
/* szövegértés: a feladatban megjelenő olvasmány */
.olvasmany{margin:10px 0 4px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);font-size:1rem;line-height:1.6;font-weight:400}
.olvasmany h4{margin:0 0 6px;font-family:var(--font-display);font-size:1.02rem}
.olvasmany p{margin:0 0 8px}.olvasmany p:last-child{margin-bottom:0}
.olvasmany .vers{font-style:italic;line-height:1.7}
.kep-leiras{display:inline-flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:6px 0;padding:8px 12px;border:1px dashed var(--line-2);border-radius:var(--r-s);background:var(--paper-2);font-weight:400}
.kep-cimke{font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--ink-2);white-space:nowrap}
.q .table{font-size:.95rem;margin-top:10px}.q caption{caption-side:top;text-align:left;font-weight:600;padding:0 0 6px}
/* szöveges válasz, betűpótlás, párosítás: magyar szöveg, ezért törzsbetű, nem mono */
.ansrow.szo input{width:min(340px,100%);font-family:var(--font-body)}
.ansrow.szo input.hosszu{width:100%}
.ekezetsor{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ekezetsor .ekezet{min-width:44px;min-height:44px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-s);background:transparent;font:inherit;font-size:1.05rem;color:var(--ink-3);cursor:pointer}
.ekezetsor .ekezet:hover{border-color:var(--pen);color:var(--ink)}
.ekezetsor .ekezet:disabled{opacity:.45;cursor:default}
.betu-sablon{font-size:1.6rem;font-weight:500;line-height:2.3;margin:6px 0 10px;overflow-wrap:anywhere}
.betu-sablon input,.betu-sablon select{font:inherit;font-size:1.35rem;min-height:44px;width:3.4em;text-align:center;padding:2px 4px;margin:0 3px;border:1px solid var(--line-2);border-bottom:2px solid var(--pen);border-radius:var(--r-s);background:var(--card);color:var(--ink);vertical-align:baseline}
.betu-sablon select{width:auto;min-width:3.4em}
.par-lista{display:grid;gap:8px;margin:6px 0 12px;max-width:40rem}
.par-sor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card)}
.par-sor select{min-height:44px;max-width:100%;font:inherit;padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card);color:var(--ink)}
.betu-sablon input:focus-visible,.betu-sablon select:focus-visible,.par-sor select:focus-visible{outline:none;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.betu-sablon .ok,.par-sor .ok{border-color:var(--ok);background:var(--ok-soft)}
.betu-sablon .bad,.par-sor .bad{border-color:var(--red);background:var(--red-soft)}
.exp .kozel{font-weight:600;color:var(--ink)}
@media (max-width:520px){.par-sor{grid-template-columns:minmax(0,1fr)}}
.order-list{display:flex;flex-wrap:wrap;gap:8px}
.order-list .opt{min-width:70px;text-align:center}
.order-out{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;border:1px dashed var(--line-2);padding:6px;border-radius:var(--r-s)}
.order-out .opt{background:var(--pen-soft)}
.fb{border:1px solid;border-left-width:3px;padding:12px 16px;border-radius:0 var(--r-s) var(--r-s) 0}
.fb.ok{border-color:var(--ok-line);border-left-color:var(--ok);background:var(--ok-soft)}
.fb.bad{border-color:var(--red-line);border-left-color:var(--red);background:var(--red-soft)}
.fb b.h{font-family:var(--font-display);font-size:1.05rem;font-weight:600;display:block;margin-bottom:4px}
.fb .exp{font-size:.97rem}
.fb .exp p:last-child{margin:0}
.summary{text-align:center;padding:10px 0}
.summary .big{font-family:var(--font-display);font-size:2.8rem;font-weight:600;line-height:1}
.summary p{color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:var(--r-m);font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:50;max-width:90vw;box-shadow:var(--shadow-m)}
.toast.show{opacity:1;transform:translateX(-50%)}

/* vizsga mód */
.testbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-weight:600;color:var(--ink-2)}
.testbar .clock{font-family:var(--font-mono);font-size:1.2rem;background:var(--ink);color:var(--paper);padding:4px 12px;border-radius:var(--r-s)}

/* egyéb */
.muted{color:var(--ink-2)}
.tight{margin:0}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:640px){.grid2{grid-template-columns:minmax(0,1fr)}}
.table{border:1px solid var(--line);border-collapse:separate;border-spacing:0;width:100%;background:var(--card);border-radius:var(--r-s);overflow:hidden}
.table th,.table td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left}
.table th{background:var(--paper-2);font-family:var(--font-display);font-weight:600;font-size:.92rem}
.table tr:last-child td{border-bottom:0}
.table td + td,.table th + th{border-left:1px solid var(--line)}
.scrollx{overflow-x:auto}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checklist li{display:flex;gap:10px;align-items:flex-start}
/* joker-kártyák: minden mondatnak horgonya van (sorszám + kulcsszó), a mag félkövér-sötét, a többi halkabb */
.jokers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.jokers{grid-template-columns:minmax(0,1fr)}}
.joker{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);padding:12px 16px 13px}
.joker .jhead{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.joker .jn{font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--ink-3)}
.joker .jk{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.joker .jl{margin-left:auto;font-size:.76rem;font-weight:600;color:var(--pen);text-decoration:none;background:var(--pen-soft);border:1px solid var(--pen-line);border-radius:99px;padding:1px 9px;white-space:nowrap}
.joker .jl:hover{background:var(--pen);color:#fff;border-color:var(--pen)}
.joker p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-2)}
.joker p b{color:var(--ink)}
.joker p .math{color:var(--ink)}
/* három réteg: szabály (sötét) → miért (halkabb) → példa (füzetlap-sáv kék éllel) */
.joker .jrule{color:var(--ink);margin-bottom:6px}
.joker .jwhy{font-size:.93rem;margin-bottom:8px}
.joker .jex{display:flex;gap:10px;align-items:baseline;font-size:.93rem;line-height:1.5;color:var(--ink-2);background:var(--paper);border-left:2px solid var(--pen-line);padding:8px 12px;border-radius:0 var(--r-s) var(--r-s) 0}
.joker .jex .lab{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pen);flex:none;position:relative;top:-1px}
.joker .jex .math,.joker .jex b{color:var(--ink)}
/* vezetett olvasás: egyszerre egy aktív kártya; a pipa az olvasási idő után nyílik (gyűrű mutatja) */
.joker{transition:opacity .25s,border-color .25s,box-shadow .25s}
.joker.locked{opacity:.5}
.joker.active{border-color:var(--pen-line);box-shadow:var(--shadow-s)}
.joker.done{background:var(--paper)}
.joker.done .jk{color:var(--ink-2)}
.jcheck{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.84rem;font-weight:600;color:var(--ink-3);cursor:default;min-height:32px}
.joker.ready .jcheck{cursor:pointer;color:var(--pen)}
.joker.done .jcheck{color:var(--ok)}
.jbox{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center}
.jbox input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}
.jbox::before{content:"";width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--card);transition:border-color .2s,background .2s}
.joker.active .jbox::before{border-color:var(--pen-line)}
.joker.ready .jbox::before{border-color:var(--pen)}
.joker.ready .jbox:hover::before{background:var(--pen-soft)}
.joker.done .jbox::before{border-color:var(--ok);background:var(--ok)}
.joker.done .jbox::after{content:"";position:absolute;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.jbox input:focus-visible ~ .jring{outline:2px solid var(--pen);outline-offset:2px;border-radius:50%}
.jring{position:absolute;inset:0;width:32px;height:32px;transform:rotate(-90deg);pointer-events:none}
.jring .ring{fill:none;stroke:var(--pen);stroke-width:2.5;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;opacity:.8}
.joker.ready .jring .ring,.joker.done .jring .ring,.joker.locked .jring .ring{stroke:transparent}
.jfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:.9rem}
.empty{padding:20px;border:1px dashed var(--line-2);text-align:center;color:var(--ink-2);border-radius:var(--r-m)}

/* felső nav + fogalomtár */
.top nav a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.92rem;padding:6px 10px;border-radius:var(--r-s)}
.top nav a:hover,.top nav a.on{color:var(--ink);background:var(--paper-2)}
@media (max-width:480px){.top nav{display:none!important}}
.gloss-racs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.gloss-tema+.gloss-tema{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.gloss-temafej{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.gloss-temafej h2{font-size:1.4rem}.gloss-temafej>.num{white-space:nowrap;font-size:.85rem}
.gloss-temavalaszto{min-height:48px;max-width:100%;min-width:0;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-m);font:inherit;color:var(--ink);background:var(--card)}
@media(max-width:480px){.gloss-temafej{flex-wrap:wrap;gap:6px}.gloss-temavalaszto{width:100%}}
.gitem{min-width:0;border:1px solid var(--line);background:var(--card);padding:16px 18px;display:flex;flex-direction:column;gap:8px;border-radius:var(--r-m)}
.gfigure{margin:4px 0 6px;padding:10px 0 0;background:var(--paper);border-radius:var(--r-s)}
.gfigure svg{display:block;width:100%;max-width:320px;height:auto;margin:0 auto;font-family:var(--font-mono);overflow:hidden}
.gfigure figcaption{padding:6px 12px 12px;color:var(--ink-2);font-size:.82rem;line-height:1.45;text-wrap:pretty}
.gmatch{background:var(--hl);color:inherit;border-radius:2px;padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.gitem h3{font-size:1.08rem}
.gitem .gterm{overflow-wrap:anywhere;display:flex;flex-direction:column;gap:2px}
.gitem .meta{margin-top:auto;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.gitem .gexam{font-size:.85rem;color:var(--ink-2)}
.gitem .gexam .lab{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pen)}
.gitem .pill{border-radius:99px;padding:2px 10px;background:var(--pen-soft);border:1px solid var(--pen-line);text-decoration:none;color:var(--pen);display:inline-block}
.gitem .pill.soon{background:var(--paper-2);color:var(--ink-3);border-color:var(--line)}

/* ---------- Pötty ---------- */
.pet-say{display:flex;gap:14px;align-items:flex-start}
.pet-fig{flex:none;line-height:0}
img.pet{display:block;object-fit:contain}
.bubble{position:relative;border:1px solid var(--line);background:var(--card);padding:12px 18px;border-radius:var(--r-l);font-size:1.02rem;max-width:60ch;box-shadow:var(--shadow-s);line-height:1.55}
.bubble::before{content:"";position:absolute;left:-9px;top:22px;width:0;height:0;border:8px solid transparent;border-right-color:var(--line);border-left:0}
.bubble::after{content:"";position:absolute;left:-7px;top:23px;width:0;height:0;border:7px solid transparent;border-right-color:var(--card);border-left:0}
.bubble p:last-child{margin:0}
.bubble b.who{display:block;color:var(--pen);margin-bottom:3px}
.bubble.sm{font-size:.97rem;padding:10px 14px}
@keyframes wag{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.pet-wag{animation:wag .5s ease-in-out 3;transform-origin:50% 90%}
.pet-react{display:flex;gap:10px;align-items:center;margin-top:10px}
.pet-react .bubble{box-shadow:none;padding:8px 12px;font-size:.97rem}

/* ---------- lapozható leckék ---------- */
/* fülek: egy sor; ha nem fér ki, a lecke-fülek görgethetők (jobb szélen elhalványulnak), a Modulzáró kívül, mindig látszik */
.tabs-row{display:flex;align-items:center;gap:8px}
.tabs-scroll{flex:1;min-width:0;position:relative;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs-scroll.more{mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.tabs-scroll::-webkit-scrollbar{display:none}
.lesson-tabs{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;padding:2px 0;width:max-content}
.tabs-scroll.more .lesson-tabs{padding-right:28px}
.lesson-tabs a,.lesson-tab{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.84rem;padding:5px 11px;border:1px solid var(--line);border-radius:99px;background:var(--card);min-height:32px;flex:none;white-space:nowrap}
.lesson-tabs a:hover,.lesson-tab:hover{border-color:var(--ink-3);color:var(--ink)}
.lesson-tabs a .n{font-family:var(--font-display);color:var(--pen)}
.lesson-tabs a.on{background:var(--pen);color:#fff;border-color:var(--pen)}
.lesson-tabs a.on .n{color:#fff;opacity:.85}
.lesson-tabs a.done:not(.on){background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.lesson-tabs a.done:not(.on) .n{color:var(--ok)}
.lesson-tab.test{background:var(--hl-soft);border-color:var(--hl-line);color:var(--ink)}
.lesson-tab.test.on{background:var(--pen);border-color:var(--pen);color:#fff}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.pager .btn{min-width:200px}
.pager .btn small{display:block;font-weight:500;font-size:.8rem;opacity:.8}
.lesson-intro{margin-bottom:28px}

/* 2. modul: törtes eszközök */
.tbar{display:flex;height:36px;border:1.5px solid var(--ink-2);border-radius:var(--r-s);overflow:hidden;background:var(--card);margin:12px 0 6px}
.tbar i{display:block;height:100%;border-right:1px solid var(--line-2);background:transparent;transition:background .15s}
.tbar i:last-child{border-right:0}
.tbar i.on{background:var(--hl)}
.tin{display:inline-flex;flex-direction:column;align-items:center;gap:3px;vertical-align:middle}
.tin i{display:block;width:100%;height:2px;background:var(--ink);border-radius:1px}
.tool .tin input[type=number]{width:64px;text-align:center;font-family:var(--font-mono);font-size:1.05rem;padding:6px 4px}
.tlab{gap:14px;align-items:center}
.tsteps{margin:6px 0 0;padding-left:22px;font-size:.95rem;color:var(--ink-2)}
.tsteps li{margin:7px 0;line-height:1.55}
.tsteps b{color:var(--pen)}
.tsteps .frac{color:var(--ink)}
/* egyszerű lista és lépéslista a leckékben: egy sor egy gondolat, egy lépés egy művelet */
ul.simple,ol.simple{padding-left:1.3em;margin:0 0 12px;line-height:1.65}
.simple li{margin:3px 0}
.simple li b{color:var(--ink)}
.khd td{position:relative}
.khd td .comma{position:absolute;right:0;bottom:-2px;color:var(--red);font-weight:700;font-size:1.5rem;font-family:var(--font-mono);z-index:1;line-height:1}
.vbig{font-family:var(--font-mono);font-size:2rem;font-weight:600;letter-spacing:.02em;color:var(--ink);margin:4px 0 6px}
.opt .frac{font-size:.95em}
.opt .math{font-size:1.05em}

/* ============================================================
   PÖTTY, A SEGÍTŐ (copilot): lebegő kutyus jobb alul, kártya-panel, mobilon teljes képernyő
   ============================================================ */
.cp-fab{position:fixed;right:18px;bottom:18px;z-index:40;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;transition:transform .12s}   /* csak a kutyus, kör nélkül (Sandor kérése) */
.cp-fab:hover{transform:translateY(-2px)}
.cp-fab img.pet{width:60px;height:60px;filter:drop-shadow(0 2px 3px rgba(35,38,58,.22))}
.cp{position:fixed;right:18px;bottom:18px;z-index:40;width:min(420px,calc(100vw - 36px));height:min(720px,calc(100vh - 36px));display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-m);overflow:hidden}
@media (max-width:640px){.cp{inset:0;width:auto;height:auto;border-radius:0;border:0}.cp-fab{right:14px;bottom:14px}}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--line);background:var(--paper-2);flex:none}
.cp-who{display:flex;align-items:center;gap:8px;min-width:0}
.cp-who b{font-family:var(--font-display);font-weight:600;font-size:1.05rem;flex:none}
.cp-avatar{display:inline-flex;flex:none;line-height:0}
.cp-ctx{font-size:.78rem;font-weight:600;color:var(--pen);background:var(--pen-soft);border:1px solid var(--pen-line);border-radius:99px;padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cp-actions{display:flex;gap:8px;flex:none}
.cp-ib{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r-s);background:transparent;color:var(--ink-2);padding:0}
.cp-ib:hover{background:var(--card);color:var(--ink);border-color:var(--line)}
.cp-ib.on{background:var(--card);color:var(--pen);border-color:var(--pen-line)}
.cp-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 14px 10px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.cp-body h3{font-size:1.1rem}
.cp-empty{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.cp-empty .bubble{font-size:.97rem}
.cp-sugg{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-left:78px}
@media (max-width:400px){.cp-sugg{padding-left:0}}
.cp-chip{border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:99px;padding:7px 14px;font-size:.9rem;font-weight:500;text-align:left;min-height:36px;line-height:1.3}
.cp-chip:hover{border-color:var(--pen);color:var(--pen);background:var(--pen-soft)}
.cp-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.86rem;color:var(--ink-2);background:var(--hl-soft);border:1px solid var(--hl-line);border-radius:var(--r-m);padding:8px 12px}
/* üzenetek: a tanulóé jobbra, kék-halvány; Pöttyé balra, fehér, kis rajzzal */
.cp-msg{display:flex;gap:8px;align-items:flex-start;max-width:100%}
.cp-msg.user{justify-content:flex-end}
.cp-msg .cp-txt{font-size:.97rem;line-height:1.5;padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-l);max-width:min(88%,52ch);min-width:0;overflow-wrap:anywhere}
.cp-msg.user .cp-txt{background:var(--pen-soft);border-color:var(--pen-line);border-bottom-right-radius:4px;white-space:pre-wrap}
.cp-msg.ai .cp-col{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:calc(100% - 34px)}
.cp-msg.ai .cp-txt{background:var(--card);border-top-left-radius:4px;box-shadow:var(--shadow-s);max-width:100%}
.cp-msg.ai.bad .cp-txt:empty{display:none}
.cp-txt p{margin:0 0 .55em}
.cp-txt p:last-child,.cp-txt ul:last-child,.cp-txt ol:last-child{margin-bottom:0}
.cp-txt ul,.cp-txt ol{margin:.2em 0 .55em;padding-left:1.25em}
.cp-txt li{margin:.2em 0}
.cp-txt h4{font-size:1rem;margin:.4em 0 .3em}
.cp-txt code{font-family:var(--font-mono);font-size:.92em;background:var(--paper-2);border-radius:4px;padding:0 .3em}
.cp-txt pre{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;overflow-x:auto;margin:.3em 0 .55em}
.cp-txt pre code{background:none;padding:0}
.cp-caret{display:inline-block;width:2px;height:1em;background:var(--pen);vertical-align:-.15em;margin-left:2px;animation:cpblink 1s steps(2) infinite}
@keyframes cpblink{to{opacity:0}}
.cp-dots{display:inline-flex;gap:4px;padding:4px 0}
.cp-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:cpdot 1.2s infinite ease-in-out}
.cp-dots i:nth-child(2){animation-delay:.2s}.cp-dots i:nth-child(3){animation-delay:.4s}
@keyframes cpdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.cp-acts{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:.8rem;color:var(--ink-3);padding-left:4px}
.cp-act{border:0;background:none;padding:2px 4px;font-size:.8rem;font-weight:600;color:var(--ink-3);border-radius:4px;display:inline-flex;align-items:center;gap:3px;min-height:26px}
.cp-act:hover{color:var(--pen);background:var(--pen-soft)}
.cp-act svg{width:14px;height:14px}
.cp-err{color:var(--red);font-weight:600;flex-basis:100%}
/* beviteli sor */
.cp-foot{flex:none;border-top:1px solid var(--line);background:var(--card);padding:10px 12px;position:relative}
.cp-form{display:flex;gap:8px;align-items:flex-end}
.cp-in{flex:1;min-width:0;min-height:48px;max-height:160px;resize:none;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--card);font:inherit;font-size:1rem;line-height:1.4;color:var(--ink)}
.cp-in:focus-visible{outline:none;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.cp-in:disabled{background:var(--paper-2);color:var(--ink-3)}
.cp-send,.cp-stop{flex:none;padding-left:16px;padding-right:16px}
.cp-stop{color:var(--red);border-color:var(--red-line)}
.cp-hint{font-size:.74rem;color:var(--ink-3);margin-top:6px}
.cp-jump{position:absolute;top:-40px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);border-radius:99px;padding:4px 12px;font-size:.82rem;font-weight:600;box-shadow:var(--shadow-s)}
.cp-jump:hover{color:var(--pen);border-color:var(--pen-line)}
/* előzmények */
.cp-hhead{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.cp-hhead h3{margin-right:auto}
.cp-hhead .seg{flex-basis:100%}
.cp-hhead .seg button{min-height:32px;padding:4px 10px;font-size:.84rem}
.cp-hmeta{font-size:.82rem;color:var(--ink-3);margin:-4px 0 0;font-weight:600}
.cp-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-m);padding:4px 6px 4px 4px}
.cp-row.on{border-color:var(--pen-line);background:var(--pen-soft)}
.cp-rowbtn{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;border:0;background:none;padding:6px 8px;border-radius:var(--r-s);color:var(--ink)}
.cp-rowbtn:hover{background:var(--paper-2)}
.cp-rowbtn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.cp-rowbtn small{color:var(--ink-3);font-size:.78rem;font-weight:600}
.cp-confirm{flex:1;font-size:.9rem;font-weight:600;padding-left:6px}
/* kulcs és modell */
.cp-p{font-size:.93rem;color:var(--ink-2);margin:0}
.cp-field{display:flex;flex-direction:column;gap:4px}
.cp-field label{font-weight:600;font-size:.86rem;color:var(--ink-2)}
.cp-field small{font-size:.8rem}
.cp-inrow{display:flex;gap:12px;align-items:center}
.cp-inrow input,.cp-inrow select,.cp-inrow small{flex:1;min-width:0}
.cp-inrow .btn{flex:none;white-space:nowrap;margin:0}
.cp-inrow>input,.cp-inrow>select{min-height:48px}
.cp-sel{max-width:100%;text-overflow:ellipsis}
.cp-sel,.cp-key,.cp-model{min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card);font:inherit;font-size:.98rem;color:var(--ink)}
.cp-key,.cp-model{font-family:var(--font-mono);font-size:.92rem}
.cp-sel:focus-visible,.cp-key:focus-visible,.cp-model:focus-visible{outline:none;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.cp-status{font-size:.88rem;font-weight:600;color:var(--ink-2);min-height:1.2em}
.cp-status.ok{color:var(--ok)}
.cp-status.bad{color:var(--red)}
.cp-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cp-danger{color:var(--red)}
.cp-danger:hover{color:var(--red);background:var(--red-soft)}
@media (max-width:640px){body:has(.cp:not([hidden])) .toast{bottom:92px}}   /* nyitott segítő-panel mellett a toast a beviteli sor fölé megy */
.cp-tools{font-size:.78rem;font-weight:600;color:var(--ink-3);padding-left:4px}   /* „Megnézte: …”: mit kért le a modell az eszközökkel */
/* hibanapló-nézet és átnevezés */
.cp-day{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.cp-lrow{border:1px solid var(--line);background:var(--card);border-radius:var(--r-m);padding:8px 10px 9px;display:flex;flex-direction:column;gap:5px;font-size:.92rem;line-height:1.45}
.cp-lrow .top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--ink-3)}
.cp-lrow .top a{text-decoration:none;color:var(--pen)}
.cp-lrow .q{color:var(--ink);overflow-wrap:anywhere}
.cp-lrow .vs{font-size:.86rem;white-space:normal}
.cp-lrow .note{font-size:.86rem;color:var(--ink-2)}
.cp-rename{flex:1;min-width:0;min-height:48px;padding:6px 10px;border:1px solid var(--pen);border-radius:var(--r-s);font:inherit;font-size:.95rem;box-shadow:0 0 0 3px var(--pen-soft)}

/* Heti ritmus és saját füzet. A lecke fölötti keret továbbra is egy sor. */
.fejlec-rang,.heti-rovid,.jelveny-gomb{border:0;background:var(--pen-soft);color:var(--pen-dark);border-radius:10px;min-height:44px;padding:6px 10px;font:600 .85rem var(--font-body);cursor:pointer}
.heti-rovid{background:var(--paper-2);color:var(--ink);font-variant-numeric:tabular-nums}
.jelveny-gomb{width:44px;font-size:1.35rem;background:var(--hl-soft);color:var(--ink)}
.fejlec-rang:hover,.heti-rovid:hover,.jelveny-gomb:hover{background:var(--pen-line)}
.xp{gap:8px}.pet-rang{object-fit:contain;border-radius:12px;mix-blend-mode:multiply}
.tarolas-allapot{padding:10px 20px;background:var(--hl-soft);color:var(--ink);text-align:center;font-size:.9rem}
.tanulas-oldal{max-width:960px}.tanulas-oldal>h1{font-size:2.4rem;margin:14px 0 20px}.tanulas-oldal>.kicker{display:block;margin-top:24px}
.tanulas-koszontes{margin-bottom:32px}
.tanulas-koszontes h1{font-size:2.8rem;line-height:1.12;margin:10px 0 16px}.tanulas-koszontes .lead{font-size:1.12rem;max-width:55ch}
.tanulas-nyito{padding-top:42px}.tanulas-lab{margin-top:18px}
.heti-nezet{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.heti-cim{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.heti-cim h2{font-size:1.3rem;margin:0}
.heti-mancslista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0;margin:20px 0;list-style:none}
.heti-mancslista li{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:.88rem}.heti-mancslista li.kesz{color:var(--ok)}
.mancs{display:inline-flex;align-items:center;justify-content:center;width:36px;height:38px;font-size:28px;position:relative;flex-shrink:0;color:var(--line-2);padding-top:9px}.kesz .mancs{color:var(--pen)}
.mancs i{position:absolute;width:8px;height:10px;background:currentColor;border-radius:50%;top:0;left:10px;transform:rotate(-15deg)}
.mancs i:nth-child(2){left:21px;transform:rotate(15deg)}.mancs i:nth-child(3){top:8px;left:1px;transform:rotate(-35deg)}.mancs i:nth-child(4){top:8px;left:30px;transform:rotate(35deg)}
.heti-jutalom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-weight:600;margin-bottom:12px}.heti-jutalom .muted{font-weight:400}.heti-nezet>p:last-child{margin-bottom:0;font-size:.9rem}
.xp-bonuszjelveny{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 9px 3px 6px;border:1px solid var(--hl-line);border-radius:var(--r-m);background:var(--hl-soft);color:var(--ink);white-space:nowrap;vertical-align:middle}
.xp-bonusz-ikon{display:block;width:18px;height:20px;flex:none;color:#8A6D00}.xp-bonusz-pajzs{fill:var(--hl);stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}.xp-bonusz-csillag{fill:currentColor}.xp-bonusz-pipa{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.xp-bonusz-szam{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--font-display);font-size:.98rem;font-weight:600;line-height:1}.xp-bonusz-szam>span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em}
.xp-bonuszjelveny.kesz{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}.xp-bonuszjelveny.kesz .xp-bonusz-ikon{color:var(--ok)}.xp-bonuszjelveny.kesz .xp-bonusz-pajzs{fill:var(--card)}
.heti-bonuszszoveg{flex:1 1 220px;line-height:1.4}.heti-gyakorlas{font-size:.9rem;white-space:nowrap}
.joker-jutalom{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px 18px;max-width:66ch;margin:0 0 24px;font-size:.92rem}
.joker-jutalom-szoveg{flex:1 1 260px;min-width:0}.joker-jutalom-szoveg>p{margin:0 0 8px}.joker-jelveny-link{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.rang-xp{max-width:40rem;margin:12px 0 20px}.rang-xp p{margin:4px 0}.rang-xp progress{display:block;width:100%;height:12px;margin:10px 0;accent-color:var(--pen)}.rang-xp-jutalom{color:var(--pen);font-weight:700}.jutalom-lista{list-style:none;margin:10px 0 0;padding:0}.jutalom-lista li{margin:4px 0}.jutalom-lista b{color:var(--pen)}
.joker-haladas{margin:24px 0;padding:22px 0;border-block:1px solid var(--line)}.joker-haladas>h2{font-size:1.22rem;margin:0 0 12px}.joker-haladas>p{margin:8px 0;max-width:66ch}
.joker-haladas progress{display:block;width:100%;max-width:440px;height:8px;border:0;border-radius:99px;overflow:hidden;background:var(--paper-2);accent-color:var(--pen)}.joker-haladas progress::-webkit-progress-bar{background:var(--paper-2)}.joker-haladas progress::-webkit-progress-value{background:var(--pen);border-radius:99px}.joker-haladas progress::-moz-progress-bar{background:var(--pen);border-radius:99px}
.joker-fokozatok{display:flex;flex-wrap:wrap;gap:16px 24px;list-style:none;margin:20px 0;padding:0}.joker-fokozatok>li{display:flex;align-items:center;gap:12px;flex:1 1 230px}.joker-fokozatok small{display:block;color:var(--ink-2)}.joker-fokozatok .kesz b{color:var(--ok)}
.joker-haladas summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--pen)}.joker-haladas summary::before{content:'+'}.joker-haladas details[open]>summary::before{content:'−'}.joker-modulok{list-style:none;padding:0;margin:8px 0}.joker-modulok li{margin:4px 0}.joker-modulok a{display:inline-flex;align-items:center;min-height:44px}
.fuzet-rang{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px;align-items:center;margin:28px 0 36px}.fuzet-rang h2{font-size:1.8rem}.fuzet-rang h3{font-size:1.08rem}.fuzet-rang p{margin:8px 0}
.fuzet-szakasz{margin-top:42px;padding-top:28px;border-top:1px solid var(--line)}.fuzet-szakasz>h2{font-size:1.5rem;margin-bottom:16px}.fuzet-szakasz summary{font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}.fuzet-szakasz summary::before{content:'+';color:var(--pen)}.fuzet-szakasz[open]>summary::before{content:'−'}
.tudas-sor{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:18px 0;border-bottom:1px solid var(--line)}.tudas-sor h3{font-size:1.06rem;margin:0}.tudas-sor p{margin:6px 0 0;font-size:.9rem}.tudas-sor>.muted{flex-basis:100%}.tudas-sor .cta{margin:0}
.rang-lista{display:flex;flex-direction:column;margin-top:26px}.rang-kartya{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;align-items:center;border-top:1px solid var(--line);padding:28px 0}.rang-kartya img{width:170px;height:170px}.rang-kartya h2{font-size:1.5rem}.rang-kartya p{margin:6px 0}.rang-kartya .kicker{color:var(--ink-3)}.rang-kartya.megszerzett .kicker{color:var(--ok)}.rang-kartya>button{max-width:180px}
.jelveny-szuro{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}.jelveny-szuro .on{background:var(--pen-soft);color:var(--pen-dark);border-color:var(--pen-line)}
.kituzott-sor{display:flex;align-items:center;gap:14px;min-height:54px}.kituzott-sor p{margin:0;color:var(--ink-2)}
.jelveny-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}.tema-jelveny{padding:26px 0;border-top:1px solid var(--line);min-width:0}
.jelveny-fokok{display:flex;gap:10px;margin-bottom:20px}.jelveny-fok{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:82px;min-height:100px;padding:9px 10px;border:1px solid transparent;background:transparent;border-radius:12px;font:600 .85rem var(--font-body);color:var(--ink-3);cursor:pointer}
.jelveny-fok.got{color:var(--ink)}.jelveny-fok[aria-pressed=true]{border-color:var(--pen-line);background:var(--pen-soft)}.jelveny-fok:hover{border-color:var(--line-2)}
.jelveny-rajz{--j-fem:#e6b88e;--j-perem:#966445;--j-papir:#fff7ed;--j-tinta:#784728;--j-lagy:#f2d2ac;--j-szalag:#b77a54;--j-feny:#f9e6cf;display:inline-flex;flex-shrink:0;width:var(--jelveny-meret,44px);height:calc(var(--jelveny-meret,44px)*1.12);vertical-align:middle}
.jelveny-rajz>svg{display:block;width:100%;height:100%;overflow:visible}
.jelveny-rajz.ezust{--j-fem:#c6d4e2;--j-perem:#718398;--j-papir:#f5f9fc;--j-tinta:#405975;--j-lagy:#dbe7f1;--j-szalag:#859cb9;--j-feny:#eaf3fb}
.jelveny-rajz.arany{--j-fem:#f2cd61;--j-perem:#a7812c;--j-papir:#fffbea;--j-tinta:#866019;--j-lagy:#f9e6a3;--j-szalag:#d6a738;--j-feny:#fff2bd}
.jelveny-rajz.ritmus{--j-fem:#b9cdef;--j-perem:#6988b8;--j-papir:#f3f7ff;--j-tinta:#30589a;--j-lagy:#d5e2fa;--j-szalag:#789bcd;--j-feny:#e6efff}
.jelveny-rajz.sorozat{--j-fem:#f3c18c;--j-perem:#b17d47;--j-papir:#fff8ee;--j-tinta:#94531e;--j-lagy:#f7d7ae;--j-szalag:#d29757;--j-feny:#ffe7c6}
.jelveny-rajz.javitas{--j-fem:#b9d7bb;--j-perem:#66876b;--j-papir:#f2faf1;--j-tinta:#356343;--j-lagy:#d5e8cf;--j-szalag:#84ab88;--j-feny:#e7f4df}

.jelveny-reszlet h3,.merfoldko h3{font-size:1.1rem;margin:0 0 10px}.jelveny-reszlet p,.merfoldko p{font-size:.96rem;margin:8px 0}.jelveny-allapot{font-weight:600}.jelveny-reszlet .btn,.merfoldko .btn{margin-top:10px}
.merfoldko-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}.merfoldko{display:flex;align-items:flex-start;gap:18px;padding:24px 0;border-top:1px solid var(--line)}.merfoldko>div{min-width:0}
.feladat-fej{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.feladat-fej .clock{margin-left:12px}.prog-dots .rogzitett{background:var(--pen)}.rogzitve{color:var(--pen-dark);font-weight:600;margin:18px 0}.proba-mod{font-size:.9rem}.mentesi-hiba,.muvelet-hiba{color:var(--red);font-size:.95rem;margin:12px 0}.practice .pbody>.btn,.practice .summary>.btn,.bevetes-kerdes>.btn{margin-top:12px}.practice .order-list{margin:12px 0}.practice .summary .pet{margin:auto}.proba-javitas{text-align:left;border-top:1px solid var(--line);padding:12px 0}.proba-javitas summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--pen-dark);font-weight:600}
.alkalom-lab{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:16px}.elvetes{margin:18px 0;padding:18px;background:var(--paper-2);border-radius:12px}.jutalom-osszeg{font-size:1.2rem;font-weight:600}.lezaras-rajz{display:flex;justify-content:center}
.import-mezo{display:flex;flex-direction:column;gap:12px;margin:24px 0}.import-mezo input{max-width:100%;min-height:44px;font:inherit;font-size:.9rem}.import-elonezet:not(:empty){background:var(--paper-2);padding:20px;border-radius:12px;margin:18px 0}
/* A tallér-chip alapszabálya a médiaszabályok ELŐTT áll, hogy a szűk nézetek felülírhassák. */
.zsold-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;border:1px solid var(--hl-line);border-radius:99px;background:var(--hl-soft);color:var(--ink);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap}
.zsold-chip .taller{width:20px;height:20px;flex:none}.zsold-chip:hover{background:var(--hl)}
@media(max-width:760px){.rang-kartya{grid-template-columns:110px minmax(0,1fr);gap:16px}.rang-kartya img{width:110px;height:110px}.rang-kartya>button{grid-column:2}.heti-mancslista{gap:10px}.heti-mancslista li{flex-direction:column;gap:8px}.fuzet-rang{grid-template-columns:130px minmax(0,1fr);gap:18px}.fuzet-rang img{width:130px;height:130px}.tanulas-koszontes h1{font-size:2.2rem}.jelveny-lista,.merfoldko-lista{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.top>.wrap{gap:4px;padding-inline:12px}.zsold-chip{font-size:.75rem;padding:2px 7px 2px 4px;gap:3px}.zsold-chip .taller{width:16px;height:16px}.top .brand{gap:2px}.top .brand-pet{width:44px;height:44px}.top .brand-pet img{width:44px;height:44px}.top #brand-name{display:none}.xp{gap:4px}.fejlec-rang{font-size:.75rem;padding:5px 7px}.heti-rovid{padding:5px 8px}.xp>.num{font-size:.78rem}.jelveny-gomb{width:40px}.tanulas-koszontes h1{font-size:2rem}.tanulas-nyito{padding-top:22px}.fuzet-rang{grid-template-columns:minmax(0,1fr);gap:8px}.fuzet-rang>span{justify-self:center}.heti-cim{align-items:flex-start}.heti-cim h2{font-size:1.1rem}.heti-cim>b{font-size:.85rem}.heti-mancslista li{font-size:.72rem;text-align:center}.heti-mancslista{gap:6px}.tanulas-oldal>h1{font-size:2rem}.jelveny-szuro{gap:6px}.rang-kartya{grid-template-columns:90px minmax(0,1fr)}.rang-kartya img{width:90px;height:90px}.rang-kartya h2{font-size:1.22rem}.rang-kartya p{font-size:.92rem}.rang-kartya>button{max-width:100%}.tudas-sor .cta{flex-basis:100%}.tudas-sor{gap:8px}.tanulas-oldal .wrap{padding:0}}
/* 360 alatt (a 480-as után, hogy felülírja): ötjegyű XP és négyjegyű tallér mellett is elfér a fejléc */
@media(max-width:360px){.top>.wrap{padding-inline:8px}.xp{gap:2px}.jelveny-gomb{width:34px}.heti-rovid{padding:5px 6px}.fejlec-rang{padding:5px 6px}.zsold-chip{padding:2px 5px 2px 3px;gap:2px}.zsold-chip .taller{width:14px;height:14px}.top .brand-pet,.top .brand-pet img{width:40px;height:40px}.xp .num{white-space:nowrap}#kituzott-jelveny{display:none}}

.jelveny-gomb{display:inline-flex;align-items:center;justify-content:center}.jelveny-gomb .jelveny-rajz{font-size:.75rem}
@keyframes rangvaltas{0%{opacity:.5;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
.rangvaltas{animation:rangvaltas 400ms ease-out}

/* A globális cím-reset után ezek az önálló fejlécek saját olvasási térközt kapnak. */
.empty>h2,.import-elonezet>h3{margin-bottom:12px}

.tananyag-html>h3{margin-bottom:10px}
.tananyag-html>h3:not(:first-child){margin-top:24px}

/* A fejlécen a világos képháttér olvadjon a papírba, ne sötétüljön külön csempévé. */
.brand-pet .pet-rang{mix-blend-mode:darken;border-radius:0}

.xp>.fejlec-rang{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0}

/* Pötty bevetése: egy kérdés, jól látható válasz és következő lépés. */
.bevetes { max-width: 820px; }
.bevetes-fej { display:flex; align-items:center; gap:20px; margin:20px 0; }
.bevetes-fej h1 { font-size:clamp(1.8rem,5vw,2.8rem); }
.bevetes-kerdes { padding:24px; margin:24px 0; }
.bevetes-kerdesszoveg { font:600 1.4rem/1.5 var(--font-display); margin-bottom:var(--terkoz-tartalom); }
.bevetes-kerdes h2.kicker { font-size:.8rem; }
.bevetes-kerdesszoveg .table { font:400 1rem/1.5 var(--font-body); margin-top:16px; }
.bevetes-kerdesszoveg .table th,.bevetes-kerdesszoveg .table td { padding:8px 4px; }
.bevetes-kerdesszoveg svg { display:block; max-width:100%; height:auto; margin:16px auto; }
.bevetes-irasbeli { font:500 1.2rem/1.6 var(--font-mono); white-space:pre; margin:16px 0; }
.bevetes-opciok { display:grid; gap:12px; margin:22px 0; }
.bevetes-opciok .opt { width:100%; min-height:48px; text-align:left; padding:12px 16px; }
.bevetes-valasz { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:22px 0; }
.bevetes-valasz input { min-width:0; width:230px; max-width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--line-2); border-radius:var(--r-s); font:inherit; line-height:1.375; }
.bevetes-rang { border-top:1px solid var(--line); margin:32px 0; padding-top:24px; }
.bevetes-abra { background:var(--paper); border-radius:var(--r-m); margin:20px 0; padding:12px; }
.bevetes-abra svg { display:block; width:100%; max-height:210px; }
.bevetes-pontok { display:flex; justify-content:space-between; gap:12px; }
@media(max-width:520px) { .bevetes-fej { gap:10px; } .bevetes-fej > span { width:80px; flex-shrink:0; } .bevetes-fej img { max-width:100%; } .bevetes-kerdes { padding:16px; } }
.bevetes-kerdesszoveg:focus { outline:none; }
.bevetes-fej img { mix-blend-mode:multiply; }

/* A rang három feltétele egyetlen, a címhez igazított lista. */
.rang-feltetelek{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;color:var(--ink-2)}
.rang-feltetelek li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;line-height:1.5}
.rang-pipa{color:var(--ink-3);font-weight:600}.rang-feltetelek .kesz .rang-pipa{color:var(--ok)}
.rang-feltetelek .rang-pipa{display:inline-flex;width:22px;height:22px;margin-top:2px}.rang-feltetelek .rang-pipa svg{display:block;width:100%;height:100%}.rang-feltetelek .rang-pipa circle{fill:none;stroke:var(--line-2);stroke-width:1}.rang-feltetelek .kesz .rang-pipa circle{fill:var(--ok-soft);stroke:var(--ok-line)}.rang-feltetelek .rang-pipa path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.xp-utmutato>h2{margin-bottom:8px}.xp-forras{padding:22px 0}.xp-forras+.xp-forras{border-top:1px solid var(--line)}.xp-forras-fej{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px}.xp-forras h3{font-size:1.12rem;margin:0}.xp-forras p{max-width:66ch;margin:12px 0}.xp-forras a{display:inline-flex;align-items:center;min-height:44px}.xp-utmutato-megjegyzes{max-width:66ch;font-size:.9rem;margin:8px 0 0}
.rang-kulso{display:block;margin-top:12px;font-size:.88rem}.rang-tartalom>.btn{margin-top:14px}
/* Kincstár: meleg aranyszín, nagy szám, négy érme. Az egyetlen hely, ahol a jutalom hangosabb lehet a tanulásnál. */
.zsold-kincstar{margin:24px 0 8px;padding:22px 24px;border:1px solid var(--hl-line);border-radius:var(--r-m);background:var(--hl-soft);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--hl-line)}
.zsold-fej{display:flex;align-items:center;gap:18px}.zsold-fej .kicker{color:#8A6A12}
.zsold-nagy{font-family:var(--font-head,inherit);font-size:2.1rem;line-height:1.1;font-weight:800;color:var(--ink)}.zsold-nagy b{font-size:2.6rem}
.zsold-ermek{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.zsold-ermek li{display:grid;justify-items:center;text-align:center;gap:4px;padding:14px 8px;border-radius:var(--r-m);background:#fff;border:1px solid var(--hl-line)}
.zsold-ermek li.kesobb{opacity:.55}.zsold-ermek li.kesobb .taller{filter:grayscale(1)}.zsold-ermek li.kovetkezo{border-color:#D9AE2E;box-shadow:0 0 0 3px var(--hl)}
.zsold-ermek li.kifizetve{background:var(--ok-soft);border-color:var(--ok-line)}.zsold-osszeg{font-weight:700}
.zsold-tortenet{margin:18px 0 0;font-size:.95rem;color:var(--ink-2)}
@media(max-width:600px){.zsold-kincstar{padding:16px}.zsold-nagy{font-size:1.6rem}.zsold-nagy b{font-size:2rem}.zsold-ermek{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.zsold-ermek li{padding:10px 4px;font-size:.85rem}.zsold-ermek .taller{width:36px;height:36px}}
.jelveny-xp{display:inline-block;margin:4px 0 2px;padding:2px 10px;border-radius:99px;background:var(--hl-soft);border:1px solid var(--hl-line);font-weight:700;font-size:.85rem;color:var(--ink)}.zsold-uj{font-weight:600;color:var(--ok)}
@media(max-width:480px){.rang-feltetelek{font-size:.92rem;gap:10px}.rang-kartya{align-items:start}}

.rang-feltetel-magyarazat{display:block;margin-top:6px;max-width:60ch;font-size:.88rem;line-height:1.6;color:var(--ink-2)}

.mentes-nezet .import-mezo{display:block;margin-top:28px}.fuzet-biztonsagi-masolat{margin-top:24px;color:var(--ink-2)}.fuzet-biztonsagi-masolat summary{cursor:pointer;font-size:.92rem}

/* Közös műveletsorok: azonos cellaméret és biztos térköz. */
.fuzet-folytatas{margin-top:24px}
.alkalom-lab,.cp-btns,.jelveny-szuro{gap:12px;align-items:stretch}
.alkalom-lab>.btn,.cp-btns>.btn,.jelveny-szuro>.btn{flex:1 1 160px;margin:0}
.practice .cta>.btn{margin-top:0}.practice .cta{margin-top:12px}
@media(max-width:520px){.cta{grid-auto-flow:row;width:100%}.tudas-sor .cta{width:100%}}
.tool .row:has(>.btn):not(:has(>:not(.btn))){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:12px;align-items:stretch}
.tool .row:has(>.btn):not(:has(>:not(.btn)))>.btn{width:100%;margin:0}
.pager>.btn{flex:1 1 200px}

/* A következő rang a napi indulás mellett is látható. */
.rang-ut{margin:0;padding:18px 0 4px;border-top:1px solid var(--line)}
.rang-ut-fej{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
.rang-ut-cel{display:flex;align-items:center;gap:16px;min-width:0;max-width:100%}
.rang-ut-kep{display:block;flex:0 0 88px;width:88px;height:88px;filter:grayscale(1);opacity:.7}
.rang-ut-kep img{display:block;width:100%;height:100%;object-fit:contain}
.rang-ut-muveletek{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.rang-ut-cim{min-width:0}.rang-ut-cim h2{margin:2px 0 0;font-size:1.3rem;line-height:1.3}
.rang-ut-muveletek .btn{min-height:44px;margin:0;padding:8px 12px;font-size:.9rem}
.rang-ut-lista{list-style:none;padding:0;margin:16px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.rang-ut-lista li{display:flex;gap:8px;align-items:baseline}.rang-ut-lista li>div{flex:1;min-width:0}.rang-ut-lista li:nth-child(n+3){grid-column:1/-1}
.rang-ut-sor{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 12px}
.rang-ut-lista .rang-ut-mester .rang-ut-sor{grid-template-columns:minmax(0,1fr)}
.rang-ut-lista .kesz .rang-pipa{color:var(--ok)}.rang-ut-lista b{font-size:.88rem}.rang-ut-allapot{color:var(--ink-2);font-size:.88rem;font-variant-numeric:tabular-nums}
.rang-ut-megjegyzes{display:block;margin-top:4px;color:var(--ink-2);font-size:.85rem;line-height:1.5}
.rang-ut-lista progress{display:block;width:100%;height:4px;margin-top:8px;border:0;border-radius:8px;overflow:hidden;appearance:none;background:var(--line)}
.rang-ut-lista progress::-webkit-progress-bar{background:var(--line)}.rang-ut-lista progress::-webkit-progress-value{background:var(--pen)}.rang-ut-lista progress::-moz-progress-bar{background:var(--pen)}
.rang-ut-lista .kesz progress::-webkit-progress-value{background:var(--ok)}.rang-ut-lista .kesz progress::-moz-progress-bar{background:var(--ok)}
.rang-ut-lab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 16px;margin-bottom:12px}
.rang-ut-reszletek{flex:1;font-size:.85rem;color:var(--ink-2)}.rang-ut-reszletek[open]{flex-basis:100%}.rang-ut-reszletek summary{display:list-item;width:fit-content;min-height:44px;padding:10px 0;cursor:pointer;color:var(--pen);font-weight:600}
.rang-ut-reszletek p{max-width:65ch;margin:0 0 8px}.rang-ut-reszletek[open]{padding-bottom:8px}.rang-ut-lezart{margin:14px 0;font-size:.9rem;color:var(--ink-2)}
@media(max-width:600px){.rang-ut-cel{gap:12px}.rang-ut-kep{flex-basis:72px;width:72px;height:72px}.rang-ut-lista{grid-template-columns:minmax(0,1fr)}.rang-ut-cim h2{font-size:1.22rem}.rang-ut-lista li{gap:6px}.rang-ut-muveletek .btn{padding-inline:8px}}

/* Tanári magyarázat: egy átalakítás soronként, a kép a példa mellett. */
.tananyag-html > p,.tananyag-html > ul,.tananyag-html > ol{max-width:66ch}
.tan-pelda{max-width:100%;margin:18px 0}
.tan-pelda h3{margin:0 0 16px}
.tan-lepesek{list-style:none;counter-reset:tanlepes;margin:0;padding:0}
.tan-lepesek>li{counter-increment:tanlepes;position:relative;padding:0 0 18px 36px;min-width:0}
.tan-lepesek>li::before{content:counter(tanlepes);position:absolute;left:0;top:1px;color:var(--ink-3);font-family:var(--font-mono);font-size:.85rem}
.tan-lepesek>li+li{padding-top:16px;border-top:1px solid var(--line)}
.tan-lepesek>li+li::before{top:17px}
.tan-lepesek>li:last-child{padding-bottom:0}
.tan-lepesek p{margin:0 0 7px;max-width:66ch}
.tan-keplet{font-size:1.05rem;line-height:1.9;min-width:0}
.tan-keplet mark{background:var(--hl-soft);color:var(--ink);border-radius:3px;padding:2px 3px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-3)}
.tan-lepesek .tan-indok{font-size:.92rem;color:var(--ink-2);margin-top:7px}
.tan-abra{margin:18px 0;background:var(--paper-2);padding:20px;border-radius:var(--r-s);min-width:0}
.tan-abra figcaption{margin-bottom:16px}
.tan-abra>p:last-child{font-size:.94rem;margin:16px 0 0;max-width:66ch}
.tan-savrajz{margin:12px 0}
.tan-savrajz>p{margin:0 0 6px;font-size:.92rem}
.tan-savok{display:grid;gap:8px}
.tan-egesz{display:grid;grid-template-columns:repeat(var(--reszek),minmax(0,1fr));border:1px solid var(--ink-3);min-height:36px}
.tan-resz{display:flex;align-items:center;justify-content:center;background:var(--card);border-right:1px solid var(--ink-3);min-width:0;font-family:var(--font-mono);font-size:.85rem;padding:3px 0}
.tan-resz:last-child{border-right:0}
.tan-resz.kijelolt,.tan-racs .kijelolt{background:var(--hl-soft);color:var(--ink)}
.tan-csoportok{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.tan-csoport{display:grid;grid-template-columns:repeat(2,20px);gap:4px;padding:10px;border:1px solid var(--ink-3);border-radius:12px}
.tan-csoport span,.tan-kulon span{color:var(--ink);font-size:17px;text-align:center}
.tan-kulon{display:flex;gap:8px}
.tan-racs{display:grid;grid-template-columns:repeat(var(--oszlopok),minmax(0,1fr));max-width:240px;aspect-ratio:1;margin:12px auto;border:1px solid var(--ink-3)}
.tan-racs>span{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:grid;place-items:center;font-size:.7rem;background:var(--card)}
.tan-szamsor{display:flex;justify-content:space-between;gap:4px;position:relative;margin:20px 0 10px;font-family:var(--font-mono);font-size:.85rem}
.tan-szamsor::before{content:'';position:absolute;left:5%;right:5%;top:13px;height:1px;background:var(--ink-3)}
.tan-szamsor>div{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.tan-pont{display:block;background:var(--paper-2);font-size:20px;line-height:26px}
.tan-halmaz{border:1px solid var(--ink-3);border-radius:18px;padding:14px;margin-top:12px;background:var(--card)}
.tan-halmaz .tan-halmaz{background:var(--paper)}
.tan-idovonal{display:flex;margin:18px 0;min-height:64px}
.tan-idovonal>div{border:1px solid var(--ink-3);padding:8px;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--paper-2)}
.tan-idovonal small{display:block;color:var(--ink-2)}
.tan-tablazat{width:100%;border-collapse:collapse;margin:12px 0;font-family:var(--font-mono)}
.tan-tablazat th,.tan-tablazat td{border-bottom:1px solid var(--line-2);padding:8px 6px;text-align:center;overflow-wrap:anywhere}
.tan-tablazat th{font-family:var(--font-body);font-size:.85rem;font-weight:500}
@media(max-width:760px){.tan-abra{padding:16px}.tan-lepesek>li{padding-left:28px}.tan-keplet{font-size:1rem}.tan-szamsor{font-size:.75rem}.tan-tablazat th,.tan-tablazat td{padding:6px 3px}}

/* Függőleges ritmus a tartalmi blokkok között: a blokkok saját margója adja a hézagot, a rácsban és a tároló szélein nulla. */
.grid2,.scrollx{margin:18px 0}
.tananyag-html>.tan-pelda+h3{margin-top:24px}
.grid2>*,.split>*>:first-child,.tananyag-html>:first-child,.callout>:first-child,.jex-tartalom>:first-child,.tan-abra>figcaption{margin-top:0}
.grid2>*,.split>*>:last-child,.tananyag-html>:last-child,.callout>:last-child,.jex-tartalom>:last-child{margin-bottom:0}
.jex-tartalom p{margin:0 0 8px}
.bevetes-rang h2{margin:0 0 8px}
.zsold-nagy{margin:2px 0 6px}
.tan-abra svg{display:block;width:100%;max-width:480px;height:auto;margin-inline:auto;font:16px var(--font-body)}
.tan-retegpar{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,2fr);gap:20px;align-items:center;margin:20px 0}
.tan-retegpar p{font-size:.9rem;margin:6px 0}.tan-retegek{display:grid;gap:3px}.tan-retegek>div{border:1px solid var(--line-2);font-size:.75rem;text-align:center;background:var(--pen-soft);padding:2px 4px}.tan-retegek>.kijelolt{background:var(--hl-soft);border-color:var(--ink)}
.tan-helyiertek caption{text-align:left;margin:10px 0;font-family:var(--font-body)}.tan-helyiertek td{text-align:center;font-family:var(--font-mono);font-size:1.15rem}.tan-helyiertek .egyes{background:var(--hl-soft)}
.joker .jex{display:block}.joker .jex>.lab{display:block;margin-bottom:12px}.jex-tartalom{min-width:0}.joker .tan-pelda h3{font-size:1rem}.joker .tan-keplet{font-size:.95rem}
.tan-csomag{border:1px solid var(--ink-3);border-radius:8px;padding:10px;display:flex;flex-wrap:wrap;gap:6px;font-family:var(--font-mono)}
.tan-csomag .doboz{border:1px solid var(--pen);padding:0 4px}.tan-tagok{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.tan-tagok>div{border-bottom:2px solid var(--pen);padding:6px 10px}.tan-tagok small{display:block;font-family:var(--font-body);color:var(--ink-2)}

/* A törtes képleten belüli math-helperek nem kapnak újabb dobozt. */
.tan-keplet .math .math{display:inline;padding:0;border:0;background:none;font:inherit}
.arany-pizzak{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:12px 0}
.arany-pizzak svg{display:block;width:min(100%,180px);flex:0 1 180px;min-width:0}
.arany-tovabb{border-top:1px solid var(--line);padding-top:8px}
.arany-tovabb>summary{display:list-item;cursor:pointer;min-height:44px;padding:10px 0;color:var(--pen);font-weight:600}
.arany-felveteli-pelda{margin-top:28px}
.arany-felveteli-pelda+.arany-felveteli-pelda{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.arany-felveteli-pelda>h3{font-size:1.3rem;line-height:1.3;margin:0 0 14px}
.arany-felveteli-pelda .tan-pelda>h4{font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.4;color:var(--ink-2);margin:24px 0 16px}
.arany-szeletabra{margin:16px 0 20px;padding:16px 12px;background:var(--paper-2);border-radius:var(--r-s)}
.arany-szeletabra table{width:100%;max-width:480px;margin:auto;border-collapse:collapse;table-layout:fixed;text-align:center}
.arany-szeletabra th,.arany-szeletabra td{padding:6px 3px;font-size:.9rem}
.arany-szeletabra th{font-weight:600}.arany-szeletabra tbody tr+tr{border-top:1px solid var(--line)}
.arany-szeletabra tfoot{font-weight:600;border-top:1px solid var(--line-2)}
.arany-szeletabra figcaption{margin:12px auto 0;max-width:60ch;font-size:.9rem;color:var(--ink-2)}
.arany-szeletsor{display:inline-flex;justify-content:center;flex-wrap:wrap;gap:4px;vertical-align:middle}
.arany-szelet{display:inline-block;position:relative;width:23px;height:30px;flex:0 0 23px;background:var(--hl-soft);border-top:5px solid #C99752;border-radius:50% 50% 0 0;clip-path:polygon(0 0,100% 0,50% 100%)}
.arany-szelet::after{content:'';position:absolute;top:4px;left:8px;width:7px;height:7px;background:var(--red);border-radius:50%}
.arany-tobbletsor{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.arany-plusz{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--pen);border-radius:var(--r-s)}
.arany-plusz small{font:500 .75rem var(--font-mono);color:var(--pen)}
.arany-tanyerok,.arany-negyedpizzak{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;text-align:center}
.arany-tanyerok>div{min-width:76px;flex:0 1 120px}.arany-tanyerok b,.arany-negyedpizzak b{font-size:.9rem}
.arany-tanyer{display:grid;place-items:center;width:76px;height:76px;margin:8px auto 0;border:1px solid var(--line-2);border-radius:50%;background:var(--card)}
.arany-negyedpizzak>div{flex:0 1 185px}.arany-negyedpizzak p{margin:6px 0;font-size:.9rem}
.arany-negyedpizza{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:120px;height:120px;margin:10px auto 0;border:7px solid #C99752;border-radius:50%;overflow:hidden;background:var(--line-2)}
.arany-negyed{background:var(--paper)}.arany-negyed.kapott{position:relative;background:var(--hl-soft)}
.arany-negyed.kapott::after{content:'';position:absolute;top:calc(50% - 6px);left:calc(50% - 6px);width:12px;height:12px;background:var(--red);border-radius:50%}
.arany-ujpelda>p{max-width:66ch}
.arany-osztaspelda+.arany-osztaspelda{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-2)}
.arany-osztastanyerok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:center}
.arany-osztastanyerok small{display:block;margin-bottom:6px;color:var(--ink-2)}
.arany-szeletadag{padding:12px 6px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-m)}
.arany-arsav{display:grid;gap:16px}.arany-arsav p{margin:0 0 6px}
.arany-armezok{display:grid;grid-template-columns:repeat(var(--mezok),minmax(0,1fr));gap:3px}
.arany-armezo{display:grid;place-items:center;min-height:42px;font:.75rem var(--font-mono);border:1px dashed var(--line-2);border-radius:3px}
.arany-armezo.fizetett{background:var(--hl-soft);border-style:solid}
.arany-vasarlasrajz{margin:20px 0;padding:16px;background:var(--paper-2);border-radius:var(--r-s)}
.arany-vasarlassor{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.arany-vasarlassor>b{grid-column:2;font-size:.95rem}.arany-vasarlasrajz figcaption{font-size:.9rem;color:var(--ink-2);margin-top:12px}
.arany-egeszpizzak{display:flex;flex-wrap:wrap;gap:5px}.arany-egeszpizza{display:block;width:28px;height:28px;border-radius:50%;background:var(--hl-soft);border:3px solid #C99752;position:relative}
.arany-egeszpizza::after{content:'';position:absolute;width:6px;height:6px;background:var(--red);border-radius:50%;left:8px;top:8px}
.arany-munka-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0}
.arany-munkarajz{margin:0;padding:12px;background:var(--paper-2);border-radius:var(--r-s);min-width:0}.arany-munkarajz figcaption{font-size:.9rem;margin-bottom:14px}
.arany-munkasor{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;align-items:start;margin-top:8px}.arany-munkasor small{font-size:.75rem;color:var(--ink-2)}
.arany-munkanapok{display:flex;flex-wrap:wrap;gap:3px}.arany-munkanap{width:15px;height:18px;background:var(--hl-soft);border:1px solid var(--ink-3);border-radius:2px;flex:0 0 15px}
.arany-munkanap.tort{position:relative;background:var(--card)}.arany-munkanap.tort::before{content:'';display:block;width:var(--kesz);height:100%;background:var(--hl-soft)}
.arany-szazasok{display:flex;flex-wrap:wrap;gap:16px}.arany-szazas{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;width:100%;max-width:240px}
.arany-szazad{aspect-ratio:1;background:var(--card);border:1px solid var(--line-2);text-align:center;font-size:10px;line-height:1.5}.arany-szazad.kijelolt{background:var(--hl)}
.arany-korrajz{display:block;width:100%;max-width:350px;margin:16px auto}
.arany-oldatpar{display:grid;gap:20px;margin:20px 0}.arany-oldatrajz{margin:0;padding:16px;background:var(--paper-2);border-radius:var(--r-s)}
.arany-oldatrajz figcaption{font-size:.95rem;margin-bottom:12px}.arany-oldatmerleg p{font-size:.9rem;margin:8px 0}.arany-oldatmerleg>b{font-size:.9rem}
.arany-oldatsav{height:48px;background:var(--card);border:1px solid var(--ink-3);border-radius:3px;overflow:hidden}.arany-soresz{display:block;height:100%;background:var(--hl)}
.arany-sojel{display:inline-block;width:12px;height:12px;background:var(--hl);border:1px solid var(--line-2);margin-right:5px}
.joker .arany-felveteli-pelda{margin-top:0}.joker .arany-felveteli-pelda>h3{font-size:1rem;line-height:1.4}.joker .arany-felveteli-pelda .tan-pelda>h4{font-size:.94rem}
@media(max-width:600px){.arany-munka-par{grid-template-columns:minmax(0,1fr)}}

.tan-resz .frac{font-size:.75rem}.tan-resz{overflow-wrap:anywhere}

/* Szögek: pontos, feliratozott füzetrajzok és alárendelt levezetések. */
.sz-rajz{display:block;width:100%;height:auto;max-width:420px;margin:0 auto;font-family:var(--font-mono);overflow:hidden}
.tg-rajz{display:block;width:100%;height:auto;max-width:420px;margin:0 auto;font-family:var(--font-mono);overflow:hidden}
.tg-rajz.tg-szeles{max-width:460px}
/* Az eszközök gombsora és mezősora: a mezők egymás mellé kerülnek, ha van hely, különben egymás alá. */
.ns-gombsor,.tg-gombsor{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ns-mezosor,.tg-mezosor{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px 16px;align-items:end}
.ns-eredmeny,.tg-eredmeny{margin:10px 0;font-size:1.02rem}
.tg-szamolas{margin-top:12px}
.tg-szamolas p{margin:6px 0}
.ns-rajz{display:block;width:100%;height:auto;max-width:420px;margin:0 auto;font-family:var(--font-mono);overflow:hidden}
/* A halmazábra hat egymásba ágyazott feliratot visz: 600 px alatt a felirat olvashatatlanná zsugorodna,
   ezért itt inkább vízszintesen görgethető marad, ahogy a széles táblázatok. */
.ns-halmaz{max-width:680px;min-width:600px}
.ns-halmazdoboz{overflow-x:auto;padding-bottom:4px}
.ns-halmazdoboz figure{margin:0}
.sz-abra,.sz-kerdesabra,.ns-abra,.ns-kerdesabra,.tg-abra,.tg-kerdesabra{margin:16px 0;background:var(--paper);padding:12px;border-radius:var(--r-s)}
.sz-abra figcaption,.sz-kerdesabra figcaption,.ns-abra figcaption,.ns-kerdesabra figcaption,.tg-abra figcaption,.tg-kerdesabra figcaption{font-size:.88rem;color:var(--ink-2);line-height:1.5;margin-top:8px}
.sz-kerdesabra,.ns-kerdesabra,.tg-kerdesabra{max-width:400px}
.sz-mezo,.ns-mezo,.tg-mezo{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%;margin-bottom:12px;font-size:.88rem;color:var(--ink-2)}
.sz-mezo input,.sz-mezo select,.ns-mezo input,.tg-mezo input{min-height:44px;max-width:100%;width:100%}
.sz-mezo input[type=range],.ns-mezo input[type=range],.tg-mezo input[type=range]{padding:0}
.sz-valtozatok{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;align-items:start;margin:18px 0}
.sz-pelda,.ns-pelda,.tg-pelda{margin:28px 0 0;max-width:760px}
.sz-pelda+.sz-pelda,.ns-pelda+.ns-pelda,.tg-pelda+.tg-pelda{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.sz-pelda>h3,.ns-pelda>h3,.tg-pelda>h3{font-size:1.3rem;line-height:1.35;margin-bottom:16px}
.sz-pelda .tan-pelda h4{font-family:var(--font-body);font-size:1rem;color:var(--ink-2);margin:24px 0 16px}
.sz-tovabbi{margin:24px 0}
.sz-tovabbi>summary{padding:12px 0;cursor:pointer;color:var(--pen);font-weight:600;min-height:44px}

.sz-jokerkerdes,.ns-jokerkerdes,.tg-jokerkerdes{font-size:1.05rem;line-height:1.5;margin-bottom:16px}
.sz-jokerkerdes~.tan-pelda h4{font-family:var(--font-body);font-size:.9rem;color:var(--ink-2);margin:18px 0 12px}

/* Szöveges feladatok: egy helyzet, saját táblázat és megmaradó számolási lépések. */
.szv-rajz{display:block;width:100%;max-width:420px;height:auto;margin:10px auto}
.szv-mezo{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-weight:600}
.szv-mezo input,.szv-mezo select{width:100%;min-width:0;min-height:44px}
.szv-mezo select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px}
.szv-tablazat{overflow-x:auto;margin:12px 0}
.szv-tablazat .table{width:100%;font-size:.94rem}
.szv-tablazat th,.szv-tablazat td{padding:8px;text-align:left}
.szv-gombok{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.szv-gombok button{min-height:44px}
.szv-tovabb{margin:16px 0;border-top:1px solid var(--line);padding-top:12px}
.szv-tovabb summary{cursor:pointer;min-height:44px;font-weight:600;color:var(--pen)}

/* 0.5: az öt építőkő egyszerre áttekinthető, a magyarázat kérésre nyílik. */
.terkep-kovek{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.terkep-kovek button{min-width:0;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card)}
.terkep-kovek button{padding:16px 12px;cursor:pointer;text-align:left;color:var(--pen);min-height:44px}
.terkep-kovek button b,.terkep-kovek button .muted{display:block}
.terkep-kovek button .muted{font-size:.8rem;margin-top:4px}
.terkep-kovek button .muted::after{content:' ＋'}
.terkep-kovek button[aria-expanded="true"]{background:var(--pen-soft)}
.terkep-kovek button[aria-expanded="true"] .muted::after{content:' −'}
.terkep-jelek{display:block;font:500 1.1rem/1.5 var(--font-mono);min-height:2.5em;overflow-wrap:anywhere}
.terkep-reszlet{padding:20px 4px 0;max-width:66ch}
.terkep-reszlet p:last-child{margin-bottom:0}
@media(max-width:900px){.terkep-kovek{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.terkep-kovek{grid-template-columns:minmax(0,1fr)}.terkep-jelek{min-height:0;margin-bottom:4px}.terkep-kovek button{padding:12px 16px}.terkep-reszlet{padding:16px}}

/* Koordinátaábrák: a rács és az olvasható tengelyfeliratok egy egység. */
.ko-rajz{display:block;width:100%;height:auto;max-width:460px;margin:0 auto;font-family:var(--font-mono)}
.ko-abra{margin:16px 0}.ko-abra figcaption{font-size:.9rem;color:var(--ink-2);margin-top:10px;max-width:66ch}
.ko-mezok{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}.ko-mezo{display:flex;flex:1 1 120px;flex-direction:column;gap:5px;min-width:0;font-size:.9rem}.ko-mezo input,.ko-mezo select{width:100%;min-height:44px;box-sizing:border-box}
.ko-magyarazat p{margin:12px 0}.ko-magyarazat p:last-child{margin-bottom:0}.ko-nezet{min-width:0}

/* A tényleges zsoldfizetések, a kincstár alatt. */
.zsold-egyenleg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 28px}
.zsold-egyenleg dt{color:var(--ink-2);font-size:.88rem}.zsold-egyenleg dd{margin:6px 0 0;font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.zsold-fizetes-form{display:flex;align-items:end;flex-wrap:wrap;gap:16px}.zsold-fizetes-form>div{flex:1;min-width:160px}
.zsold-fizetes-form label{display:block;margin-bottom:6px;font-weight:600}.zsold-fizetes-form input{width:100%;min-width:0;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);color:var(--ink);font:inherit}
.zsold-fizetes-form button{min-height:48px}.zsold-fizetes-allapot{min-height:1.5em;margin:12px 0 20px}
.zsold-fizetes-form>.zsold-urlap-gombok{flex:0 1 auto;min-width:0}
.zsold-fizetes-lista{list-style:none;margin:0;padding:0}.zsold-fizetes-lista li{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.zsold-fizetes-adatok{display:flex;flex:1 1 260px;justify-content:space-between;align-items:baseline;gap:16px}
.zsold-torles{flex-basis:100%;padding:12px 0}.zsold-torles[hidden]{display:none}
.zsold-urlap-gombok>button[hidden]{display:none}
@media(max-width:600px){.zsold-egyenleg{grid-template-columns:1fr;gap:12px}.zsold-egyenleg>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.zsold-egyenleg dd{font-size:1.1rem}.zsold-fizetes-form>div{flex-basis:100%}.zsold-fizetes-form button{width:100%}}

/* A ranghoz járó zsold érmés jutalomjelzése és az utolsó lépés indítása. */
.rang-zsold{display:flex;align-items:center;gap:14px;margin:18px 0 10px;color:var(--ink)}
.rang-zsold-ikon{flex:0 0 60px;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--hl-soft);box-shadow:0 0 0 1px var(--hl-line)}
.rang-zsold>div{min-width:0}.rang-zsold .kicker{display:block;margin:0 0 3px;font-size:.72rem}
.rang-zsold-ertek{display:block;font-size:1.3rem;line-height:1.25}.rang-zsold p{margin:5px 0 0;color:var(--ink-2);font-size:.88rem;max-width:60ch}
.rang-bevetes-kapu{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.rang-bevetes-kapu h2{margin:4px 0 6px}.rang-bevetes-kapu p{margin:0 0 12px}.rang-bevetes-kapu .btn{min-height:48px}
@media(max-width:600px){.rang-zsold{gap:10px}.rang-zsold-ikon{flex-basis:50px;width:50px;height:50px}.rang-zsold-ikon .taller{width:38px;height:38px}.rang-zsold-ertek{font-size:1.15rem}.rang-bevetes-kapu .btn{width:100%;white-space:normal}}

/* A napi és ranglépési rész, valamint az alsó navigáció közös függőleges ritmusa. */
.bevetes-kezdo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.bevetes-kezdo>*{margin:0;min-width:0}
.bevetes-kezdo>.bevetes-fej{margin-bottom:8px}.bevetes-kezdo>.bevetes-fej .lead{margin:8px 0 0}
.bevetes-kezdo>.btn{justify-self:start}
.bevetes-napi-bevezeto{display:grid;gap:8px}.bevetes-napi-bevezeto p{margin:0}
.bevetes-kezdo>.rang-bevetes-kapu{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:8px;padding-top:24px}
.bevetes-kezdo>.rang-bevetes-kapu>div{display:grid;gap:8px;min-width:0}
.bevetes-kezdo>.rang-bevetes-kapu h2,.bevetes-kezdo>.rang-bevetes-kapu p{margin:0}
.bevetes-kezdo>.rang-bevetes-kapu>.btn{justify-self:start}
@media(min-width:601px){.bevetes-kezdo>.rang-bevetes-kapu>.btn{width:auto}}


/* Közös térközrendszer: oldalfolyam, olvasási ritmus és vezérlősorok. */
.ui-flow,.tool-body,.practice .pbody,.practice .summary{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--terkoz-tartalom)}
.ui-flow>*,.tanulas-oldal.ui-flow>*,.tool .tool-body>*,.practice .pbody>*,.practice .summary>*{min-width:0;margin-block:0}
.ui-flow>:is(.btn,a),.tool-body>:is(.btn,.seg),.practice .pbody>.btn{justify-self:start}
.practice .summary>.btn,.practice .summary>.cta{justify-self:center}
.ui-flow>.import-elonezet:empty,.ui-flow>[role=status]:empty,.tool-body>.step-note:empty{display:none}
.ui-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--terkoz-gomb)}
.ui-actions>.btn{margin:0;max-width:100%}
.cta,.stepper,.tool .row,.levels,.ansrow,.opts,.order-list,.order-out,.ns-gombsor,.tg-gombsor,.szv-gombok{gap:var(--terkoz-gomb)}
.cta>.btn,.ui-actions>.btn{white-space:normal;overflow-wrap:anywhere}
/* Az összetartozó szöveget nem érintheti a címsorok globális margó-resetje. */
:is(.prose,.tananyag-html,.callout,.callout>div,.tool-body>div,.fuzet-szakasz,.fuzet-rang>div,.import-mezo,.import-elonezet,.cp-body,.empty)>:is(h2,h3,h4)+:is(p,div,ul,ol,form,details){margin-top:var(--terkoz-cim)}
:is(.prose,.tananyag-html,.callout>div)>:is(h2,h3,h4):not(:first-child){margin-top:var(--terkoz-szakasz)}
:is(.prose,.tananyag-html,.callout>div)>:last-child{margin-bottom:0}
:is(.prose,.tananyag-html,.callout>div)>:is(ul,ol){margin-block:var(--terkoz-gomb);padding-left:1.4em}
.prose li+li,.tananyag-html li+li{margin-top:8px}
/* Minden leckén és modulzárón a jutalomblokk és a gyakorlás is saját helyet kap. */
.lesson>.wrap>div[role=status]:not(:empty){margin-bottom:var(--terkoz-szakasz)}
.practice .task>p,.practice .task>.mentesi-hiba{margin:0}
.practice .task>.btn{justify-self:start}
.practice .summary .cta{margin-top:8px}
.mentes-nezet .import-mezo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--terkoz-tartalom)}
.mentes-nezet .import-mezo>*{margin:0}.mentes-nezet .import-mezo>.btn{justify-self:start}
.fuzet-biztonsagi-masolat[open]>summary{margin-bottom:var(--terkoz-gomb)}
.fuzet-biztonsagi-masolat p{margin-bottom:var(--terkoz-tartalom)}
.rang-bevetes-kapu+.btn{margin-top:var(--terkoz-tartalom)}
.bevetes-kezdo>.rang-bevetes-kapu+.btn{margin-top:0}
/* A bevetés aktív feladat- és visszajelző nézetei is levegős blokkfolyamok. */
.bevetes:not(.bevetes-kezdo)>.callout{margin-bottom:var(--terkoz-tartalom)}
.bevetes:not(.bevetes-kezdo)>.btn{margin-block:8px}
.bevetes-kerdes>.btn+p,.bevetes-kerdes>.btn+.callout{margin-top:var(--terkoz-tartalom)}
/* A segítő fejléce keskeny képernyőn két sorba fér, zsúfolt ikonok helyett. */
.cp-head{flex-wrap:wrap;row-gap:12px}.cp-actions{margin-left:auto}
.cp-field{gap:8px}.cp-field+.cp-field{margin-top:4px}
.cp-body>.btn{align-self:flex-start}.cp-body>h3+p{margin-top:0}
@media(max-width:520px){.ui-actions{align-items:stretch}.ui-actions>.btn{flex:1 1 180px}.tool .row>.wide{min-width:0;flex-basis:100%}.cp-inrow{flex-wrap:wrap}.cp-inrow>input{flex-basis:180px}.opts{grid-template-columns:minmax(0,1fr)}}

/* A lezárt gyakorlókör minden válasza visszanézhető a pontszám alatt. */
.gyakorlas-javitas{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;text-align:left}
.gyakorlas-javitas>h3,.gyakorlas-javitas>p{margin:0}
.javitas-tartalom{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding-top:12px;overflow-wrap:anywhere}
.javitas-tartalom>p,.javitas-tartalom .exp>:last-child{margin:0}

/* Statisztika: a rajz, a vezérlés és a levezetés közös füzetfelülete. */
.st-rajz{display:block;width:100%;height:auto;max-width:460px;margin-inline:auto;font-family:var(--font-mono)}
.st-abra{margin:var(--terkoz-tartalom) 0}
.st-abra figcaption{font-size:.9rem;color:var(--ink-2);margin-top:var(--terkoz-cim)}
.st-mezok{display:flex;flex-wrap:wrap;gap:var(--terkoz-tartalom)}
.st-mezo{display:flex;flex:1;min-width:0;flex-direction:column;gap:var(--terkoz-cim);font-size:.9rem}
.st-mezo input,.st-mezo select{width:100%;min-width:0;min-height:44px}
.st-nezet,.st-magyarazat,.st-gombok{margin-top:var(--terkoz-tartalom)}
.st-gombok{display:flex;flex-wrap:wrap;gap:var(--terkoz-gomb)}
.st-adatsor,.st-golyok{display:flex;flex-wrap:wrap;gap:var(--terkoz-cim)}
.st-adat{padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-s);font-family:var(--font-mono)}
.st-kozep{background:var(--hl-soft);border-color:var(--hl-line);font-weight:600}
.st-golyo{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid currentColor;font-weight:600}
.st-golyo.piros{background:var(--red-soft);color:var(--red)}
.st-golyo.kek{background:var(--pen-soft);color:var(--pen)}
@media(max-width:480px){.st-mezok{flex-direction:column}.st-rajz{max-width:100%}}

.st-reszhalmaz-lista{display:flex;flex-wrap:wrap;gap:8px 12px}
.st-reszhalmaz-lista .math{white-space:nowrap}

/* Az időmérés állapota olvasás közben is látható, rövid és nem takarja a leckét. */
.olvasas-allapot { position:sticky; top:68px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:8px 12px; margin:0 0 20px; background:var(--paper); border:1px solid var(--line); border-radius:8px; color:var(--ink-2); font-size:.82rem; }
.olvasas-allapot .btn { min-height:44px; }
.olvasas-allapot [hidden] { display:none; }
.olvasas-mentesi-hiba { position:fixed; bottom:12px; left:12px; right:12px; z-index:80; margin:0 auto; padding:12px 16px; max-width:640px; border:1px solid var(--line-2); border-radius:8px; background:var(--hl-soft); color:var(--ink); font-size:.9rem; }
/* Szóbontó (5. modul): a szóelemek blokkokban, a fajta a blokk alatt felirattal is (nem csak színnel) */
.szb .szb-cim{margin:0 0 10px}
.szb .szb-sor{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.szb .szb-elem{display:flex;flex-direction:column;align-items:center;min-width:3.4em;padding:8px 10px 6px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card)}
.szb .szb-betu{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--ink);line-height:1.2}
.szb .szb-nev{font-size:.78rem;color:var(--ink-2);margin-top:2px;white-space:nowrap}
.szb .szb-to{border-color:var(--pen-line);background:var(--pen-soft)}
.szb .szb-kepzo{border-color:var(--hl-line);background:var(--hl-soft)}
.szb .szb-jel{border-color:var(--ok-line);background:var(--ok-soft)}
.szb .szb-rag{border-color:var(--ink-3);background:var(--paper-2)}
.szb .szb-elem.rejtett{border-style:dashed;background:var(--card)}
.szb .szb-elem.rejtett .szb-nev{color:var(--ink-3)}
.szb .szb-magyar{margin:12px 0 0;color:var(--ink-2);min-height:2.9em}
.szb .szb-keplet{margin:4px 0 10px;font-weight:600;min-height:1.5em}
/* Mondatfestő (6. modul): a szófaj a szó alatt felirattal, a szín csak a nagy csoportot jelzi */
.szm .szm-sor{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.szm .szm-szo{display:flex;flex-direction:column;align-items:center;min-width:3em;padding:7px 9px 5px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card);font:inherit;color:var(--ink);cursor:pointer}
.szm .szm-szo:focus-visible{outline:none;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.szm .szm-betu{font-size:1.1rem;font-weight:600;line-height:1.25}
.szm .szm-nev{font-size:.74rem;color:var(--ink-2);margin-top:2px;white-space:nowrap}
.szm .szm-szo.rejtett{border-style:dashed}
.szm .szm-szo.rejtett .szm-nev{color:var(--ink-3)}
.szm .szm-alap{border-color:var(--pen-line);background:var(--pen-soft)}
.szm .szm-igenev{border-color:var(--hl-line);background:var(--hl-soft)}
.szm .szm-viszony{border-color:var(--ok-line);background:var(--ok-soft)}
.szm .szm-mondat{border-color:var(--ink-3);background:var(--paper-2)}
.szm .szm-magyar{margin:12px 0 10px;color:var(--ink-2);min-height:2.9em}
.szm .szm-jel{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;font-size:.8rem;color:var(--ink-2)}
.szm .szm-folt{border:1px solid var(--line-2);border-radius:99px;padding:1px 9px}
/* Fordulattár (1.4 lecke): kártya helyenként, a ★ jelű fordulat kiemelve, a „…” a téma helye */
.ft-racs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:14px;margin:14px 0 18px}
.ft-kartya{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);padding:14px 16px;box-shadow:var(--shadow-s)}
.ft-kartya h4{margin:0 0 6px;font-family:var(--font-display);font-size:1.02rem;display:flex;align-items:center;gap:8px}
.ft-szam{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;border-radius:99px;background:var(--pen-soft);border:1px solid var(--pen-line);color:var(--pen-dark);font-size:.85rem}
.ft-mire{margin:0 0 10px;color:var(--ink-2);font-size:.93rem;line-height:1.5}
.ft-lista{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.ft-lista li{padding:6px 10px;border-radius:var(--r-s);background:var(--paper-2);border:1px solid var(--line);font-weight:600;line-height:1.4}
.ft-lista li.ajanlott{background:var(--hl-soft);border-color:var(--hl-line)}
.ft-csillag{color:var(--ink)}
.ft-res{color:var(--ink-3);font-weight:400}
.ft-pelda{margin:0;font-size:.93rem;line-height:1.55;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:8px}
.ft-pelda-cim{font-weight:600;color:var(--ink)}
.ft-pelda b{color:var(--ink)}
.ft-vaz{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);padding:14px 16px}
.ft-vaz h4{margin:0 0 4px;font-family:var(--font-display)}
.ft-vaz ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px;line-height:1.5}
.ft-vaz ol li.ft-uj{margin-top:8px;padding-top:10px;border-top:1px dashed var(--line-2)}
.ft-vaz ol li.ft-uj::before{content:'új bekezdés';display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.ft-ide{color:var(--ink-3);font-style:italic}

/* A puska a meglévő papír, toll és kiemelő tokeneket használja. */
.puska-fej{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
.puska-fej h1{margin:0 0 4px;font-size:2.3rem}.puska-fej p{margin:0}
.puska-mezo{display:grid;gap:6px;min-width:0}.puska-mezo label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.puska-mezo select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-s);min-height:44px;padding:8px 34px 8px 12px;width:100%;max-width:100%;cursor:pointer}
.puska-fej .puska-mezo{width:360px;max-width:100%}
.puska-leckek{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.puska-leckek a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card);color:var(--ink-2);text-decoration:none;font-size:.85rem;font-weight:600;cursor:pointer}
.puska-leckek a:hover,.puska-leckek a.on{background:var(--pen-soft);color:var(--pen);border-color:var(--pen-line)}
.puska-mobilvalaszto{display:none;margin-bottom:20px}
.puska-racs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px}
.puska-racs.egy{grid-template-columns:minmax(0,1fr)}
.puska-lap{padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);min-width:0}
.puska-lap h2{display:flex;align-items:baseline;gap:10px;font-size:1.3rem;margin:0 0 14px}
.puska-sorszam{color:var(--ink-2);font-size:.85rem;white-space:nowrap}
.puska-tetel{border-top:1px solid var(--line);padding:12px 0}.puska-tetel:first-of-type{border-top:0;padding-top:0}
.puska-tetel p{margin:0}.puska-helyzet{margin:5px 0 0;color:var(--ink-2)}
.puska-tetel .puska-helyzet{margin-top:5px}.puska-pelda{margin-top:7px;padding:8px 10px;background:var(--paper);border-radius:5px}
.puska-matek{font-family:var(--font-mono);font-weight:500;font-size:.94rem;line-height:1.9;overflow-wrap:anywhere}
.puska-egyenlet{display:flex;flex-wrap:wrap;gap:5px 7px;align-items:center}.puska-tag{display:inline-flex;gap:5px;align-items:center;max-width:100%;flex-wrap:wrap}
.puska-lap .frac{white-space:nowrap;vertical-align:middle}.puska-lap .frac>span{padding:1px 4px}
.puska-figyelem{color:var(--red);font-size:.9rem;margin:8px 0 0}
.puska-leckelink{display:inline-flex;align-items:center;min-height:44px;font-size:.85rem;margin-top:12px}
.puska-irasok{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:start}
.puska-iras{display:inline-grid;font-family:var(--font-mono);font-size:1.1rem;line-height:1.6;margin:4px 0}
.puska-iras-sor{display:grid;text-align:center}.puska-iras-sor>span{white-space:pre}
.puska-iras-sor:last-child{border-top:1px solid var(--ink);padding-top:3px;margin-top:2px}
.puska-potolt{background:var(--hl-soft);border-radius:2px}
.puska-osztolista{display:inline-block;white-space:pre}
.puska-tetel .gfigure{max-width:320px;margin:10px 0}
.puska-attekintes{grid-column:1/-1;background:var(--hl-soft)}.puska-attekintes>p{margin:0}
.puska-attekintes>.puska-helyzet{margin-top:8px}
.puska-kapcsolatok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0}
.puska-kapcsolatok>.puska-tetel{padding:0;border:0}
@media(max-width:760px){
 .puska-fej{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:14px}.puska-fej .puska-mezo{width:100%}
 .puska-racs,.puska-kapcsolatok{grid-template-columns:minmax(0,1fr)}.puska-leckek{display:none}.puska-mobilvalaszto{display:grid}
 .puska-kapcsolatok>.puska-tetel+.puska-tetel{border-top:1px solid var(--line);padding-top:12px}
 .top>.wrap{flex-wrap:wrap}.top>.wrap>nav{display:flex!important;order:5;flex-basis:100%;gap:8px!important;padding:4px 0 6px;border-top:1px solid var(--line)}
 .top>.wrap>nav a{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:440px){.puska-lap{padding:16px}.puska-oldal{padding-inline:16px}}

/* A fejléc jobb széle minden törésponton a naplóé. */
.fejlec-naplo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:var(--r-m);background:transparent;color:var(--ink-2)}
.fejlec-naplo:hover,.fejlec-naplo[aria-current=page]{background:var(--pen-soft);color:var(--pen)}
.naplo-oldal{max-width:1040px}.naplo-oldal p{margin:0}.naplo-cim{display:grid;gap:12px;margin-bottom:32px}
.naplo-vezerlok,.naplo-szurok{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:24px 0}.naplo-idoszak{font-size:1rem}.naplo-vezerlok .btn{min-width:44px;padding-inline:14px}
.naplo-kapcsolo{display:inline-flex;align-self:center;gap:4px;padding:4px;background:var(--paper-2);border-radius:var(--r-m)}
.naplo-kapcsolo button{min-height:44px;padding:8px 14px;border:0;border-radius:var(--r-s);color:var(--ink-2);background:transparent;font-weight:600}
.naplo-kapcsolo button[aria-pressed=true]{background:var(--card);color:var(--pen);box-shadow:var(--shadow-s)}
.naplo-szurok label{display:grid;gap:4px;flex:1;min-width:170px}.naplo-szurok label>span{font-size:.8rem;color:var(--ink-2)}.naplo-szurok select{width:100%;min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-s);padding:8px;background:var(--card);color:var(--ink)}
.naplo-diagram{padding:24px 0;border-block:1px solid var(--line)}.naplo-diagram-fej{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:16px;font-size:.9rem}
.naplo-het{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-block:12px}
.naplo-nap{display:grid;grid-template-rows:auto auto 120px 30px;align-items:center;gap:8px;min-width:0;padding:12px 8px;border:1px solid transparent;border-radius:var(--r-m);background:transparent;color:var(--ink);font-size:.85rem}
.naplo-nap:hover{background:var(--paper-2)}.naplo-nap.kivalasztott{background:var(--pen-soft);border-color:var(--pen-line)}.naplo-nap:disabled{opacity:.45;cursor:default}.naplo-nap-cim{grid-row:4;font-size:.85rem}.naplo-nap-ertek{grid-row:1;font-weight:600}.naplo-oszlop{grid-row:3;display:flex;flex-direction:column-reverse;justify-content:flex-start;align-self:stretch;max-width:44px;width:100%;justify-self:center;border-bottom:1px solid var(--line-2)}
.naplo-oszlop i{display:block;height:var(--resz);background:var(--szin);flex:none}.naplo-nap-konyv{grid-row:2;display:flex;justify-content:center;align-items:center;gap:4px;min-height:24px;color:var(--pen);font-size:.7rem}.naplo-konyv{display:inline-flex;flex:none}
.naplo-jelmagyarazat{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:.82rem;color:var(--ink-2)}.naplo-jelmagyarazat>span{display:inline-flex;gap:8px;align-items:center}.naplo-jelmagyarazat i{width:10px;height:10px;border-radius:2px}
.naplo-zar,.naplo-hiany{padding:16px;background:var(--hl-soft);border-radius:var(--r-s);color:var(--ink-2);font-size:.92rem}.naplo-zar{margin-top:24px!important}.naplo-napi{margin-top:32px}.naplo-napi-osszeg{margin:12px 0 8px!important;color:var(--ink-2)}.naplo-napi-magyarazat{max-width:70ch;margin-bottom:8px!important;font-size:.9rem;line-height:1.5}
.naplo-csoportcim{margin:28px 0 16px}.naplo-modul{margin-block:24px}.naplo-modul>h4{margin-bottom:8px;color:var(--ink-2)}.naplo-regi-magyarazat{max-width:70ch;margin-bottom:12px!important;line-height:1.5}
.naplo-reszlet{border-bottom:1px solid var(--line);min-width:0}.naplo-reszlet summary{cursor:pointer;min-height:56px;padding:16px 8px;line-height:1.5}.naplo-reszlet summary small{display:block;margin-top:4px;font-size:.86rem;color:var(--ink-2)}.naplo-reszlet summary>span{display:inline-block;max-width:calc(100% - 24px);vertical-align:top}.naplo-lenyilo{padding:0 16px 20px}.naplo-reszlet[open]>summary{color:var(--pen)}
.naplo-javitas{padding:20px;margin:16px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);display:grid;gap:16px;overflow-wrap:anywhere}.naplo-javitas .exp{border-top:1px solid var(--line);padding-top:16px}.naplo-javitas svg,.naplo-abra svg{max-width:100%;height:auto}.naplo-abra{color:var(--pen);max-width:440px}
.naplo-ures{padding:32px 16px;background:var(--paper-2);border-radius:var(--r-m);color:var(--ink-2)}.naplo-modszer{max-width:70ch;margin:0 0 20px;font-size:.9rem;color:var(--ink-2)}.naplo-modszer summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;color:var(--pen);font-weight:600}.naplo-modszer[open]{padding-bottom:12px;border-bottom:1px solid var(--line)}.naplo-modszer p{line-height:1.5}.naplo-modszer p+p{margin-top:12px}
@media(max-width:850px){.top>.wrap{flex-wrap:wrap}.top .xp{margin-left:auto}.top-spacer{display:none}.top #brand-name{display:none}}
@media(max-width:600px){.naplo-oldal{padding-inline:16px}.naplo-vezerlok>.ui-actions{display:grid;grid-template-columns:44px minmax(0,1fr) 44px auto;align-items:center;gap:4px;width:100%}.naplo-vezerlok .btn{padding-inline:8px}.naplo-idoszak{text-align:center}.naplo-szurok{align-items:stretch}.naplo-szurok>.naplo-kapcsolo{flex-basis:100%;justify-content:center}.naplo-szurok label{min-width:0;flex-basis:100%}.naplo-het{grid-template-columns:1fr;gap:4px}.naplo-het+.naplo-het{padding-top:12px;border-top:1px solid var(--line)}.naplo-nap{grid-template-columns:70px minmax(0,1fr) 40px;grid-template-rows:auto auto;gap:4px 12px;padding:10px 8px;min-height:64px}.naplo-nap-cim{grid-column:1;grid-row:1/3}.naplo-nap-ertek{grid-column:3;grid-row:1/3}.naplo-oszlop{grid-column:2;grid-row:1;height:18px;max-width:none;border-bottom:0;flex-direction:row;border-radius:3px;overflow:hidden;align-self:end}.naplo-oszlop i{height:100%;width:var(--resz)}.naplo-nap-konyv{grid-column:2;grid-row:2;justify-content:start;min-height:18px}.naplo-lenyilo{padding-inline:4px}.naplo-javitas{padding:16px}.naplo-cim{margin-bottom:24px}.naplo-idoszak{font-size:.85rem}}
@media(max-width:480px){.top .brand{order:0}.top .fejlec-kezdolap{order:1}.top nav{order:2;flex:1}.top .xp{order:3;flex:1;justify-content:flex-end;margin-left:0}.top .fejlec-naplo{order:4}.top>.wrap{gap:4px}.top nav a{padding-inline:8px}.top .xp{min-width:210px}}
@media(max-width:480px){
 .top>.wrap{display:grid;grid-template-columns:44px 44px minmax(0,1fr) 44px;gap:4px;padding-block:4px}
 .top>.wrap>.brand{grid-column:1;grid-row:1}.top>.wrap>.fejlec-kezdolap{grid-column:2;grid-row:1}
 .top>.wrap>nav{grid-column:3;grid-row:1;order:2;flex-basis:auto;padding:0;border:0;gap:2px!important;justify-content:center}
 .top>.wrap>nav a{padding:4px;font-size:.8rem}
 .top>.wrap>.xp{grid-column:1/-1;grid-row:2;min-width:0;justify-content:flex-end;border-top:1px solid var(--line);padding-top:4px}
 .top>.wrap>.fejlec-naplo{grid-column:4;grid-row:1;justify-self:end}
}