/* 05-vscode-kiegeszitok — csak ezen az oldalon használt szabályok.
   Előtte tölt be: ../../assets/style.css és ../blokk.css */

:root{
    --bg:#0e1512; --panel:#182420; --panel2:#213029; --panel3:#1e2c27;
    --ink:#e6ece9; --ink-strong:#ffffff; --muted:#9aa8a1; --line:#2f4239;
    --accent:#5fbf72; --accent2:#8ee79a; --accent-ink:#0e1512;
    --green:#34d399; --violet:#a78bfa; --orange:#fb923c; --red:#f87171; --blue:#82aaff;
    --code-bg:#0a100d; --code-ink:#e6ece9;
    --icode-bg:#0a100d; --icode-ink:#8ee79a;
    --card-in:#0a100d; --card-in-ink:#e6ece9; --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,.11); --info-line:rgba(167,139,250,.45);
    --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:#68c05a; --hero-to:#3f9160;
    --zebra:rgba(255,255,255,.025);
  }
:root[data-theme="light"]{
    --bg:#f2f6f3; --panel:#ffffff; --panel2:#eaf1ec; --panel3:#f6faf7;
    --ink:#17231d; --ink-strong:#0b120e; --muted:#5d6d64; --line:#d2ded6;
    --accent:#2a7a42; --accent2:#1f7340; --accent-ink:#ffffff;
    --green:#157a3d; --violet:#6d3fd4; --orange:#ba3e0c; --red:#c81e1e; --blue:#2b5bd7;
    --code-bg:#0f1714; --code-ink:#e6ece9;
    --icode-bg:#e6efe9; --icode-ink:#1c6b3c;
    --card-in:#f6faf7; --card-in-ink:#17231d; --opt-bg:#ffffff;
    --ok-bg:rgba(21,128,61,.12); --ok-ink:#14532d;
    --bad-bg:rgba(220,38,38,.10); --bad-ink:#7f1d1d;
    --tip-bg:rgba(21,128,61,.07);   --tip-line:rgba(21,128,61,.32);
    --info-bg:rgba(109,63,212,.07); --info-line:rgba(109,63,212,.30);
    --warn-bg:rgba(194,65,12,.07);  --warn-line:rgba(194,65,12,.30);
    --dgr-bg:rgba(220,38,38,.06);   --dgr-line:rgba(220,38,38,.30);
    --shadow:0 8px 24px rgba(23,53,38,.10); --shadow-sm:0 1px 4px rgba(23,53,38,.10);
    --hero-from:#57b56a; --hero-to:#3f9160;
    --zebra:rgba(20,60,40,.028);
  }
