/* ══════════════════════════════════════════════════════════════════════
   DataEdge kérdőív — belső adminisztráció
   Arculat: a dataedge.hu márkaszínei + Roboto (helyben, külső kérés nélkül).

   Jelzés-elem: a lead-pontszám nem badge-be írt szám, hanem POZÍCIÓ a
   DataEdge saját kék→teal→zöld gradiensén. A márka gradiense maga a
   hideg→meleg→forró skála.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/roboto-1.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/roboto-2.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Tokenek ───────────────────────────────────────────────────────── */
:root{
  /* márka */
  --marka-kek:#12A9DD; --marka-teal:#16AEA2; --marka-zold:#5CB84A;
  --melyviz:#007a95; --navy:#0a1420;
  --gradiens:linear-gradient(90deg,var(--marka-kek),var(--marka-teal),var(--marka-zold));

  /* felület — világos */
  --hatter:#f4f7f8; --lap:#ffffff; --lap-2:#eef3f5;
  --keret:#dde5e8; --keret-eros:#c3d1d6;
  --szoveg:#14232b; --halvany:#5d7480; --nagyon-halvany:#8ba0aa;

  /* lead-skála a márkagradiensről leolvasva */
  --forro:#3f9c30; --forro-hatter:#e9f5e6;
  --meleg:#0f8f85; --meleg-hatter:#e3f4f2;
  --hideg:#6b8391; --hideg-hatter:#eceff1;

  --figyelem:#b4690e; --veszely:#b3261e;

  --sugar:8px; --sugar-kicsi:5px;
  --arnyek:0 1px 2px rgba(10,20,32,.06),0 4px 14px rgba(10,20,32,.05);
  --racs:1200px;
}

:root[data-theme=dark]{
  --hatter:#0a1420; --lap:#111e2b; --lap-2:#16273600;
  --lap-2:#162736; --keret:#22384a; --keret-eros:#31506a;
  --szoveg:#e6eef3; --halvany:#9ab0be; --nagyon-halvany:#6d8797;
  --forro:#7ed167; --forro-hatter:#173123;
  --meleg:#3fd2c4; --meleg-hatter:#0f2f31;
  --hideg:#8ea6b4; --hideg-hatter:#1b2c3a;
  --figyelem:#e5a54b; --veszely:#f08a82;
  --arnyek:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --hatter:#0a1420; --lap:#111e2b; --lap-2:#162736;
    --keret:#22384a; --keret-eros:#31506a;
    --szoveg:#e6eef3; --halvany:#9ab0be; --nagyon-halvany:#6d8797;
    --forro:#7ed167; --forro-hatter:#173123;
    --meleg:#3fd2c4; --meleg-hatter:#0f2f31;
    --hideg:#8ea6b4; --hideg-hatter:#1b2c3a;
    --figyelem:#e5a54b; --veszely:#f08a82;
    --arnyek:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--hatter); color:var(--szoveg);
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--melyviz); text-decoration:none}
:root[data-theme=dark] a,@media (prefers-color-scheme:dark){:root:not([data-theme=light]) a{color:var(--marka-teal)}}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--marka-teal); outline-offset:2px; border-radius:3px}

