/* ===========================================================================
   HTML & CSS alapok — közös LECKE-stíluslap.
   Minden leckeoldal és feladatlap ezt tölti be (assets/style.css).
   A vezérlőpult stílusa külön fájlban: assets/dashboard.css
   =========================================================================== */

  /* ============================================================
     SZÍNPALETTA — „Bíbor–korall grafiton”
     Sötét = alapértelmezett, világos = [data-theme="light"]
     ============================================================ */
  :root{
    --bg:#17131a; --panel:#211b26; --panel2:#2e2634; --panel3:#1c1721;
    --ink:#ece6ee; --ink-strong:#ffffff; --muted:#a99fb0; --line:#3b3243;
    --accent:#fb7185; --accent2:#fda4af; --accent-ink:#2a0e17;
    --accent-soft:rgba(251,113,133,.14);
    --green:#34d399; --violet:#c084fc; --amber:#fbbf24; --orange:#fb923c;
    --red:#f87171; --cyan:#38bdf8;
    --code-bg:#110e14; --code-ink:#ece6ee;
    --icode-bg:#110e14; --icode-ink:#fda4af;
    --card-in:#110e14; --card-in-ink:#ece6ee;
    --ok-bg:rgba(52,211,153,.18); --ok-ink:#d1fae5;
    --bad-bg:rgba(248,113,113,.16); --bad-ink:#fecaca;
    --tip-bg:rgba(52,211,153,.09);   --tip-line:rgba(52,211,153,.40);
    --info-bg:rgba(192,132,252,.10); --info-line:rgba(192,132,252,.45);
    --warn-bg:rgba(251,146,60,.10);  --warn-line:rgba(251,146,60,.45);
    --dgr-bg:rgba(248,113,113,.11);  --dgr-line:rgba(248,113,113,.50);
    --key-bg:rgba(56,189,248,.09);   --key-line:rgba(56,189,248,.40);
    --shadow:0 10px 30px rgba(0,0,0,.40); --shadow-sm:0 2px 8px rgba(0,0,0,.28);
    --hero-from:#f43f5e; --hero-mid:#be123c; --hero-to:#86198f;
    --hero-ink:#fff5f7; --hero-ink2:#ffe0e7;
    --zebra:rgba(255,255,255,.025);
    --elo-bg:#ffffff;
  }
  :root[data-theme="light"]{
    --bg:#faf5f7; --panel:#ffffff; --panel2:#f6ebef; --panel3:#fdf8fa;
    --ink:#3a2f35; --ink-strong:#1f181c; --muted:#7c6b74; --line:#e7d9df;
    --accent:#be123c; --accent2:#9f1239; --accent-ink:#ffffff;
    --accent-soft:rgba(190,18,60,.09);
    --green:#047857; --violet:#7c3aed; --amber:#b45309; --orange:#c2410c;
    --red:#b91c1c; --cyan:#0369a1;
    --code-bg:#1c141a; --code-ink:#ece6ee;
    --icode-bg:#fbe8ee; --icode-ink:#9f1239;
    --card-in:#fdf8fa; --card-in-ink:#3a2f35;
    --ok-bg:rgba(4,120,87,.12); --ok-ink:#064e3b;
    --bad-bg:rgba(185,28,28,.10); --bad-ink:#7f1d1d;
    --tip-bg:rgba(4,120,87,.07);    --tip-line:rgba(4,120,87,.32);
    --info-bg:rgba(124,58,237,.07); --info-line:rgba(124,58,237,.30);
    --warn-bg:rgba(194,65,12,.08);  --warn-line:rgba(194,65,12,.32);
    --dgr-bg:rgba(185,28,28,.06);   --dgr-line:rgba(185,28,28,.30);
    --key-bg:rgba(3,105,161,.07);   --key-line:rgba(3,105,161,.32);
    --shadow:0 8px 24px rgba(110,20,50,.10); --shadow-sm:0 1px 4px rgba(110,20,50,.10);
    --hero-from:#e11d48; --hero-mid:#a21caf; --hero-to:#7e22ce;
    --hero-ink:#ffffff; --hero-ink2:#fde8ef;
    --zebra:rgba(110,20,50,.03);
    --elo-bg:#ffffff;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:74px;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.7; font-size:17px;
  }
  ::selection{background:var(--accent); color:var(--accent-ink);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
  .wrap{max-width:1000px; margin:0 auto; padding:0 22px 90px;}

  /* ---------- felső sáv ---------- */
  .topbar{
    position:sticky; top:0; z-index:30;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  }
  .topbar .in{max-width:1000px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:14px;}
  .topbar a.back{
    display:inline-flex; align-items:center; gap:7px; text-decoration:none;
    color:var(--muted); font-size:.86rem; font-weight:600; padding:6px 11px;
    border:1px solid var(--line); border-radius:9px; background:var(--panel); white-space:nowrap;
  }
  .topbar a.back:hover{color:var(--accent2); border-color:var(--accent);}
  .topbar .now{flex:1; min-width:0; font-size:.86rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .topbar .now b{color:var(--ink); font-weight:600;}
  .iconbtn{
    background:var(--panel); border:1px solid var(--line); color:var(--ink);
    width:36px; height:36px; border-radius:9px; display:grid; place-items:center; cursor:pointer; transition:.15s;
  }
  .iconbtn:hover{border-color:var(--accent); color:var(--accent2);}
  :root[data-theme="dark"] .ico-sun{display:block;} :root[data-theme="dark"] .ico-moon{display:none;}
  :root[data-theme="light"] .ico-sun{display:none;} :root[data-theme="light"] .ico-moon{display:block;}
  .progress{height:3px; background:transparent;}
  .progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .1s linear;}

  /* ---------- fejléc ---------- */
  header.hero{
    background:linear-gradient(135deg,var(--hero-from) 0%,var(--hero-mid) 55%,var(--hero-to) 100%);
    color:var(--hero-ink); padding:40px 22px 34px;
  }
  header.hero .inner{max-width:1000px; margin:0 auto;}
  header.hero .kicker{text-transform:uppercase; letter-spacing:.17em; font-size:.78rem; opacity:.8; margin:0 0 10px; font-weight:800;}
  header.hero h1{margin:0 0 10px; font-size:2.2rem; line-height:1.14; color:var(--hero-ink);}
  header.hero p{margin:0; font-size:1.04rem; max-width:730px; color:var(--hero-ink2);}
  header.hero strong{color:var(--hero-ink);}
  header.hero code.inline{background:rgba(0,0,0,.22); color:var(--hero-ink);}
  header.hero .meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
  header.hero .meta span{
    background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.25); color:var(--hero-ink);
    border-radius:20px; padding:4px 12px; font-size:.78rem; font-weight:700;
  }

  /* ---------- célok + tartalomjegyzék ---------- */
  .goals{
    background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--accent);
    border-radius:14px; padding:18px 22px; margin:26px 0 0;
  }
  .goals h2{margin:0 0 10px; font-size:.95rem; color:var(--accent2); text-transform:uppercase; letter-spacing:.09em;}
  .goals ul{margin:0; padding-left:20px;} .goals li{margin:5px 0; font-size:.96rem;}

  nav.toc{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin:22px 0 34px;}
  nav.toc h2{margin:0 0 10px; font-size:.95rem; color:var(--accent2); text-transform:uppercase; letter-spacing:.09em;}
  nav.toc ol{margin:0; padding-left:22px; columns:2; column-gap:34px;}
  nav.toc li{margin:4px 0; break-inside:avoid;}
  nav.toc a{color:var(--ink); text-decoration:none; font-size:.95rem;}
  nav.toc a:hover{color:var(--accent2); text-decoration:underline;}

  /* ---------- szakaszok ---------- */
  section{margin:44px 0; scroll-margin-top:74px;}
  h2.sec{font-size:1.5rem; margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid var(--line); color:var(--ink-strong); line-height:1.25;}
  h2.sec .num{
    display:inline-block; background:var(--accent); color:var(--accent-ink);
    border-radius:8px; padding:2px 11px; font-size:1rem; margin-right:12px; font-weight:800; vertical-align:2px;
  }
  h3{font-size:1.16rem; color:var(--accent2); margin:28px 0 8px;}
  h4{font-size:1rem; color:var(--ink-strong); margin:20px 0 6px;}
  p{margin:12px 0;} strong{color:var(--ink-strong);}
  a{color:var(--accent2);}
  ul.clean{margin:12px 0; padding-left:22px;} ul.clean li{margin:6px 0;}
  ol.clean{margin:12px 0; padding-left:22px;} ol.clean li{margin:6px 0;}

  code.inline{
    background:var(--icode-bg); color:var(--icode-ink); padding:2px 7px; border-radius:6px;
    font-family:"Cascadia Mono","Consolas","Courier New",monospace; font-size:.9em;
    word-break:normal; overflow-wrap:break-word;
  }
  table.data code.inline{overflow-wrap:normal; word-break:normal;}
  kbd{background:var(--panel2); border:1px solid var(--line); border-bottom-width:3px;
      border-radius:6px; padding:1px 8px; font-family:inherit; font-size:.86em; color:var(--ink-strong);}

  /* ---------- kódblokk ---------- */
  pre{
    background:var(--code-bg); border:1px solid var(--line); border-left:4px solid var(--accent);
    border-radius:10px; padding:15px 17px; overflow-x:auto; margin:16px 0;
    font-family:"Cascadia Mono","Consolas","Courier New",monospace; font-size:.88rem; line-height:1.6;
    color:var(--code-ink); white-space:pre; tab-size:2;
  }
  pre.css{border-left-color:var(--cyan);}
  pre.term{border-left-color:var(--green);}
  pre.rossz{border-left-color:var(--red);}
  pre.jo{border-left-color:var(--green);}

  /* szintaxiskiemelés — a színek a sötét kódháttérhez igazodnak mindkét témában */
  pre .tag{color:#ff8fa3;}
  pre .attr{color:#fbbf24;}
  pre .val{color:#86efac;}
  pre .pun{color:#b6a9bf;}
  pre .dt{color:#c084fc;}
  pre .com{color:#8b7d95; font-style:italic;}
  pre .sel{color:#ff8fa3;}
  pre .prop{color:#93c5fd;}
  pre .cval{color:#fcd34d;}
  pre .num{color:#fda4af;}
  pre .str{color:#86efac;}
  pre .at{color:#c084fc;}
  pre .hib{background:rgba(248,113,113,.22); border-bottom:2px wavy #f87171; border-radius:3px;}
  pre .kiemel{background:rgba(251,191,36,.18); border-radius:3px; padding:1px 2px;}

  /* fájlnév-címke a kódblokk fölött */
  .kodfej{
    display:inline-flex; align-items:center; gap:7px; margin:16px 0 -10px;
    background:var(--panel2); border:1px solid var(--line); border-bottom:none;
    border-radius:9px 9px 0 0; padding:4px 13px; font-size:.76rem; font-weight:700;
    color:var(--muted); font-family:"Cascadia Mono","Consolas",monospace;
  }
  .kodfej + .pre-burok > pre{border-top-left-radius:0; margin-top:10px;}
  .kodfej .pont{width:8px; height:8px; border-radius:50%; background:var(--accent);}
  .kodfej.css .pont{background:var(--cyan);}

  /* másolás gomb — a page.js minden <pre> köré tesz egy .pre-burok dobozt */
  .pre-burok{position:relative;}
  .pre-burok .masol{
    position:absolute; top:8px; right:10px; opacity:0; pointer-events:none;
    background:var(--panel2); color:var(--muted); border:1px solid var(--line);
    border-radius:7px; padding:3px 10px; font:inherit; font-size:.72rem; font-weight:700;
    cursor:pointer; transition:opacity .15s, color .15s, border-color .15s;
  }
  .pre-burok:hover .masol, .pre-burok .masol:focus-visible{opacity:1; pointer-events:auto;}
  .pre-burok .masol:hover{color:var(--accent2); border-color:var(--accent);}

  /* ---------- callout dobozok ---------- */
  .callout{border-radius:12px; padding:14px 18px; margin:18px 0; border:1px solid; font-size:.96rem;}
  .callout p:first-child{margin-top:0;} .callout p:last-child{margin-bottom:0;}
  .callout .lbl{font-weight:800; display:block; margin-bottom:4px; letter-spacing:.04em; font-size:.82rem;}
  .tip{background:var(--tip-bg); border-color:var(--tip-line);} .tip .lbl{color:var(--green);}
  .info{background:var(--info-bg); border-color:var(--info-line);} .info .lbl{color:var(--violet);}
  .warn{background:var(--warn-bg); border-color:var(--warn-line);} .warn .lbl{color:var(--orange);}
  .danger{background:var(--dgr-bg); border-color:var(--dgr-line);} .danger .lbl{color:var(--red);}
  .kulcs{background:var(--key-bg); border-color:var(--key-line);} .kulcs .lbl{color:var(--cyan);}

  /* ---------- táblázatok ---------- */
  .tbl{overflow-x:auto; margin:16px 0;}
  table.data{border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px;}
  .tbl.narrow table.data{min-width:0;}
  table.data th, table.data td{border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top;}
  table.data th{background:var(--panel2); color:var(--accent2); font-weight:700;}
  table.data tr:nth-child(even) td{background:var(--zebra);}
  table.data caption{caption-side:top; text-align:left; color:var(--muted); font-style:italic; margin-bottom:6px; font-size:.92rem;}
  table.data td.ok{color:var(--green); font-weight:700; text-align:center;}
  table.data td.no{color:var(--red); font-weight:700; text-align:center;}

  .pill{display:inline-block; background:var(--panel2); border:1px solid var(--line); border-radius:20px;
        padding:3px 12px; font-size:.85rem; margin:3px 4px 3px 0; color:var(--accent2); font-weight:600;}

  figure.fig{margin:24px 0; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 18px 12px;}
  figure.fig .scroll{overflow-x:auto;}
  figure.fig svg{display:block; width:100%; height:auto;}
  figure.fig figcaption{margin-top:10px; font-size:.85rem; color:var(--muted); text-align:center;}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

  /* egymás melletti kódpár (pl. jó / rossz) */
  .duo{display:flex; gap:14px; flex-wrap:wrap; align-items:stretch; margin:16px 0;}
  .duo .col{flex:1 1 300px; min-width:0;}
  .duo .col .lbl{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--muted); margin-bottom:6px;}
  .duo .col.jo .lbl{color:var(--green);} .duo .col.rossz .lbl{color:var(--red);}
  .duo pre{margin:0; height:calc(100% - 26px);}

  /* ============================================================
     PÉLDA + ÉLŐ EREDMÉNY
     A .demo doboz a kódot és a böngésző valódi kimenetét
     mutatja egymás mellett. Az eredmény egy izolált <iframe>-ben
     jelenik meg, hogy az oldal saját CSS-e ne zavarjon bele.
     (Nem szerkeszthető: ez bemutató, nem játszótér.)
     ============================================================ */
  .demo{
    margin:24px 0; background:var(--panel); border:1px solid var(--line);
    border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm);
  }
  .demo > .cim{
    padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel3);
    font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
    display:flex; align-items:center; gap:8px;
  }
  .demo > .cim::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto;}
  .demo-test{display:grid; grid-template-columns:1fr 1fr; gap:0;}
  .demo.egymas-alatt .demo-test{grid-template-columns:1fr;}
  .demo-kod{border-right:1px solid var(--line); min-width:0; display:flex; flex-direction:column;}
  .demo.egymas-alatt .demo-kod{border-right:none; border-bottom:1px solid var(--line);}
  .demo-kod .lbl, .demo-elo .lbl{
    font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800;
    color:var(--muted); padding:9px 14px 6px; display:flex; align-items:center; gap:7px;
  }
  .demo-kod .lbl .jel{color:var(--accent2); font-family:"Cascadia Mono",monospace;}
  .demo-kod .pre-burok{flex:0 0 auto; display:flex;}
  .demo-kod .pre-burok:last-child{flex:1 0 auto;}   /* az utolsó kódblokk tölti ki a maradékot */
  .demo-kod pre{
    margin:0; border:none; border-radius:0; border-left:3px solid var(--accent);
    flex:1; width:100%;
    white-space:pre-wrap;          /* keskeny hasábban inkább törjön, mint hogy elrejtse */
    overflow-x:visible;
  }
  .demo-kod .pre-burok + .lbl{border-top:1px solid var(--line);}
  .demo-kod pre.css{border-left-color:var(--cyan);}
  .demo-elo{min-width:0; display:flex; flex-direction:column; background:var(--panel3);}
  .demo-elo .keret{flex:1; padding:0 12px 12px;}
  .demo-elo iframe{
    width:100%; border:1px solid var(--line); border-radius:9px; background:var(--elo-bg);
    display:block; min-height:90px;
  }
  .demo .megj{
    border-top:1px solid var(--line); padding:10px 16px; font-size:.88rem; color:var(--muted); background:var(--panel3);
  }
  .demo .megj strong{color:var(--ink);}

  /* ---------- önellenőrző kérdések ---------- */
  .ell{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:6px 20px 16px; margin:28px 0;}
  .ell > h3{margin:16px 0 4px;}
  .ell .k{border-top:1px solid var(--line); padding:12px 0 4px;}
  .ell .k:first-of-type{border-top:none;}
  .ell .kerd{font-weight:600; color:var(--ink-strong); margin:0 0 8px;}
  .ell .valasz{
    display:none; margin:0 0 6px; padding:10px 14px; border-radius:10px;
    background:var(--tip-bg); border:1px solid var(--tip-line); font-size:.94rem;
  }
  .ell .valasz.show{display:block;}
  .ell .valasz p:first-child{margin-top:0;} .ell .valasz p:last-child{margin-bottom:0;}

  /* ---------- gombok ---------- */
  .btn{
    background:var(--accent); color:var(--accent-ink); border:none; border-radius:9px;
    padding:9px 17px; font-weight:700; cursor:pointer; font-size:.9rem; font-family:inherit; transition:.15s;
  }
  .btn:hover{filter:brightness(1.08);}
  .btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink);}
  .btn.ghost:hover{border-color:var(--accent); color:var(--accent2); filter:none;}
  .btn.small{padding:5px 12px; font-size:.82rem;}
  .bar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:12px;}
  .bar .sp{flex:1;}

  /* ---------- feladat-ajánló doboz a lecke végén ---------- */
  .feladat-cta{
    margin:34px 0 0; background:var(--panel); border:1px solid var(--violet);
    border-radius:16px; padding:20px 22px; position:relative;
  }
  .feladat-cta::before{
    content:"🛠 GYAKORLÓ FELADAT"; position:absolute; top:-12px; left:18px;
    background:var(--violet); color:#1a1020; font-size:.7rem; font-weight:800;
    letter-spacing:.1em; padding:3px 11px; border-radius:20px;
  }
  :root[data-theme="light"] .feladat-cta::before{color:#ffffff;}
  .feladat-cta h3{margin:6px 0 6px; color:var(--ink-strong);}
  .feladat-cta p{margin:6px 0; font-size:.95rem;}
  .feladat-cta a.gomb{
    display:inline-block; margin-top:10px; background:var(--violet); color:#1a1020;
    text-decoration:none; font-weight:700; border-radius:9px; padding:9px 18px; font-size:.92rem;
  }
  :root[data-theme="light"] .feladat-cta a.gomb{color:#ffffff;}
  .feladat-cta a.gomb:hover{filter:brightness(1.08);}

  /* ---------- összegzés, lapozó, lábléc ---------- */
  .summary{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px 22px 16px;}
  .summary ol{padding-left:22px;} .summary li{margin:9px 0;}

  .pager{display:flex; gap:12px; margin-top:44px; flex-wrap:wrap;}
  .pager a{
    flex:1 1 240px; text-decoration:none; background:var(--panel); border:1px solid var(--line);
    border-radius:13px; padding:14px 18px; transition:.15s; display:block; min-width:0;
  }
  .pager a:hover{border-color:var(--accent); box-shadow:var(--shadow-sm);}
  .pager .dir{font-size:.74rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-weight:800;}
  .pager .ttl{color:var(--ink-strong); font-weight:600; margin-top:3px; display:block;}
  .pager .next{text-align:right;}

  .footer{margin-top:50px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; text-align:center;}

  @media (max-width:900px){
    .demo-test{grid-template-columns:1fr;}
    .demo-kod{border-right:none; border-bottom:1px solid var(--line);}
  }
  @media (max-width:760px){
    body{font-size:16px;}
    nav.toc ol{columns:1;}
    header.hero h1{font-size:1.7rem;}
    header.hero{padding:30px 20px 26px;}
    .wrap{padding:0 16px 70px;}
    .topbar .in{padding:9px 16px;}
    h2.sec{font-size:1.28rem;}
    .grid2{grid-template-columns:1fr;}
  }
  @media print{
    .topbar,.pager{display:none;}
    body{background:#fff; color:#000;}
  }