/* A Magyar ERP-partnertérkép saját stíluslapja.
 *
 * A prototípusból (specs/magyar-erp-partnerterkep/erp-partnerterkep.html) emelve. A
 * katalógus szándékosan eltér az oldal többi részétől: saját layouton fut, ahogy a
 * Szakértőtár is. Ezért NEM Tailwind — a fenti fájl kézzel írt CSS-e a forrás.
 *
 * ⚠️ A betűket saját magunk szolgáljuk ki (app/assets/fonts/), nem a Google Fontsról.
 * A külső betűkérés süti-hozzájárulás előtt indulna el egy publikus oldalon — ez ugyanaz
 * a kategória, ami miatt a látogatottságmérés is hozzájáruláshoz kötött, és német
 * bírósági döntések is születtek róla. A készlet latin + latin-ext, tehát az ő/ű megvan.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/archivo-500-latin-ext-f0161952.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/archivo-500-latin-51bfae9b.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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/archivo-600-latin-ext-f0161952.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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/archivo-600-latin-51bfae9b.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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/archivo-700-latin-ext-f0161952.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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/archivo-700-latin-51bfae9b.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-400-latin-ext-d3045dec.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-400-latin-d803141a.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-500-latin-ext-82f2cde0.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-500-latin-3f7bbac1.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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-400-latin-ext-807f372c.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-400-latin-bf0c3289.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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-500-latin-ext-807f372c.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-500-latin-bf0c3289.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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-600-latin-ext-807f372c.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-600-latin-bf0c3289.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;
}

/* ============================================================
   Magyar ERP-partnertérkép — prototípus stíluslap
   Tokenek: világos alap a :root-on, sötét felülírás média-query-vel
   és [data-theme] kapcsolóval is.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* felületek és tinta — hidegzöld felé húzott semlegesek */
  --ground: #F1F4F2;
  --surface: #FFFFFF;
  --surface-2: #E8EDEA;
  --surface-3: #DFE6E2;
  --line: #D3DBD6;
  --line-strong: #B9C4BE;
  --ink: #131A18;
  --ink-2: #56625C;
  --ink-3: #7E8B85;

  /* akcentus: petróleum */
  --accent: #0C6B63;
  --accent-strong: #07514B;
  --accent-soft: #DBEAE6;
  --accent-line: #A9CEC7;

  /* szerepkör-jelölők */
  --r-bevezeto-ink: #07514B;
  --r-bevezeto-bg: #DBEAE6;
  --r-disztributor-ink: #2C4C81;
  --r-disztributor-bg: #DEE6F3;
  --r-kizarolagos-ink: #8A4818;
  --r-kizarolagos-bg: #F4E5D6;
  --r-viszontelado-ink: #4A4470;
  --r-viszontelado-bg: #E4E2F0;
  --r-gyartoi-ink: #6B4A63;
  --r-gyartoi-bg: #F0E4EE;
  --r-tanacsado-ink: #5E4379;
  --r-tanacsado-bg: #E9E2F2;

  --focus: #0C6B63;
  --shadow: 0 1px 2px rgba(18, 32, 28, .06), 0 8px 24px -12px rgba(18, 32, 28, .18);
  --shadow-lift: 0 2px 4px rgba(18, 32, 28, .08), 0 18px 40px -16px rgba(18, 32, 28, .28);

  --radius: 6px;
  --radius-sm: 4px;

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1211;
    --surface: #151B19;
    --surface-2: #1C2422;
    --surface-3: #232C29;
    --line: #2A3532;
    --line-strong: #3C4844;
    --ink: #E6ECE9;
    --ink-2: #9AA8A2;
    --ink-3: #77857F;

    --accent: #5AC4B5;
    --accent-strong: #7FD6C9;
    --accent-soft: #15302D;
    --accent-line: #2C544E;

    --r-bevezeto-ink: #7FD6C9;
    --r-bevezeto-bg: #15302D;
    --r-disztributor-ink: #9FBCEA;
    --r-disztributor-bg: #1A2438;
    --r-kizarolagos-ink: #E3A874;
    --r-kizarolagos-bg: #33231480;
    --r-viszontelado-ink: #ADB4E8;
    --r-viszontelado-bg: #1D2140;
    --r-gyartoi-ink: #DFA9D0;
    --r-gyartoi-bg: #33202E;
    --r-tanacsado-ink: #BFA8DC;
    --r-tanacsado-bg: #241C31;

    --focus: #5AC4B5;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px -16px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  --ground: #0D1211;
  --surface: #151B19;
  --surface-2: #1C2422;
  --surface-3: #232C29;
  --line: #2A3532;
  --line-strong: #3C4844;
  --ink: #E6ECE9;
  --ink-2: #9AA8A2;
  --ink-3: #77857F;

  --accent: #5AC4B5;
  --accent-strong: #7FD6C9;
  --accent-soft: #15302D;
  --accent-line: #2C544E;

  --r-bevezeto-ink: #7FD6C9;
  --r-bevezeto-bg: #15302D;
  --r-disztributor-ink: #9FBCEA;
  --r-disztributor-bg: #1A2438;
  --r-kizarolagos-ink: #E3A874;
  --r-kizarolagos-bg: #33231480;
  --r-viszontelado-ink: #ADB4E8;
  --r-viszontelado-bg: #1D2140;
  --r-gyartoi-ink: #DFA9D0;
  --r-gyartoi-bg: #33202E;
  --r-tanacsado-ink: #BFA8DC;
  --r-tanacsado-bg: #241C31;

  --focus: #5AC4B5;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px -16px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.burok {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- fejléc ---------- */

