/* ============================================================
   Git és GitHub tananyag — közös fejezet-stíluslap
   Minden témakör-oldal ezt tölti be (assets/style.css).
   Az oldalankénti extra elemek stílusa: css/<oldal>.css
   ============================================================ */

  /* ============================================================
     PALETTA — Git-narancs grafiton, sötét (alap) + világos téma
     Git = NARANCS · MySQL = kék · C# = lila · JS = arany · Node = zöld
     A türkiz (--cyan) az ágak és az „info” dobozok színe.
     ============================================================ */
  :root{
    --bg:#0d1014; --panel:#161a20; --panel2:#1f242c; --panel3:#1a1f26;
    --ink:#e5e8ec; --ink-strong:#ffffff; --muted:#98a0ab; --line:#2d333d;
    --accent:#f5693f; --accent2:#ffa07a; --accent-ink:#1a0c06;
    --green:#4ade80; --cyan:#2dd4bf; --orange:#fbbf24; --red:#f87171; --violet:#a78bfa; --blue:#60a5fa;
    --code-bg:#080a0d; --code-ink:#e5e8ec;
    --icode-bg:rgba(245,105,63,.13); --icode-ink:#ffb59a;
    --card-in:#101318; --card-in-ink:#e5e8ec; --opt-bg:rgba(255,255,255,.045);
    --ok-bg:rgba(74,222,128,.16); --ok-ink:#dcfce7;
    --bad-bg:rgba(248,113,113,.16); --bad-ink:#fecaca;
    --tip-bg:rgba(74,222,128,.08);   --tip-line:rgba(74,222,128,.38);
    --info-bg:rgba(45,212,191,.09);  --info-line:rgba(45,212,191,.38);
    --warn-bg:rgba(251,191,36,.10);  --warn-line:rgba(251,191,36,.45);
    --dgr-bg:rgba(248,113,113,.11);  --dgr-line:rgba(248,113,113,.50);
    --accent-soft:rgba(245,105,63,.14); --teal-soft:rgba(45,212,191,.13); --blue-soft:rgba(96,165,250,.13);
    --shadow:0 10px 30px rgba(0,0,0,.40); --shadow-sm:0 2px 8px rgba(0,0,0,.28);
    --hero-from:#f05032; --hero-mid:#c7361f; --hero-to:#6b1d12;
    --zebra:rgba(255,255,255,.025);
  }
  :root[data-theme="light"]{
    --bg:#f5f6f8; --panel:#ffffff; --panel2:#eef0f3; --panel3:#f9fafb;
    --ink:#1f2328; --ink-strong:#0d1014; --muted:#5b636e; --line:#d5d9df;
    --accent:#c2410c; --accent2:#9a3412; --accent-ink:#ffffff;
    --green:#15803d; --cyan:#0f766e; --orange:#b45309; --red:#b91c1c; --violet:#6d28d9; --blue:#1d4ed8;
    --code-bg:#11151a; --code-ink:#e5e8ec;
    --icode-bg:#fdebe3; --icode-ink:#9a3412;
    --card-in:#f9fafb; --card-in-ink:#1f2328; --opt-bg:#ffffff;
    --ok-bg:rgba(21,128,61,.11); --ok-ink:#14532d;
    --bad-bg:rgba(185,28,28,.09); --bad-ink:#7f1d1d;
    --tip-bg:rgba(21,128,61,.07);    --tip-line:rgba(21,128,61,.30);
    --info-bg:rgba(15,118,110,.07);  --info-line:rgba(15,118,110,.30);
    --warn-bg:rgba(180,83,9,.08);    --warn-line:rgba(180,83,9,.32);
    --dgr-bg:rgba(185,28,28,.06);    --dgr-line:rgba(185,28,28,.30);
    --accent-soft:rgba(194,65,12,.09); --teal-soft:rgba(15,118,110,.09); --blue-soft:rgba(29,78,216,.08);
    --shadow:0 8px 24px rgba(31,35,40,.10); --shadow-sm:0 1px 4px rgba(31,35,40,.10);
    --hero-from:#f05032; --hero-mid:#d23d22; --hero-to:#8a2414;
    --zebra:rgba(31,35,40,.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 — Git-narancs → rozsdabarna átmenet, fehér szöveg ---------- */
  header.hero{
    background:linear-gradient(135deg,var(--hero-from) 0%,var(--hero-mid) 60%,var(--hero-to) 100%);
    color:#ffffff; padding:44px 22px 38px;
  }
  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.25rem; line-height:1.14; color:#ffffff;}
  header.hero p{margin:0; font-size:1.04rem; max-width:720px; color:#fff1ec; opacity:.95;}
  header.hero strong{color:#ffffff;}
  header.hero code.inline{background:rgba(255,255,255,.15); color:#ffffff;}
  header.hero .meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
  header.hero .meta span{
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#ffffff;
    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 — parancssor és kód 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:#6b7684; font-style:italic;} pre .num{color:#f78c6c;} pre .tbl{color:#ffcb6b;}
  /* terminál: prompt, parancs, hash, ág, hozzáadott/törölt sor */
  pre .pr{color:#6b7684; user-select:none;} pre .cmd{color:#ffa07a;} pre .hash{color:#fbbf24;}
  pre .br{color:#2dd4bf;} pre .add{color:#4ade80;} pre .del{color:#f87171;}
  /* kimenet-blokk: zold szegely; veszely-blokk: piros szegely.
     A hatteret ujra ki kell mondani, mert a callout-ok csupasz .danger
     szabalya kulonben felulirna a kodblokk sotet hatteret. */
  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;}

  .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(--cyan);}
  .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);}

  .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;}
  .keyrow td:first-child{font-weight:700; color:var(--orange);}

  /* ---------- címkék ---------- */
  .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;}
  /* eszközcímkék — ugyanazok, mint a vezérlőpulton */
  .tool{font:700 .7rem/1 "Cascadia Mono",Consolas,monospace; padding:3px 6px; border-radius:6px; border:1px solid transparent; white-space:nowrap; vertical-align:1px;}
  .tool.cli{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
  .tool.gui{color:var(--cyan); background:var(--teal-soft); border-color:color-mix(in srgb,var(--cyan) 35%,transparent);}
  .tool.web{color:var(--blue); background:var(--blue-soft); border-color:color-mix(in srgb,var(--blue) 35%,transparent);}

  /* ---------- ábrák ---------- */
  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;}
  .svg-t{font-family:"Segoe UI",Roboto,Arial,sans-serif;}
  .grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;}   /* minmax(0,…): a hosszú kódsor ne tolja szét */

  /* ---------- 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:"⚡ PRÓBÁLD KI"; 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.quiz::before{content:"❓ ÖNELLENŐRZŐ KVÍZ";}
  .ix.tasks{border-color:var(--line);} .ix.tasks::before{content:"🛠 FELADATOK"; background:var(--cyan); color:#0d1014;}
  :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;}
  .bar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:14px;}

  /* ---------- besoroló játék ---------- */
  .sorter .q{
    background:var(--card-in); border:1px solid var(--line); border-radius:12px;
    padding:18px 18px; text-align:center; color:var(--card-in-ink);
  }
  .sorter .q .item{font-size:1.08rem; font-weight:600; line-height:1.45; overflow-wrap:anywhere;}
  .sorter .q .item code{font-family:"Cascadia Mono","Consolas",monospace; color:var(--accent2);}
  .sorter.mono .q .item{font-family:"Cascadia Mono","Consolas",monospace; font-size:1.02rem;}
  .sorter .opts{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap;}
  .sorter .opts button{
    flex:1 1 140px; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
    border-radius:10px; padding:11px 12px; cursor:pointer; font-size:.94rem; font-family:inherit; font-weight:600; transition:.14s;
  }
  .sorter .opts button:hover:not(:disabled){border-color:var(--accent); color:var(--accent2);}
  .sorter .opts button.correct{background:var(--tip-bg); border-color:var(--green); color:var(--green);}
  .sorter .opts button.wrong{background:var(--dgr-bg); border-color:var(--red); color:var(--red);}
  .sorter .opts button:disabled{cursor:default;}
  .sorter .fb{margin-top:12px; font-size:.92rem; min-height:22px; line-height:1.55; color:var(--muted);}
  .sorter .meta{display:flex; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--muted); margin-bottom:10px;}
  .pbar{height:5px; background:var(--panel2); border-radius:4px; overflow:hidden; margin-bottom:14px;}
  .pbar i{display:block; height:100%; width:0; background:var(--accent); transition:width .25s;}

  /* ---------- kvíz ---------- */
  .quiz-q{margin:14px 0; padding:16px 18px; background:var(--card-in); border:1px solid var(--line); border-radius:12px; color:var(--card-in-ink);}
  .quiz-q .qtext{font-weight:600; margin-bottom:10px; line-height:1.5;}
  .quiz-opt{
    display:block; width:100%; text-align:left; background:var(--opt-bg); border:1px solid var(--line);
    border-radius:9px; padding:9px 14px; margin:6px 0; color:var(--card-in-ink); cursor:pointer;
    transition:.14s; font-size:.93rem; font-family:inherit; line-height:1.45;
  }
  .quiz-opt:hover:not(:disabled){border-color:var(--accent);}
  .quiz-opt:disabled{cursor:default;}
  .quiz-opt.correct{background:var(--ok-bg); border-color:var(--green); color:var(--ok-ink);}
  .quiz-opt.wrong{background:var(--bad-bg); border-color:var(--red); color:var(--bad-ink);}
  /* többválasztós kérdés: kijelölés, majd ellenőrzés */
  .quiz-q .multi{font-weight:700; color:var(--accent2); font-size:.84rem;}
  .quiz-opt.picked{border-color:var(--accent); background:var(--accent-soft);}
  .quiz-opt.picked::before, .quiz-opt.chosen::before{content:"✓ "; font-weight:800;}
  .quiz-opt.missed{border:2px dashed var(--green); padding:8px 13px;}
  .quiz-check{margin-top:6px;}
  .quiz-fb{margin-top:9px; font-size:.88rem; min-height:20px; color:var(--muted); line-height:1.55;}
  .quiz-fb.ok{color:var(--green);} .quiz-fb.no{color:var(--orange);}
  .quiz-score{margin-top:16px; font-weight:800; color:var(--accent2); font-size:1rem;}

  /* ---------- feladatok ---------- */
  .task{background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:14px 17px; margin:12px 0; color:var(--card-in-ink);}
  .task .th{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:5px;}
  .task .id{font-weight:800; color:var(--accent2); font-size:.92rem;}
  .task .stars{color:var(--orange); font-size:.82rem; letter-spacing:.08em;}
  .task p{margin:6px 0; font-size:.94rem;}
  .task ul{margin:6px 0; padding-left:20px; font-size:.94rem;} .task li{margin:4px 0;}
  .task pre{margin:8px 0 4px; font-size:.84rem;}
  .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;}
  /* még el nem készült fejezet: látszik, de nem kattintható — elkészültekor a "soon" osztály törlendő */
  .pager a.soon{pointer-events:none; opacity:.55; border-style:dashed;}

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

  /* egymas melletti kodpar */
  .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);}

  @media (max-width:760px){
    body{font-size:16px;}
    nav.toc ol{columns:1;}
    header.hero h1{font-size:1.75rem;}
    header.hero{padding:34px 20px 30px;}
    .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:minmax(0,1fr);}
  }
  @media print{
    .topbar,.ix .bar,.pager{display:none;}
    body{background:#fff; color:#000;}
  }