/* ── Fejléc ────────────────────────────────────────────────────────── */
.fejlec{
  background:var(--navy); color:#fff; position:sticky; top:0; z-index:10;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.fejlec-belso{
  max-width:var(--racs); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:28px; min-height:56px; flex-wrap:wrap;
}
.markanev{
  font-weight:900; font-size:17px; letter-spacing:.14em;
  background:var(--gradiens); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; white-space:nowrap;
}
.markanev-alcim{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-left:-20px; align-self:center;
}
.fejlec nav{display:flex; gap:20px; margin-left:auto; align-items:center; flex-wrap:wrap}
.fejlec nav a{color:rgba(255,255,255,.72); font-size:14px; text-decoration:none}
.fejlec nav a:hover{color:#fff; text-decoration:none}
.fejlec nav a.aktiv{color:#fff; box-shadow:inset 0 -2px 0 var(--marka-teal); padding-bottom:3px}
.kilepes-gomb{
  background:none; border:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.8);
  font:inherit; font-size:13px; padding:5px 12px; border-radius:var(--sugar-kicsi); cursor:pointer;
}
.kilepes-gomb:hover{border-color:rgba(255,255,255,.5); color:#fff}

/* ── Elrendezés ───────────────────────────────────────────────────── */
.lap{max-width:var(--racs); margin:0 auto; padding:28px 20px 64px}
.lap-cim{font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px}
.lap-alcim{color:var(--halvany); margin:0 0 24px; font-size:14px}

.kartya{
  background:var(--lap); border:1px solid var(--keret);
  border-radius:var(--sugar); box-shadow:var(--arnyek);
}
.kartya + .kartya{margin-top:20px}
.kartya-fej{
  padding:14px 18px; border-bottom:1px solid var(--keret);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.kartya-cim{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--halvany); margin:0}
.kartya-test{padding:18px}

/* ── Tézis-sáv: „kit hívjunk most?" ───────────────────────────────── */
.tezis{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:20px 22px; margin-bottom:20px;
  background:var(--lap); border:1px solid var(--keret);
  border-left:3px solid var(--forro);
  border-radius:var(--sugar); box-shadow:var(--arnyek);
}
.tezis-szam{
  font-size:44px; font-weight:200; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--forro);
}
.tezis-szoveg{font-size:15px; color:var(--szoveg)}
.tezis-szoveg strong{font-weight:600}
.tezis-mellek{margin-left:auto; text-align:right; color:var(--halvany); font-size:13px}

/* ── Tölcsér (kiküldve → megnyitva → kitöltve) ────────────────────── */
.tolcser{display:flex; gap:2px; height:8px; border-radius:99px; overflow:hidden; background:var(--lap-2); margin-top:8px; min-width:220px}
.tolcser i{display:block; height:100%}
.tolcser .t1{background:var(--keret-eros)}
.tolcser .t2{background:var(--marka-teal)}
.tolcser .t3{background:var(--forro)}
.tolcser-cimke{display:flex; gap:14px; font-size:12px; color:var(--halvany); margin-top:6px; flex-wrap:wrap}
.tolcser-cimke b{font-variant-numeric:tabular-nums; color:var(--szoveg); font-weight:600}

/* ── JELZÉS-ELEM: pontszám a márkagradiensen ──────────────────────────
   A sáv a DataEdge kék→teal→zöld gradiense. A halvány réteg a TELJES
   skálát mutatja (0–100), a fölé vágott, teli réteg pedig a pontszámig
   tart — így a szín ott, ahol a jelölő áll, a valódi gradiens-szín.
   A clip-path (nem width) azért kell, hogy a gradiens abszolút
   színpozíciói ne torzuljanak: 95 pontnál tényleg a zöld vég látszik. */
.pontsav-kereszt{position:relative; width:104px; height:7px}
.pontsav,.pontsav-toltes{position:absolute; inset:0; border-radius:99px; background:var(--gradiens)}
.pontsav{opacity:.15}
.pontsav-jel{
  position:absolute; top:-4px; width:3px; height:15px; border-radius:2px;
  background:var(--szoveg); transform:translateX(-1.5px);
  box-shadow:0 0 0 2px var(--lap);
}
.pontszam{
  font-variant-numeric:tabular-nums; font-weight:600; font-size:15px;
  min-width:2.4em; display:inline-block; text-align:right;
}

/* nagy változat a részletes nézethez */
.pontsav-nagy-kereszt{position:relative; height:14px; margin:20px 0 10px}
.pontsav-nagy,.pontsav-nagy-toltes{position:absolute; inset:0; border-radius:99px; background:var(--gradiens)}
.pontsav-nagy{opacity:.15}
.pontsav-nagy-jel{
  position:absolute; top:-7px; width:4px; height:28px; border-radius:3px;
  background:var(--szoveg); transform:translateX(-2px); box-shadow:0 0 0 3px var(--lap);
}
.pontsav-skala{display:flex; justify-content:space-between; font-size:11px; color:var(--nagyon-halvany); letter-spacing:.06em; text-transform:uppercase}

/* ── Kategória-jelölő ─────────────────────────────────────────────── */
.kat{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:2px 9px; border-radius:99px; white-space:nowrap;
}
.kat-forro{background:var(--forro-hatter); color:var(--forro)}
.kat-meleg{background:var(--meleg-hatter); color:var(--meleg)}
.kat-hideg{background:var(--hideg-hatter); color:var(--hideg)}

/* ── Táblázat ─────────────────────────────────────────────────────── */
.tabla-doboz{overflow-x:auto}
table.adat{width:100%; border-collapse:collapse; font-size:14px}
table.adat th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--nagyon-halvany);
  padding:10px 14px; border-bottom:1px solid var(--keret); white-space:nowrap;
}
table.adat td{padding:11px 14px; border-bottom:1px solid var(--keret); vertical-align:middle}
table.adat tbody tr:last-child td{border-bottom:none}
table.adat tbody tr:hover{background:var(--lap-2)}
table.adat tbody tr.kattinthato{cursor:pointer}
.ceg{font-weight:600}
.masodlagos{color:var(--halvany); font-size:13px}
.szam{font-variant-numeric:tabular-nums}
.nincs{color:var(--nagyon-halvany); font-style:italic}

