/* ============================================================
   C# asztali fejlesztes - kozos fejezet-stiluslap
   Minden A-blokk oldal ezt tolti be (assets/style.css).
   ============================================================ */

  /* ============================================================
     PALETTA — .NET-lila, sötét (alap) + világos téma
     MySQL = kék · JS = arany · Node = zöld · C# = LILA
     ============================================================ */
  :root{
    --bg:#131020; --panel:#1d1930; --panel2:#272040; --panel3:#231d38;
    --ink:#e9e6f2; --ink-strong:#ffffff; --muted:#a29ab8; --line:#3a3155;
    --accent:#8b7ff5; --accent2:#b3a7ff; --accent-ink:#131020;
    --green:#34d399; --cyan:#22d3ee; --orange:#fb923c; --red:#f87171;
    --code-bg:#0e0b18; --code-ink:#e9e6f2;
    --icode-bg:#0e0b18; --icode-ink:#b3a7ff;
    --card-in:#0e0b18; --card-in-ink:#e9e6f2; --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(34,211,238,.10);  --info-line:rgba(34,211,238,.40);
    --warn-bg:rgba(251,146,60,.11);  --warn-line:rgba(251,146,60,.45);
    --dgr-bg:rgba(248,113,113,.11);  --dgr-line:rgba(248,113,113,.50);
    --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-sm:0 2px 8px rgba(0,0,0,.25);
    --hero-from:#7c3aed; --hero-mid:#512BD4; --hero-to:#3b1f9e;
    --zebra:rgba(255,255,255,.025);
  }
  :root[data-theme="light"]{
    --bg:#f5f3fa; --panel:#ffffff; --panel2:#ece7f8; --panel3:#f7f5fc;
    --ink:#241f38; --ink-strong:#150f28; --muted:#6b6483; --line:#d8d2e8;
    --accent:#5b21b6; --accent2:#4c1d95; --accent-ink:#ffffff;
    --green:#047857; --cyan:#0e7490; --orange:#c2410c; --red:#b91c1c;
    --code-bg:#131020; --code-ink:#e9e6f2;
    --icode-bg:#ece7f8; --icode-ink:#5b21b6;
    --card-in:#f7f5fc; --card-in-ink:#241f38; --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(14,116,144,.07); --info-line:rgba(14,116,144,.32);
    --warn-bg:rgba(194,65,12,.07);  --warn-line:rgba(194,65,12,.30);
    --dgr-bg:rgba(185,28,28,.06);   --dgr-line:rgba(185,28,28,.30);
    --shadow:0 8px 24px rgba(50,30,110,.10); --shadow-sm:0 1px 4px rgba(50,30,110,.10);
    --zebra:rgba(60,30,120,.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 — lila átmenet, fehér szöveg ---------- */
  header.hero{
    background:linear-gradient(135deg,var(--hero-from) 0%,var(--hero-mid) 55%,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:.75; 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:#f0edfb; opacity:.92;}
  header.hero strong{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);}
  ul.clean{margin:12px 0; padding-left:22px;} ul.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 — Visual Studio sötét témájának színei ---------- */
  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:#569cd6;} pre .ty{color:#4ec9b0;} pre .fn{color:#dcdcaa;}
  pre .str{color:#ce9178;} pre .com{color:#6a9955; font-style:italic;} pre .num{color:#b5cea8;}

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

  /* ---------- á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;}

  /* ---------- 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:#131020;}
  .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.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;}
  .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);}
  .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;}
  .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.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;}
  }
  @media print{
    .topbar,.ix .bar,.pager{display:none;}
    body{background:#fff; color:#000;}
  }

  /* ============================================================
     KIEGESZITESEK - a tobbi fejezetoldal komponensei
     (kozos stiluslap: minden fejezet ezt az egy fajlt tolti be)
     ============================================================ */
  a{color:var(--accent2);}
  ol.clean{margin:12px 0; padding-left:22px;} ol.clean li{margin:6px 0;}
  .btn:disabled{opacity:.45; cursor:default; filter:none;}

  /* kodszinek XML-hez es fastrukturahoz (A4, A6) */
  pre .tag{color:#569cd6;} pre .att{color:#9cdcfe;}
  pre .dir{color:#4ec9b0; font-weight:700;} pre .gen{color:#767676;}
  /* kimenet-blokk: zold szegely (A6, A9) */
  pre.out{border-left-color:var(--green);}

  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;}
  .task pre{margin:8px 0 4px; font-size:.84rem;}

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

  /* besorolo: hosszu elemek torhetnek; kodos elemekhez .mono modosito */
  .sorter .q .item{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;}