.fejlec {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.fejlec-racs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: flex-start;
  justify-content: space-between;
  /* Ugyanaz a csapda, mint a `.lap-fej`-nél: itt ma még nem látszik, mert ez a szabály
     megelőzi a `.burok` mobilszabályát — de egy sorrendváltozás elég lenne hozzá. */
  padding-block: 26px 24px;
}

.fejlec-szoveg { max-width: 62ch; }

.cimsor-sor {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 33px);
  letter-spacing: -.018em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.domain {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .01em;
}

.nincs-oldal { color: var(--ink-3); font-size: .78rem; font-style: italic; }
.kapcs-megj { color: var(--ink-2); font-size: .82rem; line-height: 1.5; margin-top: .35rem; }
.demo-jel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
  border: 1px dashed var(--line-strong);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.demo-jel::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}

.bevezeto-szoveg {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
}

.fejlec-eszkozok {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tema-gomb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 13px;
  cursor: pointer;
}
.tema-gomb:hover { color: var(--ink); border-color: var(--line-strong); }

/* ---------- statisztika ---------- */

.statisztika {
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}

.statisztika-racs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(240px, 1.6fr);
  gap: 1px;
  background: var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.csempe {
  background: var(--ground);
  padding: 16px 20px 18px;
}

.csempe-cimke {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.csempe-ertek {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.csempe-osszes {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
}

.csempe-diagram { grid-column: span 1; }

.rangsor { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }

.rangsor-sor {
  display: grid;
  grid-template-columns: minmax(96px, 46%) 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.rangsor-nev {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rangsor-savhely {
  display: block;
  height: 8px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}

.rangsor-sav {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  min-width: 3px;
}

.rangsor-ertek {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- vezérlősáv ---------- */

.vezerlo {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.vezerlo-sor {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  flex-wrap: wrap;
}

.kereso-mezo {
  position: relative;
  flex: 1 1 320px;
  min-width: 220px;
}

.kereso-mezo input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 34px 9px 34px;
}
.kereso-mezo input::placeholder { color: var(--ink-3); }
.kereso-mezo input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }

.kereso-ikon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
  display: flex;
}

.kereso-torol {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.kereso-torol:hover { color: var(--ink); background: var(--surface-3); }

.nezetvalto {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}

.nezetvalto button {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.nezetvalto button:hover { color: var(--ink); }
.nezetvalto button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(18, 32, 28, .12);
}

/* ---------- elrendezés ---------- */

.torzs {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 24px 0 48px;
}

.szuro-rail {
  position: sticky;
  top: 74px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.szuro-fej {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.szuro-fej h2 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-2);
  margin: 0;
}

.szuro-nullaz {
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.szuro-nullaz:hover { text-decoration: underline; }
.szuro-nullaz[hidden] { display: none; }

.szuro-tartalom { display: flex; flex-direction: column; gap: 22px; }

.szuro-csoport { display: flex; flex-direction: column; gap: 8px; }

.szuro-cimke {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}

.chipsor { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 11px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--r-bevezeto-ink);
  font-weight: 500;
}

.chip-szam {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .chip-szam { color: inherit; opacity: .75; }

/* mobil szűrőnyitó */
.szuro-nyito { display: none; }

/* ---------- eredménysáv ---------- */

.eredmeny-fej {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.eredmeny-szam {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.eredmeny-szam b { color: var(--ink); font-weight: 500; }

.rendezes {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}

/* ---------- rendszerkártyák ---------- */

.kartya-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.kartya {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kartya-fej { display: flex; flex-direction: column; gap: 4px; }

.kartya-cim {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0;
  line-height: 1.2;
}

.gyarto-sor {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-2);
}

.gyarto-jel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 3px;
  padding: 2px 6px;
}

.kartya-leiras {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.meta-sor {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.meta-cimke {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}

.kartya-lab {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
}

.partner-nyito {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 4px 6px 4px 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.partner-nyito:hover { color: var(--accent); }

.haromszog {
  transition: transform .16s ease;
  color: var(--ink-3);
}
.partner-nyito[aria-expanded="true"] .haromszog { transform: rotate(90deg); }

.kulso-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.kulso-link:hover { color: var(--accent); text-decoration: underline; }

.partner-lista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.partner-lista[hidden] { display: none; }

.partner-sor {
  background: var(--surface);
  padding: 9px 11px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.partner-nev {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  border-bottom: 1px dotted var(--line-strong);
}
.partner-nev:hover { color: var(--accent); border-bottom-color: var(--accent); }

.partner-linkek {
  margin-left: auto;
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.szerep {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
.szerep-bevezeto { color: var(--r-bevezeto-ink); background: var(--r-bevezeto-bg); }
.szerep-disztributor { color: var(--r-disztributor-ink); background: var(--r-disztributor-bg); }
.szerep-kizarolagos { color: var(--r-kizarolagos-ink); background: var(--r-kizarolagos-bg); }
.szerep-tanacsado { color: var(--r-tanacsado-ink); background: var(--r-tanacsado-bg); }
.szerep-viszontelado { color: var(--r-viszontelado-ink); background: var(--r-viszontelado-bg); }
.szerep-gyartoi { color: var(--r-gyartoi-ink); background: var(--r-gyartoi-bg); }

/* ---------- céglista ---------- */

.ceg-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.ceg-kartya {
  position: relative;
  text-align: left;
  font-family: var(--font-body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ceg-kartya:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.ceg-nev {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.008em;
  line-height: 1.25;
}

.ceg-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.rendszer-jelek { display: flex; flex-wrap: wrap; gap: 5px; }

.rendszer-jel {
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 7px;
}

/* ---------- mátrix ---------- */

.matrix-doboz {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.matrix-gorgo {
  overflow: auto;
  max-height: min(72vh, 640px);
  overscroll-behavior: contain;
}

table.matrix {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

table.matrix th,
table.matrix td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

table.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  vertical-align: bottom;
  font-weight: 500;
  text-align: left;
  padding: 10px 9px;
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.3;
}

table.matrix th.sarok,
table.matrix td.sor-fej {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface-2);
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  border-right: 1px solid var(--line-strong);
}

table.matrix th.sarok {
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}

table.matrix td.sor-fej {
  padding: 9px 11px;
  background: var(--surface);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

table.matrix td.sor-fej small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: .04em;
}

table.matrix td.cella {
  padding: 0;
  text-align: center;
  height: 42px;
  background: var(--surface);
}

table.matrix tbody tr:hover td.cella { background: var(--surface-2); }
table.matrix tbody tr:hover td.sor-fej { background: var(--surface-2); }

.matrix-pont {
  width: 100%;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-pont span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 20px;
  border-radius: 3px;
}
.matrix-pont:hover span { outline: 2px solid var(--accent); outline-offset: 1px; }

.matrix-jelmagyarazat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--ink-2);
}
.matrix-jelmagyarazat .tetel { display: inline-flex; align-items: center; gap: 7px; }

.gorgetes-tipp {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-left: auto;
}

/* ---------- üres állapot ---------- */

.ures {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-2);
  background: var(--surface);
}
.ures strong { display: block; font-family: var(--font-display); font-size: 16px; color: var(--ink); margin-bottom: 6px; }

/* ---------- beküldő blokk ---------- */

.bekuldo {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.bekuldo-racs {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 40px;
  padding: 40px 0 44px;
}

.bekuldo h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0 0 8px;
}

.bekuldo p {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-size: 14px;
  max-width: 52ch;
}

.folyamat {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.folyamat li { display: flex; gap: 9px; align-items: baseline; }
.folyamat li b { color: var(--ink-2); font-weight: 500; }

.urlap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.mezo { display: flex; flex-direction: column; gap: 5px; }
.mezo.teljes { grid-column: 1 / -1; }

.mezo label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}

.mezo input,
.mezo select,
.mezo textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
}
.mezo textarea { resize: vertical; min-height: 68px; }

.urlap-lab {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bekuld-gomb {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--surface);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  cursor: pointer;
}
.bekuld-gomb:hover { background: var(--accent-strong); }
:root[data-theme="dark"] .bekuld-gomb { color: #0D1211; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bekuld-gomb { color: #0D1211; }
}

.urlap-jegyzet {
  font-size: 12.5px;
  color: var(--ink-3);
}

.urlap-visszajelzes {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--r-bevezeto-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.urlap-visszajelzes[hidden] { display: none; }

/* ---------- lábléc ---------- */

.lablec {
  border-top: 1px solid var(--line);
  background: var(--ground);
  padding: 22px 0 34px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.lablec-sor { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- oldalpanel (cégadatlap) ---------- */

.fatyol {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 16, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 40;
}
.fatyol.nyitva { opacity: 1; pointer-events: auto; }
.fatyol[hidden] { display: none; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  transform: translateX(101%);
  transition: transform .22s cubic-bezier(.32, .72, .28, 1);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.panel.nyitva { transform: translateX(0); }
.panel[hidden] { display: none; }

.panel-fej {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.panel-cimke {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.panel-cim {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.014em;
  margin: 0;
  line-height: 1.2;
}

.panel-zar {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  width: 30px; height: 30px;
  flex: 0 0 auto;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.panel-zar:hover { color: var(--ink); border-color: var(--line-strong); }

.panel-torzs {
  padding: 18px 20px 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-blokk { display: flex; flex-direction: column; gap: 8px; }

.panel-blokk h3 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 400;
  margin: 0;
}

.panel-adatsor {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 4px 12px;
  font-size: 13.5px;
}
.panel-adatsor dt { color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; padding-top: 2px; }
.panel-adatsor dd { margin: 0; color: var(--ink); }

.panel-rendszer {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--ground);
}

.panel-rendszer-fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-rendszer-nev { font-weight: 600; font-size: 14px; }

.panel-jegyzet {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* ---------- észrevétel: gomb és párbeszéd ---------- */

.eszrevetel-gomb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.eszrevetel-gomb:hover { color: var(--accent); border-color: var(--accent-line); }

.kartya-lab-jobb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.partner-sor .eszrevetel-gomb { flex: 0 0 auto; }

/* A cégkártya konténer: a címgomb feszíti ki a kattintható felületet,
   az észrevétel-gomb pedig fölötte, önálló fókuszponttal ül. */
.ceg-kartya-fo {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
}
.ceg-kartya-fo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.ceg-kartya-fo:focus-visible { outline: none; }
.ceg-kartya-fo:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }

.ceg-kartya .eszrevetel-gomb,
.panel-rendszer .eszrevetel-gomb {
  position: relative;
  z-index: 1;
  align-self: flex-start;
}

.panel-lab {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- a párbeszéd --- */

.modal-fatyol {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 16, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
  z-index: 60;
}
.modal-fatyol.nyitva { opacity: 1; pointer-events: auto; }
.modal-fatyol[hidden] { display: none; }

.modal {
  position: fixed;
  z-index: 70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -47%);
  width: min(640px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.modal.nyitva { opacity: 1; transform: translate(-50%, -50%); }
.modal[hidden] { display: none; }

.modal-fej {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.modal-cim {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
  margin: 0;
}

.modal-torzs {
  padding: 18px 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal-kontextus {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ground);
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 4px 12px;
  font-size: 13px;
}
.modal-kontextus dt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.modal-kontextus dd { margin: 0; color: var(--ink); }

.tipus-valaszto { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.tipus-valaszto input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.tipus-valaszto label {
  font-family: var(--font-body);
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 13px;
  cursor: pointer;
}
.tipus-valaszto label:hover { border-color: var(--line-strong); color: var(--ink); }
.tipus-valaszto input:checked + label {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--r-bevezeto-ink);
  font-weight: 500;
}
.tipus-valaszto input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

.mezo[hidden] { display: none; }

.mezo-hiba { font-size: 12px; color: var(--r-kizarolagos-ink); }
.mezo-hiba[hidden] { display: none; }

.mezo input[aria-invalid="true"],
.mezo select[aria-invalid="true"],
.mezo textarea[aria-invalid="true"] { border-color: var(--r-kizarolagos-ink); }

.payload-doboz { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 9px; }
.payload-doboz[hidden] { display: none; }

.payload {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 0;
  max-height: 250px;
  overflow: auto;
  white-space: pre;
}

.payload-lab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.masodlagos-gomb {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.masodlagos-gomb:hover { border-color: var(--line-strong); color: var(--accent); }

.masolas-jelzes { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.masolas-jelzes[hidden] { display: none; }

@media (max-width: 560px) {
  .modal { width: calc(100vw - 16px); max-height: 94vh; }
  .modal-kontextus { grid-template-columns: minmax(0, 1fr); }
  .modal-kontextus dt { padding-top: 6px; }
}

/* ---------- reszponzív ---------- */

@media (max-width: 1080px) {
  .statisztika-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csempe-diagram { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .burok { padding: 0 16px; }
  .torzs { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 16px; }

  .szuro-rail {
    position: static;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0;
    gap: 0;
  }
  .szuro-nyito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    background: transparent;
    border: 0;
    padding: 12px 14px;
    cursor: pointer;
  }
  .szuro-tartalom {
    display: none;
    flex-direction: column;
    gap: 18px;
    padding: 4px 14px 16px;
    border-top: 1px solid var(--line);
  }
  .szuro-rail.nyitva .szuro-tartalom { display: flex; }
  .szuro-fej { display: none; }

  .bekuldo-racs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .urlap { grid-template-columns: minmax(0, 1fr); }
  .kartya-racs, .ceg-lista { grid-template-columns: minmax(0, 1fr); }
  .panel { width: 100%; border-left: 0; }
}

@media (max-width: 560px) {
  .statisztika-racs { grid-template-columns: minmax(0, 1fr); }
  .csempe-ertek { font-size: 26px; }
  .vezerlo-sor { gap: 10px; }
  .nezetvalto { width: 100%; }
  .nezetvalto button { flex: 1; padding: 7px 6px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ==========================================================================
   Kiegészítés a szerveroldali lapokhoz
   --------------------------------------------------------------------------
   A fentiek a prototípusból jöttek. Az alábbiak azért kellenek, mert a
   prototípusban nem volt önálló rendszer- és céglap: ott minden egyetlen,
   kliensoldalról kirajzolt nézetben élt. Ezek a lapok viszont a katalógus
   keresőnek szánt felületei, ezért van saját címük és saját szerkezetük.
   ========================================================================== */

/* Egyhasábos törzs: a rendszer- és céglapon nincs szűrő-oldalsáv. */
.torzs-egyhasab { grid-template-columns: minmax(0, 1fr); }

.morzsa {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.morzsa a { color: var(--ink-2); }

.szakasz-cim {
  font-family: var(--cim, inherit);
  font-size: 19px;
  margin: 28px 0 12px;
}
.szakasz-cim:first-child { margin-top: 4px; }

/* A kapcsolat megjegyzése a partnersor alatt. Ez az egyedi, forrásolt tartalom —
   a keresőnek is ez ad értéket, nem a linklista. */
.partner-megjegyzes {
  margin: -2px 0 14px;
  padding: 0 14px 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.partner-lista-nyitva { display: block; }

.egyszeru-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.egyszeru-lista a { font-size: 14px; }

.lap-vissza { margin-top: 32px; font-size: 13px; }

.ures-allapot {
  padding: 40px 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}

/* Csak képernyőolvasónak. */
.latens {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* „valószínű" jelölés: az adatot csak másodlagos forrásból ismerjük. Kiírjuk, mert
   elhallgatni rosszabb — a katalógus valós cégekről állít tényeket. */
.bizonytalan {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px dashed var(--line-strong);
  color: var(--ink-3);
}

.lablec-linkek { display: inline-flex; flex-wrap: wrap; gap: 8px 18px; }

/* A kártyacím most link (saját adatlapra visz) — a kiemelést a szín adja, nem az
   aláhúzás, különben a kártyarács tele lenne vonalakkal. */
.kartya-cim a { color: inherit; text-decoration: none; }
.kartya-cim a:hover { color: var(--accent); text-decoration: underline; }
.ceg-kartya-fo { text-decoration: none; }

/* A `.torzs` a prototípusban felülírja a `.burok` oldalpaddingját (későbbi szabály),
   így 1320 px alatti képernyőn a tartalom a szélhez ér. Visszaadjuk — de CSAK ott, ahol
   szükség van rá: teljes szélességen a padding egy egész kártyahasábot elvenne
   (a rács `minmax(330px, 1fr)`-rel három hasábot csak 1044 px belső szélességtől ad). */
@media (max-width: 1320px) {
  .torzs { padding-left: 24px; padding-right: 24px; }
}

/* Az észrevétel-űrlap önálló lapon (a prototípusban párbeszédben élt). */
.urlap-lap { max-width: 640px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.urlap-hiba {
  grid-column: 1 / -1;
  border: 1px solid var(--r-kizarolagos-ink, #b45309);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
}
.urlap-hiba ul { margin: 0; padding-left: 18px; }
.mezo-sugo { font-size: 12px; color: var(--ink-3); margin: 0; }
.fo-gomb {
  font: inherit;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ground);
  cursor: pointer;
}
.fo-gomb:hover { filter: brightness(1.08); }


/* ⚠️ A `hidden` attribútum alapértelmezett `display:none`-ja elemszelektorú, ezért
   alulmarad bármelyik osztályszabállyal szemben (`.kartya { display:flex }`). A szűrés
   ezzel némán hatástalan lenne: a kártya megkapná a jelölést, de láthatóan ott maradna. */
[hidden] { display: none !important; }

/* ==========================================================================
   A klasszikus fejléc a katalógus keretében
   --------------------------------------------------------------------------
   ⚠️ A Tailwind v4 a utility-ket `@layer utilities`-be teszi, ez a stíluslap
   viszont rétegtelen — és a rétegtelen szabály MINDEN rétegzettet felülír,
   specifikusságtól függetlenül. Vagyis a fenti `a { color: var(--accent) }`
   erősebb, mint a fejléc `text-gray-600` osztálya.

   Ezért a fejléc színeit itt mondjuk ki. Egyben design-döntés is: egy fehér
   sáv a sötét katalógus tetején véletlennek látszana, így a klasszikus menü
   a katalógus öltözékét kapja — ugyanazok a menüpontok, ugyanaz a viselkedés.
   ========================================================================== */

.app-fejlec > header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* ⚠️ A gombok kimaradnak az általános linkszínből. A `btn-primary` fehér szövegét
   különben ez a szabály szürkére váltotta — indigó háttéren, ami világos témában
   olvashatatlan színpárt adott. A gomb osztálya `btn btn-primary`, nem `bg-indigo-*`. */
.app-fejlec a:not(.btn) { color: var(--ink-2); text-decoration: none; }
.app-fejlec a:not(.btn):hover { color: var(--accent); }
/* A logó: `.shrink-0` a fejléc első linkje — a `:first-child` téves volna, mert a nav
   első menüpontja is az a saját szülőjében. */
.app-fejlec a.shrink-0 { color: var(--ink); }
.app-fejlec button { color: var(--ink-2); }
.app-fejlec button:hover { color: var(--accent); }
.app-fejlec svg { color: inherit; }

/* A két fejléc-gomb a katalógus palettájával. Mindkét témában működik: az `--accent`
   világosban sötét petróleum, sötétben világos türkiz, a `--surface` pedig épp az
   ellentéte — így a kontraszt magától adódik. */
.app-fejlec .btn { border-radius: 6px; text-decoration: none; }
.app-fejlec .btn-primary,
.app-fejlec .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
.app-fejlec .btn-primary:hover { filter: brightness(1.1); }
.app-fejlec .btn-secondary,
.app-fejlec .btn-secondary:hover { background: transparent; color: var(--ink-2); }
.app-fejlec .btn-secondary { border-color: var(--line); }
.app-fejlec .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ⚠️ Mobilon a szűrőfiók nyitógombja a ragadós vezérlősáv (kereső + nézetváltó) ALÁ
   csúszott görgetéskor, és a koppintás a keresőmezőre ment helyette — a fiók így
   megnyithatatlan volt abban a görgetési helyzetben.
   A sávot ezért a vezérlősáv alá rögzítjük: mindig elérhető marad, és nem takarja semmi.
   A `scroll-margin-top` a horgonyos ugráshoz kell, hogy oda se a sáv alá érkezzen. */
@media (max-width: 860px) {
  .szuro-rail {
    position: sticky;
    /* A vezérlősáv mobilon 94 px magas (kereső + nézetváltó két sorban) — a szűrősáv
       ez alá kerül, különben a gomb továbbra is takarásban lenne. */
    top: 96px;
    z-index: 20;
    scroll-margin-top: 104px;
  }
}

/* ==========================================================================
   Rendszer-adatlap
   --------------------------------------------------------------------------
   A korábbi változat a prototípus partnersor-mintáját vette át, ami listában jó,
   de adatlapon szétesett: a név és a megjegyzés két külön sávba került, és az
   egész váltakozó csíkokká állt össze. Itt partnerenként EGY kártya áll.
   ========================================================================== */

.lap-fej {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: start;
  /* ⚠️ `padding-block`, nem `padding` rövidítés. A rövidítés a vízszintes tengelyt is
     kinullázza, és ez a szabály KÉSŐBB áll, mint a `.burok` mobilszabálya
     (`@media (max-width: 860px) { .burok { padding: 0 16px } }`) — így a fejléc
     tartalma iPhone-szélességen a képernyő széléhez tapadt. A függőleges tengelyt
     állítjuk, a vízszinteset a `.burok`-ra hagyjuk. */
  padding-block: 26px 30px;
}
.lap-fej h1 { margin: 6px 0 0; }
.lap-leiras { margin: 14px 0 0; max-width: 62ch; color: var(--ink-2); line-height: 1.6; }
.lap-fej .meta-sor { margin-top: 14px; }

/* Eredet és kategória: ez a két adat dönti el a leggyakrabban, hogy a rendszer
   egyáltalán szóba jöhet-e, ezért a cím alatt áll, nem a lap alján. */
.jelzok { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jelzo {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.jelzo-domestic { border-color: var(--accent-line, var(--accent)); color: var(--accent); }
.jelzo-figyelem { border-style: dashed; }

/* Tényadatok: „mi ez és kitől van" — erre gyorsabban válaszol egy panel, mint a folyószöveg. */
/* A jobb hasáb: a témagomb és a tényadat-panel egymás alatt, egyetlen rácselemben. */
.lap-fej-mellek { display: flex; flex-direction: column; gap: 10px; }
.lap-fej-eszkozok { display: flex; justify-content: flex-end; }

.teny-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px;
  position: sticky;
  top: 90px;
}
.teny-panel dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.teny-panel dt {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.teny-panel dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); }
.teny-szam { font-size: 22px !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.teny-link { display: inline-block; margin-top: 16px; font-size: 13px; }

.szakasz-fej {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 0 14px;
}
.szakasz-fej h2 { font-size: 19px; margin: 0; }
.szerep-osszegzes { display: flex; flex-wrap: wrap; gap: 10px; }
.osszegzo { display: inline-flex; align-items: center; gap: 6px; }
.osszegzo-szam { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; color: var(--ink-2); }

.halozat-jegyzet {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 2px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* Partnerenként egy önálló kártya. */
.partner-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.partner-kartya {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.partner-kartya-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.partner-kartya-fej h3 { font-size: 15px; margin: 0; }
.partner-kartya-fej h3 a { color: var(--ink); text-decoration: none; }
.partner-kartya-fej h3 a:hover { color: var(--accent); text-decoration: underline; }
.partner-kartya-szoveg { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.partner-kartya-lab {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
}
.partner-kartya-eszrevetel { margin-left: auto; }

.rokon-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.rokon-kartya {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}
.rokon-kartya:hover { border-color: var(--accent); }
.rokon-nev { font-size: 14px; font-weight: 500; color: var(--ink); }
.rokon-meta { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; color: var(--ink-3); }

@media (max-width: 860px) {
  .lap-fej { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 18px 22px; }
  .teny-panel { position: static; }
  .teny-panel dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
  .partner-racs, .rokon-racs { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Megjelenítés vezérlői: nézetmód és rendezés
   ========================================================================== */

.megjelenites { display: flex; align-items: center; gap: 14px; }

/* A nézetmód-ikon a rendezés előtt: előbb dől el, hogyan nézzük a listát, és csak
   utána, milyen sorrendben. Két ikon van benne, mindig a MÁSIK látszik — a gomb azt
   mutatja, hova visz, nem azt, hol vagyunk. */
.mod-gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  flex: none;
}
.mod-gomb:hover { border-color: var(--accent); color: var(--accent); }
.mod-gomb .ikon-lista { display: block; }
.mod-gomb .ikon-kartya { display: none; }
.mod-gomb[aria-pressed="true"] .ikon-lista { display: none; }
.mod-gomb[aria-pressed="true"] .ikon-kartya { display: block; }

.rendezes { display: inline-flex; align-items: center; gap: 6px; }
.rendezes-cimke {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rendezes button {
  font: inherit;
  font-size: 12.5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.rendezes button:hover { color: var(--ink); }
.rendezes button[aria-pressed="true"] {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

/* Listanézet: ugyanaz a tartalom egy hasábban, tömörebben. A kártya leírása kimarad —
   listában a név, a gyártó és a partnerszám az, amit végig lehet futni. */
.kartya-racs.lista-nezet,
.ceg-lista.lista-nezet { grid-template-columns: minmax(0, 1fr); display: grid; gap: 0; }

.kartya-racs.lista-nezet .kartya {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  border-radius: 0;
  border-width: 0 0 1px;
  padding: 12px 4px;
}
.kartya-racs.lista-nezet .kartya:first-child { border-top: 1px solid var(--line); }
.kartya-racs.lista-nezet .kartya-fej { flex: 1 1 300px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kartya-racs.lista-nezet .kartya-cim { font-size: 15px; }
.kartya-racs.lista-nezet .kartya-leiras,
.kartya-racs.lista-nezet .meta-sor { display: none; }
.kartya-racs.lista-nezet .kartya-lab { border-top: 0; padding-top: 0; margin: 0; flex: 0 0 auto; }
.kartya-racs.lista-nezet .partner-lista { flex: 1 1 100%; }

.ceg-lista.lista-nezet .ceg-kartya { border-radius: 0; border-width: 0 0 1px; }
.ceg-lista.lista-nezet .ceg-kartya:first-child { border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .megjelenites { width: 100%; justify-content: space-between; }
  .rendezes-cimke { display: none; }
}

/* ⚠️ A fejléc az oldal GLOBÁLIS kerete: minden lapon ugyanúgy kell kinéznie — a katalógus
   saját arculata csak alatta kezdődik. A `body` betűszabálya viszont ráörökítené az IBM
   Plexet, és a menü ugyanakkora betűmérettel is más rajzolatúnak, „más méretűnek"
   látszana, mint a többi oldalon. Ezért itt visszaadjuk az alkalmazás betűkészletét.

   A doboz szélességéhez NEM nyúlunk: a fejléc mindenhol 1152 px (`max-w-6xl`). A
   katalógus tartalma szélesebb, de a fejlécnek a lapok KÖZÖTT kell egyeznie, nem a saját
   lapja tartalmához igazodnia — különben lapváltáskor ugrana a menü. */
.app-fejlec,
.app-fejlec button,
.app-fejlec input {
  /* Szó szerint az, amit a többi oldal fejléce használ — mérve, nem közelítve. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";
}

/* A céglapon a kártya a rendszert mutatja, ezért kell rá a gyártó neve is. */
.partner-kartya-gyarto {
  margin: -4px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--ink-3);
}

/* A módszer-bekezdés: ott van, de nem versenyez a bevezetővel. */
.modszer-szoveg {
  margin: 12px 0 0;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ==========================================================================
   Fejléc: bemutatás és katalógusméret egymás mellett
   --------------------------------------------------------------------------
   A csempék korábban külön, teljes szélességű sávban álltak a szöveg alatt.
   Egymás mellett a látogató egyszerre látja, mi ez és mekkora — és a két blokk
   ugyanazt a függőleges helyet használja, nem egymás után.

   ⚠️ A jobb hasáb szándékosan széles: a sávdiagram itt SZÉLESEBB (~560 px),
   mint a korábbi ötös csempesorban volt (~360 px).
   ========================================================================== */

.hero-racs {
  display: grid;
  /* A jobb hasáb két egyforma felet tart: a 2×2 számblokkot és mellette a diagramot.
     720 px-nél a diagram ~355 px széles — pontosan annyi, mint a korábbi ötös
     csempesorban volt, tehát nem lett kisebb. */
  grid-template-columns: minmax(0, 1fr) 720px;
  gap: 40px;
  /* `stretch`, nem `start`: a csempeblokk a szöveges hasáb magasságához igazodik, így a
     két hasáb alja egy vonalban van. A csempék belül függőlegesen középre húzódnak. */
  align-items: stretch;
  /* ⚠️ `padding-block`, nem `padding` rövidítés. A rövidítés a vízszintes tengelyt is
     kinullázza, és ez a szabály KÉSŐBB áll, mint a `.burok` mobilszabálya
     (`@media (max-width: 860px) { .burok { padding: 0 16px } }`) — így a fejléc
     tartalma iPhone-szélességen a képernyő széléhez tapadt. A függőleges tengelyt
     állítjuk, a vízszinteset a `.burok`-ra hagyjuk. */
  padding-block: 26px 30px;
}
.hero-szoveg .bevezeto-szoveg { max-width: none; }
.hero-mellek { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.hero-mellek .stat-blokk { flex: 1; }
.hero-eszkozok { display: flex; justify-content: flex-end; }

/* A négy szám 2×2-ben, a diagram MELLETTE, ugyanakkora dobozban — nem alatta. */
.stat-blokk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.stat-szamok {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* A szám a doboz közepén ül, bármilyen magas is a doboz. */
.hero-mellek .csempe { display: flex; flex-direction: column; justify-content: center; }
.stat-blokk .csempe-diagram { display: flex; flex-direction: column; }
.stat-blokk .rangsor { flex: 1; justify-content: center; }

/* A csempék a fejlécben önálló dobozok, nem egy összefüggő sáv cellái. */
.hero-mellek .csempe {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
}
.hero-mellek .csempe-diagram { padding-bottom: 14px; }
.hero-mellek .rangsor { margin-top: 8px; }

@media (max-width: 1240px) {
  /* Keskenyebb ablakban a diagram a számblokk alá kerül, hogy egyik se nyomódjon össze. */
  .hero-racs { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; }
  .stat-blokk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hero-racs { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 18px 22px; }
  .hero-eszkozok { justify-content: flex-start; }
}

/* ⚠️ Ugyanaz a helyzet, mint a fejlécnél: a közös lábléc Tailwinddel él, ez a stíluslap
   viszont rétegtelen, tehát minden utility fölé kerül. A színeket és a betűt ezért itt
   mondjuk ki — egy fehér sáv a sötét katalógus alján véletlennek látszana. */
.app-lablec {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif;
}
.app-lablec > footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.app-lablec, .app-lablec p, .app-lablec span { color: var(--ink-3); }
.app-lablec a { color: var(--ink-2); text-decoration: none; }
.app-lablec a:hover { color: var(--accent); }

/* A közös alsó sáv: sütikezelés + tesztelési tájékoztató. Ugyanazok a partialok, mint
   az oldal többi részén, de a Tailwind-osztályaik (fehér üveg, indigó linkek, világos
   gombok) itt idegenek lennének — a katalógus tokenjeire fordítjuk le őket.

   ⚠️ Ugyanaz a kaszkád-helyzet, mint a fejlécnél és a láblécnél: ez a stíluslap
   rétegtelen, ezért minden Tailwind-utility fölé kerül. A színt ki kell mondani. */
.app-alsosav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif;
}
/* A bottom_stack maga is fix pozíciójú; a kettő egymásra ülne, ezért a belsőt
   kiegyenesítjük, és a pozicionálást egyedül a burkoló végzi. */
.app-alsosav > div { position: static; }

/* Mindkét sáv háttere és kerete.

   ⚠️ A két sáv NEM azonos mélységben van. A tesztsáv a bottom_stack közvetlen gyereke,
   a sütisáv viszont eggyel beljebb: a `data-controller` burkoló csak logikai réteg,
   a színezett elem a `banner` target. Egyetlen `> div > div` ezért csak a tesztsávot
   fogná meg — a sütisáv fehéren maradna a sötét lapon. Mindkettőt kimondjuk. */
.app-alsosav > div > div,
.app-alsosav [data-cookie-consent-target="banner"] {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.app-alsosav p { color: var(--ink-2); }
.app-alsosav a { color: var(--accent); font-weight: 600; }
.app-alsosav a:hover { text-decoration: underline; }
.app-alsosav span { color: var(--ink-3); }

/* A sütisáv két gombja. A .btn-primary/.btn-secondary a közös stíluslap komponensei,
   világos palettára hangolva — itt felül kell írni őket, különben a sötét sávon
   olvashatatlanok. */
.app-alsosav button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.app-alsosav button[data-action*="accept"] {
  background: var(--accent);
  color: var(--surface);
  border: 1px solid var(--accent);
}
.app-alsosav button[data-action*="accept"]:hover { filter: brightness(1.08); }
.app-alsosav button[data-action*="decline"] {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.app-alsosav button[data-action*="decline"]:hover { color: var(--ink-1); border-color: var(--ink-3); }

/* ⚠️ A `hidden` osztályt a sütikezelő vezérlő adja és veszi le. A Tailwind
   `display:none`-ja utility, ez a stíluslap viszont rétegtelen — ha bármelyik fenti
   szabály `display`-t állítana, a sáv döntés után is kint maradna. Ezért mondjuk ki. */
.app-alsosav .hidden { display: none; }

/* A sáv helyét a közös application.css foglalja le, mért magasság alapján. */

/* --------------------------------------------------------------------------
   Lábléc a lap alján, rövid lapokon is
   -------------------------------------------------------------------------- */
/* Egyetlen rendszerrel bíró cégnél a tartalom nem tölti ki a képernyőt, és a lábléc
   a lap közepén lógott — nagy monitoron több száz képpont üres hellyel alatta.
   A törzs rugalmas elemként felszívja a maradékot, a lábléc pedig leül a lap aljára.

   ⚠️ A `.app-alsosav` fix pozíciójú, tehát kimarad ebből a sorból; a lap alján neki
   fenntartott helyet továbbra is a body alsó belső margója adja. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.app-torzs { flex: 1 0 auto; }
.app-fejlec, .app-lablec { flex: none; }

/* --------------------------------------------------------------------------
   Lábjegyzetek az adatlapok alján
   -------------------------------------------------------------------------- */
.lap-labjegyzet {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 78ch;
}
.lap-labjegyzet p { margin: 0 0 8px; }
.lap-labjegyzet p:last-child { margin-bottom: 0; }
.labjegyzet-jel { margin-right: 4px; }

/* --------------------------------------------------------------------------
   Kereső: a natív törlőgomb elrejtése
   -------------------------------------------------------------------------- */
/* ⚠️ A mező `type="search"`, ezért a böngésző a SAJÁT × gombját is kirajzolja — a mi
   `.kereso-torol` gombunk mellé, más színnel. Két × jelent meg egymás mellett. A
   sajátunkat tartjuk meg, mert az a katalógus tokenjeivel van színezve, és a
   láthatóságát a szűrő JS vezérli. */
.kereso-mezo input::-webkit-search-cancel-button,
.kereso-mezo input::-webkit-search-decoration,
.kereso-mezo input::-webkit-search-results-button,
.kereso-mezo input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}