/* ── Űrlapelemek ──────────────────────────────────────────────────── */
label.mezo{display:block; margin-bottom:16px}
label.mezo > span{display:block; font-size:13px; font-weight:600; margin-bottom:5px}
label.mezo > small{display:block; color:var(--halvany); font-size:12px; margin-bottom:6px; font-weight:400}
input[type=text],input[type=password],input[type=search],select,textarea{
  width:100%; font:inherit; color:var(--szoveg); background:var(--lap);
  border:1px solid var(--keret-eros); border-radius:var(--sugar-kicsi); padding:8px 11px;
}
textarea{min-height:150px; resize:vertical; font-family:ui-monospace,"Roboto Mono",monospace; font-size:13.5px; line-height:1.7}
input:focus,select:focus,textarea:focus{border-color:var(--marka-teal); outline:none; box-shadow:0 0 0 3px rgba(22,174,162,.16)}

.gomb{
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:600; font-size:14px;
  padding:9px 18px; border-radius:var(--sugar-kicsi); border:1px solid transparent; cursor:pointer;
  background:var(--melyviz); color:#fff; text-decoration:none;
}
.gomb:hover{filter:brightness(1.08); text-decoration:none}
.gomb:disabled{opacity:.5; cursor:not-allowed; filter:none}
.gomb-halk{background:var(--lap); color:var(--szoveg); border-color:var(--keret-eros)}
.gomb-halk:hover{background:var(--lap-2); filter:none}
.gomb-veszely{background:none; color:var(--veszely); border-color:var(--veszely)}
.gomb-veszely:hover{background:var(--veszely); color:#fff; filter:none}
.gomb-kicsi{padding:5px 11px; font-size:13px}

.szuro-sor{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.szuro-sor select,.szuro-sor input[type=search]{width:auto; min-width:150px}

/* ── Üzenetek ─────────────────────────────────────────────────────── */
.uzenet{padding:11px 15px; border-radius:var(--sugar-kicsi); font-size:14px; margin-bottom:18px; border:1px solid}
.uzenet-siker{background:var(--forro-hatter); border-color:var(--forro); color:var(--forro)}
.uzenet-hiba{background:color-mix(in srgb,var(--veszely) 10%,transparent); border-color:var(--veszely); color:var(--veszely)}
.uzenet-info{background:var(--meleg-hatter); border-color:var(--meleg); color:var(--meleg)}

.ures{text-align:center; padding:56px 20px; color:var(--halvany)}
.ures h3{margin:0 0 6px; color:var(--szoveg); font-size:17px; font-weight:600}
.ures p{margin:0 0 18px; font-size:14px}

/* ── Részletes nézet ──────────────────────────────────────────────── */
.szekcio-cim{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--melyviz); margin:26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--keret);
}
.szekcio-cim:first-child{margin-top:0}
dl.valaszlista{display:grid; grid-template-columns:minmax(150px,240px) 1fr; gap:1px 20px; margin:0}
dl.valaszlista dt{color:var(--halvany); font-size:13.5px; padding:6px 0}
dl.valaszlista dd{margin:0; padding:6px 0; font-weight:500}
dl.valaszlista dd ul{margin:0; padding-left:17px}

.indoklas{list-style:none; margin:14px 0 0; padding:0}
.indoklas li{
  display:flex; gap:12px; align-items:baseline;
  padding:7px 0; border-bottom:1px solid var(--keret); font-size:14px;
}
.indoklas li:last-child{border-bottom:none}
.indoklas .p{
  font-variant-numeric:tabular-nums; font-weight:700; min-width:2.6em; text-align:right;
  color:var(--melyviz);
}
.indoklas .p.nulla{color:var(--nagyon-halvany); font-weight:400}

