@import url("vendor/nunito/nunito.css");

:root {
  --zold: #1e6b5a;
  --zold-sotet: #0f3d33;
  --zold-halvany: #e3f1ec;
  --sarga: #f5b83d;
  --korall: #e8664f;
  --tinta: #1b2420;
  --papir: #f6f4ee;
  --kartya: #ffffff;
  --halvany: #5c6863;
  --vonal: #e1e4dc;
  --fo: var(--zold);
  --fo-szoveg: #ffffff;
  --fo-halvany: var(--zold-halvany);
  --jo: #1c7c3e;
  --jo-bg: #e5f5ea;
  --rossz: #b3261e;
  --rossz-bg: #fbe9e7;
  --fv: #2f6b1f;
  --fv-bg: #eaf4e2;
  --sz1: #2e7d32; --sz2: #b26a00; --sz3: #8e2a6e;
  --arnyek: 0 1px 2px rgba(15, 61, 51, .06), 0 4px 16px rgba(15, 61, 51, .06);
  --cimbetu: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papir: #121614; --kartya: #1b201e; --tinta: #e6ebe8; --halvany: #9aa7a1; --vonal: #2d3532;
    --fo: #5cc3a6; --fo-szoveg: #0d1f1a; --fo-halvany: #1e322c;
    --jo: #7bd88f; --jo-bg: #1b3022; --rossz: #ff8a80; --rossz-bg: #3a1f1d; --fv: #a5d98a; --fv-bg: #22301b;
    --sz1: #7bd88f; --sz2: #ffb74d; --sz3: #f48fb1; --arnyek: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papir: #121614; --kartya: #1b201e; --tinta: #e6ebe8; --halvany: #9aa7a1; --vonal: #2d3532;
  --fo: #5cc3a6; --fo-szoveg: #0d1f1a; --fo-halvany: #1e322c;
  --jo: #7bd88f; --jo-bg: #1b3022; --rossz: #ff8a80; --rossz-bg: #3a1f1d; --fv: #a5d98a; --fv-bg: #22301b;
  --sz1: #7bd88f; --sz2: #ffb74d; --sz3: #f48fb1; --arnyek: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--papir); color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .logo, .evf-szam, .tk-cim { font-family: var(--cimbetu); }
a { color: var(--fo); }
button { font: inherit; cursor: pointer; }
main:focus { outline: none; }
.halvany { color: var(--halvany); }

/* ---------- Fejléc ---------- */
.fejlec {
  position: sticky; top: 0; z-index: 10;
  background: var(--zold-sotet); color: #fff;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
}
.fejlec-belso { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1600px; margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.2rem; }
.logo-jel { width: 30px; height: 30px; border-radius: 9px; display: inline-block; overflow: hidden; }
.logo-jel svg { display: block; width: 100%; height: 100%; }

/* ---------- Animált ikon: a pötty felugrál a lépcsőn, a csúcson koronává válik ---------- */
.ikon-potty { transform-box: fill-box; transform-origin: center; animation: ikon-potty 2.8s ease-in-out infinite; }
.ikon-korona { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; transform: scale(.3); animation: ikon-korona 2.8s ease-in-out infinite; }
@keyframes ikon-potty {
  0%   { transform: translate(0, 0) scale(1); }
  6%   { transform: translate(0, 0) scale(1.15, .85); }
  14%  { transform: translate(3.3px, -8px) scale(.95, 1.08); }
  22%  { transform: translate(6.5px, -5.5px) scale(1); }
  27%  { transform: translate(6.5px, -5.5px) scale(1.15, .85); }
  35%  { transform: translate(9.9px, -13.5px) scale(.95, 1.08); }
  43%  { transform: translate(13.25px, -11px) scale(1); }
  50%  { transform: translate(13.25px, -11px) scale(1.2); }
  56%  { transform: translate(13.25px, -11px) scale(0); }
  90%  { transform: translate(13.25px, -11px) scale(0); }
  91%  { transform: translate(0, 0) scale(0); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes ikon-korona {
  0%, 50% { opacity: 0; transform: scale(.3); }
  58%  { opacity: 1; transform: scale(1.18); }
  64%  { transform: scale(1); }
  84%  { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(.3); }
}
@media (prefers-reduced-motion: reduce) {
  .ikon-potty { animation: none; transform: translate(13.25px, -11px); }
  .ikon-korona { animation: none; opacity: 0; }
}
.toltes { display: grid; justify-items: center; gap: 12px; padding: 72px 0; color: var(--halvany); font-weight: 600; }
.toltes svg { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--arnyek); }
.morzsa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .9rem; min-width: 0; }
.morzsa a, .morzsa span { color: #fff; opacity: .8; text-decoration: none; white-space: nowrap; }
.morzsa span:last-child { opacity: 1; font-weight: 600; white-space: normal; }
.morzsa i { opacity: .5; font-style: normal; }

main { max-width: 1600px; margin: 0 auto; padding: 16px 16px calc(env(safe-area-inset-bottom) + 32px); }

/* ---------- Gombok ---------- */
.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 12px; padding: 10px 16px; min-height: 44px; text-decoration: none;
  background: var(--fo); color: var(--fo-szoveg); font-weight: 700;
}
.gomb.masodlagos { background: var(--fo-halvany); color: var(--fo); }
.gomb.halk { background: transparent; color: var(--halvany); padding: 10px 8px; font-weight: 500; }
.gomb:disabled { opacity: .45; cursor: default; }
.chip {
  border: 1px solid var(--vonal); background: var(--kartya); color: var(--tinta);
  border-radius: 999px; padding: 6px 14px; font-size: .9rem;
}
.chip.aktiv { background: var(--fo); border-color: var(--fo); color: var(--fo-szoveg); }

/* ---------- Kezdőlap ---------- */
.hos { padding: 18px 0 8px; max-width: 760px; }
.hos h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.1; margin: 0 0 10px; color: var(--fo); }
.hos p { margin: 0 0 16px; color: var(--halvany); font-size: 1.05rem; }
.targyvalaszto { display: flex; gap: 8px; flex-wrap: wrap; }
.targy-gomb {
  padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 700;
  background: var(--kartya); color: var(--tinta); border: 1px solid var(--vonal);
}
.targy-gomb[aria-selected="true"] { background: var(--fo); color: var(--fo-szoveg); border-color: var(--fo); }
.iskola { margin-top: 26px; }
.iskola h2 { font-size: 1.25rem; margin: 0 0 12px; }
.iskola h2 small { font-family: system-ui, sans-serif; font-weight: 400; font-size: .85rem; color: var(--halvany); margin-left: 6px; }
.evfolyamok { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.evf-kartya {
  display: grid; gap: 2px; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--tinta);
  background: var(--kartya); border: 1px solid var(--vonal); box-shadow: var(--arnyek);
  transition: transform .15s, border-color .15s;
}
.evf-kartya:not(.hamarosan):hover { transform: translateY(-2px); border-color: var(--fo); }
.evf-szam { font-size: 2rem; font-weight: 800; color: var(--fo); line-height: 1; }
.evf-nev { font-weight: 600; }
.evf-allapot { font-size: .8rem; color: var(--halvany); }
.evf-kartya.hamarosan { opacity: .5; box-shadow: none; cursor: default; }
.ures { text-align: center; padding: 48px 0; }

