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

/* ============================================================
     PALETTA — Node-zöld, sötét (alap) + világos téma
     ============================================================ */
  :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;
    --code-bg:#0a100d; --code-ink:#e6ece9;
    --icode-bg:#0a100d; --icode-ink:#8ee79a;
    /* belső kártyák (kvíz, feladat, besoroló) — sötétben a kódháttérrel egyeznek */
    --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;
    --code-bg:#0f1714; --code-ink:#e6ece9;
    --icode-bg:#e6efe9; --icode-ink:#1c6b3c;
    /* világosban a belső kártyák is világosak — csak a kódblokk marad sötét */
    --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);
  }
.progress{height:3px; background:transparent;}
nav.toc ol{margin:0; padding-left:22px; columns:2; column-gap:34px;}
nav.toc li{margin:4px 0; break-inside:avoid;}
/* 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(--ok-ink);}
.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;}
.sorter .meta{display:flex; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--muted); margin-bottom:10px;}
/* mezőbizalom játék */
  .trust table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px;}
.trust th,.trust td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:middle;}
.trust th{background:var(--panel2); color:var(--accent2);}
.trust .fieldname{font-family:"Consolas",monospace; color:var(--icode-ink); white-space:nowrap;}
.trust .choice{display:flex; gap:6px; flex-wrap:wrap;}
.trust .choice button{
    background:var(--panel2); border:1px solid var(--line); color:var(--ink); border-radius:8px;
    padding:6px 10px; font-size:.82rem; cursor:pointer; font-family:inherit; transition:.14s; white-space:nowrap;
  }
.trust .choice button:hover:not(:disabled){border-color:var(--accent);}
.trust .choice button.sel{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700;}
.trust .choice button:disabled{opacity:.5; cursor:default;}
/* kiértékelés után */
  .trust .choice button.right{border-color:var(--green); color:var(--green); font-weight:700;}
.trust .choice button.sel.right{background:var(--green); color:#fff; border-color:var(--green);}
.trust .choice button.sel.bad{background:var(--red); color:#fff; border-color:var(--red); font-weight:700;}
.trust .choice button.sel:disabled, .trust .choice button.right:disabled{opacity:1;}
.trust td.verdict{font-size:.85rem; line-height:1.5;}
.trust td.verdict.good{color:var(--green);}
.trust td.verdict.bad{color:var(--red);}

@media (max-width:760px){
  .trust table{min-width:420px;}
}

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