/* ── Belépés ──────────────────────────────────────────────────────── */
.belepes-lap{min-height:100vh; display:grid; place-items:center; padding:24px}
.belepes-doboz{width:100%; max-width:380px}
.belepes-marka{text-align:center; margin-bottom:22px}
.belepes-marka .markanev{font-size:22px}
.belepes-marka p{color:var(--halvany); font-size:13px; margin:6px 0 0}

/* ── Adatkezelési tájékoztató (publikus) ──────────────────────────── */
.jogi{max-width:760px; margin:0 auto; padding:44px 20px 80px}
.jogi h1{font-size:26px; font-weight:700; letter-spacing:-.01em; margin:0 0 6px}
.jogi h2{font-size:17px; font-weight:600; margin:32px 0 8px; padding-top:16px; border-top:1px solid var(--keret)}
.jogi p,.jogi li{color:var(--szoveg); font-size:15px}
.jogi ul{padding-left:20px}
.jogi .datum{color:var(--halvany); font-size:13px}
.jogi .kiemelt{background:var(--lap); border:1px solid var(--keret); border-left:3px solid var(--marka-teal); border-radius:var(--sugar); padding:14px 18px; margin:18px 0}

@media (max-width:640px){
  .lap{padding:20px 14px 48px}
  .tezis{padding:16px}
  .tezis-mellek{margin-left:0; text-align:left; width:100%}
  dl.valaszlista{grid-template-columns:1fr; gap:0}
  dl.valaszlista dt{padding-bottom:0}
  dl.valaszlista dd{padding-top:2px; padding-bottom:10px}
  .fejlec nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ══════════════════════════════════════════════════════════════════════
   Tudásbázis — belső oktatóanyag, kérdőívenként
   ══════════════════════════════════════════════════════════════════════ */

.tb-racs{display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:start}
@media (max-width:900px){.tb-racs{grid-template-columns:1fr}}

/* ── Oldalsó navigáció ─────────────────────────────────────────────── */
.tb-oldal{position:sticky; top:76px}
.tb-nav{list-style:none; margin:0; padding:0}
.tb-nav li{margin:0}
.tb-nav a{
  display:block; padding:8px 12px; border-radius:var(--sugar-kicsi);
  color:var(--szoveg); font-size:14px; line-height:1.35; text-decoration:none;
  border-left:2px solid transparent;
}
.tb-nav a:hover{background:var(--lap-2); text-decoration:none}
.tb-nav a.aktiv{
  background:var(--lap-2); border-left-color:var(--marka-teal); font-weight:600;
}
.tb-nav .sorszam{
  display:inline-block; min-width:1.9em; color:var(--nagyon-halvany);
  font-variant-numeric:tabular-nums; font-size:12px;
}

/* ── Kereső ───────────────────────────────────────────────────────── */
.tb-kereso{display:flex; gap:9px; margin-bottom:20px; flex-wrap:wrap}
.tb-kereso input[type=search]{flex:1; min-width:220px; font-size:15px; padding:10px 13px}
.tb-talalat{
  display:block; padding:15px 18px; border:1px solid var(--keret);
  border-radius:var(--sugar); background:var(--lap); margin-bottom:11px;
  text-decoration:none; color:var(--szoveg);
}
.tb-talalat:hover{border-color:var(--marka-teal); text-decoration:none}
.tb-talalat h3{margin:0 0 5px; font-size:16px; font-weight:600; color:var(--melyviz)}
.tb-talalat .reszlet{font-size:13.5px; color:var(--halvany); line-height:1.65}
.tb-talalat mark{
  background:color-mix(in srgb, var(--marka-teal) 26%, transparent);
  color:var(--szoveg); padding:0 2px; border-radius:2px; font-weight:600;
}
.tb-talalat .masodlagos-jel{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--nagyon-halvany); margin-left:8px;
}

