/* 03-nodejs-telepites — 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;}
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);}
.ix.term-box::before{content:"⌨ SZIMULÁLT TERMINÁL";}
.ix.lookup::before{content:"🔎 HIBAKERESŐ"; background:var(--orange); color:#0e1512;}
.meta-row{display:flex; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--muted); margin-bottom:10px;}
/* ---------- platformválasztó fülek ---------- */
  .tabs{margin:22px 0;}
.tabs .tabbar{display:flex; gap:6px; flex-wrap:wrap; border-bottom:2px solid var(--line); padding-bottom:0;}
.tabs .tabbar button{
    background:transparent; border:1px solid var(--line); border-bottom:none; color:var(--muted);
    border-radius:10px 10px 0 0; padding:10px 18px; cursor:pointer; font-family:inherit;
    font-size:.93rem; font-weight:700; transition:.14s; position:relative; top:2px;
  }
.tabs .tabbar button:hover{color:var(--ink);}
.tabs .tabbar button[aria-selected="true"]{
    background:var(--panel); color:var(--accent2); border-color:var(--line);
    box-shadow:0 2px 0 0 var(--panel);
  }
.tabs .tabpanel{display:none; background:var(--panel); border:1px solid var(--line); border-top:none; border-radius:0 0 14px 14px; padding:20px 22px;}
.tabs .tabpanel[data-active="true"]{display:block;}
.tabs .tabpanel h4:first-child{margin-top:0;}
details summary::marker{color:var(--accent);}
details summary:hover{color:var(--accent);}
details[open] summary{margin-bottom:4px;}
details pre{margin-top:8px;}
/* ---------- szimulált terminál ---------- */
  /* A terminál — a kódblokkokhoz hasonlóan — MINDKÉT témában sötét marad,
     ezért a benne lévő színek rögzítettek, nem a téma változóiból jönnek. */
  .term{background:#0a100d; border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-top:14px;}
.term .chrome{display:flex; align-items:center; gap:7px; padding:9px 13px; background:#182420; border-bottom:1px solid #2f4239;}
.term .chrome i{width:11px; height:11px; border-radius:50%; display:block;}
.term .chrome .t{margin-left:8px; font-size:.76rem; color:#9aa8a1; font-family:Consolas,monospace;}
.term .body{padding:14px 16px; font-family:Consolas,"Courier New",monospace; font-size:.87rem; line-height:1.65; color:#e6ece9; white-space:pre-wrap; min-height:190px; overflow-x:auto;}
.term .body .p{color:#8ee79a; font-weight:700;}
.term .body .c{color:#e6ece9;}
.term .body .o{color:#9aa8a1;}
.term .body .g{color:#34d399;}
.term .body .e{color:#f87171;}
.term .caret{display:inline-block; width:8px; background:#8ee79a; animation:blink 1s step-end infinite; color:transparent;}
@keyframes blink{50%{opacity:0;}}
.cmdlist{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px;}
.cmdlist button{background:var(--opt-bg); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:7px 12px; cursor:pointer; font-family:Consolas,monospace; font-size:.82rem; transition:.14s;}
.cmdlist button:hover{border-color:var(--accent); color:var(--accent2);}
.cmdlist button[disabled]{opacity:.5; cursor:default;}
.term-note{margin-top:12px; font-size:.9rem; color:var(--muted); line-height:1.55; min-height:44px;}
/* ---------- hibaüzenet-kereső ---------- */
  .lookup select{width:100%; background:var(--opt-bg); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:11px 13px; font-family:Consolas,monospace; font-size:.88rem; margin-top:6px;}
.lookup .res{margin-top:14px; background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:16px 18px; color:var(--card-in-ink);}
.lookup .res .q{font-size:.78rem; text-transform:uppercase; letter-spacing:.11em; font-weight:800; color:var(--muted); margin-top:12px;}
.lookup .res .q:first-child{margin-top:0;}
.lookup .res p{margin:5px 0 0; font-size:.94rem;}
.lookup .res pre{margin:7px 0 0; font-size:.83rem; border-left-color:var(--orange);}
/* ---------- 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.05rem; font-weight:600; line-height:1.45; font-family:Consolas,monospace;}
.sorter .opts{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap;}
.sorter .opts button{flex:1 1 150px; 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;}
.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:44px; line-height:1.55;}
.task pre{font-size:.82rem; margin:8px 0;}

@media (max-width:760px){
  .tabs .tabbar button{padding:9px 13px; font-size:.86rem;}
  .tabs .tabpanel{padding:16px 15px;}
}

@media print{
  .topbar,.ix .bar,.pager,.cmdlist{display:none;}
  .tabs .tabpanel{display:block !important;}
}