/* ============================================================
   JavaScript alapok — közös fejezet-stíluslap
   Minden fejezetoldal ezt tölti be (assets/style.css).
   ============================================================ */

  /* ============================================================
     PALETTA — „JavaScript-arany" meleg paletta, sötét (alap) + világos téma
     MySQL = KÉK · C# = lila · JS = ARANY · Node = zöld
     ============================================================ */
  :root{
    --bg:#1c1917; --panel:#292524; --panel2:#3a3531; --panel3:#231f1c;
    --ink:#ece9e6; --ink-strong:#ffffff; --muted:#a8a29e; --line:#44403c;
    --accent:#fbbf24; --accent2:#fcd34d; --accent-ink:#1c1917;
    --green:#34d399; --violet:#a78bfa; --orange:#fb923c; --red:#f87171; --cyan:#38bdf8;
    --code-bg:#13110f; --code-ink:#ece9e6;
    --icode-bg:#13110f; --icode-ink:#fcd34d;
    --card-in:#13110f; --card-in-ink:#ece9e6; --opt-bg:rgba(255,255,255,.045);
    --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(167,139,250,.10); --info-line:rgba(167,139,250,.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);
    --node-bg:rgba(56,189,248,.09);  --node-line:rgba(56,189,248,.40);
    --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-sm:0 2px 8px rgba(0,0,0,.25);
    --hero-from:#f7df1e; --hero-to:#f0b400; --hero-ink:#1c1917; --hero-ink2:#2a2520;
    --zebra:rgba(255,255,255,.025);
  }
  :root[data-theme="light"]{
    --bg:#faf7f2; --panel:#ffffff; --panel2:#f1ebe1; --panel3:#f7f3ec;
    --ink:#292524; --ink-strong:#1c1917; --muted:#78716c; --line:#e0d9cf;
    --accent:#b45309; --accent2:#92400e; --accent-ink:#ffffff;
    --green:#047857; --violet:#6d28d9; --orange:#c2410c; --red:#b91c1c; --cyan:#0369a1;
    --code-bg:#1c1917; --code-ink:#ece9e6;
    --icode-bg:#fdf3d8; --icode-ink:#92400e;
    --card-in:#f7f3ec; --card-in-ink:#292524; --opt-bg:#ffffff;
    --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(109,40,217,.07); --info-line:rgba(109,40,217,.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);
    --node-bg:rgba(3,105,161,.07);  --node-line:rgba(3,105,161,.32);
    --shadow:0 8px 24px rgba(90,60,15,.10); --shadow-sm:0 1px 4px rgba(90,60,15,.10);
    --zebra:rgba(90,60,15,.03);
  }

  *{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;}

  /* ---------- hero — JS-logó hangulat: arany háttér, sötét szöveg ---------- */
  header.hero{
    background:linear-gradient(135deg,var(--hero-from) 0%,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:.7; 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:720px; color:var(--hero-ink2); opacity:.9;}
  header.hero strong{color:var(--hero-ink);}
  header.hero code.inline{background:rgba(0,0,0,.14); 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,.12); border:1px solid rgba(0,0,0,.22); color:var(--hero-ink);
    border-radius:20px; padding:4px 12px; font-size:.78rem; font-weight:700;
  }

  /* ---------- célok + tartalom ---------- */
  .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 — JS-szintaxis színei (sötét háttéren) ---------- */
  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;
  }
  pre .kw{color:#c792ea;} pre .fn{color:#82aaff;} pre .str{color:#c3e88d;}
  pre .com{color:#857f78; font-style:italic;} pre .num{color:#f78c6c;} pre .tbl{color:#ffcb6b;}
  pre.out{border-left-color:var(--green);}
  pre.danger{background:var(--code-bg); border-color:var(--line); border-left-color:var(--red);}
  pre .err{color:#f87171;}
  pre .prompt{color:#5c6b7a; user-select:none;}
  pre.term{border-left-color:var(--cyan);}

  .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);}
  .node{background:var(--node-bg); border-color:var(--node-line);} .node .lbl{color:var(--cyan);}

  .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 */
  .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 pre{margin:0; height:calc(100% - 26px);}

  /* ---------- interaktív dobozok ---------- */
  .ix{background:var(--panel); border:1px solid var(--accent); border-radius:16px; padding:24px 22px 20px; margin:30px 0; position:relative;}
  .ix::before{
    content:"⚡ ÉLŐ KÓD"; position:absolute; top:-12px; left:18px;
    background:var(--accent); color:var(--accent-ink); font-size:.7rem; font-weight:800;
    letter-spacing:.1em; padding:3px 11px; border-radius:20px;
  }
  .ix.tasks{border-color:var(--line);} .ix.tasks::before{content:"🛠 FELADATOK"; background:var(--violet); color:#1c1917;}
  :root[data-theme="light"] .ix.tasks::before{color:#ffffff;}
  .ix h3{margin-top:2px;}
  .ix .hint{color:var(--muted); font-size:.88rem; font-style:italic; margin-top:0;}
  .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:disabled{opacity:.45; cursor:default; filter:none;}
  .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.green{background:var(--green); color:#04261a;}
  :root[data-theme="light"] .btn.green{color:#ffffff;}
  .bar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:12px;}
  .bar .sp{flex:1;}

  .chips{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px;}
  .chip{background:var(--card-in); border:1px solid var(--line); border-radius:20px; padding:5px 13px; font-size:.82rem;
        cursor:pointer; color:var(--accent2); transition:.12s; font-family:inherit;}
  .chip:hover{border-color:var(--accent); background:var(--panel2);}
  .chip.active{border-color:var(--accent); background:var(--accent); color:var(--accent-ink);}

  .ed{
    width:100%; min-height:120px; resize:vertical; background:var(--code-bg); color:var(--code-ink);
    border:1px solid var(--line); border-radius:10px; padding:14px 16px; tab-size:2;
    font-family:"Cascadia Mono","Consolas","Courier New",monospace; font-size:.9rem; line-height:1.55;
  }
  .ed:focus{outline:none; border-color:var(--accent);}
  .out{
    margin-top:10px; background:var(--code-bg); border:1px solid var(--line); border-left:4px solid var(--green);
    border-radius:10px; padding:12px 16px; font-family:"Cascadia Mono","Consolas","Courier New",monospace;
    font-size:.88rem; min-height:24px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--code-ink); line-height:1.55;
  }
  .out.err{border-left-color:var(--red);} .out.err .e{color:#f87171;}
  .out .muted{color:#857f78; font-style:italic;}
  .out .warnl{color:#fb923c;}
  .out-title{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:800; margin:12px 0 -4px;}

  /* ---------- feladatok (gyakorlómotor) ---------- */
  .task{background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:14px 0; color:var(--card-in-ink); position:relative;}
  .task .th{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px;}
  .task .id{font-weight:800; color:var(--accent2); font-size:.92rem;}
  .task .cim{font-weight:700; color:var(--ink-strong); font-size:1rem;}
  .task .stars{color:var(--orange); font-size:.82rem; letter-spacing:.08em;}
  .task .done{margin-left:auto; font-size:.78rem; font-weight:800; color:var(--green); border:1px solid var(--tip-line); background:var(--tip-bg); border-radius:20px; padding:2px 10px; display:none;}
  .task.kesz{border-color:var(--tip-line);} .task.kesz .done{display:inline-block;}
  .task .leiras p{margin:6px 0; font-size:.95rem;}
  .task .leiras ul, .task .leiras ol{margin:6px 0; padding-left:20px; font-size:.95rem;} .task .leiras li{margin:3px 0;}
  .task .leiras pre{margin:8px 0 4px; font-size:.84rem;}
  .task .adott{font-size:.84rem; color:var(--muted); margin:8px 0 6px;}
  .task .adott code{font-family:"Cascadia Mono","Consolas",monospace; color:var(--accent2); background:var(--panel2); padding:1px 6px; border-radius:5px;}
  .task .ed{min-height:110px; margin-top:8px;}
  .task .out{display:none;} .task .out.show{display:block;}
  .task .tesztek{margin-top:10px; display:none; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
  .task .tesztek.show{display:block;}
  .task .tesztek .t{display:flex; gap:10px; padding:7px 12px; font-size:.84rem; border-top:1px solid var(--line); align-items:flex-start;
                    font-family:"Cascadia Mono","Consolas",monospace; overflow-wrap:anywhere;}
  .task .tesztek .t:first-child{border-top:none;}
  .task .tesztek .t.ok{background:var(--ok-bg); color:var(--ok-ink);} .task .tesztek .t.no{background:var(--bad-bg); color:var(--bad-ink);}
  .task .tesztek .t .ic{flex:0 0 auto; font-weight:800;}
  .task .tesztek .t .txt{flex:1; min-width:0; white-space:pre-wrap;}
  .task .tesztek .t .txt b{font-family:"Segoe UI",Roboto,sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.04em;}
  .task .osszeg{padding:8px 12px; font-size:.86rem; font-weight:700; font-family:"Segoe UI",Roboto,sans-serif;}
  .task .osszeg.ok{color:var(--green);} .task .osszeg.no{color:var(--orange);}
  .task .tipp{display:none; margin-top:10px; font-size:.9rem; padding:10px 14px; border-radius:10px; background:var(--info-bg); border:1px solid var(--info-line);}
  .task .tipp.show{display:block;}
  .task .megoldas{display:none; margin-top:10px;} .task .megoldas.show{display:block;}
  .task .megoldas pre{margin:0; border-left-color:var(--violet);}
  .task .megoldas .lbl{font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--violet); font-weight:800; margin-bottom:6px;}
  .task-progress{display:flex; align-items:center; gap:12px; margin:8px 0 14px; font-size:.86rem; color:var(--muted);}
  .task-progress .pbar{flex:1; height:6px; background:var(--panel2); border-radius:4px; overflow:hidden;}
  .task-progress .pbar i{display:block; height:100%; width:0; background:var(--green); transition:width .25s;}
  .task-progress b{color:var(--ink-strong);}
  .subhead{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:800; margin:22px 0 6px;}

  .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: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;}
    .ix{padding:22px 15px 18px;}
    .grid2{grid-template-columns:1fr;}
  }
  @media print{
    .topbar,.ix .bar,.pager{display:none;}
    body{background:#fff; color:#000;}
  }