/* ── Cikk-kártyák a listában ──────────────────────────────────────── */
.tb-kartyak{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.tb-kartya{
  display:block; padding:16px 18px; border:1px solid var(--keret);
  border-radius:var(--sugar); background:var(--lap); text-decoration:none;
  color:var(--szoveg); border-top:3px solid var(--marka-teal);
}
.tb-kartya:hover{box-shadow:var(--arnyek); text-decoration:none}
.tb-kartya h3{margin:0 0 6px; font-size:16px; font-weight:600}
.tb-kartya p{margin:0; font-size:13.5px; color:var(--halvany); line-height:1.6}
.tb-kartya .kulcsszo{
  display:inline-block; font-size:11px; color:var(--nagyon-halvany);
  margin-top:9px; letter-spacing:.03em;
}

/* ── A cikk törzse ────────────────────────────────────────────────── */
.tb-cikk{
  background:var(--lap); border:1px solid var(--keret); border-radius:var(--sugar);
  padding:30px 34px; box-shadow:var(--arnyek); max-width:820px;
}
@media (max-width:640px){.tb-cikk{padding:20px 18px}}
.tb-cikk h1{font-size:26px; font-weight:700; letter-spacing:-.01em; margin:0 0 6px}
.tb-cikk > .osszefoglalo{
  color:var(--halvany); font-size:15px; margin:0 0 26px; padding-bottom:18px;
  border-bottom:1px solid var(--keret);
}
.tb-torzs h2{
  font-size:19px; font-weight:700; margin:34px 0 12px; padding-top:20px;
  border-top:1px solid var(--keret); letter-spacing:-.01em;
}
.tb-torzs h2:first-child{margin-top:0; padding-top:0; border-top:none}
.tb-torzs h3{
  font-size:16px; font-weight:600; margin:24px 0 8px; color:var(--melyviz);
}
:root[data-theme=dark] .tb-torzs h3{color:var(--marka-teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tb-torzs h3{color:var(--marka-teal)}}
.tb-torzs h4{font-size:14.5px; font-weight:600; margin:18px 0 6px}
.tb-torzs p{margin:0 0 13px; line-height:1.72; font-size:15px}
.tb-torzs ul,.tb-torzs ol{margin:0 0 15px; padding-left:22px}
.tb-torzs li{margin-bottom:6px; line-height:1.68}
.tb-torzs strong{font-weight:600}
.tb-torzs code{
  background:var(--lap-2); padding:1px 5px; border-radius:3px;
  font-family:ui-monospace,"Roboto Mono",monospace; font-size:.9em;
}
.tb-torzs blockquote{
  margin:16px 0; padding:12px 18px; border-left:3px solid var(--marka-teal);
  background:var(--lap-2); border-radius:0 var(--sugar-kicsi) var(--sugar-kicsi) 0;
}
.tb-torzs blockquote p:last-child{margin-bottom:0}
.tb-torzs table{
  width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; display:block;
  overflow-x:auto;
}
.tb-torzs th{
  text-align:left; padding:9px 12px; border-bottom:2px solid var(--keret-eros);
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--halvany);
  white-space:nowrap;
}
.tb-torzs td{padding:9px 12px; border-bottom:1px solid var(--keret); vertical-align:top}
.tb-torzs hr{border:none; border-top:1px solid var(--keret); margin:26px 0}

/* Az [ellenőrizendő] és [Marktól kérendő] jelölések kiemelése — a kolléga
   ezeket NE mondja biztosként a partnernek. */
.tb-torzs .jeloles{
  background:color-mix(in srgb, var(--figyelem) 18%, transparent);
  color:var(--figyelem); font-weight:600; padding:1px 6px; border-radius:3px;
  font-size:.92em; white-space:nowrap;
}

/* ── Lapozó a cikk alján ──────────────────────────────────────────── */
.tb-lapozo{
  display:flex; gap:12px; justify-content:space-between; margin-top:26px;
  padding-top:20px; border-top:1px solid var(--keret); flex-wrap:wrap;
}
.tb-lapozo a{
  flex:1; min-width:200px; padding:12px 16px; border:1px solid var(--keret);
  border-radius:var(--sugar); background:var(--lap); text-decoration:none;
}
.tb-lapozo a:hover{border-color:var(--marka-teal); text-decoration:none}
.tb-lapozo .irany{
  display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--nagyon-halvany); margin-bottom:3px;
}
.tb-lapozo .cim{font-weight:600; font-size:14.5px; color:var(--szoveg)}
.tb-lapozo .kovetkezo{text-align:right}

/* ── Kérdőív-választó ─────────────────────────────────────────────── */
.kerdoiv-valaszto{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.kerdoiv-valaszto .cimke{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--nagyon-halvany);
}