/* Python interaktív – interaktív komponensek (kódpanel, terminál, nyomkövetés, feladatok). */

/* ---------------------------------------------------------------- Prism-színek (a C# műhely kódpaneljével egyezően) */
.token.comment, .token.prolog { color: #8fa69e; font-style: italic; }
.token.keyword, .token.boolean { color: #7cb7ff; }
.token.builtin { color: #5fe0c6; }
.token.class-name { color: #5fe0c6; }
.token.string, .token.char, .token.triple-quoted-string, .token.string-interpolation { color: #f4b27c; }
.token.interpolation { color: #e7eee9; }
.token.interpolation .token.punctuation { color: #f08fb4; }
.token.number { color: #c9e58c; }
.token.function { color: #f3e08f; }
.token.decorator, .token.annotation { color: #f08fb4; }
.token.operator, .token.punctuation { color: #b9c7cc; }
.token.format-spec { color: #f08fb4; }

/* ---------------------------------------------------------------- kódpanel */
.kodpanel { --kp-sor: 22px; margin: 18px 0 24px; border: 1px solid #233d4a; border-radius: 12px; background: var(--code-bg); color: var(--code-fg); overflow: hidden; box-shadow: 0 6px 22px #172b3614; }
.kodpanel figcaption { padding: 10px 16px 12px; border-top: 1px solid #2c4553; color: #b5c4c8; font-size: 13.5px; }
.kodpanel figcaption code { background: #233d4a; color: #e7eee9; }
.kp-fej { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; min-height: 44px; background: #11222b; border-bottom: 1px solid #2c4553; }
.kp-ful { min-width: 0; flex: 0 1 auto; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--code-bg); border-right: 1px solid #2c4553; border-top: 2px solid var(--green); font-family: var(--mono); font-size: 13px; color: #e7eee9; }
.py-logo { width: 16px; height: 16px; }
.kp-modositva { color: #e7eee9; font-size: 11px; }
.kp-gombok { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.kp-gomb { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid #3a5564; border-radius: 7px; background: #1d3542; color: #dbe6e3; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.kp-gomb svg { width: 15px; height: 15px; }
.kp-gomb:hover { background: #26424f; border-color: #5b7988; }
.kp-gomb.ikon { width: 32px; padding: 0; justify-content: center; }
.kp-gomb.fo { background: var(--green); border-color: var(--green); color: var(--ink); }
.kp-gomb.fo:hover { background: #e1f6a8; }
.kp-gomb.fut, .kp-gomb.fo.fut { background: #f3b3a8; border-color: #f3b3a8; color: #4a1a12; }
.kp-gomb.ok { color: var(--green); }
.kp-gomb:disabled { opacity: .6; cursor: progress; }
.kodpanel.statikus .kp-ful { border-top-color: #5b7988; }

/* szerkesztő */
.szerk { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); font: 14px/var(--kp-sor) var(--mono); tab-size: 4; }
.szerk-sorszam { padding: 14px 10px 14px 14px; color: #8fa0aa; text-align: right; user-select: none; border-right: 1px solid #2c4553; min-width: 46px; }
.szerk-sorszam span { display: block; height: var(--kp-sor); }
.szerk-sorszam span.jelolt { color: #ffb4a8; font-weight: 700; }
.szerk-gorgeto { overflow-x: auto; overflow-y: hidden; }
.szerk-terulet { position: relative; min-width: 100%; width: max-content; }
.szerk-kiemeles, .szerk-bevitel { margin: 0; padding: 14px 18px 14px 16px; border: 0; font: inherit; line-height: inherit; letter-spacing: 0; white-space: pre; tab-size: 4; }
.szerk-kiemeles { position: relative; pointer-events: none; color: var(--code-fg); min-height: calc(var(--kp-sor) * var(--sorok, 3) + 28px); }
.szerk-kiemeles code { font: inherit; background: none; padding: 0; color: inherit; white-space: pre; }
.szerk-bevitel { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; overflow: hidden; background: transparent; color: transparent; caret-color: #f3e08f; outline: none; }
.szerk-bevitel::selection { background: #4d7a9a88; color: transparent; }
.szerk:focus-within { box-shadow: inset 0 0 0 2px #5b8f73; }
.szerk.csak-olvas:focus-within { box-shadow: inset 0 0 0 2px #3a5564; }
.szerk.csak-olvas .szerk-bevitel { caret-color: transparent; cursor: text; }
.szerk-jelolo { position: absolute; left: 0; right: 0; top: calc(14px + var(--sor, 0) * var(--kp-sor)); height: var(--kp-sor); background: #c4513f44; border-left: 3px solid #f3836f; pointer-events: none; }
.szerk-jelolo[hidden] { display: none; }

/* munkakönyvtár */
.kp-fajlok { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid #2c4553; background: #13252e; font-size: 12.5px; color: #9fb2b8; }
.kp-fajlok[hidden] { display: none; }
.kp-fajlok-cim { margin-right: 4px; letter-spacing: .3px; }
.fajl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #3a5564; border-radius: 999px; background: #1d3542; color: #dbe6e3; font: inherit; font-family: var(--mono); cursor: pointer; }
.fajl-chip svg { width: 13px; height: 13px; }
.fajl-chip.uj { border-color: var(--green); color: var(--green); }
.fajl-chip[aria-expanded="true"] { background: #2b4a59; }
.fajl-nezo { flex-basis: 100%; margin-top: 4px; border: 1px solid #3a5564; border-radius: 8px; background: #0f1e26; overflow: hidden; }
.fajl-nezo-fej { display: flex; justify-content: space-between; padding: 6px 12px; background: #1a303b; font-family: var(--mono); color: #e7eee9; }
.fajl-nezo-fej span { color: #8ea3aa; font-family: inherit; }
.fajl-nezo pre { margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto; font: 13px/1.55 var(--mono); color: #e7eee9; white-space: pre; }

/* terminál */
.konzol { border-top: 1px solid #2c4553; background: #0f1e26; }
.konzol[hidden] { display: none; }
.konzol-fej { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 16px; font-size: 11px; letter-spacing: 1.2px; color: #8ea3aa; border-bottom: 1px solid #1d3542; }
.konzol-cim { font-weight: 700; color: #b9c7cc; border-bottom: 1px solid var(--green); padding-bottom: 2px; }
.konzol-allapot { letter-spacing: 0; font-size: 12px; }
.konzol-allapot[data-fajta="var"] { color: #f3e08f; }
.konzol-allapot[data-fajta="hiba"] { color: #ffb4a8; }
.konzol-allapot[data-fajta="kesz"] { color: #9fd3a8; }
.konzol-allapot[data-fajta="fut"]::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border: 2px solid #8ea3aa; border-top-color: transparent; border-radius: 50%; animation: forog .8s linear infinite; vertical-align: -1px; }
@keyframes forog { to { transform: rotate(360deg); } }
.konzol-torol { margin-left: auto; padding: 3px 9px; border: 1px solid #2c4553; border-radius: 6px; background: transparent; color: #8ea3aa; font: inherit; font-size: 11.5px; letter-spacing: 0; cursor: pointer; }
.konzol-torol:hover { color: #e7eee9; border-color: #5b7988; }
.konzol-test { max-height: 340px; overflow: auto; padding: 10px 16px 14px; }
.konzol-ki { margin: 0; font: 14px/1.6 var(--mono); color: #e7eee9; white-space: pre-wrap; overflow-wrap: anywhere; }
.konzol-ki:empty { display: none; }
.ki-be { color: #f3e08f; }
.ki-figy { color: #f0b37e; }
.ki-uj { background: #d3ef8833; box-shadow: 0 0 0 1px #d3ef8855; border-radius: 3px; }
.konzol-beolvas { display: inline-flex; align-items: center; gap: 8px; vertical-align: baseline; }
.konzol-beolvas input { width: min(260px, 60vw); padding: 2px 8px; border: 1px solid #5b7988; border-radius: 5px; background: #172b36; color: #f3e08f; font: inherit; }
.konzol-beolvas input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.konzol-beolvas kbd { padding: 1px 6px; border: 1px solid #3a5564; border-radius: 4px; color: #8ea3aa; font: 11px var(--mono); }
.hiba-doboz { margin-top: 10px; padding: 10px 14px; border: 1px solid #a8483a; border-left-width: 4px; border-radius: 8px; background: #3a1d1a; color: #ffd8d0; }
.hiba-cim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; font-size: 13.5px; }
.hiba-cim code { background: none; padding: 0; color: #ffb4a8; white-space: pre-wrap; }
.hiba-hol { padding: 1px 8px; border-radius: 999px; background: #a8483a; color: #fff; font-size: 12px; font-weight: 700; }
.hiba-magy { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #f5e6e2; }
.konzol-uzenet { margin-top: 8px; padding: 10px 14px; border-radius: 8px; background: #3a2d14; border-left: 4px solid #f1c550; color: #f8ead0; font-size: 14px; }

/* ---------------------------------------------------------------- tananyag-dobozok */
.fogalom, .figyelj, .jotudni, .kozelebbrol, .osszegzes-doboz { position: relative; margin: 22px 0; padding: 18px 20px 6px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.fogalom::before, .figyelj::before, .jotudni::before, .kozelebbrol::before { position: absolute; top: -10px; left: 16px; padding: 2px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; }
.fogalom { border-color: var(--green-line); background: linear-gradient(180deg, #f6fbe8, #fff 60%); }
.fogalom::before { content: "FOGALOM"; background: var(--green); color: var(--ink); border: 1px solid var(--green-line); }
.fogalom > b:first-child, .fogalom dt { display: block; font-size: 18px; margin-bottom: 4px; }
.figyelj { border-color: #e7c27a; background: #fffaf0; }
.figyelj::before { content: "FIGYELJ!"; background: var(--sun); color: #3d2c05; }
.jotudni { border-color: #b9cde4; background: #f6f9fd; }
.jotudni::before { content: "JÓ TUDNI"; background: var(--blue-soft); color: #23466f; border: 1px solid #b9cde4; }
.kozelebbrol { border-color: #c9c2e6; background: #faf9fe; }
.kozelebbrol::before { content: "KÖZELEBBRŐL"; background: #e7e2fa; color: #3b2f74; border: 1px solid #c9c2e6; }
.fogalom p, .figyelj p, .jotudni p, .kozelebbrol p { font-size: 15.5px; }
.kozelebbrol > h4:first-child { margin-top: 2px; }

/* sorbontás: a kódsor részei és jelentésük */
.reszek { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; padding: 0; list-style: none; }
.reszek li { display: grid; align-content: start; gap: 4px; min-width: 90px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13.5px; color: var(--text-2); }
.reszek li > code:first-child { justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--code-bg); color: #f3e08f; font-size: 14.5px; }

/* kiértékelés-lánc (statikus) */
.lanc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 20px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px dashed #c9d3c3; }
.lanc code { padding: 4px 9px; border-radius: 7px; background: #eef1e8; font-size: 15px; white-space: nowrap; }
.lanc code:last-child { background: var(--green); color: var(--ink); font-weight: 700; }
.lanc .nyil { color: var(--muted); }

/* rács, kártyák a szövegben */
.racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.kartya { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.kartya h4 { margin: 0 0 6px; font-size: 15.5px; }
.kartya p { margin: 0; font-size: 14.5px; color: var(--text-2); }
.kartya .nagy { display: block; margin-bottom: 6px; font: 700 22px/1.2 var(--mono); color: var(--ink); }

/* ---------------------------------------------------------------- „Mit ír ki?” */
.josolj { margin: 26px 0; padding: 18px 20px 14px; border: 1px solid #c9d3c3; border-radius: 14px; background: #fbfcf8; }
.josolj > .eyebrow { color: var(--green-dark); }
.josolj .kerdes { margin: 2px 0 10px; font-weight: 650; font-size: 17px; }
.josolj .kodpanel { margin: 10px 0 14px; }
.valaszok { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }
.valaszok li { margin: 0; }
.valasz { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.valasz:hover:not(:disabled) { border-color: #8aab80; background: #f6faef; }
.valasz-betu { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 6px; background: #eef1e8; font-size: 12px; font-weight: 800; }
.valasz-szoveg { white-space: pre-wrap; }
.valasz-szoveg code { white-space: pre-wrap; }
.valasz.helyes { border-color: #4caf6a; background: #eaf7ec; }
.valasz.helyes .valasz-betu { background: #4caf6a; color: #fff; }
.valasz.rossz { border-color: var(--red); background: var(--red-soft); }
.valasz.rossz .valasz-betu { background: var(--red); color: #fff; }
.valasz:disabled { cursor: default; }
.josolj .magyarazat { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 15px; }
.josolj .magyarazat p { font-size: 15px; margin-bottom: 8px; }
.josolj-itelet { font-weight: 700; }
.eltalalt .josolj-itelet { color: #2f7d45; }
.tevedett .josolj-itelet { color: var(--red); }
.josolj-ujra { padding: 4px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }

/* ---------------------------------------------------------------- feladatok */
.feladatok { counter-reset: none; }
.feladat { margin: 22px 0 28px; padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; scroll-margin-top: 16px; }
.feladat.megoldva { border-color: #9fcfa8; box-shadow: inset 4px 0 0 #4caf6a; }
.feladat-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.feladat-fej h3 { margin: 0; font-size: 19px; letter-spacing: -.3px; flex: 1 1 auto; }
.feladat-szam { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 9px 9px 9px 2px; background: var(--green); border: 1px solid var(--green-line); font-weight: 800; font-variant-numeric: tabular-nums; }
.feladat-szint { color: #6b7a70; font-size: 12px; letter-spacing: 2px; cursor: help; }
.feladat-statusz { display: inline-flex; align-items: center; gap: 6px; color: #2f7d45; font-size: 13px; font-weight: 700; }
.feladat-statusz svg { width: 16px; height: 16px; }
.feladat-leiras p, .feladat-leiras li { font-size: 15.5px; }
.feladat-leiras pre.minta { margin: 8px 0 12px; padding: 10px 14px; border-radius: 10px; background: #0f1e26; color: #e7eee9; font: 13.5px/1.55 var(--mono); white-space: pre-wrap; }
.feladat-leiras pre.minta .be { color: #f3e08f; }
.gyakorold { margin: 18px 0 4px; padding: 10px 14px; border-left: 4px solid var(--green-line); border-radius: 0 10px 10px 0; background: #f4f8e8; font-size: 15px; }
.gyakorold b { margin-right: 4px; }
.gyakorold a { font-weight: 650; }
.gyakorold span { color: var(--muted); }
ol.lepesek { counter-reset: lepes; margin: 14px 0; padding: 0; list-style: none; }
ol.lepesek > li { counter-increment: lepes; position: relative; margin: 0 0 10px; padding-left: 40px; }
ol.lepesek > li::before { content: counter(lepes); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); border: 1px solid var(--green-line); color: var(--ink); font-weight: 750; font-size: 13.5px; }
pre.terminal { position: relative; margin: 14px 0; padding: 30px 16px 12px; border-radius: 12px; background: #0f1e26; color: #e7eee9; font: 13.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
pre.terminal::before { content: "TERMINÁL"; position: absolute; top: 9px; left: 16px; color: #8ea3aa; font: 700 10px "Segoe UI", system-ui, sans-serif; letter-spacing: 1.4px; }
pre.terminal .prompt { color: #8ea3aa; }
pre.terminal .parancs { color: #f3e08f; }
pre.terminal .hiba { color: #ffb4a8; }
.feladat-panel { margin: 14px 0 10px; }
.feladat-also { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.feladat-also details.tipp { flex: 1 1 320px; }
details.tipp summary, .link-gomb { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f7f8f3; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
details.tipp summary::-webkit-details-marker { display: none; }
details.tipp summary::before { content: "💡"; }
details.tipp[open] summary { background: #fff7df; border-color: #e7c27a; }
details.tipp > :not(summary) { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #fffaf0; border: 1px solid #f0ddb0; font-size: 15px; }
.link-gomb:hover, details.tipp summary:hover { border-color: #8aab80; }
.feladat-megoldas { margin-top: 12px; }
.megoldas-megj { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.teszt-folyik { color: var(--muted); font-size: 14px; }
.teszt-osszegzes { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; padding: 10px 14px; border-radius: 10px; font-weight: 650; font-size: 15px; }
.teszt-osszegzes svg { width: 18px; height: 18px; }
.teszt-osszegzes.ok { background: #eaf7ec; color: #23673a; border: 1px solid #9fcfa8; }
.teszt-osszegzes.nem { background: #fff3ef; color: #8a3324; border: 1px solid #efc1b6; }
.teszt-lista { margin: 0 0 12px; padding: 0; list-style: none; }
.teszt-lista li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.teszt-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.teszt-jel { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-size: 13px; }
.ok > .teszt-sor .teszt-jel { background: #d6f0db; color: #23673a; }
.nem > .teszt-sor .teszt-jel { background: #f8dcd5; color: #8a3324; }
.kihagyva > .teszt-sor .teszt-jel { background: var(--line-2); color: var(--muted); }
.kihagyva > .teszt-sor { color: var(--muted); }
.teszt-be { color: var(--muted); font-size: 13px; }
.teszt-reszlet { margin: 8px 0 4px 32px; }
.teszt-reszlet p { margin: 0 0 8px; font-size: 14.5px; }
.teszt-reszlet .hiba-doboz { margin: 6px 0; }
.elteres { width: 100%; border-collapse: collapse; font-size: 13px; background: #fbfcf9; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.elteres th, .elteres td { padding: 5px 9px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.elteres th { font-size: 11px; color: var(--muted); letter-spacing: .5px; }
.elteres td.sz { color: #9aa6a1; width: 30px; }
.elteres tr.kul td:not(.sz) { background: #fff3ef; }
.elteres code { background: none; padding: 0; white-space: pre-wrap; }

/* ---------------------------------------------------------------- nyomkövetés (dialógus) */
html.nyk-nyitva { overflow: hidden; }
.nyk { width: min(1500px, calc(100vw - 32px)); height: min(940px, calc(100vh - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid #c9d3c3; border-radius: 18px; background: #f7f7f2; color: var(--ink); overflow: hidden; box-shadow: 0 30px 80px #0b1a2266; }
.nyk[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.nyk::backdrop { background: #0d1c24b3; backdrop-filter: blur(3px); }
.nyk-fej { display: flex; align-items: center; gap: 18px; padding: 12px 16px 12px 22px; border-bottom: 1px solid var(--line); background: #fff; }
.nyk-cim { display: grid; }
.nyk-cim .eyebrow { margin: 0; color: var(--green-dark); }
.nyk-fajl { font-family: var(--mono); font-size: 15px; }
.nyk-lepesszam { margin-left: auto; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.nyk-bezar { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; cursor: pointer; }
.nyk-bezar:hover { background: #f1f3ec; }
.nyk-test { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.35fr); gap: 0; min-height: 0; }
.nyk-kod { overflow: auto; padding: 14px 0; background: var(--code-bg); color: var(--code-fg); font: 14.5px/1.75 var(--mono); }
.ks { display: grid; grid-template-columns: 44px 22px 1fr; align-items: baseline; padding-right: 16px; border-left: 3px solid transparent; }
.ks-sz { text-align: right; color: #5f7884; padding-right: 6px; user-select: none; font-size: 13px; }
.ks-jel { text-align: center; color: transparent; font-size: 12px; }
.ks code { white-space: pre; background: none; padding: 0; color: inherit; font: inherit; }
.ks.elozo { background: #ffffff0b; }
.ks.elozo .ks-jel::before { content: "•"; color: #8ea3aa; }
.ks.most { background: #f1c55033; border-left-color: var(--sun); }
.ks.most .ks-jel::before { content: "➜"; color: var(--sun); }
.ks.most .ks-sz { color: #f3e08f; }
.ks.most[data-fajta="vissza"], .ks.most[data-fajta="hivas"] { background: #a78bfa33; border-left-color: #b9a5fb; }
.ks.most[data-fajta="vissza"] .ks-jel::before { content: "↩"; color: #cdbefc; }
.ks.most[data-fajta="hivas"] .ks-jel::before { content: "↘"; color: #cdbefc; }
.ks.most[data-fajta="vege"] { background: #d3ef8822; border-left-color: var(--green); }
.ks.most[data-fajta="vege"] .ks-jel::before { content: "■"; color: var(--green); }
.ks.most[data-fajta="hiba"] { background: #c4513f55; border-left-color: #f3836f; }
.ks.most[data-fajta="hiba"] .ks-jel::before { content: "✗"; color: #ffb4a8; }
.nyk-tabla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1.5fr) minmax(150px, 1fr); grid-template-areas: "magy magy" "mem mem" "kiert konzol"; gap: 12px; padding: 14px; min-height: 0; overflow: auto; }
.tabla-resz { min-height: 0; display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tabla-resz > h3 { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.nyk-magy { grid-area: magy; border-color: #b8c9a0; }
.nyk-mem { grid-area: mem; overflow: auto; }
.nyk-kiert { grid-area: kiert; overflow: auto; }
.nyk-konzol { grid-area: konzol; background: #0f1e26; border-color: #233d4a; color: #e7eee9; }
.nyk-konzol > h3 { color: #8ea3aa; }
.nyk-konzol-test { overflow: auto; min-height: 0; flex: 1; }
.nyk-ki { margin: 0; font: 13.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.nyk-ures { color: #6d8590; font-style: italic; }
.nyk-magy-test p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; }
.nyk-magy-sor { display: flex; align-items: center; gap: 10px; }
.nyk-sorszam { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.nyk-megj { color: var(--muted); font-size: 13px !important; }
.nyk-tolt { color: var(--muted); }
.nyk-hiba { color: var(--red); }
.cimke { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; background: #eef1e8; color: var(--ink); }
.cimke[data-szin="zold"] { background: var(--green); }
.cimke[data-szin="kek"] { background: #d8e6f6; color: #1f4570; }
.cimke[data-szin="lila"] { background: #e7e2fa; color: #3b2f74; }
.cimke[data-szin="sarga"] { background: var(--sun-soft); color: #5e4505; }
.cimke[data-szin="piros"] { background: var(--red-soft); color: #8a3324; }
.nyk-magy .hiba-doboz { background: var(--red-soft); color: #5b1d12; border-color: #e3a395; }
.nyk-magy .hiba-cim code { color: #8a3324; }
.nyk-magy .hiba-magy { color: #5b1d12; }
.kiert-lanc { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kiert-lanc li { display: flex; align-items: baseline; gap: 8px; }
.kiert-lanc li + li::before { content: "→"; color: var(--muted); }
.kiert-lanc code { padding: 4px 9px; border-radius: 7px; background: var(--code-bg); color: var(--code-fg); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kiert-lanc li.utolso code { box-shadow: 0 0 0 2px var(--green); }
.kiert-dontes { margin: 10px 0 0; padding: 6px 10px; border-radius: 8px; font-weight: 700; font-size: 14px; width: fit-content; }
.kiert-dontes[data-igaz="true"] { background: #eaf7ec; color: #23673a; }
.kiert-dontes[data-igaz="false"] { background: var(--red-soft); color: #8a3324; }
.kiert-megj, .kiert-ures { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; }
.kiert-ertek { font-family: var(--mono); }
.nyk-beolvas { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #1d3542; display: grid; gap: 6px; font-size: 13.5px; }
.nyk-beolvas span { display: flex; gap: 6px; }
.nyk-beolvas input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid #5b7988; border-radius: 6px; background: #0f1e26; color: #f3e08f; font: 14px var(--mono); }
.nyk-beolvas button { padding: 6px 12px; border: 0; border-radius: 6px; background: var(--green); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.nyk-beolvas code { background: #0f1e26; color: #f3e08f; }
.nyk-vege { margin: 10px 0 0; color: #9fd3a8; font-weight: 700; font-size: 14px; }
.nyk-konzol .hiba-doboz { font-size: 13px; }
.nyk-vezerlo { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--line); background: #fff; }
.nyk-gombok { display: flex; gap: 6px; }
.nyk-gombok button { min-width: 42px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.nyk-gombok button:hover { background: #f1f3ec; }
.nyk-gombok .nyk-elore { background: var(--ink); color: #fff; border-color: var(--ink); min-width: 64px; }
.nyk-gombok .nyk-lejatszas { min-width: 128px; font-size: 14px; font-weight: 650; }
.nyk-csuszka { flex: 1; accent-color: var(--green-dark); }
.nyk-tempo { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.nyk-tempo select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; }

/* memória */
.mem { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 46px; align-items: start; }
.mem.van-kupac { grid-template-columns: max-content minmax(150px, 1fr); }
.mem-keretek, .mem-kupac { position: relative; z-index: 1; display: grid; gap: 10px; align-content: start; }
.mem-nyilak { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; color: #5b7f99; }
.mem-nyilak path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.keret { border: 1px solid var(--line); border-radius: 10px; background: #fbfcf9; overflow: hidden; min-width: 150px; }
.keret.fuggveny { margin-left: 14px; border-color: #c9c2e6; background: #fbfaff; box-shadow: -6px 6px 0 -1px #e7e2fa; }
.keret.aktiv { border-color: #9ab889; box-shadow: 0 0 0 2px #d3ef8866; }
.keret.fuggveny.aktiv { border-color: #a99be0; box-shadow: 0 0 0 2px #e7e2fa, -6px 6px 0 -1px #e7e2fa; }
.keret-fej { padding: 5px 10px; background: #eef1e8; font-size: 12px; font-weight: 750; letter-spacing: .4px; }
.keret.fuggveny .keret-fej { background: #ece8fb; color: #3b2f74; font-family: var(--mono); }
.keret-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.keret-tabla td { white-space: nowrap; }
.keret-tabla th, .keret-tabla td { padding: 4px 10px; border-top: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.keret-tabla th { width: 1%; white-space: nowrap; font: 600 13.5px var(--mono); color: var(--ink); }
.keret-tabla tr.valt { animation: villan 1.2s ease-out; }
.keret-tabla tr.visszateres th { color: #3b2f74; }
.mem-ures { color: var(--muted); font-style: italic; font-size: 12.5px; }
@keyframes villan { 0% { background: #d3ef88; } 100% { background: transparent; } }
.v { font: 13.5px var(--mono); color: #1d3a49; overflow-wrap: anywhere; }
.v-str { color: #9a4a12; }
.v-int, .v-float, .v-complex { color: #2f6c18; }
.v-bool, .v-NoneType { color: #1f5aa6; font-weight: 600; }
.v-fn, .v-cls, .v-mod { padding: 1px 7px; border-radius: 6px; background: #ece8fb; color: #3b2f74; font-size: 12.5px; }
.v-mod { background: #eef1e8; color: var(--muted); }
.v-egyeb { color: var(--muted); font-size: 12.5px; }
.ptr { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 4px; border: 1px solid #b9cde4; border-radius: 999px; background: #f2f7fd; font-size: 12px; color: #23466f; white-space: nowrap; }
.ptr i { width: 9px; height: 9px; border-radius: 50%; background: #5b7f99; }
.obj { border: 1px solid #b9cde4; border-radius: 10px; background: #fff; overflow: hidden; }
.obj.valt { animation: villanKeret 1.2s ease-out; }
@keyframes villanKeret { 0% { box-shadow: 0 0 0 4px #d3ef88; } 100% { box-shadow: 0 0 0 0 transparent; } }
.obj-fej { display: flex; justify-content: space-between; padding: 4px 10px; background: #e3ecf7; color: #23466f; font-size: 12px; font-weight: 750; }
.obj-id { color: #6c89a8; font-weight: 600; }
.obj-tuple { border-color: #e2c48a; }
.obj-tuple .obj-fej { background: #fbefcb; color: #5e4505; }
.obj-set .obj-fej, .obj-frozenset .obj-fej { background: #e7e2fa; color: #3b2f74; }
.obj-set, .obj-frozenset { border-color: #c9c2e6; }
.obj-dict .obj-fej { background: #dff1e6; color: #1f5a37; }
.obj-dict { border-color: #a9d3b6; }
.obj-instance .obj-fej { background: #f8e3df; color: #8a3324; }
.obj-instance { border-color: #e3b3a8; }
.obj-class .obj-fej { background: #ece8fb; color: #3b2f74; }
.obj-class { border-color: #c9bfef; }
.obj-metodusok { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 10px; border-top: 1px solid var(--line-2); font-size: 12px; }
.obj-metodusok code { padding: 0 5px; border-radius: 4px; background: #f4f1fd; color: #3b2f74; }
.obj-cellak { display: flex; flex-wrap: wrap; padding: 8px; gap: 0; }
.cella { display: grid; justify-items: center; min-width: 40px; padding: 2px 6px 4px; border: 1px solid #d6e0ea; margin: 0 -1px -1px 0; background: #fbfdff; }
.cella .idx { font-size: 10.5px; color: #8aa0b4; font-family: var(--mono); }
.obj-cellak.halmaz { gap: 6px; }
.obj-cellak.halmaz .cella { border-radius: 999px; margin: 0; padding: 3px 10px; }
.obj-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.obj-tabla th, .obj-tabla td { padding: 4px 10px; border-top: 1px solid var(--line-2); text-align: left; }
.obj-tabla th { width: 1%; white-space: nowrap; font-weight: 400; }
.obj-tabla.attr th { font: 600 13px var(--mono); }
.obj-ures, .obj-tobb { padding: 6px 10px; color: var(--muted); font-size: 12px; font-style: italic; }

@media (max-width: 1000px) {
  .nyk { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .nyk-test { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 32%) 1fr; }
  .nyk-tabla { grid-template-columns: 1fr; grid-template-rows: repeat(4, max-content); grid-template-areas: "magy" "kiert" "konzol" "mem"; }
  .nyk-tabla > .tabla-resz { min-height: max-content; }
  .nyk-mem { overflow-x: auto; }
  .nyk-konzol { min-height: 160px; }
  .nyk-vezerlo { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .nyk-csuszka { order: 3; flex-basis: 100%; }
  .nyk-tempo { display: none; }
}
@media (max-width: 640px) {
  .kp-gomb span { display: none; }
  .kp-gomb { width: 34px; padding: 0; justify-content: center; }
  .kp-gomb.fo { width: auto; padding: 0 12px; }
  .kp-gomb.fo span { display: inline; }
  .szerk { font-size: 13px; }
  .szerk-sorszam { min-width: 36px; padding-left: 6px; }
  .nyk-gombok .nyk-lejatszas { min-width: 0; }
  .mem.van-kupac { grid-template-columns: 1fr; }
  .feladat { padding: 14px 14px 12px; }
  .teszt-reszlet { margin-left: 0; }
}

/* ---------------------------------------------------------------- widgetek */
.widget { margin: 18px 0 24px; padding: 16px 18px; border: 1px solid #c9d3c3; border-radius: 14px; background: #fff; }
.widget-cim { display: block; margin-bottom: 8px; font-weight: 650; font-size: 15px; }
.nev-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nev-sor input { flex: 1 1 240px; min-width: 0; padding: 10px 12px; border: 1px solid #b9c7cb; border-radius: 9px; font: 16px var(--mono); }
.nev-pelda code { font-size: 15px; }
.nev-pelda code:empty { display: none; }
.nev-itelet { margin-top: 10px; padding: 0 2px; font-size: 15px; }
.nev-itelet:empty { display: none; }
.nev-itelet p { margin: 0 0 6px; font-size: 15px; }
.nev-itelet ul { margin: 0; padding-left: 20px; }
.nev-itelet li { font-size: 14.5px; }
.nev-itelet[data-fajta="jo"] b { color: #23673a; }
.nev-itelet[data-fajta="rossz"] b { color: #8a3324; }
.igazsag-be { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.igazsag-kapcs { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; }
.igazsag-kapcs b { min-width: 52px; padding: 2px 8px; border-radius: 6px; font: 700 13px var(--mono); text-align: center; }
.igazsag-kapcs[aria-pressed="true"] b { background: #d6f0db; color: #23673a; }
.igazsag-kapcs[aria-pressed="false"] b { background: var(--red-soft); color: #8a3324; }
.igazsag-ki { display: grid; gap: 6px; margin-bottom: 14px; }
.igazsag-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; }
.igazsag-sor b { font: 700 14px var(--mono); padding: 1px 8px; border-radius: 6px; }
.igazsag-sor[data-v="true"] b { background: #d6f0db; color: #23673a; }
.igazsag-sor[data-v="false"] b { background: var(--red-soft); color: #8a3324; }
.igazsag-magy { color: var(--muted); font-size: 13.5px; }
.igazsag-tabla { margin: 0; font-family: var(--mono); font-size: 13.5px; }
.igazsag-tabla td, .igazsag-tabla th { text-align: center; }
.igazsag-tabla tr.aktiv td { background: #f1f8dc; font-weight: 700; }

.kp-nev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-fej { min-width: 0; }
@media (max-width: 640px) {
  .kp-ful { padding: 0 10px; gap: 6px; font-size: 12px; }
  .kp-gombok { gap: 4px; padding: 6px; }
  .feladat-panel .kp-gomb.fo span { display: none; }
  .feladat-panel .kp-gomb.fo { width: 34px; padding: 0; }
  .igazsag-tabla th, .igazsag-tabla td { padding: 7px 4px; font-size: 12px; }
  .igazsag-kapcs { flex: 1 1 100%; justify-content: space-between; }
}
.range-vezerlok { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.range-vezerlok label { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--mono); }
.range-vezerlok input { width: 74px; padding: 7px 8px; border: 1px solid #b9c7cb; border-radius: 8px; font: 15px var(--mono); }
.range-kod code { font-size: 15px; }
.range-sav { display: flex; flex-wrap: wrap; gap: 18px 4px; margin: 12px 0 8px; }
.range-szam { position: relative; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 4px; border: 1px solid var(--line); border-radius: 8px; background: #f7f8f3; color: #9aa6a1; font: 600 14px var(--mono); }
.range-szam.benne { background: var(--green); border-color: var(--green-line); color: var(--ink); }
.range-szam.stop { border-style: dashed; border-color: #c4513f; color: #c4513f; background: #fff; }
.range-szam i { position: absolute; top: -16px; font: 700 11px var(--mono); font-style: normal; letter-spacing: .5px; color: var(--muted); }
.range-sav { padding-top: 14px; }
.range-ki { font-size: 15px !important; margin: 0 !important; }
.szelet-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.szelet-sor code { font-size: 16px; background: none; padding: 0; }
.szelet-sor input { width: 110px; padding: 7px 9px; border: 1px solid #b9c7cb; border-radius: 8px; font: 16px var(--mono); }
.szelet-mintak { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; }
.szelet-mintak button, .halmaz-gombok button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: #f7f8f3; font: 13px var(--mono); cursor: pointer; }
.szelet-mintak button:hover, .halmaz-gombok button:hover { border-color: #8aab80; }
.szelet-cellak { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 10px; }
.szelet-cella { position: relative; display: grid; justify-items: center; min-width: 52px; padding: 4px 6px; border: 1px solid #c9d3c3; margin-right: -1px; background: #fff; }
.szelet-cella.ki { background: var(--green); border-color: var(--green-line); z-index: 1; }
.szi { font: 12px var(--mono); color: #3e617d; }
.szi.neg { color: #854e4e; }
.szv { font: 700 17px var(--mono); padding: 4px 0; }
.szs { position: absolute; top: -9px; right: -6px; padding: 0 4px; border-radius: 6px; background: var(--ink); color: var(--green); font: 700 10px var(--mono); }
.szelet-ki { margin: 0 !important; font-size: 15px !important; }
.szelet-hiba { color: #8a3324; font-size: 14.5px; }
.halmaz-be { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.halmaz-be label { display: inline-flex; flex: 1 1 340px; min-width: 0; align-items: center; gap: 6px; font: 600 15px var(--mono); }
.halmaz-be input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid #b9c7cb; border-radius: 8px; font: 15px var(--mono); }
.halmaz-gombok { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.halmaz-gombok button { font-size: 14px; }
.halmaz-gombok small { font-family: "Segoe UI", system-ui, sans-serif; color: var(--muted); }
.halmaz-gombok button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.halmaz-gombok button[aria-pressed="true"] small { color: var(--green); }
.venn { display: block; width: 100%; max-width: 460px; height: auto; margin: 4px auto; }
.venn path { fill: transparent; transition: fill .25s; }
.venn path.be { fill: #d3ef88; }
.venn .kor { fill: none; stroke: #172b36; stroke-width: 2; }
.venn .cimke { font: 700 18px var(--mono); fill: #172b36; }
.venn foreignObject div { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px; height: 100%; font: 700 14px var(--mono); }
.venn foreignObject span { padding: 1px 6px; border-radius: 6px; background: #ffffffd9; border: 1px solid #c9d3c3; }
.halmaz-ki { font-size: 15px !important; margin: 0 !important; }
.halmaz-megj { color: var(--muted); font-size: 13px; }
.kocka-gombok { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kocka-gombok button { padding: 7px 12px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: #fff; font: 600 14px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.kocka-gombok button.masodlagos { background: #fff; color: var(--ink); border-color: var(--line); }
.kocka-oszlopok { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; max-width: 520px; }
.kocka-oszlop { display: grid; justify-items: center; gap: 4px; }
.kocka-sav { display: flex; align-items: flex-end; width: 100%; height: 130px; border-radius: 8px; background: #f1f3ec; overflow: hidden; }
.kocka-sav i { display: block; width: 100%; background: var(--green-dark); transition: height .3s ease; }
.kocka-oszlop.utolso .kocka-sav i { background: var(--sun); }
.kocka-oszlop b { font: 800 16px var(--mono); }
.kocka-oszlop small, .kocka-szam { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.kocka-ki { margin: 12px 0 0 !important; font-size: 15px !important; }
.keret-tabla td .v { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* --- átnézés utáni finomítások --- */
.igazsag-tabla th { text-transform: none; font-family: var(--mono); letter-spacing: 0; font-size: 13px; }
.lanc .nyil { line-height: 1; font-size: 16px; }
.feladat-leiras pre.minta { position: relative; padding-top: 28px; }
.feladat-leiras pre.minta::before { content: "MINTAFUTÁS"; position: absolute; top: 8px; left: 14px; color: #8ea3aa; font: 700 10px "Segoe UI", system-ui, sans-serif; letter-spacing: 1.4px; }
.nyk-gombok button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.nyk-gombok svg, .nyk-bezar svg { width: 16px; height: 16px; }
.nyk-bezar { display: grid; place-items: center; }
.nyk-lepesszam[data-var="1"] { color: #8a5a00; font-weight: 600; }
.teszt-lista details.teszt-reszlet > summary { cursor: pointer; color: var(--muted); font-size: 13.5px; margin-bottom: 6px; }
.elteres mark { background: #f8c9bd; color: inherit; border-radius: 2px; padding: 0 1px; }
.kiert-return { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kiert-return code { padding: 4px 9px; border-radius: 7px; background: var(--code-bg); color: var(--code-fg); font-size: 14px; }
.kiert-return b { padding: 4px 9px; border-radius: 7px; background: var(--code-bg); color: var(--green); box-shadow: 0 0 0 2px var(--green); font: 700 14px var(--mono); }
@media (max-width: 640px) {
  .kp-fej { flex-wrap: wrap; }
  .kp-ful { flex: 1 1 auto; min-height: 42px; border-right: 0; }
  .kp-nev { min-width: 9ch; }
  .kp-gombok { margin-left: auto; }
  .feladat-panel .kp-gomb.fo span { display: inline; }
  .feladat-panel .kp-gomb.fo { width: auto; padding: 0 12px; }
  .feladat-panel [data-m="futtat"] span { display: none; }
  .szelet-cellak { flex-wrap: nowrap; overflow-x: auto; padding-top: 10px; }
  .szelet-cella { min-width: 42px; }
  .szelet-mintak { margin-left: 0; }
  .nyk-gombok .nyk-lejatszas span { display: none; }
  .nyk-gombok .nyk-lejatszas { min-width: 44px; }
  .nyk-gombok [data-l="eleje"], .nyk-gombok [data-l="vege"] { display: none; }
}
.nyk-gombok button:disabled { opacity: .45; cursor: default; }