/* ---------- Évfolyam-lap ---------- */
.lap-fej h1 { margin: 6px 0 2px; font-size: clamp(1.4rem, 4.5vw, 2rem); }
.lap-fej p { margin: 0 0 8px; }
.tk-csoport h2 { font-size: 1.1rem; margin: 22px 0 10px; color: var(--fo); }
.tk-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.tk-kartya {
  display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--tinta);
  background: var(--kartya); border: 1px solid var(--vonal); box-shadow: var(--arnyek); transition: border-color .15s, transform .15s;
}
.tk-kartya:hover { border-color: var(--fo); transform: translateY(-1px); }
.tk-kartya { position: relative; overflow: hidden; }
.tk-kartya::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p, 0%); background: var(--jo); border-radius: 0 4px 4px 0; }
.tk-cim { font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.tk-leiras { font-size: .9rem; color: var(--halvany); }
.tk-lab { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--halvany); margin-top: 2px; }
.tk-kesz { color: var(--jo); font-weight: 700; }
.emelt-jel { display: inline-block; margin-left: 6px; font-size: .7rem; font-weight: 700; color: var(--sz3); border: 1px solid currentColor; border-radius: 6px; padding: 0 6px; vertical-align: 2px; }

/* ---------- Évfolyam-lap: eszközsor + ötletfelhő ---------- */
.tk-eszkoz { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 20px; }
.tk-eszkoz input[type="search"] {
  flex: 1 1 220px; min-height: 42px; border: 1px solid var(--vonal); border-radius: 999px; padding: 6px 16px;
  background: var(--kartya); color: var(--tinta); font: inherit; outline-offset: 2px;
}
.tk-eszkoz input[type="search"]:focus { border-color: var(--fo); }
.tk-eszkoz .szurok { display: flex; gap: 6px; flex-wrap: wrap; }
.nezet-valto { display: inline-flex; border: 1px solid var(--vonal); border-radius: 999px; overflow: hidden; background: var(--kartya); margin-left: auto; }
.nezet-valto button { border: 0; background: transparent; padding: 8px 14px; min-height: 40px; color: var(--halvany); font-weight: 700; }
.nezet-valto button.aktiv { background: var(--fo); color: var(--fo-szoveg); }
.tk-ures { padding: 32px 0; color: var(--halvany); }

.felho { display: grid; gap: 30px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: start; padding-top: 6px; }
.felho-kozep {
  grid-column: 1 / -1; justify-self: center; position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px; border-radius: 999px; background: var(--zold-sotet); color: #fff;
  font-family: var(--cimbetu); font-weight: 800; font-size: 1.15rem; box-shadow: 0 8px 28px rgba(15, 61, 51, .25);
}
.felho-kozep span { font-size: 1.4rem; }
.felho-kozep::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: var(--vonal); }
.felho-csoport {
  position: relative; padding: 18px 12px 16px; border-radius: 24px;
  border: 1.5px dashed hsl(var(--h) 45% 55% / .55); background: hsl(var(--h) 60% 50% / .06);
}
.felho-csoport h2 {
  margin: -32px 0 12px; display: table; font-size: .92rem; padding: 6px 14px; border-radius: 999px;
  background: hsl(var(--h) 55% 36%); color: #fff; box-shadow: var(--arnyek); max-width: 100%;
}
/* Buborékok: egymás alatt, teljes szélességben, balra zárva – a jelzések (EMELT, %) a jobb szélen */
.bubik { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bubi { min-width: 0; }
.bubi-gomb {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 1.5px solid hsl(var(--h) 50% 45% / .5); border-radius: 999px; padding: 9px 16px;
  background: linear-gradient(90deg, hsl(var(--h) 60% 50% / .22) var(--p, 0%), transparent var(--p, 0%)), var(--kartya);
  color: var(--tinta); font-family: var(--cimbetu); font-weight: 700; line-height: 1.2;
  transition: transform .18s, box-shadow .18s, border-color .18s, border-radius .18s;
}
.bubi-cim { flex: 1 1 auto; min-width: 0; }
.bubi-gomb .emelt-jel, .bubi-gomb .bubi-pct { flex: none; }
.bubi.kicsi .bubi-gomb { font-size: .9rem; padding: 8px 14px; }
.bubi.nagy .bubi-gomb { font-size: 1.02rem; padding: 11px 16px; }
.bubi-gomb:hover, .bubi-gomb:focus-visible {
  transform: translateX(3px); border-color: hsl(var(--h) 55% 45%);
  box-shadow: 0 8px 22px hsl(var(--h) 50% 40% / .28); z-index: 1; position: relative;
}
.bubi-gomb .emelt-jel { margin-left: 0; }
.bubi-pct { font-size: .72rem; font-weight: 800; color: hsl(var(--h) 55% 32%); background: hsl(var(--h) 55% 50% / .18); border-radius: 999px; padding: 1px 7px; }
.bubi.nyitva .bubi-gomb { border-radius: 16px 16px 0 0; border-color: hsl(var(--h) 55% 45%); border-bottom-color: transparent; box-shadow: none; }
.bubi-reszlet {
  border: 1.5px solid hsl(var(--h) 55% 45%); border-top: 0; border-radius: 0 0 16px 16px; background: var(--kartya);
  padding: 12px 16px 14px; display: grid; gap: 10px; justify-items: start; animation: bubi-nyil .18s ease-out;
}
.bubi-reszlet p { margin: 0; color: var(--halvany); }
.bubi-stat { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: .85rem; color: var(--halvany); }
.bubi-sav { width: 100%; height: 6px; border-radius: 999px; background: var(--vonal); overflow: hidden; }
.bubi-sav div { height: 100%; background: hsl(var(--h) 55% 45%); border-radius: 999px; transition: width .3s; }
@keyframes bubi-nyil { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .felho-csoport h2 { background: hsl(var(--h) 45% 30%); }
  :root:not([data-theme="light"]) .bubi-pct { color: hsl(var(--h) 60% 75%); background: hsl(var(--h) 50% 50% / .25); }
  :root:not([data-theme="light"]) .bubi-gomb { border-color: hsl(var(--h) 45% 55% / .55); }
  :root:not([data-theme="light"]) .felho-kozep { background: var(--fo); color: var(--fo-szoveg); box-shadow: none; }
}
:root[data-theme="dark"] .felho-csoport h2 { background: hsl(var(--h) 45% 30%); }
:root[data-theme="dark"] .bubi-pct { color: hsl(var(--h) 60% 75%); background: hsl(var(--h) 50% 50% / .25); }
:root[data-theme="dark"] .bubi-gomb { border-color: hsl(var(--h) 45% 55% / .55); }
:root[data-theme="dark"] .felho-kozep { background: var(--fo); color: var(--fo-szoveg); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .bubi-gomb, .bubi-reszlet, .bubi-sav div, .tema-gomb { transition: none; animation: none; } }

/* ---------- Tanár: előnézet-ablak, csomag-oldal ---------- */
.elonezet-hatter { position: fixed; inset: 0; z-index: 50; background: rgba(15, 61, 51, .55); display: grid; place-items: center; padding: 12px; }
.elonezet-doboz { width: min(100%, 980px); height: min(100%, 92vh); background: var(--kartya); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.elonezet-fej { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--vonal); }
.elonezet-fej b { font-family: var(--cimbetu); }
.elonezet-fej button { margin-left: auto; }
.elonezet-doboz iframe { width: 100%; height: 100%; border: 0; background: #9aa7a1; }
.tanar-csomag select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--vonal); background: var(--kartya); color: var(--tinta); min-width: 0; }