:root{color-scheme:dark;}
:root[data-theme="light"]{color-scheme:light;}
.progress{height:3px;}
nav.toc ol{margin:0; padding-left:0; list-style:none; counter-reset:toc; columns:2; column-gap:34px;}
nav.toc li{margin:4px 0; break-inside:avoid; counter-increment:toc; position:relative; padding-left:30px;}
nav.toc li::before{content:counter(toc) "."; position:absolute; left:0; top:0; width:24px; text-align:right; color:var(--muted); font-size:.88em; font-weight:700;}
ol.steps{margin:12px 0; padding-left:22px;}
ol.steps li{margin:9px 0;}
pre .cmd{color:#8ee79a; font-weight:700;}
pre .out{color:#9aa8a1;}
pre .err{color:#f87171;}
pre .mth{color:#8ee79a; font-weight:700;}
pre .path{color:#82aaff;}
pre .hdr{color:#c792ea;}
kbd{background:var(--code-bg); border:1px solid var(--line); border-bottom-width:3px; border-radius:6px; padding:2px 8px; font-family:"Consolas",monospace; font-size:.84em; color:var(--code-ink); white-space:nowrap;}
a.ref{color:inherit; text-decoration:none; border-bottom:1px dotted var(--accent); white-space:nowrap;}
a.ref:hover{color:var(--accent2); border-bottom-style:solid;}
a.ref::after{content:"↓"; font-size:.72em; vertical-align:super; color:var(--accent); margin-left:1px;}
select option{background:var(--panel); color:var(--ink);}
.tag{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.09em; padding:3px 9px; border-radius:20px; vertical-align:2px; white-space:nowrap;}
.tag.must{background:var(--accent); color:var(--accent-ink);}
.tag.opt{background:var(--panel2); color:var(--muted); border:1px solid var(--line);}
.tag.avoid{background:var(--dgr-bg); color:var(--red); border:1px solid var(--dgr-line);}
.tag.free{background:var(--tip-bg); color:var(--green); border:1px solid var(--tip-line);}
h3 .tag, h4 .tag{margin-left:8px;}
/* bővítmény-kártya */
  .ext{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:16px 0;}
.ext .head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.ext .head h4{margin:0; font-size:1.06rem; color:var(--ink-strong);}
.ext .id{font-family:Consolas,monospace; font-size:.82rem; color:var(--accent2); background:var(--icode-bg); padding:2px 8px; border-radius:6px; overflow-wrap:normal;}
.ext .pub{font-size:.82rem; color:var(--muted);}
.ext p{margin:8px 0; font-size:.95rem;}
.ext .why{border-left:3px solid var(--accent); padding-left:12px; margin-top:10px; font-size:.93rem; color:var(--muted);}
.ext .why b{color:var(--ink);}
.ix.gen::before{content:"⚙ CSOMAGÉPÍTŐ";}
.ix.eval::before{content:"🔍 BŐVÍTMÉNY-ÉRTÉKELŐ"; background:var(--orange); color:#0e1512;}
.meta-row{display:flex; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--muted); margin-bottom:10px;}
/* értékelő kártya */
  .card-mk{background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:18px; color:var(--card-in-ink);}
.card-mk .cim{font-size:1.12rem; font-weight:800; color:var(--ink-strong); margin-bottom:2px;}
.card-mk .alcim{font-size:.88rem; color:var(--muted); margin-bottom:14px;}
.card-mk .adatok{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.card-mk .adat{background:var(--opt-bg); border:1px solid var(--line); border-radius:9px; padding:9px 12px;}
.card-mk .adat .c{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800;}
.card-mk .adat .v{font-size:.95rem; font-weight:700; margin-top:2px; word-break:normal; overflow-wrap:break-word;}
.opts2{display:flex; gap:9px; margin-top:16px; flex-wrap:wrap;}
.opts2 button{flex:1 1 170px; background:var(--opt-bg); border:1px solid var(--line); color:var(--card-in-ink); border-radius:10px; padding:11px 12px; cursor:pointer; font-size:.93rem; font-family:inherit; font-weight:600; transition:.14s;}
.opts2 button:hover:not(:disabled){border-color:var(--accent); color:var(--accent2);}
.opts2 button.correct{background:var(--ok-bg); border-color:var(--green); color:var(--ok-ink);}
.opts2 button.wrong{background:var(--bad-bg); border-color:var(--red); color:var(--red);}
.opts2 button:disabled{cursor:default;}
.fb2{margin-top:12px; font-size:.92rem; min-height:52px; line-height:1.55;}
/* csomagépítő */
  .optlist{display:grid; grid-template-columns:1fr; gap:6px; margin-top:12px;}
.optlist label{display:flex; gap:11px; align-items:flex-start; background:var(--card-in); border:1px solid var(--line); border-radius:10px; padding:11px 13px; cursor:pointer; transition:.13s; color:var(--card-in-ink);}
.optlist label:hover{border-color:var(--accent);}
.optlist input{margin:3px 0 0; accent-color:var(--accent); flex:0 0 auto; width:17px; height:17px;}
.optlist .t{flex:1; min-width:0;}
.optlist .t b{display:block; font-size:.95rem; color:var(--ink-strong); font-weight:700;}
.optlist .t em{display:block; font-family:Consolas,monospace; font-size:.8rem; color:var(--accent2); font-style:normal; margin-top:1px; word-break:normal; overflow-wrap:normal;}
.optlist .t span{display:block; font-size:.86rem; color:var(--muted); margin-top:3px; line-height:1.5;}
.gen-out{margin-top:14px; background:var(--code-bg); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:14px 16px; font-family:Consolas,monospace; font-size:.83rem; color:var(--code-ink); white-space:pre; overflow-x:auto; min-height:60px;}
.copied{color:var(--green); font-size:.85rem; font-weight:700;}
.genfulek{display:flex; gap:6px; margin-top:16px; flex-wrap:wrap;}
.genfulek button{background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:9px 9px 0 0; padding:8px 15px; cursor:pointer; font-family:inherit; font-size:.88rem; font-weight:700;}
.genfulek button[aria-selected="true"]{background:var(--code-bg); color:var(--accent2); border-bottom-color:var(--code-bg);}
/* besoroló */
  .sorter .q{background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:center; color:var(--card-in-ink);}
.sorter .q .item{font-size:1.02rem; font-weight:600; line-height:1.5;}
.sorter .opts{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap;}
.sorter .opts button{flex:1 1 170px; background:var(--opt-bg); border:1px solid var(--line); color:var(--card-in-ink); border-radius:10px; padding:11px 12px; cursor:pointer; font-size:.92rem; 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(--ok-bg); border-color:var(--green); color:var(--ok-ink);}
.sorter .opts button.wrong{background:var(--bad-bg); border-color:var(--red); color:var(--red);}
.sorter .opts button:disabled{cursor:default;}
.sorter .fb{margin-top:12px; font-size:.92rem; min-height:52px; line-height:1.55;}
.task pre{font-size:.82rem; margin:8px 0;}

@media print{
  .topbar,.ix .bar,.pager{display:none;}
}