/* ---------- Tárgyszín: a tárgy oldalain a háttér és a kiemelések a tárgy színére hangolva ---------- */
body[data-targy] { background: linear-gradient(180deg, hsl(var(--th) 55% 50% / .10), transparent 420px), var(--papir); }
body[data-targy] .lap-fej h1 { color: hsl(var(--th) 45% 30%); }
body[data-targy] .felho-kozep { background: hsl(var(--th) 45% 28%); }
body[data-targy] .vez-cim { color: hsl(var(--th) 45% 30%); }
body[data-targy] .tk-csoport h2 { color: hsl(var(--th) 45% 32%); }
body[data-targy] .nezet-valto button.aktiv, body[data-targy] .chip.aktiv, body[data-targy] .gomb:not(.masodlagos):not(.halk) { background: hsl(var(--th) 45% 32%); }
body[data-targy] .gomb.masodlagos { background: hsl(var(--th) 55% 50% / .15); color: hsl(var(--th) 45% 28%); }
.targy-kartya { border-top: 4px solid hsl(var(--th) 55% 48%); }
.targy-kartya[aria-selected="true"] { background: hsl(var(--th) 55% 50% / .12); border-color: hsl(var(--th) 55% 40%); box-shadow: inset 0 0 0 1px hsl(var(--th) 55% 40%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-targy] { background: linear-gradient(180deg, hsl(var(--th) 45% 40% / .16), transparent 420px), var(--papir); }
  :root:not([data-theme="light"]) body[data-targy] .lap-fej h1, :root:not([data-theme="light"]) body[data-targy] .vez-cim, :root:not([data-theme="light"]) body[data-targy] .tk-csoport h2 { color: hsl(var(--th) 55% 70%); }
  :root:not([data-theme="light"]) body[data-targy] .gomb.masodlagos { color: hsl(var(--th) 55% 75%); }
  :root:not([data-theme="light"]) body[data-targy] .nezet-valto button.aktiv, :root:not([data-theme="light"]) body[data-targy] .chip.aktiv, :root:not([data-theme="light"]) body[data-targy] .gomb:not(.masodlagos):not(.halk), :root:not([data-theme="light"]) body[data-targy] .felho-kozep { background: hsl(var(--th) 50% 42%); color: #fff; }
}
:root[data-theme="dark"] body[data-targy] { background: linear-gradient(180deg, hsl(var(--th) 45% 40% / .16), transparent 420px), var(--papir); }
:root[data-theme="dark"] body[data-targy] .lap-fej h1, :root[data-theme="dark"] body[data-targy] .vez-cim, :root[data-theme="dark"] body[data-targy] .tk-csoport h2 { color: hsl(var(--th) 55% 70%); }
:root[data-theme="dark"] body[data-targy] .gomb.masodlagos { color: hsl(var(--th) 55% 75%); }
:root[data-theme="dark"] body[data-targy] .nezet-valto button.aktiv, :root[data-theme="dark"] body[data-targy] .chip.aktiv, :root[data-theme="dark"] body[data-targy] .gomb:not(.masodlagos):not(.halk), :root[data-theme="dark"] body[data-targy] .felho-kozep { background: hsl(var(--th) 50% 42%); color: #fff; }

/* ---------- Muki, a nyuszi ---------- */
#muki { position: fixed; left: 0; top: 0; z-index: 40; width: 76px; will-change: transform; }
#muki[hidden] { display: none; }
#muki.gepel { display: none; }
body.van-muki main { padding-bottom: calc(env(safe-area-inset-bottom) + 110px); }
.muki-test { display: block; width: 76px; height: 76px; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 4px 6px rgba(15, 61, 51, .25)); transform-origin: 50% 100%; }
.muki-test svg { width: 100%; height: 100%; display: block; overflow: visible; }
.muki-test.balra { transform: scaleX(-1); }
.muki-test.setal { animation: muki-ugral .55s ease-in-out infinite; }
.muki-test.setal.balra { animation-name: muki-ugral-balra; }
.muki-test .poz { display: none; }
.muki-test .poz-ul { display: block; }
.muki-test.poz-fekszik-aktiv .poz-ul, .muki-test.poz-hatul-aktiv .poz-ul { display: none; }
.muki-test.poz-fekszik-aktiv .poz-fekszik { display: block; }
.muki-test.poz-hatul-aktiv .poz-hatul { display: block; }
.muki-kez { opacity: 0; transform-origin: 58px 58px; }
.muki-test.mutat .muki-kez { opacity: 1; animation: muki-mutat .9s ease-in-out infinite; }
@keyframes muki-mutat { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg) translateX(2px); } }
.muki-test .muki-csukott { opacity: 0; }
.muki-test.orul .muki-szemek { opacity: 0; }
.muki-test.orul .muki-csukott { opacity: 1; }
.muki-test.orul { animation: muki-orul .6s ease-out 2; }
.muki-test.sajnal .muki-fulek { animation: muki-fulek-le 1.2s ease-in-out 1; transform-origin: 40px 38px; }
.muki-fulek { transform-origin: 40px 32px; }
.muki-test.setal .muki-fulek { animation: muki-fulek .55s ease-in-out infinite; }
@keyframes muki-ugral { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-9px) scale(.98, 1.04); } 60% { transform: translateY(0) scale(1.04, .96); } }
@keyframes muki-ugral-balra { 0%, 100% { transform: scaleX(-1) translateY(0); } 30% { transform: scaleX(-1) translateY(-9px) scale(.98, 1.04); } 60% { transform: scaleX(-1) translateY(0) scale(1.04, .96); } }
@keyframes muki-orul { 0% { transform: translateY(0); } 40% { transform: translateY(-22px) rotate(-6deg); } 70% { transform: translateY(0) scale(1.08, .92); } 100% { transform: translateY(0); } }
@keyframes muki-fulek { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg) translateY(2px); } }
@keyframes muki-fulek-le { 0%, 100% { transform: rotate(0) scaleY(1); } 50% { transform: scaleY(.8) translateY(6px); } }
.muki-buborek {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); width: max-content; max-width: min(320px, calc(100vw - 24px));
  background: var(--kartya); color: var(--tinta); border: 1.5px solid var(--vonal); border-radius: 16px; padding: 10px 34px 10px 14px;
  font-size: .92rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(15, 61, 51, .18); animation: bubi-nyil .2s ease-out;
}
.muki-buborek::after { content: ""; position: absolute; left: calc(50% - 8px); bottom: -9px; width: 16px; height: 16px; background: var(--kartya); border-right: 1.5px solid var(--vonal); border-bottom: 1.5px solid var(--vonal); transform: rotate(45deg); }
.muki-buborek[hidden] { display: none; }
.muki-buborek.lent { bottom: auto; top: 84px; }
.muki-buborek.lent::after { bottom: auto; top: -9px; border: 0; border-left: 1.5px solid var(--vonal); border-top: 1.5px solid var(--vonal); }
.muki-zar { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 999px; background: transparent; color: var(--halvany); font-size: .85rem; }
.muki-zar:hover { background: var(--papir); }
.muki-elrejt { display: block; margin-top: 6px; font-size: .75rem; color: var(--halvany); }
/* Belógás a szélekről: csak fél test látszik, a szél felé fordulva */
.muki-test.les-bal { transform: rotate(60deg); }
.muki-test.les-jobb { transform: rotate(-60deg); }
.muki-test.les-fent { transform: rotate(180deg); }
.muki-test.les-lent { transform: translateY(6px); }
.muki-test.siet.setal { animation-duration: .3s; }
.muki-test { touch-action: none; }
.muki-test.fogva { cursor: grabbing; transform: scale(1.08) rotate(-4deg); animation: none; }
.muki-test:hover { cursor: grab; }
.muki-test.alszik { filter: drop-shadow(0 4px 6px rgba(15,61,51,.25)) saturate(.7); }
.muki-test.alszik .muki-szemek { opacity: 0; }
.muki-test.alszik .muki-csukott { opacity: 1; }
.muki-test.alszik .muki-fulek { transform: rotate(-12deg) translateY(4px); }
.muki-buborek.kicsi { padding: 6px 12px; font-size: .85rem; }
.muki-buborek.kicsi .muki-zar, .muki-buborek.kicsi .muki-elrejt { display: none; }
.muki-menu { display: grid; gap: 4px; margin-top: 8px; }
.muki-menu button, .muki-menu a { text-align: left; border: 1px solid var(--vonal); background: var(--papir); color: var(--tinta); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: .88rem; text-decoration: none; cursor: pointer; }
.muki-menu button:hover, .muki-menu a:hover { border-color: var(--fo); }
.muki-buborek.menu { pointer-events: auto; }
@media (max-width: 600px) { #muki { width: 60px; } .muki-test { width: 60px; height: 60px; } .muki-buborek { bottom: 68px; } }
@media (prefers-reduced-motion: reduce) { .muki-test, .muki-fulek, .muki-buborek { animation: none !important; } }
@media print { #muki { display: none !important; } }

/* ---------- Zárolt összefoglaló: ízelítő elhalványítva ---------- */
.ossz-izelito { max-height: 9em; overflow: hidden; position: relative; }
.ossz-izelito::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, var(--kartya)); }
.ossz-zar { text-align: center; padding: 16px; border: 1px dashed var(--vonal); border-radius: 16px; display: grid; gap: 8px; justify-items: center; }

/* ---------- Tudásszint ---------- */
.tud-pont { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--vonal); margin-right: 6px; vertical-align: 1px; flex: none; }
.tud-megy .tud-pont { background: var(--jo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jo) 25%, transparent); }
.tud-bizonytalan .tud-pont { background: var(--sarga); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sarga) 30%, transparent); }
.tud-gyenge .tud-pont { background: var(--korall); box-shadow: 0 0 0 3px color-mix(in srgb, var(--korall) 25%, transparent); }
.bubi.tud-gyenge .bubi-gomb { border-color: var(--korall); }
.bubi.tud-bizonytalan .bubi-gomb { border-color: var(--sarga); }
.bubi.tud-megy .bubi-gomb { border-color: var(--jo); }
.tk-kartya.tud-gyenge { border-color: var(--korall); }
.tk-kartya.tud-bizonytalan { border-color: var(--sarga); }
.tudas-sor { margin: 0; font-size: .85rem; color: var(--halvany); }
.hibak-lista { display: grid; gap: 8px; }
.f-forras { font-size: .8rem; color: var(--halvany); flex-basis: 100%; }

/* ---------- Érettségi-mód, próbaérettségi ---------- */
.kiemelt-kartya.erettsegi-mod { border-left: 6px solid var(--korall); }
.terv { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.terv-nap { background: var(--kartya); border: 1px solid var(--vonal); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.terv-nap.ma { border-color: var(--fo); box-shadow: inset 0 0 0 1px var(--fo); }
.terv-fej { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.terv-test { display: grid; gap: 4px; font-size: .92rem; }
.terv-test a:first-child { font-weight: 700; }
.proba-fej .ido { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ido-sav { flex: 1; height: 10px; border-radius: 999px; background: var(--vonal); overflow: hidden; }
.ido-sav div { height: 100%; background: var(--korall); transition: width .5s linear; }
#idoSzoveg { font-family: ui-monospace, Menlo, monospace; font-size: 1.1rem; min-width: 4.5em; text-align: right; }
.proba-lista .opcio.valasztott { outline: 2px solid var(--fo); }
.proba-lista .feladat.kesz .opcio { cursor: default; }
.proba-lista .lepesek:empty { display: none; }

/* ---------- Csoportok (osztály, család) ---------- */
.csoport-lista { display: grid; gap: 14px; }
.csoport-kartya { background: var(--kartya); border: 1px solid var(--vonal); border-radius: 16px; padding: 14px 16px; display: grid; gap: 12px; box-shadow: var(--arnyek); }
.csoport-fej { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.csoport-fej h2 { margin: 0; font-size: 1.1rem; }
.kod-doboz { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.3rem; letter-spacing: .12em; background: var(--fo-halvany); color: var(--fo); padding: 4px 12px; border-radius: 10px; }
.tag-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tag-tabla th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--halvany); padding: 6px 8px; border-bottom: 1px solid var(--vonal); }
.tag-tabla td { padding: 8px; border-bottom: 1px solid var(--vonal); vertical-align: top; }
.gyenge-cella { display: flex; flex-wrap: wrap; gap: 4px; }
.cimke-jog.piros { background: var(--rossz-bg); color: var(--rossz); }
.csoport-sor { display: grid; gap: 10px; }
.csoport-sor form input { flex: 1 1 200px; min-height: 42px; border: 1px solid var(--vonal); border-radius: 999px; padding: 6px 14px; background: var(--kartya); color: var(--tinta); font: inherit; letter-spacing: .1em; }
.kilep-x { border: 0; background: transparent; color: inherit; cursor: pointer; margin-left: 4px; font-size: .8rem; }
@media (max-width: 700px) { .tag-tabla thead { display: none; } .tag-tabla tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--vonal); } .tag-tabla td { border: 0; padding: 2px 4px; } .tag-tabla td:first-child { grid-column: 1 / -1; } }

/* ---------- Célok, eredmények, irányítópult ---------- */
.cel-racs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-bottom: 22px; }
.cel-kartya { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 16px; background: var(--kartya); border: 1px solid var(--vonal); box-shadow: var(--arnyek); color: var(--tinta); text-decoration: none; }
.cel-kartya.link:hover { border-color: var(--fo); }
.cel-kartya h2 { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--halvany); }
.cel-szam { font-family: var(--cimbetu); font-size: 1.2rem; color: var(--halvany); }
.cel-szam b { font-size: 2rem; color: var(--fo); line-height: 1; }
.cel-kartya select { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--vonal); background: var(--kartya); color: var(--tinta); }
.cel-kartya .sor.fuggoleges { display: grid; gap: 8px; }
.feloldasok { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cel-blokk { margin-top: 22px; }
.cel-blokk h2 { font-size: 1.1rem; margin: 0 0 10px; }
.zarolt { opacity: .55; filter: grayscale(.4); pointer-events: none; }
.napok { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 120px; padding: 10px 12px; background: var(--kartya); border: 1px solid var(--vonal); border-radius: 16px; }
.nap { display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; text-align: center; font-size: .7rem; color: var(--halvany); }
.nap-oszlop { display: flex; align-items: flex-end; height: 100%; }
.nap-oszlop div { width: 100%; min-height: 3px; background: var(--fo); border-radius: 4px 4px 2px 2px; transition: height .3s; }
.eredmeny-racs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.eredmeny { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: 16px; background: var(--kartya); border: 1px solid var(--vonal); opacity: .55; }
.eredmeny.megvan { opacity: 1; border-color: var(--sarga); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sarga) 25%, transparent); }
.e-ikon { font-size: 2rem; line-height: 1; }
.eredmeny b { font-family: var(--cimbetu); font-size: .95rem; }
.eredmeny small { color: var(--halvany); font-size: .78rem; }
.e-datum { color: var(--fo); font-weight: 700; }
.targy-halad { display: grid; gap: 8px; }
.th-sor { display: grid; grid-template-columns: auto minmax(120px, 1fr) 2fr; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--kartya); border: 1px solid var(--vonal); color: var(--tinta); text-decoration: none; }
.th-sor:hover { border-color: var(--fo); }
.th-ikon { font-size: 1.4rem; }
.th-nev { font-family: var(--cimbetu); font-weight: 800; }
.th-stat { font-size: .85rem; color: var(--halvany); }
.cimke-jog.kicsi { font-size: .68rem; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.cimke-jog.targy { background: var(--sz2); color: #fff; }
.cimke-jog.csalad { background: var(--sz1); color: #fff; }
.cimke-jog.sarga { background: var(--sarga); color: #1b2420; }
.csomag.szin-csalad { border-color: var(--sz1); box-shadow: inset 0 4px 0 var(--sz1), var(--arnyek); }
.csomag.szin-csalad .ar b { color: var(--sz1); }
.csomag.szin-targy { border-color: var(--sz2); box-shadow: inset 0 4px 0 var(--sz2), var(--arnyek); }
.csomag.szin-targy .ar b { color: var(--sz2); }
.csomag.szin-sarga { border-color: var(--sarga); box-shadow: inset 0 4px 0 var(--sarga), var(--arnyek); }
.csomag.szin-tanar { border-color: var(--korall); box-shadow: inset 0 4px 0 var(--korall), var(--arnyek); }
.csomag.szin-tanar .ar b { color: var(--korall); }
.csomag.szin-tanar .gomb { background: var(--korall); color: #fff; }
.csomag.szin-iskola { border-color: var(--sz3); box-shadow: inset 0 4px 0 var(--sz3), var(--arnyek); }
.csomag.szin-iskola .ar b { color: var(--sz3); }
.csomag.szin-iskola .gomb { background: var(--sz3); color: #fff; }
.csomag.kiemelt { border-width: 2px; }
.targy-chipek { display: flex; flex-wrap: wrap; gap: 4px; }
.targy-chipek .chip { font-size: .78rem; padding: 4px 9px; }
.csomag select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--vonal); background: var(--kartya); color: var(--tinta); width: 100%; min-width: 0; }
.csomag.targy-csomag { border-color: var(--sz2); box-shadow: inset 0 4px 0 var(--sz2), var(--arnyek); }
.csomag.targy-csomag .ar b { color: var(--sz2); }
.csomag.targy-csomag select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--vonal); background: var(--kartya); color: var(--tinta); width: 100%; }
.folytatas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kiemelt-kartya.celok { border-left: 6px solid var(--sz2); }
@media (max-width: 600px) { .th-sor { grid-template-columns: auto 1fr; } .th-stat { grid-column: 2; } .napok { gap: 3px; } .nap span { font-size: .6rem; } }

/* ---------- Gyakorló ---------- */
.gyakorlo { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.oldalsav { display: grid; gap: 12px; min-width: 0; }
.vezerlo { display: grid; gap: 10px; }
.vez-cim { font-size: 1.3rem; margin: 4px 0 0; line-height: 1.2; }
.sor { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.szurok { justify-content: flex-start; }
.halado { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--halvany); }
.halado-sav { flex: 1; height: 8px; background: var(--vonal); border-radius: 99px; overflow: hidden; }
.halado-sav div { height: 100%; width: 0; background: var(--jo); transition: width .3s; }

.kepletek { background: var(--kartya); border: 1px solid var(--vonal); border-radius: 16px; overflow: hidden; }
.kepletek summary { padding: 12px 14px; font-weight: 700; cursor: pointer; }
.keplet { padding: 10px 14px; border-top: 1px solid var(--vonal); }
.keplet-nev { font-size: .85rem; color: var(--halvany); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.keplet-test { overflow-x: auto; padding: 4px 0; }

.lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.feladat { min-width: 0; background: var(--kartya); border: 1px solid var(--vonal); border-radius: 16px; padding: 14px; box-shadow: var(--arnyek); }
.feladat.megoldva { border-color: var(--jo); box-shadow: inset 4px 0 0 var(--jo); }
.f-fej { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: .85rem; }
.f-szam { font-weight: 800; font-size: 1rem; font-family: var(--cimbetu); }
.f-tipus { color: var(--halvany); }
.szint { border-radius: 6px; padding: 1px 8px; font-weight: 700; font-size: .75rem; border: 1px solid currentColor; }
.szint.s1 { color: var(--sz1); } .szint.s2 { color: var(--sz2); } .szint.s3 { color: var(--sz3); }
.pipa { margin-left: auto; color: var(--jo); font-weight: 700; }
.f-szoveg { margin: 0 0 12px; overflow-x: auto; }
.f-szoveg svg { max-width: 100%; height: auto; }

.valasz { display: flex; gap: 8px; }
.valasz input {
  flex: 1; min-width: 0; min-height: 44px; font: inherit; font-size: 16px;
  padding: 8px 12px; border-radius: 12px; border: 1px solid var(--vonal); background: var(--papir); color: var(--tinta);
}
.valasz input:focus { outline: 2px solid var(--fo); outline-offset: 0; }
.valasz .gomb { flex: none; }
.egyseg { align-self: center; color: var(--halvany); }
.opciok { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.opcio {
  text-align: left; padding: 10px 14px; min-height: 44px; border-radius: 12px; border: 1px solid var(--vonal);
  background: var(--papir); color: var(--tinta); overflow-x: auto;
}
.opcio:hover { border-color: var(--fo); }
.opcio.jo { border-color: var(--jo); background: var(--jo-bg); }
.opcio.rossz { border-color: var(--rossz); background: var(--rossz-bg); }
.visszajelzes { margin-top: 8px; padding: 8px 12px; border-radius: 12px; font-size: .95rem; }
.visszajelzes.jo { background: var(--jo-bg); color: var(--jo); }
.visszajelzes.rossz { background: var(--rossz-bg); color: var(--rossz); }
.visszajelzes:empty { display: none; }

.megoldas-gombok { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.lepesek { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: l; }
.lepesek:empty { display: none; }
.lepes {
  border-left: 3px solid var(--fo); background: var(--fo-halvany);
  border-radius: 0 12px 12px 0; padding: 10px 12px; counter-increment: l; animation: be .25s ease-out;
}
@keyframes be { from { opacity: 0; transform: translateY(-4px); } }
.lepes-cim { font-weight: 700; margin-bottom: 4px; }
.lepes-cim::before { content: counter(l) ". lépés – "; color: var(--fo); }
.lepes-test { overflow-x: auto; overflow-y: hidden; }
.fv {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  background: var(--fv-bg); color: var(--fv); border-radius: 8px; padding: 4px 10px; font-size: .82rem; font-weight: 600;
}
.keplet .fv { margin-top: 0; }
.katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.katex { font-size: 1.08em; }
.labjegyzet { font-size: .8rem; color: var(--halvany); margin-top: 24px; }

/* ---------- Történelem: összefoglaló ---------- */
.tartalom { min-width: 0; display: grid; gap: 14px; align-content: start; }
.fulsor { display: flex; gap: 8px; flex-wrap: wrap; }
.osszefoglalo { background: var(--kartya); border: 1px solid var(--vonal); border-radius: 16px; padding: 6px 18px 18px; box-shadow: var(--arnyek); max-width: 820px; }
.osszefoglalo h2 { font-size: 1.15rem; color: var(--fo); margin: 18px 0 6px; }
.osszefoglalo p, .osszefoglalo li { line-height: 1.65; }
.evszamlista { list-style: none; padding: 0; display: grid; gap: 6px; }
.evszamlista b { display: inline-block; min-width: 4.5em; color: var(--fo); font-family: var(--cimbetu); }
.fogalmak { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 14px; }
.fogalmak dt { font-weight: 700; }
.fogalmak dd { margin: 0; color: var(--halvany); }
@media (max-width: 560px) { .fogalmak { grid-template-columns: minmax(0, 1fr); } .fogalmak dd { margin-bottom: 6px; } }

/* ---------- Gép / széles képernyő ---------- */
@media (min-width: 1000px) {
  .fejlec { padding-left: 24px; padding-right: 24px; }
  main { padding: 20px 24px 32px; }
  .gyakorlo { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
  .oldalsav { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; padding-right: 4px; }
  .vezerlo { background: var(--kartya); border: 1px solid var(--vonal); border-radius: 16px; padding: 14px; }
  .lista { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); align-items: start; gap: 18px; }
  .labjegyzet { padding-left: 364px; }
}
@media (min-width: 1800px) {
  .gyakorlo { grid-template-columns: 380px minmax(0, 1fr); }
  .lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .labjegyzet { padding-left: 404px; }
}
@media (hover: hover) and (pointer: fine) {
  .gomb { min-height: 38px; padding: 8px 14px; }
  .valasz input { min-height: 38px; }
  .gomb:hover:not(:disabled) { filter: brightness(1.08); }
  .chip:hover { border-color: var(--fo); }
}
@media print {
  .fejlec, .vezerlo, .kepletek, .valasz, .opciok, .megoldas-gombok, .visszajelzes { display: none !important; }
  .feladat { break-inside: avoid; border: 0; box-shadow: none; padding: 4px 0; }
}

[hidden] { display: none !important; }

/* ---------- Fiók, csomagok ---------- */
.tema-gomb {
  margin-left: auto; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  background: transparent; color: #fff; font-size: 1.15rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.tema-gomb:hover { background: rgba(255,255,255,.12); transform: rotate(-12deg); }
.tema-gomb ~ .fiok-gomb { margin-left: 0; }
@media (max-width: 640px) {
  .fejlec-belso { gap: 10px 12px; }
  .morzsa { order: 5; flex-basis: 100%; }
}
.fiok-gomb { margin-left: auto; color: #fff; text-decoration: none; font-weight: 700; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 14px; font-size: .9rem; }
.urlap-kartya { max-width: 520px; margin: 12px auto; background: var(--kartya); border: 1px solid var(--vonal); border-radius: 18px; padding: 20px; box-shadow: var(--arnyek); display: grid; gap: 12px; }
.urlap-kartya h1 { margin: 0; } .urlap-kartya h2 { margin: 8px 0 0; font-size: 1.1rem; }
.urlap { display: grid; gap: 12px; }
.urlap label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem; }
.urlap input, .urlap textarea, .urlap select { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--vonal); background: var(--papir); color: var(--tinta); }
.oauth { display: grid; gap: 8px; }
.kicsi { font-size: .82rem; }
.cimke-jog { display: inline-block; background: var(--sarga); color: #1b2420; border-radius: 6px; padding: 2px 8px; font-weight: 800; font-size: .78rem; }
.ciklus { display: flex; gap: 8px; margin: 8px 0 14px; flex-wrap: wrap; }
.ciklus .chip b { font-weight: 800; color: var(--jo); margin-left: 2px; }
.ciklus .chip.aktiv b { color: inherit; }
.csomag-racs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: stretch; }
/* Egyforma kártyák: címke-sor · cím · ár · lista (kitölt) · gomb alul, egy vonalban */
.csomag { background: var(--kartya); border: 1px solid var(--vonal); border-radius: 18px; padding: 18px; display: grid; gap: 10px; grid-template-rows: 22px auto auto 1fr auto; align-content: stretch; box-shadow: var(--arnyek); }
.csomag.kiemelt { border: 2px solid var(--fo); padding: 17px; }
.csomag-cimke { display: block; height: 22px; line-height: 22px; }
/* Tanári és iskolai kártya saját színnel, egy sorban a diákcsomagokkal */
.cimke-jog.tanar { background: var(--korall); color: #fff; }
.cimke-jog.iskola-cimke { background: var(--sz3); color: #fff; }
.csomag.tanar { border-color: var(--korall); box-shadow: inset 0 4px 0 var(--korall), var(--arnyek); }
.csomag.tanar .ar b { color: var(--korall); }
.csomag.tanar .gomb { background: var(--korall); color: #fff; }
.csomag.iskola-csomag { border-color: var(--sz3); box-shadow: inset 0 4px 0 var(--sz3), var(--arnyek); }
.csomag.iskola-csomag .ar b { color: var(--sz3); }
.csomag.iskola-csomag .gomb { background: var(--sz3); color: #fff; }
.csomag h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; min-height: 2.5em; display: flex; align-items: flex-end; }
.csomag .ar { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--vonal); }
.csomag .ar b { font-family: var(--cimbetu); font-weight: 800; font-size: clamp(1.1rem, 1.35vw, 1.5rem); line-height: 1.15; color: var(--fo); white-space: nowrap; }
.csomag .ar small { font-size: .8rem; color: var(--halvany); min-height: 1.2em; }
.csomag ul { margin: 0; padding-left: 18px; color: var(--halvany); display: grid; gap: 4px; align-content: start; }
.csomag-lab { display: grid; gap: 8px; align-self: end; }
.csomag-lab .gomb { width: 100%; }
.csomag-lab .valasztok { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.csomag-lab select { width: 100%; }
.csomag-lab p { margin: 0; }
.feladat.zar { border-style: dashed; text-align: center; }
.zar-belso { display: grid; gap: 8px; justify-items: center; padding: 10px; }

/* ---------- Érettségi ---------- */
.erettsegi-gomb { background: var(--sarga); color: #1b2420; }
.tetel-lista { list-style: none; padding: 0; display: grid; gap: 8px; max-width: 860px; }
.tetel-lista a { display: grid; grid-template-columns: 2.5em 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--kartya); border: 1px solid var(--vonal); color: var(--tinta); text-decoration: none; }
.tetel-lista a:hover { border-color: var(--fo); }
.tetel-szam { font-family: var(--cimbetu); font-weight: 800; color: var(--fo); font-size: 1.2rem; }
.tetel { max-width: 820px; margin: 0 auto; background: var(--kartya); border: 1px solid var(--vonal); border-radius: 18px; padding: 20px 24px; line-height: 1.7; }
.tetel h1 { margin: 4px 0; font-size: clamp(1.4rem, 4vw, 2rem); }
.tetel h2 { font-size: 1.15rem; color: var(--fo); margin: 22px 0 6px; }
.tetel-gombok { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tetel-feladat { background: var(--fo-halvany); border-radius: 12px; padding: 4px 14px 10px; }
.tetel-tipp { border-left: 4px solid var(--sarga); padding-left: 12px; }
.tetel-lab { margin-top: 28px; font-size: .8rem; border-top: 1px solid var(--vonal); padding-top: 8px; }
@media print {
  @page { size: A4; margin: 16mm 16mm 18mm; }
  body { background: #fff; color: #000; }
  .nyomtatasban-nem, .fejlec, .labjegyzet { display: none !important; }
  main { padding: 0; max-width: none; }
  .tetel { border: 0; padding: 0; max-width: none; background: #fff; font-size: 11pt; }
  .tetel h2 { color: #1e6b5a; break-after: avoid; }
  .tetel section { break-inside: avoid-page; }
  .tetel-feladat { background: #eef5f1; }
}

/* ---------- Dolgozatszerkesztő ---------- */
.szerk { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .szerk { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; } .szerk-forras { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow: auto; } }
.szerk-forras, .szerk-dolgozat { background: var(--kartya); border: 1px solid var(--vonal); border-radius: 16px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.szerk select, .kereso, .cim-mezo, .szam-mezo { font: inherit; font-size: 16px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--vonal); background: var(--papir); color: var(--tinta); }
.szam-mezo { width: 4.2em; }
.cim-mezo { font-family: var(--cimbetu); font-weight: 800; font-size: 1.2rem; width: 100%; }
.tipusok details { border-bottom: 1px solid var(--vonal); padding: 6px 0; }
.tipusok summary { cursor: pointer; font-weight: 600; }
.chipek { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.huzhato { cursor: grab; font-size: .85rem; }
.huzhato:active { cursor: grabbing; }
.dolgozat-lista { list-style: none; margin: 0; padding: 8px; min-height: 120px; border: 2px dashed var(--vonal); border-radius: 14px; display: grid; gap: 6px; counter-reset: d; }
.dolgozat-lista.cel { border-color: var(--fo); background: var(--fo-halvany); }
.dolgozat-lista li[data-i] { counter-increment: d; display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; background: var(--papir); border-radius: 10px; padding: 8px 10px; cursor: grab; }
.dolgozat-lista li[data-i] .dl-szoveg::before { content: counter(d) ". "; font-weight: 800; color: var(--fo); }
.fogo { color: var(--halvany); }
.ures-hely { color: var(--halvany); text-align: center; padding: 30px 10px; }
.nyomtatasi { display: none; }
@media print {
  body.dolgozat-nyomtatas > *:not(main), body.dolgozat-nyomtatas main > *:not(.nyomtatasi):not(#nyomtatasi) { display: none !important; }
  body.dolgozat-nyomtatas #nezet > *:not(.nyomtatasi) { display: none !important; }
  body.dolgozat-nyomtatas .nyomtatasi { display: block !important; }
  .ny-lap { font-size: 11pt; color: #000; }
  .ny-lap.minta::before { content: "MINTA"; position: fixed; top: 40%; left: 15%; font-size: 120pt; color: rgba(0,0,0,.08); transform: rotate(-30deg); }
  .ny-fej { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #000; margin-bottom: 12px; }
  .ny-fej h1 { font-size: 16pt; margin: 0; } .ny-adat td { padding: 2px 6px; } .vonal { border-bottom: 1px solid #000; width: 160px; }
  .ny-feladatok > li { break-inside: avoid; margin-bottom: 10px; position: relative; padding-right: 40px; }
  .ny-pont { position: absolute; right: 0; top: 0; font-weight: bold; }
  .ny-hely { height: 32mm; border: 1px dashed #bbb; margin-top: 6px; }
  .ny-lepesek { font-size: 9pt; color: #333; }
  .ny-lap footer { margin-top: 16px; font-size: 8pt; color: #666; }
}

/* ---------- Kezdőlap (új) ---------- */
.kezdo { max-width: 1180px; margin: 0 auto; padding: 8px 8px 24px; display: grid; gap: 34px; }
.kezdo-hos { display: grid; gap: 22px; padding-top: 18px; }
.kezdo-hos h1 { font-size: clamp(2rem, 5.5vw, 3.3rem); line-height: 1.08; margin: 0 0 12px; letter-spacing: -.01em; }
.kezdo-hos h1 span { color: var(--fo); }
.kezdo-hos p { color: var(--halvany); font-size: 1.1rem; margin: 0; max-width: 36em; }
.kezdo-kiemelt { display: grid; gap: 12px; align-content: center; }
.kiemelt-kartya { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: var(--tinta); border: 1px solid var(--vonal); background: var(--kartya); box-shadow: var(--arnyek); transition: transform .15s, border-color .15s; }
.kiemelt-kartya:hover { transform: translateY(-2px); border-color: var(--fo); }
.kiemelt-kartya b { display: block; font-family: var(--cimbetu); font-size: 1.1rem; }
.kiemelt-kartya small { color: var(--halvany); }
.kiemelt-kartya.erettsegi { border-left: 6px solid var(--sarga); }
.kiemelt-kartya.tanar { border-left: 6px solid var(--fo); }
.kk-ikon { font-size: 1.9rem; }
.nyil { font-size: 1.8rem; color: var(--halvany); }
.kezdo-blokk h2 { font-size: 1.3rem; margin: 0 0 14px; }
.kezdo-blokk h2 .halvany { font-weight: 600; font-size: 1rem; }
.targy-racs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.targy-kartya { display: grid; justify-items: start; gap: 2px; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--tinta); background: var(--kartya); border: 1.5px solid var(--vonal); transition: border-color .15s, transform .15s; }
.targy-kartya:hover { border-color: var(--fo); transform: translateY(-1px); }
.targy-kartya[aria-selected="true"] { border-color: var(--fo); background: var(--fo-halvany); box-shadow: inset 0 0 0 1px var(--fo); }
.targy-kartya.hamarosan { opacity: .5; }
.tk-ikon { font-size: 1.7rem; line-height: 1.2; }
.tk-nev { font-family: var(--cimbetu); font-weight: 800; font-size: 1.05rem; }
.tk-tart { font-size: .8rem; color: var(--halvany); }
.iskola-sor { margin-bottom: 18px; }
.iskola-sor h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--halvany); margin: 0 0 8px; }
.evf-racs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.evf-racs .evf-kartya { padding: 14px 16px; }
@media (min-width: 900px) { .kezdo-hos { grid-template-columns: 1.25fr 1fr; align-items: center; padding-top: 34px; } .kezdo { padding: 8px 16px 32px; } }

/* ---------- Nagy felbontású / széles monitorok ---------- */
@media (min-width: 1500px) {
  html { font-size: clamp(16px, calc(0.45vw + 9px), 20px); }
  .kezdo { max-width: min(1640px, 90vw); }
  .fejlec-belso, main { max-width: min(1760px, 94vw); }
  .targy-racs { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .evf-racs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .lista { grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); }
  .gyakorlo { grid-template-columns: 24rem minmax(0, 1fr); }
  .felho { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .csomag-racs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 2200px) {
  .kezdo { max-width: min(2000px, 88vw); }
  .lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}