/* ── betuk.css ── */
/* ══════════════════════════════════════════════════════════════
   weblockai — A BETŰK A SAJÁT SZERVERRŐL (2026-09-30)
   /assets/betuk.css

   Eddig minden lap a Google szerveréről töltötte a betűket: a látogató
   IP-címe így hozzájárulás nélkül ment a Google-höz. A fájlok ugyanazok
   (Google Fonts, nyílt licenc), csak innen jönnek. Csak a latin és a
   latin-ext készlet van itt: a magyar ő és ű a latin-ext-ben lakik.
   Az Anton (a logó betűje) már korábban is helyben volt.
   ══════════════════════════════════════════════════════════════ */
/* Bricolage Grotesque · latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.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;
}
/* Bricolage Grotesque · latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.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;
}
/* IBM Plex Sans · latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext.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;
}
/* IBM Plex Sans · latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin.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;
}
/* Inter · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.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;
}
/* Inter · latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.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;
}
/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-ext.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;
}
/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin.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;
}
/* Plus Jakarta Sans · latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext.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;
}
/* Plus Jakarta Sans · latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin.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;
}

/* ── design.css ── */
/* ============================================================
   weblockai — KÖZÖS DESIGN-RENDSZER
   ------------------------------------------------------------
   Egyetlen fájl, ami minden lap kinézetét eldönti. A rajzolt
   előnézetek (.elonez, .ep-*, .n-*) NEM itt vannak, hanem az
   `elonezetek.css`-ben — azokhoz nem nyúlunk.

   A rendszer öt döntésre épül:

   1. KEVESEBB VONAL, TÖBB LEVEGŐ. A dobozokat nem hajszálkeret
      választja el, hanem térköz és egy nagyon halvány árnyék.
      A keret csak ott marad, ahol jelent is valamit: beviteli
      mező, kiválasztott kártya, elválasztó sor.

   2. NÉGY BETŰSÚLY, NEM KETTŐ. Lap-cím → szakasz-cím →
      kártya-név → kártya-magyarázat. Ránézésre látszik, mi a
      fontos.

   3. A SZAKASZOK HASÁBBAN FOLYNAK, NEM RÁCSBAN. A rács minden
      hasábot külön indított, ezért a rövid szakaszok alatt
      félképernyős lyukak maradtak. A hasáb-folyam (multi-column)
      sorban tölti fel az oszlopokat — lyuk nem keletkezhet.

   4. EGY KIJELÖLÉS-NYELV. A kiválasztott kártya KIGYULLAD:
      neon keret + halvány neon felület + neon név. Nincs mellette
      külön pipa-lapka, mert két jel ugyanarra zajt csinál.

   5. A HÉJ MARAD. Bal sáv, felső sáv, jobb ikonsáv — navy
      színátmenet, ugyanaz a szerkezet. Ezt a user tételesen kérte.
   ============================================================ */

/* ============================================================
   1. TOKENEK
   ============================================================ */
:root {
  /* ── betűskála — folyékony, hogy 2560-on se legyen apró ── */
  --fs-page:  clamp(26px, 1.15rem + 1.15vw, 38px);
  /* A lapok <h1>-e ennél kisebb: a felső sávból kikerült a lap neve, és a
     cím önmagában nem lehet akkora, hogy elvigye a helyet a munkától. */
  --fs-lapcim: clamp(21px, 1rem + 0.65vw, 28px);
  --fs-h2:    clamp(18px, 1rem + 0.25vw, 21px);
  --fs-h3:    var(--b-xl);
  --fs-body:  var(--b-m);
  --fs-meta:  var(--b-s);
  --fs-label: var(--b-xs);
  /* 2026-11-10, a user („kaotikusnak érzem a betűtípusokat”): 8 lépcsős skála, minden belső méret erre kerekül.
     Előnézet: ~/Claude/_elonezet/beturend/. Család: Space Grotesk (alcím, szám), Inter (szöveg), JetBrains Mono (adat), Anton (logó, lapcím). */
  --b-xs: .6875rem; --b-s: .8125rem; --b-m: .875rem; --b-l: 1rem;
  --b-xl: 1.125rem; --b-2xl: 1.375rem; --b-3xl: 1.75rem; --b-4xl: 2.25rem;

  --font-fo:  'Space Grotesk', 'Inter', sans-serif;
  --font-szo: 'Inter', system-ui, sans-serif;
  --font-gep: 'JetBrains Mono', ui-monospace, monospace;

  /* ── forma — sose kerek, sose pirula ── */
  --r:    4px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* ── térköz ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 30px; --s7: 40px; --s8: 56px;

  --oldal-margo: clamp(16px, 2.6vw, 56px);
  /* 🔴 TELJES SZÉLESSÉG (2026-08-02, a user kérése — sokadszor):
     „jó lenne ha mindenhol teljes szélességében lennénk."
     A fő tartalom-wrapper NEM kap max-width-et, csak paddingot. A hosszú
     sorok olvashatóságáról nem ez gondoskodik, hanem a SZÖVEG-elemek saját
     `max-width: 62ch` korlátja (`.sec-hint`) — az megmarad. */
  --lap-max: none;
  --sav-w:  216px;
  --jsav-w: 56px;

  /* ══ VILÁGOS TÉMA ══
     Hűvös, navy felé hajló semlegesek — így a világos tartalom
     ugyanabból az anyagból van, mint a sötét héj. */
  --bg:            #f3f6fa;
  --bg-card:       var(--m-feher);
  --bg-card-hover: #f7f9fc;
  --bg-sunken:     #eaeff6;
  --bg-elevated:   #f2f5f9;

  --border:        #e3e9f1;
  --border-strong: #cfd8e4;
  --field-border:  #d5dde8;
  --card-ring:     transparent;   /* világosban az árnyék elég */

  --text:       #0d1520;
  --text-muted: #56637a;
  /* Mérve: a korábbi #74829a a fehér kártyán 3,89:1-et adott — a 4,5-ös
     minimum ALATT. Ez az érték 5,1. A halk feliratok karaktere marad,
     csak olvashatók lesznek. */
  --text-dim:   #626f85;

  /* 🔑 A NEGYEDIK SZÖVEGSZÍN: ami TELÍTETT vagy SÖTÉT felületen ül.
     A magenta gomb, a navy héj-sávok, a gradiens jelvények, a hover-gombok —
     mind ugyanazt jelentik: „ezen a felületen fehér a betű". Ez a jelentés
     eddig 37 helyen volt kiírva, név nélkül.
     🔴 SZÁNDÉKOSAN UGYANAZ VILÁGOSBAN ÉS SÖTÉTBEN: nem a lap témájától függ,
     hanem attól, hogy a felület alatta telített. Ha témánként eltérne, minden
     csere látvány-változás lenne — a Slepnexnél pontosan ezen buktunk. */
  --szines-text: var(--m-feher);

  /* A neon lime három szerepre bomlik, mert világos alapon
     szövegként olvashatatlan lenne (1,2:1).
       --accent      = FELÜLET, rajta mindig fekete szöveg (16,8:1)
       --accent-ink  = SZÖVEG és ikon (5,9:1 fehéren)
       --accent-line = VONAL: keret, csík, haladás-sáv (3,7:1) */
  --accent:      var(--m-lime);
  --accent-text: var(--m-tinta);
  --accent-ink:  #4f6b00;
  --accent-line: #6e8f00;
  --accent-soft: #eaf6c6;
  --accent-edge: #a9c94a;

  --warn-bg:     #fdf4d8;
  --warn-border: #b0790c;
  --warn-text:   var(--m-borostyan-sotet);

  --bg-blur: rgba(var(--m-feher-rgb),0.86);

  /* Három árnyék-fokozat — ez helyettesíti a hajszálkereteket. */
  --shadow-1: 0 1px 2px rgba(11,35,64,.05), 0 1px 1px rgba(11,35,64,.04);
  --shadow-2: 0 2px 4px rgba(11,35,64,.05), 0 8px 20px -8px rgba(11,35,64,.14);
  --shadow-3: 0 4px 10px rgba(11,35,64,.07), 0 20px 40px -12px rgba(11,35,64,.20);
  --shadow-sm: var(--shadow-1);   /* régi név, hogy semmi ne törjön */

  /* A héj színei — egy helyen, hogy a bal/felső/jobb sáv együtt mozogjon. */
  /* A héj FEJLÉC-MAGASSÁGA (2026-08-04): a felső sáv és a logó sávja ebből
     dolgozik, hogy ne csúszhassanak el egymástól. Korábban a logó 71 px volt,
     a felső sáv 52 — a 19 px-es lépcső látszott is a fejlécen. */
  --hej-magas: 52px;
  --hej-1:   #061931;
  --hej-2:   #04101f;
  --hej-lap: #0b2340;
  --hej-vonal: rgba(120,180,220,0.14);
  --hej-vonal-2: rgba(120,180,220,0.26);
  --hej-szoveg: #f1f5f9;
  --hej-halk:   #a8bdd4;
  --hej-halk-2: var(--m-szurke-kozep);
}

/* ══ SÖTÉT TÉMA — navy család, nem semleges fekete.
   Így a tartalom és a héj EGY anyag, nem két külön világ. ══ */
:root[data-theme="dark"] {
  --bg:            #071523;
  --bg-card:       var(--m-navy-kartya);
  --bg-card-hover: #133050;
  --bg-sunken:     #05101c;
  --bg-elevated:   #0a1c2f;

  --border:        rgba(126,178,222,0.13);
  --border-strong: rgba(126,178,222,0.26);
  --field-border:  rgba(126,178,222,0.22);
  --card-ring:     rgba(126,178,222,0.10);

  --text:       #eef4fa;
  --text-muted: #a3b6cb;
  --text-dim:   #8fa3ba;
  /* 🔴 UGYANAZ, mint világosban — és ez nem lustaság: a telített felület
     sötét témában is telített marad, tehát a rajta ülő betű is fehér.
     Ha itt eltérne, mind a 37 csere némán megváltoztatná a látványt. */
  --szines-text: var(--m-feher);

  --accent:      var(--m-lime);
  /* 🔑 UGYANAZ, MINT VILÁGOSBAN — és ez logika, nem lustaság: a lime felület
     (`--accent`) mindkét témában pontosan ugyanaz a szín, tehát a rajta ülő
     betűnek sincs oka másnak lennie. Korábban `#06111d` állt itt; a kettő
     eltérése a színtér 1,9%-a, a kontraszt 16,13 vs 16,32:1 — láthatatlan,
     viszont pont ez a fajta néma kettősség szüli később a „három különböző
     zöld a gombokon" bajt. Egy jelentés, egy érték. */
  --accent-text: var(--m-tinta);
  --accent-ink:  var(--m-lime);
  --accent-line: var(--m-lime);
  --accent-soft: rgba(var(--m-lime-rgb),0.13);
  --accent-edge: rgba(var(--m-lime-rgb),0.38);

  --warn-bg:     rgba(255,183,46,0.13);
  --warn-border: #ffb72e;
  --warn-text:   #ffc861;

  --bg-blur: rgba(7,21,35,0.88);

  --shadow-1: 0 1px 2px rgba(var(--m-fekete-tiszta-rgb),.30);
  --shadow-2: 0 2px 6px rgba(var(--m-fekete-tiszta-rgb),.34), 0 10px 26px -10px rgba(var(--m-fekete-tiszta-rgb),.55);
  --shadow-3: 0 6px 16px rgba(var(--m-fekete-tiszta-rgb),.40), 0 24px 48px -14px rgba(var(--m-fekete-tiszta-rgb),.65);
}

/* ============================================================
   2. ALAP
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-szo);
  font-size: var(--fs-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: calc(100vh / var(--z, 1));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.25s, color 0.25s;
}
/* Nagyon halvány fény a lap két sarkában — ettől nem lapos a nagy felület.
   JS nélkül is ott van, és `prefers-reduced-motion` sem érinti (nem mozog). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 40vh at 82% -8%,  rgba(var(--m-lime-rgb),0.10), transparent 70%),
    radial-gradient(50vw 40vh at -6% 104%, rgba(11,35,64,0.06),  transparent 70%);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(60vw 40vh at 82% -8%,  rgba(var(--m-lime-rgb),0.07), transparent 70%),
    radial-gradient(55vw 45vh at -6% 104%, rgba(46,110,190,0.12), transparent 70%);
}

a { color: inherit; }
img, svg, video { max-width: 100%; }

::selection { background: var(--accent); color: var(--accent-text); }

/* Egységes fókusz — billentyűzettel minden elem látszik. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
  border-radius: var(--r);
}

/* ── IKON: vonalas SVG, ami a SZÖVEG színét veszi fel ── */
.i {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}

/* ============================================================
   3. GOMB — egy alap, hét változat. A régi, lapokon szétszórt
   gomb-osztályok ugyanezt az alapot kapják, ezért egyetlen gomb
   sem tűnt el, és egyik viselkedése sem változott.
   ============================================================ */
/* 🔴 2026-08-05 (este) — 38 → 44 px, a TAPINTHATÓ MÉRET miatt.
   A projekt szabálya (feedback_responsive_universal): az érintés-célpont
   minimuma 44×44 px. Mérve a Műhely két legsűrűbb lapján: 153, illetve 225
   interaktív elemből mindössze 5-6 TÍPUS volt a küszöb alatt — ez a
   gombcsalád volt köztük a legnépesebb.
   🔑 `height` helyett `min-height`: ha egy gomb felirata mégis két sorba
      törne, a doboz nő, nem vágja el a szöveget.
   ⚠️ A `.sec-mini` és a `.btn--sm` szándékosan APRÓBB marad (32 px) — azok
      nem önálló akciók, hanem egy sor végén ülő apró kapcsolók; a saját,
      később következő szabályuk felülírja ezt. */
.btn,
.tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn,
.lept-btn, .menu-btn, .proj-torol-btn, .sec-mini, .kedv-x {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  font-family: inherit; font-size: var(--t-2); font-weight: 600; line-height: 1;
  letter-spacing: -0.006em; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              box-shadow 0.15s, opacity 0.15s, transform 0.12s;
}
.btn:active,
.tool-btn:active, .copy-btn:active, .ai-btn:active, .ment-btn:active { transform: translateY(1px); }

.btn:disabled, .btn.is-disabled,
.tool-btn:disabled, .copy-btn:disabled, .ai-btn:disabled, .auth-btn:disabled,
.kedv-btn:disabled, .ment-btn:disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.btn .i,
.tool-btn .i, .copy-btn .i, .ai-btn .i, .auth-btn .i, .kedv-btn .i, .ment-btn .i,
.lept-btn .i, .menu-btn .i, .proj-torol-btn .i, .sec-mini .i, .kedv-x .i {
  width: 15px; height: 15px; vertical-align: 0;
}

/* 1. AKCENT — a fő akció */
.btn--primary, .btn--lime, .copy-btn, .ai-btn, .auth-btn {
  background: var(--accent); color: var(--accent-text);
  border-color: var(--accent-line); box-shadow: var(--shadow-1);
}
.btn--primary:hover, .btn--lime:hover, .copy-btn:hover, .ai-btn:hover, .auth-btn:hover {
  filter: brightness(1.04); box-shadow: var(--shadow-2);
}
.btn--lime { font-weight: 700; }

/* 1/b. MAGENTA — a MÁSIK fő út (2026-08-03, a user kérése az „Új videó
   indítása” gombra). A lime azt jelenti: „folytasd, amit elkezdtél”; a
   magenta azt: „kezdj valami újat”. Ugyanaz a súly, más irány — így a két
   gomb egymás mellett is megkülönböztethető, nem csak szöveg alapján.
   Ugyanaz a szín, mint a felső sáv Kedvenceim és Hollywood Box gombjáé. */
.btn--magenta {
  background: var(--accent2); color: var(--szines-text, var(--m-feher));
  border-color: var(--accent2-line); box-shadow: var(--shadow-1);
  font-weight: 600;
}
.btn--magenta:hover { filter: brightness(1.06); box-shadow: var(--shadow-2); }
.btn--magenta .i { stroke: currentColor; }
.btn--magenta:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* 2. KERETES — másodlagos */
.btn--secondary, .tool-btn, .kedv-btn, .ment-btn, .lept-btn {
  background: var(--bg-card); color: var(--text);
  border-color: var(--border-strong); box-shadow: var(--shadow-1);
}
.btn--secondary:hover, .tool-btn:hover, .kedv-btn:hover, .ment-btn:hover, .lept-btn:hover {
  background: var(--bg-card-hover); border-color: var(--accent-line); box-shadow: var(--shadow-2);
}

/* 3. KERET NÉLKÜLI */
.btn--ghost, .menu-btn, .sec-mini, .kedv-x, .proj-torol-btn {
  background: transparent; color: var(--text-muted); border-color: transparent; box-shadow: none;
}
.btn--ghost:hover, .menu-btn:hover, .sec-mini:hover, .kedv-x:hover, .proj-torol-btn:hover {
  background: var(--bg-sunken); color: var(--text);
}

/* 4. TÖMÖR, EMELT HÁTTÉR */
.btn--dark { background: var(--bg-sunken); color: var(--text); border-color: var(--border-strong); }
.btn--dark:hover { background: var(--bg-card-hover); border-color: var(--accent-line); }

/* 5. FIGYELMEZTETŐ */
.btn--warm { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.btn--warm:hover { filter: brightness(0.97); }

/* 6. TÖRLÉS */
.btn--danger { background: transparent; color: var(--text-dim); border-color: var(--border-strong); }
.btn--danger:hover { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }

/* Méret és forma */
.btn--sm, .sec-mini { height: 32px; padding: 0 var(--s3); font-size: var(--t-1); }
.btn--lg, .ai-btn, .auth-btn { height: 44px; padding: 0 var(--s5); font-size: var(--t-2); }
.btn--block, .copy-btn, .auth-btn, .kedv-btn, .ment-btn { width: 100%; }
.btn--icon, .menu-btn, .kedv-x, .proj-torol-btn { padding: 0; width: 38px; }
.btn--icon.btn--sm, .kedv-x { width: 32px; }

/* ── ÉRINTŐKÉPERNYŐN A KIS GOMB IS FOGHATÓ (2026-08-05) ────────
   A 32 px-es gomb egérrel pontos, ujjal viszont eltalálhatatlan — a szabály
   44×44 px. Mérve: a Narráció lapján a „Projekt törlése" és az „Ugrás a
   Forgatókönyvhöz" is 32 px volt 375 px-en.
   🔑 `pointer: coarse` = ott hat, ahol számít (ujj), és EGÉRREL SEMMIT NEM
      VÁLTOZTAT — így az asztali elrendezés egyetlen lapon sem csúszik el.
      A betűméret és a vízszintes belső tér is marad; csak a fogható felület nő. */
@media (pointer: coarse) {
  .btn--sm, .sec-mini { min-height: 44px; height: auto; }
  .btn--icon.btn--sm, .kedv-x { min-width: 44px; width: auto; }
}

/* ============================================================
   4. JELVÉNY
   ============================================================ */
.badge, .lepes-allapot {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r); white-space: nowrap;
  font-family: var(--font-gep);
  font-size: var(--t-0); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  background: var(--bg-sunken); border: 1px solid transparent; color: var(--text-dim);
}
.badge .i, .lepes-allapot .i { width: 12px; height: 12px; vertical-align: 0; }
.badge--kesz, .lepes-allapot.kesz {
  background: var(--accent); border-color: var(--accent-line); color: var(--accent-text);
}
.badge--elkezdve, .lepes-allapot.elkezdve {
  background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-ink);
}
.badge--var, .lepes-allapot.var { background: var(--bg-sunken); color: var(--text-dim); }
.badge--elavult, .lepes-allapot.elavult {
  background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text);
}

/* ============================================================
   5. MEZŐK — egy alap: azonos magasság, keret, fókusz.
   Itt a keret MARAD: a beviteli mezőnél az a használati jel.
   ============================================================ */
.field input, .field select, .field textarea,
.wlai-select, .sec-keres, .ai-teljes, .jelenet-mezo {
  width: 100%; padding: 10px 13px; min-height: 42px;
  background: var(--bg-card);
  border: 1px solid var(--field-border); border-radius: var(--r);
  color: var(--text); font-family: inherit; font-size: var(--t-2); line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.field input:hover, .field select:hover, .field textarea:hover, .wlai-select:hover,
.jelenet-mezo:hover {
  border-color: var(--border-strong);
}
.field input:focus, .field select:focus, .field textarea:focus,
.wlai-select:focus, .sec-keres:focus, .ai-teljes:focus, .jelenet-mezo:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder, .field textarea::placeholder, .sec-keres::placeholder,
.jelenet-mezo::placeholder { color: var(--text-dim); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── A BEÍRÓ MEZŐ a Képalkotó tetején (2026-08-05) ──
   Ez a lap fő beviteli pontja: nagyobb betű, hangsúlyosabb keret, de ugyanaz
   a forma és ugyanaz a fókusz-gyűrű, mint a többi mezőnél.
   🔴 A szabály ELŐSZÖR a `stilus.css`-be került — az viszont 2026-08-01 óta
      HALOTT fájl: a Műhelyt ez a `design.css` öltözteti. A mérés fogta meg,
      hogy a mező stílus nélkül maradt volna. */
.jelenet-mezo {
  min-height: 92px; resize: vertical;
  font-size: var(--t-3); line-height: 1.5;
  border-color: var(--border-strong);
}
.jelenet-tipp { margin-top: 10px; margin-bottom: 0; font-size: var(--fs-meta); }

/* ── A MEZŐ: a címke BEKÖLTÖZIK a dobozba ──
   ------------------------------------------------------------
   2026-08-01, a user kérése: „erre a típusra találj ki valami elegánsabbat."
   Volt: külön címke-sor + alatta egy 42 px-es fehér doboz — mezőnként két
   emelet, öt mező 140 px. Lett: EGY doboz, benne fent az apró kiskapitális
   címke, alatta az érték. Ugyanaz az információ ~30%-kal kevesebb helyen,
   és a lap nyugodtabb, mert feleannyi keret verseng a figyelemért.
   A keret itt MARAD — beviteli mezőnél az a használati jel —, csak halkabb. */
/* A mező a Slepnex `nx-urlap.css` bevált formája: 36 px magasság, 8 px sarok,
   fölötte normál (nem kiskapitális) címke. A beköltözött címkés kísérlet
   kikerült — a user visszadobta, és igaza volt: a nagy, félkövér
   „— nem adom meg —" hangosabb volt, mint a kérdés maga. */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 460px; }
.field > label {
  font-size: var(--fs-meta); font-weight: 600; color: var(--text-muted); line-height: 1.35;
}
/* 🔴 2026-08-05 (este): 36 → 44 px. Ugyanaz az ok, mint a gomboknál — az
   érintés-célpont minimuma. A `height` elhagyva: `min-height`-tal a legördülő
   hosszú felirata sem szorul össze. */
.field > input, .field > select, .field > textarea,
.field .mezo-vagy > input, .field .mezo-vagy > select {
  min-height: 44px; padding: 0 11px;
  background: var(--bg-card);
  border: 1px solid var(--field-border); border-radius: var(--r-lg);
  font-size: var(--t-2); font-weight: 600; color: var(--text); line-height: 1;
}
.field > select, .wlai-select { cursor: pointer; }
.field > textarea { height: auto; min-height: 76px; padding: 10px 11px; line-height: 1.5; resize: vertical; }
.field small { color: var(--text-dim); font-size: var(--t-0); line-height: 1.4; }
/* Az üres érték halkabb, mint egy valódi válasz — így látszik, mi nincs kitöltve. */
.field > select:has(option[value=""]:checked) { color: var(--text-dim); }

/* A mezősor RÁCS, nem flexbox: így nem keletkezik árva, félszélességű
   utolsó mező — minden mező pontosan ugyanolyan széles. */
.field-row {
  display: grid; gap: var(--s3) var(--s4);
  grid-template-columns: repeat(var(--racs), minmax(0, 1fr));
}
.field-row .field { max-width: none; }
.wlai-select { max-width: 460px; }

/* ── Jelölőnégyzet: NÉGYZET, nem pirula-kapcsoló ── */
.checks { display: grid; grid-template-columns: repeat(var(--racs), minmax(0, 1fr)); gap: var(--s2); }
.check {
  position: relative;
  display: flex; align-items: center; gap: 11px; min-height: 46px;
  padding: 10px 14px 10px 42px; cursor: pointer;
  background: var(--bg-card); border: 1px solid transparent; border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  font-size: var(--t-2); line-height: 1.35;
  transition: box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.check:hover { background: var(--bg-card-hover); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-2); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* a négyzet */
.check::after {
  content: ""; position: absolute; left: 14px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: var(--r);
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong);
  transition: background 0.15s, box-shadow 0.15s;
}
/* a pipa */
.check::before {
  content: ""; position: absolute; left: 20px; top: 50%; margin-top: -7px;
  width: 6px; height: 11px; z-index: 1;
  border-right: 2px solid transparent; border-bottom: 2px solid transparent;
  transform: rotate(42deg);
  transition: border-color 0.15s;
}
.check:hover::after { box-shadow: inset 0 0 0 1.5px var(--text-dim); }
.check:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-1);
}
.check:has(input:checked) span { font-weight: 600; color: var(--text); }
.check:has(input:checked)::after { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.check:has(input:checked)::before { border-color: var(--accent-text); }
.check:has(input:focus-visible) { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ── Figyelmeztetés ── */
/* `margin-bottom` is kell, nem csak felül: enélkül a figyelmeztetés
   RÁTAPADT a következő szakasz fekete fejlécére. (A user, 2026-08-02:
   „a felette a sárga rész ne legyen rátapasztva.") */
.warn {
  display: none; margin-top: var(--s3); margin-bottom: var(--s4); padding: 11px 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-left-width: 3px; border-radius: var(--r);
  color: var(--warn-text); font-size: var(--t-1); line-height: 1.5;
}
.warn.show { display: block; }
/* Figyelmeztetés, ami KIUTAT is kínál: a magyarázat alá kerül a gomb.
   🔑 Saját név, nem a `.elavult-doboz` átvétele — egy osztályt a stílusáért
   átvenni mellékhatást hoz (2026-08-05 tanulsága). */
.warn.warn-kiut.show { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ============================================================
   6. HÉJ — FELSŐ SÁV (navy, ahogy eddig)
   ============================================================ */
.app-torzs { padding-left: var(--sav-w); padding-right: var(--jsav-w); }

.site-bar {
  --bg: var(--hej-1);
  --bg-card: var(--hej-lap);
  --bg-card-hover: rgba(var(--m-lime-rgb),0.09);
  --bg-sunken: var(--hej-lap);
  --bg-elevated: var(--hej-lap);
  --border: var(--hej-vonal);
  --border-strong: var(--hej-vonal-2);
  --text: var(--hej-szoveg);
  --text-muted: var(--hej-halk);
  --text-dim: var(--hej-halk-2);
  --accent-ink: var(--m-lime);
  --accent-line: var(--m-lime);
  --card-ring: transparent;

  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px var(--oldal-margo);
  background: var(--hej-1);
  border-bottom: 1px solid var(--hej-vonal);
  color: var(--hej-szoveg);
}

/* 🔴 2026-08-04, a user: „egységesítsd a méreteket."
   Mérve 1440 px-en: a logó sávja 71 px magas volt (20+18 px belső margóval), a
   felső menüsáv viszont 52 — vagyis a logó alja 19 px-szel LEJJEBB ért, mint a
   mellette futó sáv alja. Ettől tűnt úgy, hogy a fejléc „nem passzol össze”,
   és betöltéskor is ez a lépcső szúrt szemet.
   🔑 A magasságot a FELSŐ SÁVHOZ kötjük (`--hej-magas`), nem beégetett számhoz:
      ha az egyik változik, a másik követi, és nem csúszhatnak szét újra. */
.brand {
  flex-shrink: 0; font-family: var(--font-fo);
  font-size: var(--t-4); font-weight: 700; letter-spacing: -0.025em;
  color: var(--text); text-decoration: none; white-space: nowrap;
  height: var(--hej-magas, 52px); padding: 0 12px; align-items: center;
}
/* 🔑 A LOGÓ: weblockai.com — az „ai" MAGENTA, a pont és a többi a szöveg
   színe. (A user kérése, 2026-08-03; előbb a pont volt lime, majd pontosította:
   „az ai magenta, a . fehér".) */
.brand .brand-ai { color: var(--accent2); }
.brand-fo, .brand-pont, .brand-com { color: inherit; }

.bar-spacer { flex: 1 1 auto; }
.bar-cim {
  font-family: var(--font-fo);
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-proj { position: relative; flex-shrink: 0; }
.bar-proj .pv-gomb {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px 10px; max-width: 300px; text-align: left; text-decoration: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--r);
  color: var(--text); font-family: inherit; font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.bar-proj .pv-gomb:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.pv-adat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv-cimke {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  letter-spacing: 0.14em; color: var(--text-dim); line-height: 1;
}
.pv-cim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.pv-nyil, .bar-nyil { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--text-dim); }
.pv-nyil .i, .bar-nyil .i { width: 14px; height: 14px; vertical-align: 0; }
.pv-gomb[aria-expanded="true"] .pv-nyil { color: var(--accent-ink); }
.bar-proj .pv-lista {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  min-width: 270px; margin: 0; box-shadow: var(--shadow-3);
}

.bar-kereso {
  display: flex; align-items: center; gap: var(--s2); flex-shrink: 0;
  padding: 7px 11px; border-radius: var(--r);
  background: rgba(var(--m-feher-rgb),0.05); border: 1px solid var(--border);
  color: var(--text-dim); font-family: inherit; font-size: var(--fs-meta);
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bar-kereso:hover { border-color: var(--accent-line); color: var(--text); background: rgba(var(--m-lime-rgb),0.08); }
.bar-kereso .i { width: 15px; height: 15px; vertical-align: 0; }
.ker-kbd {
  font-family: var(--font-gep); font-size: var(--t-0);
  padding: 2px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--text-dim);
}

.menu-btn { display: none; flex-shrink: 0; color: var(--text); }
.menu-btn:hover { background: rgba(var(--m-lime-rgb),0.10); color: var(--m-lime); }

/* ── nyelv- és téma-kapcsoló (fejléc / fiók-panel) ── */
.lang-toggle, .theme-toggle {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid var(--border);
  padding: 6px 10px; border-radius: var(--r); text-decoration: none; cursor: pointer;
  font-family: var(--font-gep); font-size: var(--fs-label); letter-spacing: 0.08em;
  color: var(--text); transition: all 0.18s;
}
.lang-toggle b { color: var(--text); font-weight: 600; }
.lang-toggle span { color: var(--text-dim); font-weight: 400; }
.lang-toggle:hover, .theme-toggle:hover { border-color: var(--accent-line); background: var(--bg-card-hover); }

/* ============================================================
   7. HÉJ — BAL SÁV (navy színátmenet, változatlan szerkezet)
   ============================================================ */
.oldalsav {
  --bg: var(--hej-1);
  --bg-card: var(--hej-lap);
  --bg-card-hover: #0e2a4c;
  --bg-sunken: #082038;
  --bg-elevated: #082038;
  --border: var(--hej-vonal);
  --border-strong: var(--hej-vonal-2);
  --text: var(--hej-szoveg);
  --text-muted: var(--hej-halk);
  --text-dim: var(--hej-halk-2);
  --accent-ink: var(--m-lime);
  --accent-line: var(--m-lime);
  --accent-soft: rgba(var(--m-lime-rgb),0.10);
  --card-ring: transparent;
  --shadow-1: none;

  position: fixed; top: 0; left: 0; bottom: 0; z-index: 120;
  width: var(--sav-w);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--hej-1), var(--hej-2));
  border-right: 1px solid var(--border);
  color: var(--text);
  overflow: clip;
}
.oldalsav::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 250px; height: 250px; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--m-lime-rgb),0.10) 0%, transparent 70%);
}

.sav-brand {
  flex-shrink: 0; display: flex; align-items: center;
  padding: 14px 14px; border-bottom: 1px solid var(--border);
}

.sav-proj { flex-shrink: 0; padding: 10px 10px 2px; }
.pv-gomb, .pv-nincs {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 9px 10px; text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); font-family: inherit; font-size: var(--fs-meta); font-weight: 600;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.pv-nincs { cursor: default; color: var(--text-muted); font-weight: 400; }
.pv-gomb:hover { border-color: var(--accent-line); background: var(--bg-card-hover); }
.pv-ikon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--text-muted); }

/* A lista HELYBEN nyílik le — semmi nem csúszik be oldalról. */
.pv-lista {
  display: flex; flex-direction: column; gap: 1px;
  margin-top: 4px; padding: 4px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  max-height: 42vh; overflow-y: auto;
}
.pv-lista[hidden] { display: none; }
.pv-tetel {
  padding: 8px 9px; border-radius: var(--r); text-decoration: none;
  color: var(--text-muted); font-size: var(--fs-meta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.pv-tetel:hover { background: var(--bg-card-hover); color: var(--text); }
.pv-alap { color: var(--text); font-weight: 600; }
.pv-alap:first-of-type { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 9px; }

.sav-folyamat {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 8px 8px; scrollbar-width: thin;
}
.sav-folyamat::-webkit-scrollbar { width: 4px; }
.sav-folyamat::-webkit-scrollbar-thumb { background: rgba(var(--m-feher-rgb),0.12); border-radius: 2px; }
.sav-szakasz { flex-shrink: 0; }

.szak-fej {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--r-lg);
  color: var(--text-muted); font-family: inherit;
  font-size: var(--t-2); font-weight: 600;
  margin-bottom: 2px; transition: background 0.12s, color 0.12s;
}
.szak-fej:hover { background: rgba(var(--m-lime-rgb),0.07); color: var(--text); }
.sav-szakasz:not(.zarva) .szak-fej { color: var(--text); }
.szak-fej .szak-nev {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: inherit; font-weight: inherit;
}
.szak-nyil {
  flex-shrink: 0; display: inline-flex; align-items: center; margin-left: auto;
  color: var(--text-dim); opacity: 0.55; transition: transform 0.2s, opacity 0.2s, color 0.2s;
}
.szak-nyil .i { width: 14px; height: 14px; vertical-align: 0; }
.sav-szakasz:not(.zarva) .szak-nyil { opacity: 0.9; color: var(--accent-ink); }
.sav-szakasz.zarva .szak-nyil { transform: rotate(-90deg); }
.sav-szakasz.zarva .szak-lepesek { display: none; }
.szak-all { flex-shrink: 0; font-size: var(--t-0); font-weight: 600; color: var(--text-dim); }
.sav-szakasz.kesz .szak-all { color: var(--accent-ink); }
.sav-szakasz.elavult .szak-all { color: var(--warn-text); }

.szak-lepesek { display: flex; flex-direction: column; padding: 0 0 6px; }
.sav-lepes {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px 7px 34px; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-lg); margin-bottom: 2px;
  color: var(--text-muted); font-size: var(--t-2); font-weight: 600;
  transition: background 0.12s, color 0.12s;
}
a.sav-lepes:hover { background: rgba(var(--m-lime-rgb),0.08); color: var(--accent-ink); }
/* A `.nincs` osztály KIVEZETVE (2026-08-02): halott, kattinthatatlan menüpont
   volt, magyarázat nélkül — a user nem értette, mitől szürke az Ötlet.
   Helyette `.projekt-kell`: halványabb, DE kattintható, és a projekt-listára
   visz. A halvány így azt jelenti: „ehhez előbb projekt kell", nem azt, hogy
   „ez nem működik". */
.sav-lepes.projekt-kell { opacity: 0.6; }
.sav-lepes.projekt-kell:hover { opacity: 1; }

/* Kilépés a projektből — a lenyíló alján, halkabban, mint a projektek. */
.pv-tetel.pv-kilep { color: var(--text-muted); }
.pv-tetel.pv-kilep:hover { color: var(--text); }
.lep-ikon {
  position: absolute; left: 10px;
  flex-shrink: 0; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.szak-fej .lep-ikon, .sav-pont .lep-ikon { position: static; }
.sav-szakasz:not(.zarva) .szak-fej .lep-ikon { color: var(--accent-ink); }
a.sav-lepes:hover .lep-ikon, .sav-lepes.itt .lep-ikon,
.sav-pont:hover .lep-ikon, .sav-pont.itt .lep-ikon { color: var(--accent-ink); }
.lep-nev { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lep-all { flex-shrink: 0; font-size: var(--t-0); color: var(--text-dim); }
.lep-jel { flex-shrink: 0; display: inline-flex; align-items: center; }
.lep-jel .i { width: 13px; height: 13px; vertical-align: 0; }
.lep-jel.kesz { color: var(--accent-ink); }
.lep-jel.elavult { color: var(--warn-text); }
.sav-lepes.kesz .lep-all { color: var(--accent-ink); }
.sav-lepes.elavult .lep-all { color: var(--warn-text); }

/* AZ AKTÍV SOR — tintás doboz + 1 px keret, fehér szöveg, színes ikon. */
.sav-lepes.itt, .sav-pont.itt {
  background: linear-gradient(100deg, rgba(var(--m-lime-rgb),0.18), rgba(var(--m-lime-rgb),0.04));
  border-color: rgba(var(--m-lime-rgb),0.30);
  color: var(--szines-text, var(--m-feher)); font-weight: 600;
}
.sav-lepes.itt .lep-all { color: var(--accent-ink); }

.sav-also {
  flex-shrink: 0; display: flex; flex-direction: column;
  padding: 8px 8px 12px; border-top: 1px solid var(--border);
}
.sav-pont {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r-lg);
  text-decoration: none; color: var(--text-muted); font-size: var(--t-2); font-weight: 600;
  margin-bottom: 2px; transition: background 0.12s, color 0.12s;
}
.sav-pont:hover { background: rgba(var(--m-lime-rgb),0.08); color: var(--accent-ink); }
/* Hajszálvonal a sáv alján, két csoport között: FÖLÖTTE ami munka közben kell
   (Tiltólista, Hibajavító), ALATTA amivel kilépsz a mostaniból (Projektek,
   Minden eszköz). 2026-08-02 — nélküle négy sor állt tagolatlanul egymás alatt. */
.sav-pont--elval { margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--border); }

/* ── A SÁV ALJA TÖMÖRÍTVE ──
   2026-08-02: a blokk négy sorosra nőtt (Tiltólista, Hibajavító, Projektek,
   Minden eszköz), és ezzel 139 px-t vett el a fölötte lévő folyamat-listától —
   1280×800-on négy lépés csúszott ki a képből.
   🔑 A mérés mutatta meg a valódi aránytalanságot: az alsó sorok NAGYOBBAK
   voltak (41 px), mint maguk a lépések (35 px), pedig a lépések a fontosabbak.
   Most a kettő egyforma.
   CSAK a fix sávban, 1024 px felett — ott egérrel kattintasz. A hamburgeres
   nézetben marad a nagyobb érintés-terület, mert ott az ujjad a mérce. */
@media (min-width: 1024px) {
  .sav-also { padding: 6px 8px 10px; }
  .sav-also .sav-pont { padding: 7px 10px; font-size: var(--t-2); margin-bottom: 1px; }
  .sav-also .sav-pont--elval { margin-top: 4px; padding-top: 10px; }
}
/* A BAL SÁV: FENT A LOGÓ, LENT A SUPERADMIN ÉS A BEÁLLÍTÁSOK, RÖGZÍTVE.
   🔴 2026-09-28, a user: „a bal shell teljes magasságában gördül. A Superadmin,
   a Beállítások és a logó rögzítve kell hogy legyen.” Csak a KÖZÉPSŐ rész
   (`.sav-folyamat`) görget; a csoport alpontjai is oda kerültek
   (`wlai_sav_admin_csoportok('lista')`), alul csak a két link áll.
   🔑 4 px-es görgetőcsík: a `scrollbar-width` mellett a Chrome a
      `::-webkit-scrollbar`-t figyelmen kívül hagyja, és a rendszer 12 px-es
      sávját rajzolja (mérve), ezért itt visszaállítjuk `auto`-ra. */
.sav-folyamat { scrollbar-width: auto; overscroll-behavior: contain; }
.sav-admin-cim {
  margin: 0; padding: 4px 10px 6px;
  font-size: var(--t-0); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
/* 🔒 Zárolt lépés (terv nélkül): látszik, de halványan, lakattal. */
.sav-pont--zarva { color: var(--text-dim); }
.sav-pont--zarva .lep-jel { color: var(--text-dim); }
.sav-pont--zarva:hover { background: rgba(var(--m-feher-rgb),0.04); color: var(--text-muted); }

/* ============================================================
   8. HÉJ — JOBB IKONSÁV
   ============================================================ */
.jobbsav {
  --bg: var(--hej-2);
  --text: var(--hej-szoveg);
  --text-muted: var(--hej-halk);
  --border: var(--hej-vonal);

  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: var(--jsav-w);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 12px 0;
  background: var(--bg);
  border-left: 1px solid var(--border);
}
.rb-gomb {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xl); border: 1px solid transparent;
  background: transparent; color: var(--text-muted);
  cursor: pointer; text-decoration: none;
  font-family: var(--font-gep); font-size: var(--t-1); font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rb-gomb:hover { background: rgba(var(--m-lime-rgb),0.10); color: var(--m-lime); border-color: rgba(var(--m-lime-rgb),0.25); }
.rb-gomb .i { width: 18px; height: 18px; vertical-align: 0; }
.rb-uj {
  background: linear-gradient(135deg, var(--m-lime), var(--m-lime-eros));
  color: var(--accent-text, var(--m-tinta)); box-shadow: 0 2px 12px rgba(var(--m-lime-rgb),0.30);
}
.rb-uj:hover, .rb-uj[aria-expanded="true"] {
  background: linear-gradient(135deg, var(--m-lime-vilagos), var(--m-lime-eros));
  color: var(--accent-text, var(--m-tinta)); border-color: transparent;
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--m-lime-rgb),0.45);
}
.rb-koz { flex: 1 1 auto; }
/* 💬 JAVASLATOM VAN — MAGENTA, a frissítés alatt (a user kérése, 2026-08-07).
   🔑 Ez az EGYETLEN színes gomb a sávban, és ez szándékos: a zárt teszt alatt
      ez a visszajelzés útja, tehát látszania kell. A többi ikon halk marad. */
.rb-javaslat {
  background: var(--accent2); color: var(--szines-text, var(--m-feher)); border-color: var(--accent2);
}
.rb-javaslat:hover {
  background: var(--accent2); color: var(--szines-text, var(--m-feher));
  border-color: var(--accent2); filter: brightness(1.1);
}

.rb-elo { position: relative; }
.rb-elo .elo-pont {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--m-szurke-kozep); transition: background 0.15s, box-shadow 0.15s;
}
.rb-elo[aria-pressed="true"], span.rb-elo { color: var(--text-muted); }
.rb-elo .elo-pont, span.rb-elo .elo-pont {
  background: var(--accent, var(--m-lime)); box-shadow: 0 0 6px var(--m-lime);
  animation: elo-lukt 1.6s ease infinite alternate;
}
@keyframes elo-lukt { from { opacity: 1; } to { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .elo-pont { animation: none !important; } }
span.rb-elo { cursor: default; }
span.rb-elo:hover { background: transparent; color: var(--text-muted); border-color: transparent; }

.rb-nyelv .zaszlo { width: 22px; height: 15px; border-radius: 2px; }
.rb-nyelv:hover { background: rgba(var(--m-lime-rgb),0.10); }
a.rb-avatar { text-decoration: none; flex-shrink: 0; margin-top: 2px; }
.rb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--m-lime), var(--m-lime-kozep)); color: var(--accent-text, var(--m-tinta));
  border: 0; cursor: pointer;
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 700;
  transition: box-shadow 0.15s;
}
.rb-avatar:hover { box-shadow: 0 0 0 3px rgba(var(--m-lime-rgb),0.25); }
.rb-ki { margin-top: 2px; }
.rb-ki:hover { background: rgba(220,38,38,0.14); color: var(--m-piros-halvany); border-color: rgba(220,38,38,0.30); }
.rb-indit { flex-shrink: 0; }

/* Fiók-panel — a sáv MELLETT nyílik, nem csúszik be. */
.rb-fiok { position: relative; flex-shrink: 0; }
.fiok-lista {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
.fiok-lista[hidden] { display: none; }
.rb-fiok .fiok-lista {
  position: absolute; right: calc(100% + 8px); bottom: 0; z-index: 200; min-width: 250px;
}
.fiok-tetel {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 9px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: var(--fs-meta); text-decoration: none;
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
.fiok-tetel:hover { background: var(--bg-card-hover); color: var(--text); }
.fiok-ki { border-top: 1px solid var(--border); border-radius: 0 0 var(--r) var(--r); margin-top: 4px; }

/* ============================================================
   9. LAP-SZERKEZET
   ============================================================ */
.page {
  max-width: var(--lap-max); margin-inline: auto;
  padding: var(--s5) var(--oldal-margo) var(--s8);
}
.head { margin-bottom: var(--s5); max-width: 82ch; }

/* SZINT 1 — a lap címe */
/* 🔑 KISEBB LAPCÍM (a user kérése, 2026-08-03). Amikor a lap neve kikerült a
   felső sávból, ez a `<h1>` maradt az egyetlen helye — és a régi mérete (38 px-ig
   futó) egy fejlécnek sok volt: elvitte a helyet a munkától. A `--fs-lapcim`
   ugyanúgy rugalmas, csak szűkebb sávban mozog. */
.head h1 {
  font-family: var(--font-fo);
  font-size: var(--fs-lapcim); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--s2);
  text-wrap: balance;
}
.head p { color: var(--text-muted); font-size: var(--fs-body); line-height: 1.6; max-width: 78ch; }
/* A lépés neve a lapcím mellett — ott, ahol EGY eszköz TÖBB lépést szolgál ki
   (Képalkotó: Látvány · Kamera és fény · Képek). A cím az eszközé marad, ez
   mondja meg, hol állsz vele éppen. */
.head h1 .head-lepes {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-edge); border-radius: var(--r); padding: 3px 8px;
}

.tool-bar { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
a.tool-btn { height: auto; min-height: 38px; padding: 10px 16px; }

/* ════════════════════════════════════════════════════════════
   A LAP FEJE — EGY SÁV, NEM NÉGY SOR
   ------------------------------------------------------------
   Volt: projekt-doboz · nagy cím · háromsoros leírás · gombsor,
   mind külön sorban — közel fél képernyő, mielőtt bármi hasznos
   kezdődik. Lett:

     1. sor →  hol vagy (projekt-sáv)  ·  léptető  ·  eszközgombok
     2. sor →  a lap címe  |  mellette a leírás

   Ami nem veszhet el, az mind ott maradt: melyik projekt, hányadik
   lépés, és a visszaút a folyamathoz. Csak nem külön emeleten ül.
   ════════════════════════════════════════════════════════════ */
/* Csak PROJEKTBŐL nyitott lapon van fej-sáv, ezért a `:has(> .pbar)`.
   Ahol nincs projekt-sáv, ott a lap marad a régi, egyszerű folyamban. */
.page:has(> .pbar) {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--s4); row-gap: 0;
}
/* Alapban minden elem saját sort kap — pontosan úgy, mint blokk-folyamban.
   A sorrend is marad: az `order: 5` közös, tehát a DOM-sorrend dönt. */
.page:has(> .pbar) > * { flex: 1 1 100%; min-width: 0; order: 5; }

/* …kivéve a fej három elemét. Ha nem férnek egy sorba (keskeny böngésző,
   hosszú projektnév), a sor MAGÁTÓL tördel — semmi nem csúszik ki. */
.page:has(> .pbar) > .pbar          { order: 1; }
/* 🔴 2026-08-06 — A LÉPTETŐ ÉS AZ ESZKÖZGOMBOK EGY SORBAN.
   A user: „ezt a 3 sort össze tudod húzni egy sorra úgy, hogy értelmezhető
   legyen és ne legyen túlzsúfolt?"
   Mind a hét elem egy sorba nem fér (a projekt-sáv is hosszú lehet), de a
   léptető és a kis eszközgombok (Lepj meg · Visszaállítom · Alapállapot)
   igen — így háromból kettő sor lesz.
   🔑 A léptető `auto` szélességű, tehát csak annyit foglal, amennyi kell, és a
      benne lévő `space-between` a maradékot osztja szét. Ha mégsem fér ki, a
      `.page` `flex-wrap: wrap`-je magától tördel — semmi nem csúszik ki.
   ⚠️ 2026-08-05-én ez a sor `flex: 1 1 100%` volt, mert a 44 px-es gombok a
      projekt-sáv MELLETT összenyomódtak. Most nem a projekt-sáv mellé megy,
      hanem a saját sorába az eszközgombokkal — ott van hely. */
.page:has(> .pbar) > .lepteto--fent { flex: 1 1 auto; order: 2; }
.page:has(> .pbar) > .tool-bar      { flex: 0 1 auto; order: 3; margin-bottom: 0; }
.page:has(> .pbar) > .head          { order: 4; }
.page:has(> .pbar) > .pbar,
.page:has(> .pbar) > .lepteto--fent,
.page:has(> .pbar) > .tool-bar { margin-bottom: var(--s4); }

/* Asztali gépen mind a három egy sorba fér: a projekt-sáv kitölti a
   maradékot, a léptető és az eszközgombok jobbra ülnek. */
@media (min-width: 1100px) {
  /* 🔴 2026-08-06 — 260 → 600 px alapszélesség. MÉRVE: a projekt-sáv
     tartalmához („A folyamathoz" 136 + projektnév 63 + lépés-jelvény 220 +
     „Projekt törlése" 133 + térközök) 600 px kell. 260-nal beszorult 341-re, és
     a LÉPÉS-JELVÉNY 220 helyett 39 px-en kipontozódott: „II…" — vagyis épp az
     tűnt el, ami megmondja, hol tartasz.
     🔑 Így a sor MAGÁTÓL tördel, ha nincs 600 px: a léptető és az eszközgombok
        mennek a második sorba EGYÜTT. Háromból kettő sor — de olvashatóan.
        Nagyon széles képernyőn mind a három egy sorban marad. */
  .page:has(> .pbar) > .pbar { flex: 1 1 600px; flex-wrap: nowrap; }
  .page:has(> .pbar) > .tool-bar { flex: 0 1 auto; }
  .page:has(> .pbar) > .tool-bar { justify-content: flex-end; }
  .page:has(> .pbar) > .pbar,
  .page:has(> .pbar) > .lepteto--fent,
  .page:has(> .pbar) > .tool-bar { margin-bottom: var(--s5); }
}

/* ── A LEÍRÁS TELJES SZÉLESSÉGBEN (2026-08-05, a user kérése) ──
   Volt itt egy kéthasábos fej: a cím balra, a leírás mellette. A cím oszlopa
   elvitte a hely egy részét, a leírás pedig egy szűk hasábban tört két-három
   sorba — miközben jobbra üresen maradt a képernyő.
   A user: „a leírás sort kirakhatod teljes képre hogy ne törjön meg."
   🔑 A cím alatt, teljes szélességben egy sorba fér, amihez eddig három kellett
      — vagyis a magasabb fej helyett valójában ALACSONYABB lett. */
.head { max-width: none; }
.head p { max-width: none; }

/* ── A két hasáb: választók balra, a kimenet jobbra ── */
.tool-layout {
  display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: start;
}
/* Ha a lapon NINCS kimeneti doboz (pl. Fiók, Narráció), a tartalom EGY hasábban
   fut — de a teljes szélességben.
   🔴 2026-08-02: itt egy `max-width: 1080px` állt, és ez szorította a Narráció
   mezőit meg a gép-ajánló kártyáit egy 1660 px-es ablak bal kétharmadába.
   A user: „teljes képen kérem, és minden mást is ami ilyen."
   👉 A fő tartalom-wrapper NEM kap max-width-et, csak paddingot.
   Ugyanez a hiba a Slepnexben is ismétlődött — lásd `feedback_full_width.md`. */
.tool-layout:not(:has(> .out)):not(:has(> .out-col)) {
  grid-template-columns: minmax(0, 1fr);
}

/* ============================================================
   ÁRVA SOR ELLEN — kötött oszlopszám + ÖNJAVÍTÓ rács
   ------------------------------------------------------------
   A szabály abszolút: EGYETLEN rácsban sem maradhat magányos elem
   az utolsó sorban. Az `auto-fill, minmax()` ezt nem tudja
   garantálni — a böngésző annyi oszlopot vesz fel, amennyi befér,
   és 8 kártyából lett 7+1. Ezért MINDEN rács KÖTÖTT oszlopszámot
   kap, felbontásonként.

   Ha az elemszám mégis magányost hagyna, a rács MAGA veszi észre:
   a `:nth-child(Cn+1):last-child` pontosan akkor talál, ha az utolsó
   elem egyedül kezdene új sort. Ilyenkor két dolog történhet:
     • ha eggyel kevesebb oszlop megoldja → átvált arra;
     • ha nem (páratlan elemszám) → az utolsó elem VÉGIGÉR a soron.
   Képes rácsnál a végigérő kártya előnézete arányt vált (16·C / 10),
   így pontosan olyan MAGAS marad, mint a szomszédaié — nem torzul.

   Három lépcső, mert három különböző hely van:
     --racs     = hasábon belüli rács (kártyák, jelölőnégyzetek, mezők)
     --racs-sz  = teljes szélességű szakasz (Kész összeállítások)
     --racs-cs  = csempék a műhely-belépőn (ott nincs kimeneti hasáb)
   ============================================================ */
:root { --racs: 2; --racs-sz: 2; --racs-cs: 3; }
@media (max-width: 420px)                          { :root { --racs: 1; --racs-sz: 1; --racs-cs: 1; } }
@media (min-width: 421px) and (max-width: 767px)   { :root { --racs: 2; --racs-sz: 2; --racs-cs: 2; } }
@media (min-width: 768px) and (max-width: 1099px)  { :root { --racs: 3; --racs-sz: 3; --racs-cs: 3; } }
@media (min-width: 1100px) and (max-width: 1899px) { :root { --racs: 2; --racs-sz: 2; --racs-cs: 3; } }
@media (min-width: 1900px) and (max-width: 2399px) { :root { --racs: 2; --racs-sz: 4; --racs-cs: 4; } }
@media (min-width: 2400px)                         { :root { --racs: 3; --racs-sz: 5; --racs-cs: 4; } }

/* ── C = 2: nincs hova csökkenteni, az utolsó elem éri végig a sort ── */
@media (min-width: 421px) and (max-width: 767px) {
  .opts:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .checks:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .field-row:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .tipus-racs:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .gep-racs:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .pkap-lista:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .tiles:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child { grid-column: 1 / -1; }
  .opts:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child > .elonez { aspect-ratio: 32 / 10; }
}
@media (min-width: 1100px) and (max-width: 2399px) {
  .opts:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .checks:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  /* 2026-08-02: a `.gep-racs` ebből a lépcsőből KIMARADT — a másik kettőben
     (421–767 és 768–1099) benne volt. Mérve a Hibajavítón: 1280/1440/1920-on
     3 és 5 kártyánál árva maradt az utolsó. Ugyanez állt a projekt-lap
     gép-ajánlásaira is, csak ott ritkán jött ki páratlan szám. */
  .gep-racs:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .tipus-racs:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .pkap-lista:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child,
  .field-row:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child { grid-column: 1 / -1; }
  .opts:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child > .elonez { aspect-ratio: 32 / 10; }
}
@media (min-width: 1100px) and (max-width: 1899px) {
  .sec-teljes .opts:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child { grid-column: 1 / -1; }
}

/* ── C = 3: előbb 2 oszlopra vált; ha az sem elég, végigér ── */
@media (min-width: 768px) and (max-width: 1099px), (min-width: 2400px) {
  .opts:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)),
  .checks:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)),
  .field-row:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)),
  .tipus-racs:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)),
  .gep-racs:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)),
  .pkap-lista:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)) { --racs: 2; }
  .opts:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):has(> :nth-child(2n+1):last-child) > :last-child,
  .checks:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):has(> :nth-child(2n+1):last-child) > :last-child,
  /* Ugyanaz a kimaradás, mint fent: a három rács benne van a „váltson 2 oszlopra"
     szabályban, de a „érjen végig" felében nem volt. Páratlan elemszámnál
     (mérve: 7 kártya, 768 és 2560 px) ettől maradt árva az utolsó. */
  .tipus-racs:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):has(> :nth-child(2n+1):last-child) > :last-child,
  .gep-racs:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):has(> :nth-child(2n+1):last-child) > :last-child,
  .pkap-lista:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):has(> :nth-child(2n+1):last-child) > :last-child,
  .field-row:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):has(> :nth-child(2n+1):last-child) > :last-child { grid-column: 1 / -1; }
  .opts:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):has(> :nth-child(2n+1):last-child) > :last-child > .elonez { aspect-ratio: 48 / 10; }
}
/* 2026-10-09: ha az utolsó sorban KETTŐ maradna (5, 8, 11 elem), az első elem
   két oszlopot kap: így az első sor 2+1, a többi tele. Mérve: storyboard
   beállítások (5), tiltólista (8). A teljes szélességű szakasz (--racs-sz)
   ebben a lépcsőben más oszlopszámú, ezért kimarad. */
@media (min-width: 768px) and (max-width: 1099px), (min-width: 2400px) {
  .opts:not(.sec-teljes .opts):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child,
  .checks:has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child,
  .field-row:has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child,
  .tipus-racs:has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child,
  .gep-racs:has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child,
  .pkap-lista:has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child { grid-column: span 2; }
  .opts:not(.sec-teljes .opts):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child > .elonez { aspect-ratio: 32 / 10; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .sec-teljes .opts:has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child { grid-column: span 2; }
  .sec-teljes .opts:has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :first-child > .elonez { aspect-ratio: 32 / 10; }
}
/* A teljes szélességű szakasz 4 oszlopa (1900–2399): 2 maradéknál az első
   elem 3 oszlopos, 3 maradéknál 2 oszlopos. Mérve: Látvány mintái (10). */
@media (min-width: 1900px) and (max-width: 2399px) {
  .sec-teljes .opts:has(> :nth-child(6)):has(> :nth-child(4n+2):last-child) > :first-child { grid-column: span 3; }
  .sec-teljes .opts:has(> :nth-child(6)):has(> :nth-child(4n+2):last-child) > :first-child > .elonez { aspect-ratio: 48 / 10; }
  .sec-teljes .opts:has(> :nth-child(7)):has(> :nth-child(4n+3):last-child) > :first-child { grid-column: span 2; }
  .sec-teljes .opts:has(> :nth-child(7)):has(> :nth-child(4n+3):last-child) > :first-child > .elonez { aspect-ratio: 32 / 10; }
}
/* Az 5 oszlop (2400-tól): 2, 3, 4 maradéknál az első elem 4, 3, 2 oszlopos. */
@media (min-width: 2400px) {
  .sec-teljes .opts:has(> :nth-child(7)):has(> :nth-child(5n+2):last-child) > :first-child { grid-column: span 4; }
  .sec-teljes .opts:has(> :nth-child(8)):has(> :nth-child(5n+3):last-child) > :first-child { grid-column: span 3; }
  .sec-teljes .opts:has(> :nth-child(9)):has(> :nth-child(5n+4):last-child) > :first-child { grid-column: span 2; }
  .sec-teljes .opts:has(> :nth-child(7)):has(> :nth-child(5n+2):last-child) > :first-child > .elonez { aspect-ratio: 64 / 10; }
  .sec-teljes .opts:has(> :nth-child(8)):has(> :nth-child(5n+3):last-child) > :first-child > .elonez { aspect-ratio: 48 / 10; }
  .sec-teljes .opts:has(> :nth-child(9)):has(> :nth-child(5n+4):last-child) > :first-child > .elonez { aspect-ratio: 32 / 10; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .sec-teljes .opts:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)) { --racs-sz: 2; }
  .tiles:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)) { --racs-cs: 2; }
}
@media (min-width: 1100px) and (max-width: 1899px) {
  .tiles:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(2n+1):last-child)) { --racs-cs: 2; }
  .tiles:has(> :nth-child(4)):has(> :nth-child(3n+1):last-child):has(> :nth-child(2n+1):last-child) > :last-child { grid-column: 1 / -1; }
}

/* ── C = 4: előbb 3, aztán végigér ── */
@media (min-width: 1900px) and (max-width: 2399px) {
  .sec-teljes .opts:has(> :nth-child(5)):has(> :nth-child(4n+1):last-child):not(:has(> :nth-child(3n+1):last-child)) { --racs-sz: 3; }
  .sec-teljes .opts:has(> :nth-child(5)):has(> :nth-child(4n+1):last-child):has(> :nth-child(3n+1):last-child) > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1900px) {
  .tiles:has(> :nth-child(5)):has(> :nth-child(4n+1):last-child):not(:has(> :nth-child(3n+1):last-child)) { --racs-cs: 3; }
  .tiles:has(> :nth-child(5)):has(> :nth-child(4n+1):last-child):has(> :nth-child(3n+1):last-child) > :last-child { grid-column: 1 / -1; }
}

/* ── C = 5: előbb 4, aztán végigér ── */
@media (min-width: 2400px) {
  .sec-teljes .opts:has(> :nth-child(6)):has(> :nth-child(5n+1):last-child):not(:has(> :nth-child(4n+1):last-child)) { --racs-sz: 4; }
  .sec-teljes .opts:has(> :nth-child(6)):has(> :nth-child(5n+1):last-child):has(> :nth-child(4n+1):last-child) > :last-child { grid-column: 1 / -1; }
}

/* ══ A LYUKAS HASÁB MEGSZÜNTETÉSE ══
   A rács minden hasábot külön indított, ezért egy rövid szakasz alatt
   félképernyős üresség maradt. A hasáb-folyam sorban tölti fel az
   oszlopokat: lyuk nem keletkezhet. A teljes szélességű szakasz a
   `column-span: all`-lal ugyanúgy átér, mint eddig a `grid-column`-nal. */
/* LEGFELJEBB KÉT HASÁB — akkor is, ha 2560 px-en elférne három.
   Három hasábbal a hasábok olyan keskenyek lettek, hogy a leghosszabb
   szakasz (Világítás) nem fért el egyben, és a kiegyenlítés felborult:
   961 px eltérés a hasábok között. Kettővel a hasáb ~820 px, azon belül
   a kártya-rács magától HÁROM oszlopra vált — vagyis a szakasz alacsonyabb
   lesz, és a lap tömören pakolható. Mérve: 2560-on 237 px, 1920-on 129 px
   az eltérés — mindkettő a 300 px-es határ alatt. */
.sec-grid {
  columns: 430px 2;
  column-gap: var(--s8);
  orphans: 3; widows: 3;
}
.sec-grid > .sec-teljes { column-span: all; }
.sec { margin: 0 0 var(--s7); }
.sec:last-child { margin-bottom: 0; }

/* 🔴 A SZAKASZ SOHA NEM SZAKADHAT SZÉT.
   Ha megengedjük, hogy átfolyjon a következő hasábba, a címe és a
   magyarázata az előző hasáb alján marad, a kártyái meg átcsúsznak —
   és a következő hasáb tetején cím nélküli kártyák állnak. 2560 px-en
   ez pontosan meg is történt a Világításnál: a user ránézett és nem
   tudta, mit lát. A cím és az első kártyája MINDIG egy hasábban van. */
.sec-grid > .sec { break-inside: avoid; }
.opt, .check, .field, .field-row, .warn, .pkap-sor { break-inside: avoid; }
.sec-grid .field, .sec-grid .wlai-select { max-width: 100%; }

/* SZINT 2 — a szakasz címe.
   ------------------------------------------------------------
   2026-08-01, a user kifogása: „a A szereplő és előtte az a vonal nem jó.
   Azt kiemelheted máshogy." A zöld függőleges csík KIKERÜLT.

   Helyette a szakaszt egy HAJSZÁLVONAL választja el a fölötte lévőtől, a cím
   maga pedig csupasz — a betű súlya emeli ki, nem egy dísz. Egy hosszú lapon
   (a Karakter-építőn tizenegy szakasz van) ez tagol is: látszik, hol ér véget
   az egyik gondolat és hol kezdődik a másik. Az első szakasz fölé nem kell
   vonal, mert azt a lap-fej már elválasztja. */
.sec-label {
  position: relative;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  background: var(--fej-bg); color: var(--szines-text, var(--m-feher));
  border: 0; border-radius: var(--r-lg);
  padding: 11px var(--s4); margin-bottom: var(--s3);
  font-family: var(--font-fo);
  font-size: var(--t-2); font-weight: 700; letter-spacing: -0.005em; line-height: 1.25;
  transition: background 0.14s;
}
.sec-label.csukhato { cursor: pointer; }
.sec-label.csukhato:hover  { background: var(--fej-bg-hover); }
.sec-label.csukhato:active { background: var(--m-fekete-tiszta); }
.sec-label:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ══ 🔴 2026-08-07 — A TE LÉPÉSEID CÍME HALKABB LETT ═══════════════════
   A user: „tegyünk egy kis rendet… kicsit kaotikus."
   📏 MÉRVE a Látvány lapon: HÁROM fekete sáv versengett a tartalommal. A
      fekete a legerősebb elem, amit egy felületre tenni lehet — ha mindenütt
      ott van, semmit nem emel ki.
   🔑🔑 A HATÁRVONAL: fekete marad az, amit a RENDSZER AD NEKED („Készen
      kapod”, „Ezt már tudjuk” — azok `.sec` szakaszok). Amit TE töltesz ki
      (a `.sec-teljes` számozott lépései), az sima cím, alatta vékony vonal.
   ⚠️ A csukható nyíl fehér volt (a fekete sávhoz szabva) — átlátszó háttéren
      láthatatlan lett volna. Ezért veszi át a szöveg színét. */
.sec-teljes > .sec-label {
  background: transparent; color: var(--text);
  border-radius: 0; border-bottom: 2px solid var(--accent-line);
  padding: 0 0 9px 0; margin-bottom: var(--s3);
  font-size: var(--t-3); font-weight: 700;
}
.sec-teljes > .sec-label.csukhato:hover { background: transparent; color: var(--accent-ink); }
.sec-teljes > .sec-label.csukhato:active { background: transparent; }
.sec-teljes > .sec-label.csukhato::after {
  border-right-color: currentColor; border-bottom-color: currentColor; opacity: .55;
}
.sec-teljes > .sec-label .sec-count { color: var(--text-muted); }

/* A nyíl a jobb szélen — lefelé, ha nyitva, jobbra, ha csukva (Slepnex-logika). */
.sec-label.csukhato::after {
  content: ""; flex: 0 0 auto; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(var(--m-feher-rgb), 0.72);
  border-bottom: 2px solid rgba(var(--m-feher-rgb), 0.72);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}
.sec.zarva > .sec-label.csukhato::after { transform: rotate(-45deg) translate(-1px, 1px); }

/* Ami a fekete sávon ül: halkabb fehér, hogy a cím maradjon az első. */
.sec-label .i { width: 16px; height: 16px; align-self: center; color: var(--accent); }
.sec-label .sec-count,
.sec-label .sec-osszegzes { color: rgba(var(--m-feher-rgb), 0.66); }
.sec-label .sec-tools { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.sec-label.csukhato::after + .sec-tools { margin-left: 0; }
/* A kereső és a „mind ki" a sávon belül: áttetsző fehér, nem fehér doboz. */
.sec-label .sec-keres {
  /* 2026-08-05: 30 → 44 px (érintés-célpont). A szakasz-fejléc ettől nő egy
     kicsit, de a keresőt eddig telefonon alig lehetett eltalálni. */
  min-height: 44px; min-width: 0; width: clamp(110px, 16vw, 180px);
  padding: 0 var(--s3);
  background: rgba(var(--m-feher-rgb), 0.12); color: var(--szines-text, var(--m-feher));
  border: 1px solid rgba(var(--m-feher-rgb), 0.24); border-radius: var(--r);
  font-family: inherit; font-size: var(--t-1); font-weight: 600;
}
.sec-label .sec-keres::placeholder { color: rgba(var(--m-feher-rgb), 0.55); }
.sec-label .sec-keres:focus {
  background: rgba(var(--m-feher-rgb), 0.18); border-color: var(--accent); outline: none;
}
.sec-label .sec-mini {
  min-height: 44px; padding: 0 var(--s3);
  background: rgba(var(--m-feher-rgb), 0.12); color: var(--szines-text, var(--m-feher));
  border: 1px solid rgba(var(--m-feher-rgb), 0.24);
  font-size: var(--t-1); font-weight: 700;
}
.sec-label .sec-mini:hover {
  background: rgba(var(--m-feher-rgb), 0.22); color: var(--szines-text, var(--m-feher)); border-color: rgba(var(--m-feher-rgb), 0.4);
}
.sec-label .i { width: 17px; height: 17px; align-self: center; color: var(--accent-ink); }
.sec-count {
  font-family: var(--font-gep); font-size: var(--t-1); font-weight: 600;
  letter-spacing: 0; color: var(--text-dim);
}
/* A lap MENETE egy mondatban, a teendők előtt. Bal oldali lime vonal fűzi a
   szemet: „ez nem egy doboz a sok közül, ez az eligazítás." */
.lap-menet {
  margin: 0 0 var(--s5); padding: 10px 0 10px 14px;
  border-left: 3px solid var(--accent-line);
  font-size: var(--fs-body); line-height: 1.6; color: var(--text);
  max-width: 68ch;
}

/* „3/15" — hol tartasz a folyamatban. Halványabb és gépbetűs, hogy ránézésre
   elkülönüljön a lapon belüli teendők számaitól (1., 2., 3.). */
.sec-hol {
  font-family: var(--font-gep); font-size: var(--t-1); font-weight: 600;
  color: var(--text-dim); letter-spacing: 0;
}
/* 🔴 2026-08-05, a user a lépés-leírásról: „beljebb van kis betűvel, és nem
   értem, hogy mi a funkciója."
   A 15 px-es behúzás olyan látszatot keltett, mintha a mondat valamihez
   TARTOZNA — egy listaelemhez, egy fölötte álló sorhoz —, pedig magáról a
   lépésről szól. Behúzás nélkül, a címmel egy vonalban rögtön látszik, hogy ez
   a lépés alcíme. A méret is nő: 13,5 → 15 px, mert ez az első mondat, amit az
   ember elolvas, amikor megnyitja a lépést. */
.sec-hint {
  color: var(--text-muted); font-size: var(--fs-body); line-height: 1.55;
  margin: 0 0 var(--s4); max-width: 62ch;
}

/* ── „MIKOR KELL EZ A LÉPÉS?" (2026-08-06) ───────────────────
   A user végigment a menün, és négy lépésről kimondta, hogy nem érti, mire
   való — a Kutatásra „rá se kattintana". Ez a sor a lépés tetején megmondja,
   mikor kell, és ha kihagyható, azt is.
   🔑 KÉT ÁLLAPOT, KÉT SZÍN: a kötelező lépés halk (nem riogat), a kihagyható
      viszont kiemelt — mert az a hír, ami időt spórol. Fordítva rossz lenne:
      minden lépés mellett egy zöld pipa semmit nem mondana. */
.lepes-kell {
  display: flex; align-items: flex-start; gap: 8px;
  margin: -6px 0 var(--s4); padding: 9px 12px; max-width: 62ch;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--belso-sarok);
  font-size: var(--t-2); line-height: 1.5; color: var(--text-muted);
}
.lepes-kell .i { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
/* ── A HÁROM SOR: „mit csinálj · mikor kell · mi lesz belőle" (2026-08-07) ──
   🔑 A címke NEM külön oszlop, hanem a mondat elé futó felirat: egy rácsban a
      hosszabb magyar/angol címke minden sort széthúzna, telefonon pedig a
      mondatnak alig maradna hely. Így a szöveg végig ugyanolyan széles marad. */
.lepes-kell .lk-sorok { display: grid; gap: 4px; min-width: 0; }
.lepes-kell .lk-sorok p { margin: 0; }
.lepes-kell .lk-cim {
  font-weight: 600; color: var(--text); margin-right: 6px;
  font-size: var(--t-1); letter-spacing: .01em;
}
.lepes-kell .lk-cim::after { content: ":"; }
.lepes-kell--opcio {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--text);
}
.lepes-kell--opcio b { color: var(--accent-ink); }
/* 🔴 A user kérése (2026-08-04): „az ilyen címeket ki kellene emelni kicsivel
   jobban méretben és színben is, lime vagy magentával, hogy átlátható legyen.
   A TELJES RENDSZERBEN."
   Ezek a lépésen belüli szakasz-címek („1. Milyen videó lesz ez?”, „2. Ebből
   dolgozik az AI”). Eddig 13,5 px-es, halvány szürkéskék felirattal futottak —
   egy hosszú lapon nem tagoltak semmit, a szem átsiklott rajtuk.
   🔑 LIME, nem magenta: a magenta a rendszerben azt jelenti, „ITT VAGY”
      (a folyamatsáv aktuális köre). Ha a szakasz-címek is magentát kapnának,
      elveszne annak a jelentése. A lime a „figyelj ide” szerepet viszi.
   🔑 A méret 13,5 → 17 px, és a `--accent-ink` világos témában sötétzöldre vált
      magától (#4f6b00) — fehér háttéren is olvasható marad. */
.sec-sub {
  font-size: var(--fs-h3); font-weight: 700; color: var(--accent-ink);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin: var(--s5) 0 var(--s2);
}
.sec-sub:first-child { margin-top: 0; }

/* ── Egysoros címkék ── */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--gomb-mag); padding: 10px 16px;
  background: var(--bg-card); border: 1px solid transparent; border-radius: var(--gomb-sarok);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  color: var(--text); font-family: inherit; font-size: var(--gomb-betu-meret); font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.tag:hover { background: var(--bg-card-hover); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-2); }
.tag[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent-line);
  color: var(--accent-text); font-weight: 600; box-shadow: var(--shadow-1);
}
.tag.risky, .tag.ajanlott { border-style: dashed; border-color: var(--accent-edge); }
.tag.ajanlott[aria-pressed="true"] { border-style: solid; }
.tag .i { width: 15px; height: 15px; vertical-align: 0; }
.tags.szuro { gap: 6px; }
/* 2026-08-05: 34 → 44 px. Telefonra ez a méret MÁR meg volt adva lentebb, egy
   media query-ben — most az asztali nézet is ugyanazt kapja, hogy ne legyen
   kétféle célpont-méret ugyanarra a gombra. */
.tags.szuro .tag { min-height: var(--gomb-mag); padding: 8px 12px; font-size: var(--gomb-betu-meret); }
.tags.szuro .tag .i { width: 14px; height: 14px; }

/* ============================================================
   10. A VÁLASZTHATÓ KÁRTYA — EGY forma az egész műhelyre
   ------------------------------------------------------------
   HÁROM állapot, egyetlen jellel:
     alap         — fehér lap, keret NÉLKÜL, halvány árnyék
     rátét        — a lap megemelkedik, a rajz kicsit kivilágosodik
     kiválasztott — a kártya KIGYULLAD: neon keret + neon felület +
                    neon név. Nincs mellette pipa-lapka: egy jel elég.
     tiltott      — halvány, nem kattintható
   A kiválasztást az `aria-pressed` hordozza — a felolvasó ugyanazt
   mondja, mint eddig, és egyetlen lap JS-ét sem kellett átírni.
   ============================================================ */
.opts { display: grid; gap: var(--s3); grid-template-columns: repeat(var(--racs), minmax(0, 1fr)); }
.opts.media { gap: var(--s3); }
.sec-teljes .opts { grid-template-columns: repeat(var(--racs-sz), minmax(0, 1fr)); }
/* 🔎 Az `elonezetek.css`-ben maradt EGY elrendezési szabály
   (`.sec-grid .opts.elonezetes { grid-template-columns: auto-fill … }`),
   ami felülírta a kötött oszlopszámot — emiatt a Világítás 2560-on 3 oszlopon
   maradt, és a 10. kártya egyedül lógott. Az előnézet-fájlhoz NEM nyúlunk
   (bizonyítottan változatlan), ezért innen ütjük el, erősebb szabállyal. */
.sec-grid .opts.elonezetes.opts { grid-template-columns: repeat(var(--racs), minmax(0, 1fr)); }

.opt {
  position: relative;
  display: flex; flex-direction: column; gap: 0; text-align: left;
  min-height: 0; padding: 0; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid transparent; border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  color: var(--text); font-family: inherit; cursor: pointer;
  transition: box-shadow 0.16s, transform 0.16s, background 0.16s, border-color 0.16s;
}

/* A KÉP: a kártya teljes szélessége, filmkocka-arányban.
   A rajzhoz (`elonezetek.css`) nem nyúlunk — csak a doboz méretét adjuk. */
.opt > .elonez {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
}
.opt > .opt-thumb { margin: 0; border-radius: 0; }

/* SZINT 3 — a kártya neve */
.opt > strong {
  padding: 11px 13px 0;
  font-size: var(--t-2); font-weight: 600; line-height: 1.3; letter-spacing: -0.008em;
  color: var(--text);
}
/* SZINT 4 — a magyarázat */
.opt > span {
  padding: 3px 13px 12px;
  font-size: var(--t-1); line-height: 1.45; color: var(--text-dim);
  overflow-wrap: anywhere;
}
/* Kép nélküli kártyán a pipa a NÉV sorába kerül, ezért ott állandóan
   fenntartunk neki helyet — így a kiválasztáskor a szöveg nem ugrik meg.
   Képes kártyán erre nincs szükség: a pipa a képen ül. */
.opt:not(:has(> .elonez)):not(:has(> .opt-thumb)) > strong { padding-top: 14px; padding-right: 38px; }
.opt.mono > span { font-family: var(--font-gep); font-size: var(--t-0); }

/* AJÁNLOTT — a kártya alján egy halk sor (2026-08-13).
   🔑 Miért nem sarok-jelvény: a jobb felső sarkot a kiválasztás-pipa foglalja
      (`.opt[aria-pressed="true"]::after`), és épp az ajánlott kártya az, ami
      gyakran ki is van választva — a kettő egymásra csúszott volna. */
.opt > .opt-jel {
  margin-top: auto;
  padding: 0 13px 11px;
  font-size: var(--t-0); font-style: normal; font-weight: 600;
  letter-spacing: 0.01em; color: var(--accent-ink);
}
.opt[aria-pressed="true"] > .opt-jel { color: var(--accent-ink); opacity: 0.9; }

/* rátét */
.opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-2);
}
.opt:hover > .elonez { filter: brightness(1.06) saturate(1.05); }

/* kiválasztott — EZ AZ EGYETLEN kijelölés-jel */
.opt[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2);
}
.opt[aria-pressed="true"] > strong { color: var(--accent-ink); font-weight: 700; }
.opt[aria-pressed="true"] > span   { color: var(--text-muted); }
:root[data-theme="dark"] .opt[aria-pressed="true"] > span { color: var(--hej-halk); }
.opt[aria-pressed="true"] > .elonez { border-bottom: 2px solid var(--accent-line); }

/* A PIPA — CSAK a kiválasztott kártyán. Kiválasztatlanon nincs üres lapka:
   a választhatóságot a szakasz-cím és a kártya-forma már elmondja. A lapkát
   és a pipát két pszeudo-elem rajzolja, tehát semmilyen lap HTML-jéhez nem
   kellett hozzányúlni. Sarok 4 px — sose kerek. */
.opt[aria-pressed="true"]::after {
  content: ""; position: absolute; right: 8px; top: 8px; z-index: 3;
  width: 21px; height: 21px; border-radius: var(--r);
  background: var(--accent); box-shadow: 0 0 0 1px var(--accent-line), 0 1px 3px rgba(4,16,31,.35);
}
.opt[aria-pressed="true"]::before {
  content: ""; position: absolute; right: 15px; top: 12px; z-index: 4;
  width: 6px; height: 10px;
  border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(45deg);
}

/* tiltott */
.opt[disabled], .opt[aria-disabled="true"] {
  opacity: 0.42; cursor: not-allowed; filter: saturate(0.35);
}
.opt[disabled]:hover, .opt[aria-disabled="true"]:hover { transform: none; box-shadow: var(--shadow-1); }

/* Kártya mozgóképes előnézettel */
.opt-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--bg-sunken); cursor: zoom-in;
}
.opt-thumb img, .opt-thumb video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.opt-thumb video { opacity: 0; transition: opacity 0.2s; }
.opt-thumb video.jatszik { opacity: 1; }
.opt-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: rgba(4,16,31,0.34); opacity: 0; transition: opacity 0.15s;
}
.opt-thumb::after {
  content: "▶"; position: absolute; right: 7px; bottom: 6px;
  font-size: var(--t-0); line-height: 1; color: var(--szines-text, var(--m-feher));
  background: rgba(var(--m-fekete-tiszta-rgb),0.55); border-radius: 3px; padding: 4px 6px;
  opacity: 0.85; transition: opacity 0.2s;
}
.opt-thumb.fut::after { opacity: 0; }
.thumb-nagyit {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%,-50%);
  padding: 6px 12px; border-radius: var(--r);
  background: rgba(4,16,31,0.75); color: var(--szines-text, var(--m-feher));
  font-size: var(--t-1); font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.opt-thumb:hover::before, .opt-thumb:hover .thumb-nagyit { opacity: 1; }

/* ============================================================
   11. A KIMENET — a lap terméke, ezért ez az EGYETLEN erős doboz
   ============================================================ */
/* 🔴 2026-08-05 (este) — A PROMPT NEM RAGADT. A user: „A prompt doboz most sem
   ragad. Ha ragadna, nem kérném. Ragadjon."
   Az ok mérésből: a RAGADÁS AZ EGÉSZ HASÁBRA volt kitéve, és a `ragadas()`
   ezért a hasáb TELJES magasságát mérte. A Karakter-építőn a hasáb 856 px
   (prompt 529 + magyar jelentés 247 + kedvencek 48), a küszöb 820 — **36
   pixellel** csúszott túl, mire a JS lekapcsolta a ragadást. Ettől az 529
   px-es prompt-doboz is elvesztette, pedig az bőven elfért volna.
   🔑 Mostantól a HASÁB nem ragad, hanem az ELSŐ doboz benne — az a prompt.
      A magyar jelentés és a kedvencek a lappal együtt görögnek, ahogy kell.
      A JS-t nem kellett hozzányúlni: az csak a `sticky` elemeket méri, tehát
      innentől magát a prompt-dobozt. */
.out-col {
  position: static;
  display: flex; flex-direction: column; gap: var(--s4);
  /* 🔴 A MÁSODIK OK, amit a mérés hozott ki: a `.tool-layout` rács
     `align-items: start`, ezért a jobb hasáb CSAK a saját tartalma magas
     (856 px) az 5659-ből. Egy ragadós elem viszont soha nem megy túl a
     SZÜLŐJE alján — vagyis a prompt 856 px után akkor is elgörgött volna,
     ha minden más rendben van. A `stretch` lenyújtja a hasábot a rács aljáig:
     ettől lesz hova ragadnia. */
  align-self: stretch;
}
.out-col > .out { position: static; }
.out-col > .out:first-child {
  position: sticky; top: calc(var(--bar-h, 76px) + var(--s3));
}

.out {
  position: sticky; top: calc(var(--bar-h, 76px) + var(--s3));
  background: var(--bg-card);
  border: 1px solid transparent; border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-3);
  overflow: hidden;
  /* Meddig nőhet a szöveg-doboz magától. Efölött a „Tovább" nyitja ki. */
  --out-cap: 60vh;
}
/* Ha a doboz magasabb a képernyőnél, a ragadás elromlik: az alja — vele a
   másolás-gomb — kilóg, és nem lehet odagörgetni. Ilyenkor a JS ezt teszi rá,
   és a doboz a lappal együtt görög. */
.out.nem-ragad, .out-col.nem-ragad { position: static; }
/* neon fejvonal — ránézésre látszik, hogy ez a lap terméke */
.out::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--accent-line), var(--accent) 60%, transparent);
}
.out.kedv-doboz { position: static; }
.out-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.out-head b {
  font-family: var(--font-gep);
  font-size: var(--t-0); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-muted);
}
.out-head em {
  font-style: normal; font-family: var(--font-gep); font-size: var(--t-0);
  color: var(--text-dim); background: var(--bg-sunken);
  border-radius: 3px; padding: 3px 7px;
}
/* A doboz a TARTALOMHOZ nő — a magasságot a JS méri és írja be. A `min-height`
   az üres állapot kényelmes alapja, a `max-height` a felső határ. JS nélkül a
   régi, belül görgethető doboz marad, tehát szöveg akkor sem veszik el. */
.out textarea {
  display: block; width: 100%; min-height: 210px; max-height: var(--out-cap); resize: vertical;
  padding: 16px; background: transparent; border: none; outline: none;
  font-family: var(--font-gep); font-size: var(--t-1); line-height: 1.7;
  color: var(--text); white-space: pre-wrap;
}
.out.ki-nyitva textarea { max-height: none; }
.out textarea.is-empty { color: var(--text-dim); }
:root[data-theme="dark"] .out textarea { color: var(--accent-ink); }

/* „Tovább" — csak akkor van a lapon, ha tényleg van mit lenyitni. */
.out-tovabb { display: none; }
.out.van-tovabb .out-tovabb {
  display: flex; justify-content: center;
  padding: 4px 16px 10px; border-top: 1px solid var(--border);
}
.out-foot { padding: 14px 16px; border-top: 1px solid var(--border); background: var(--bg-elevated); }
.copy-btn { height: 44px; font-weight: 700; }
.out-note { color: var(--text-dim); font-size: var(--t-1); margin-top: 10px; line-height: 1.5; }

/* 🔴 2026-08-06 — „ÍGY CSINÁLD A GÉPBEN". A user: „ha most nekem kellene
   összeraknom egy olyan videót, mint a tesztfilm, nem tudnám megcsinálni
   Higgsfieldben." A prompt kevés: a képarányt, a hosszt és a kezdőképet a
   generátor KÜLÖN mezője kéri.
   🔑 CSUKVA indul — aki tudja, nem is látja; egy kattintás, akinek kell. */
.hogyan-gepben { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.hogyan-gepben > summary {
  cursor: pointer; font-size: var(--t-1); font-weight: 600; color: var(--accent-ink);
  list-style: none; padding: 4px 0; min-height: 44px; display: flex; align-items: center; gap: 5px;
}
.hogyan-gepben > summary::-webkit-details-marker { display: none; }
.hogyan-gepben > summary::before { content: "▸ "; }
.hogyan-gepben[open] > summary::before { content: "▾ "; }
.hogyan-gepben ol { margin: 8px 0 2px; padding-left: 20px; }
.hogyan-gepben li {
  color: var(--text-muted); font-size: var(--t-1); line-height: 1.55; margin-bottom: 7px;
}

/* A magyar jelentés: halványabb — ránézésre látszik, hogy ezt nem bemásolni kell. */
.hu-out { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-1); }
.hu-out::before { background: var(--border-strong); }
.hu-out .out-foot { background: transparent; padding-top: 10px; padding-bottom: 12px; }
.hu-out { --out-cap: 40vh; }
.hu-out textarea {
  min-height: 90px; color: var(--text-muted);
  font-family: var(--font-szo); font-size: var(--t-2); line-height: 1.6;
}
:root[data-theme="dark"] .hu-out textarea { color: var(--text-muted); }
.hu-out .out-note { margin-top: 0; font-size: var(--t-1); }

.settings-list { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 5px; }
.settings-list div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-1); color: var(--text-muted); }
.settings-list b { font-family: var(--font-gep); font-size: var(--t-1); font-weight: 600; color: var(--text); }

/* ── Kedvencek ── */
.kedv-btn { margin-top: var(--s2); background: transparent; border-color: var(--accent-edge); }
.kedv-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.kedv-jelzes:empty { display: none; }
.kedv-jelzes.ok { color: var(--accent-ink); }
.kedv-jelzes.hiba { color: var(--warn-text); }
.kedv-doboz .out-head em { font-family: var(--font-gep); }
.kedv-lista { max-height: 320px; overflow-y: auto; }
.kedv-ures { padding: 16px; color: var(--text-dim); font-size: var(--t-1); line-height: 1.55; }
.kedv-sor { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.kedv-sor:last-child { border-bottom: none; }
.kedv-tolt {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; padding: 11px 14px;
  background: transparent; border: none; color: var(--text); font-family: inherit;
  transition: background 0.15s;
}
.kedv-tolt:hover { background: var(--bg-card-hover); }
.kedv-tolt b { font-size: var(--t-2); font-weight: 600; }
.kedv-tolt span { font-size: var(--t-0); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kedv-x { flex: none; height: auto; align-self: stretch; border-radius: 0; border-left: 1px solid var(--border); color: var(--text-dim); }
.kedv-x:hover { color: var(--warn-text); background: var(--warn-bg); }

/* ============================================================
   12. PROJEKT-SÁV, „KÉSZEN KAPOD", LÉPTETŐ
   ============================================================ */
/* A projekt-sáv MORZSA-SOR, nem doboz. A fehér kártya külön emeletet
   csinált belőle; a tájékozódás ugyanaz maradt, csak egy sorban fér el. */
.pbar {
  display: flex; align-items: center; gap: 6px var(--s2); flex-wrap: wrap;
  min-width: 0; margin-bottom: var(--s4); padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.pbar-vissza {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  /* 2026-08-05: 32 → 44 px (érintés-célpont). */
  min-height: 44px; padding: 5px 12px; text-decoration: none;
  background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--r);
  color: var(--text); font-size: var(--fs-meta); font-weight: 600; transition: all 0.15s;
}
.pbar-vissza:hover { border-color: var(--accent-line); background: var(--bg-card-hover); }
/* A projektnév a sáv rugalmas eleme: ha kevés a hely, kipontozódik,
   nem tolja szét a sort. */
/* Szándékosan `block`, nem `inline-flex`: a kipontozás (…) csak így
   működik, ha kevés a hely a projekt nevének. */
.pbar-cim {
  display: block; min-width: 0;
  font-family: var(--font-fo); font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbar-cim .i { color: var(--accent-ink); margin-right: 3px; }
/* Halvány morzsa-elválasztó — vonal és doboz helyett. */
.pbar-cim::before {
  content: "/"; margin-right: 8px;
  color: var(--text-dim); font-family: var(--font-szo); font-weight: 400;
}
.pbar-lepes {
  /* 🔑 ZSUGORODHAT (2026-08-03). 1100 px felett a sáv `nowrap`, és amióta a
     törlés-gomb is itt van, szűk hasábon (pl. a Storyboard eszközsora mellett)
     kicsordult. A lépés felirata a legkevésbé fontos a háromból — a folyamat-
     jelző közvetlenül alatta úgyis kiírja, hol tartasz —, ezért inkább ez
     rövidül, mint hogy bármi kilógjon. */
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-edge); border-radius: var(--r); padding: 3px 8px;
}
/* 🔑 „Végig kéznél" (Tiltólista, Hibajavító): itt nem CÍMKE áll a helyén,
   hanem egy MONDAT — az, ami megmagyarázza, miért nem lépés ez a lap.
   Ezért nem csupa nagybetű, nem gépi betű, és NEM vágjuk le: inkább törjön
   két sorba (a `.pbar` amúgy is `wrap`), mint hogy pont a magyarázat vesszen el. */
.pbar-lepes--mind {
  font-family: inherit; font-size: var(--fs-meta); font-weight: 600;
  text-transform: none; letter-spacing: 0;
  white-space: normal; overflow: visible; text-overflow: clip;
}

.pkap-lista { display: grid; gap: var(--s2); grid-template-columns: repeat(var(--racs), minmax(0, 1fr)); }
.pkap-sor {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px var(--s2);
  align-items: baseline; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid transparent;
  border-left: 2px solid var(--accent-line); border-radius: var(--belso-sarok);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
}
.pkap-sor.elavult { border-left-color: var(--warn-border); }
.pkap-sor b { font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; }
/* 🔴 `min-width` PADLÓ, nem 0: a jobb oldali címke különben nullára nyomja a
   középső oszlopot, és a szöveg betűnként törik. 768 px-en pontosan ez történt
   a „Stúdió" szóval — 135 px magas lett egyetlen szóból. (Mérve 2026-08-02.)
   🔑 Konténer-lekérdezéssel NEM megoldható: a rács CELLÁJÁT nem lehet
   megkérdezni, csak elemeket. Ezért a sornak magának kell ellenállnia. */
.pkap-sor span { font-size: var(--fs-body); color: var(--text); min-width: 7ch; overflow-wrap: anywhere; }
.pkap-sor em {
  font-style: normal; font-family: var(--font-gep); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
  background: var(--bg-sunken); border-radius: 3px; padding: 2px 6px;
  /* `nowrap` KIVEZETVE: szűk cellában ez nyomta szét a sort. Tördelhet —
     két sorban is olvasható, betűnként tört szomszéd mellett viszont nem. */
  overflow-wrap: anywhere;
}
.pkap-sor small { grid-column: 1 / -1; font-size: var(--t-1); color: var(--text-muted); line-height: 1.45; }
.pkap-sor.elavult small { color: var(--warn-text); }

/* ⏮️ ITT ÁLLT a 620 px-es media query („keskeny helyen a címke saját sorba
   kerül"). 2026-08-07 óta FÖLÖSLEGES: a kártya MINDEN méretben egyhasábos,
   tehát nincs mit külön kezelni szűk képernyőn. A 2026-08-02-i tanulság
   viszont érvényes marad: azt a hibát a `scrollWidth` nem fogta meg, csak a
   képernyőkép — semmi nem lógott ki, csak összepréselődött. */

/* ══ 🔴🔴 2026-08-07 — A KESKENY KÁRTYA, AMIT A KÉPERNYŐ SZÉLESSÉGE NEM ÁRUL EL
   A fenti media query a KÉPERNYŐT nézi — de a sor a rács CELLÁJÁBAN ül, és az
   sokkal keskenyebb lehet. 📏 Mérve a projekt-lapon (kétoszlopos lista):

     képernyő 768  → cella 332 px → az értéknek  74 px marad → 293 px MAGAS
     képernyő 1100 → cella 457 px → rendben
     képernyő 1280 → cella 262 px → az értéknek  63 px marad → 383 px MAGAS
     képernyő 1920 → cella 600+ px → rendben

   🔑🔑 A KÉPERNYŐ SZÉLESSÉGE NEM MONOTON JELZŐ: 1100-on tágas a cella, 1280-on
      viszont a legszűkebb — mert ott jelenik meg a bal menü és a jobb hasáb.
      Media query-vel ez nem javítható, csak találgatható.

   ⚠️ A fenti komment azt állította, hogy „konténer-lekérdezéssel NEM
      megoldható: a rács CELLÁJÁT nem lehet megkérdezni". Mérve: DE IGEN — nem
      a cellát kérdezzük meg, hanem magát a SORT, ami kitölti azt.
   🔑 A `grid-template-columns`-hoz nem nyúlunk (a konténer a saját méretét nem
      alakíthatja): a három gyereket húzzuk teljes szélességre, így egymás alá
      kerülnek. Az oszlopok megmaradnak, csak nincs mit szétosztaniuk.
   🔑 A KÜSZÖB SZÁMOLVA, nem tippelve: a sor = címke (~145) + rés (12) + érték
      + rés (12) + jelölés (~70), vagyis az érték = kártya − 240. Ahhoz, hogy az
      értéknek maradjon egy olvasható sornyi (~250 px), a kártyának 490 px fölött
      kell lennie. Ezért 500 — a mért 457 px-es eset (5 soros érték) így már
      egyhasábos lesz, az 530 px-es (1920 px-es képernyő) pedig marad hármas. */
/* ══ 🔴🔴 2026-08-07 (második kör) — MINDEN KÁRTYA UGYANÚGY ÁLL ══════════
   A user egy képernyőképpel: „ezeket tedd rendbe."
   📏 MÉRVE, mi történt: a lista kétoszlopos, ezért az első két kártya 508 px
      széles lett (belső tér levonva **480**), a harmadik viszont — mivel
      egyedül maradt egy sorban — **1025 px**. A lenti konténer-küszöb 500 px
      volt, tehát a KESKENY kettő tördelt alakot kapott (címke fent), a SZÉLES
      harmadik pedig hármas oszlopot (címke oldalt). **Ugyanaz a kártya,
      kétféle szerkezet, egymás alatt.**
   🔑🔑 A KÜSZÖB-LOGIKA MAGA VOLT A HIBA: attól tette függővé az elrendezést,
      hogy hányadik helyre esett a kártya a rácsban. A felhasználó ebből csak
      a rendetlenséget látja.
   ➡️ Innentől MINDEGYIK egyhasábos: kis nagybetűs címke, alatta az érték,
      alatta a jelölés. Ez volt a keskeny alak — a képernyőképen épp ez a
      kettő nézett ki jól. A konténer-lekérdezés (és vele a 620 px-es media
      query) fölöslegessé vált, ezért kikerült. */
.pkap-sor { grid-template-columns: 1fr; }
.pkap-sor > b {
  white-space: normal;
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim);
}
.pkap-sor > em { justify-self: start; }

/* ── LÉPTETŐ — a lap alján ÉS a lap tetején ──────────────────
   MIND A KÉT gomb neonzöld, mert a user szerint eddig „nem látszott".
   A rangsor a felület erősségével marad meg, nem a színnel:
     • „Tovább"  = TÖMÖR neon felület, rajta fekete szöveg (16,8:1)
     • „Előző"   = halvány neon mező, neon kerettel, neon felirattal
                   (mérve 5,4:1 világos témán — az AA-minimum fölött)
   Így ránézésre mindkettő zöld, mégis egyértelmű, melyik a fő irány. */
/* 🔴 A LAP ALJÁN, RENDEZETTEN (2026-08-04, a user kérése). A két gomb eddig
   eltérő belső szerkezettel épült (az egyikben `<b>` + `<span>` egymás
   mellett, a másikban csak ikon + szöveg), ezért más volt a magasságuk és a
   belső igazításuk. Most mindkettő ugyanaz a forma: fölül a szerep, alatta a
   lépés neve. */
.lepteto {
  display: flex; align-items: stretch; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border); flex-wrap: wrap;
}
/* 🔑 A MAGASSÁG A TARTALOMHOZ IGAZODIK (2026-08-04). Az 56 px-es alsó határ
   akkor kellett, amikor a gombon KÉT sor futott (szerep + név) meg egy nyíl.
   Most egyetlen szó áll rajta — 56 px-nyi dobozban ez elveszett. A 44 px a
   tapintható méret alsó határa, azt tartjuk. */
/* 🔴 2026-08-06 — AZ ALSÓ TOVÁBB-GOMB (a user: „innen nem tudok tovább menni").
   A lap legalján áll, a tartalommal egy vonalban. Csak EGY gomb van benne, a
   következő lépésé — a „vissza" fent marad, hogy ne legyen újra két sáv. */
.lepteto--alul {
  max-width: 1240px; margin: var(--s6) auto var(--s7);
  padding-left: var(--oldal-margo); padding-right: var(--oldal-margo);
}
.lept-btn {
  height: auto; min-height: 44px; padding: 10px 18px; font-weight: 700;
  display: inline-flex; align-items: center; gap: var(--s3);
  background: var(--accent-soft); color: var(--accent-ink);
  border-color: var(--accent-line); box-shadow: var(--shadow-1);
}
/* A `.lept-szoveg` és a `.lept-cimke` a régi, kétsoros gombhoz készült — ma
   egyik lap sem használja őket. Itt maradnak, hogy egy régi, gyorsítótárból
   betöltött lap se essen szét, de új helyen NE használd őket. */
.lept-szoveg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.lept-cimke {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7;
}
.lept-btn > .lept-cimke + span { font-weight: 700; }
.lept-btn:hover {
  background: var(--accent); color: var(--accent-text);
  border-color: var(--accent-line); box-shadow: var(--shadow-2);
}
/* Az irány-nyíl mindig teljes erővel látszik — akkor is, ha a mellette
   lévő alcím halványabb. */
.lept-btn .lept-nyil,
.lept-btn.fo .lept-nyil { font-weight: 700; opacity: 1; font-size: inherit; }
.lept-btn.fo {
  background: var(--accent); color: var(--accent-text);
  border-color: var(--accent-line); padding: 10px 22px; margin-left: auto;
}
.lept-btn.fo b { font-size: var(--t-2); font-weight: 700; }
.lept-btn.fo .lept-szoveg > span { color: var(--accent-text); opacity: 0.78; font-size: var(--t-1);
  display: inline-flex; align-items: center; gap: 5px; }
.lept-btn.fo .lept-szoveg > span .i { width: 15px; height: 15px; }
.lept-btn.fo:hover { background: var(--accent); color: var(--accent-text); filter: brightness(1.06); }
/* A „kész" állapot ugyanaz a tömör neon — külön jelzést a felirat ad. */
.lept-btn.fo.kesz { background: var(--accent); border-color: var(--accent-line); color: var(--accent-text); }
.lept-btn.fo.kesz span { color: var(--accent-text); opacity: 0.78; }

/* ── A FELSŐ PÉLDÁNY — ugyanaz, tömörebben, görgetés nélkül ──
   Nincs fölötte elválasztó vonal, és nem tolja szét a fejet: beáll a
   projekt-sáv mellé, a lap első sorába. */
/* 🔴 2026-08-05 — EZ MOST MÁR AZ EGYETLEN LÉPTETŐ, ÉS AZ ALSÓ ARCÁT VISELI.
   A user: „Az alsó elnevezések és design megy felülre. Vissza és tovább
   helyére." Eddig három léptető futott egy lapon: ez a tömör felül, a
   lapon belüli szakasz-léptető középen, és a teljes méretű alul.
   Ami maradt: ez az egy — teljes méretben (44 px-es gombok, ugyanaz a
   lime), saját sorban, a bal szélen az előző lépés, a jobb szélen a
   következő. Fölötte nincs elválasztó vonal: a lap tetején az szemetelne. */
.lepteto--fent {
  margin-top: 0; padding-top: 0; border-top: 0;
  justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
}
/* Ha nincs előző lépés, a következő akkor is a jobb szélen marad. */
.lepteto--fent .lept-btn.fo { margin-left: auto; }
/* Ami a felső példányról lemarad, az mind ott van a lap alján — a felső
   csak az IRÁNYT és a lépés nevét mondja meg: „← Forgatókönyv” /
   „Képalkotó →”. Széles képernyőn kiírja a teljes feliratot is. */
.lepteto--fent .lept-mit,
.lepteto--fent .lept-al { display: none; }
@media (min-width: 1500px) {
  .lepteto--fent .lept-mit { display: inline; }
  .lepteto--fent .lept-al  { display: inline; }
}
@media (max-width: 1099px) {
  .lepteto--fent { flex-wrap: wrap; }
  .lepteto--fent .lept-btn { flex: 1 1 auto; min-width: 0; }
}

.ment-btn { height: 44px; margin-top: 10px; border-color: var(--accent-line); font-weight: 700; }
.ment-note { margin-top: 8px; font-size: var(--t-1); line-height: 1.45; color: var(--text-muted); }
.ment-note.ok { color: var(--text); font-weight: 600; }
.ment-note.hiba { color: var(--warn-text); font-weight: 600; }

.mentve {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  background: var(--bg-card); border: 1px solid var(--accent-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: 11px 16px; font-size: var(--t-2); font-weight: 600;
  opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none;
}
.mentve.lathato { opacity: 1; transform: translateY(0); }

/* ============================================================
   13. MŰHELY-BELÉPŐ (csempék, döntés) — a rendszer részeként
   ============================================================ */
/* 🔑 2 : 1 (2026-08-04, előtte 1,7 : 1). A fő út — a folytatás — kapja a
   nagyobb helyet, mert az a gyakoribb mozdulat: egy videót sokszor folytatsz,
   újat ritkábban kezdesz.
   🔴 A KÉT DOBOZ AZONOS MAGASSÁGÚ (a user kérése). Előbb `align-items: start`
   állt itt, hogy a jobb doboz csak a tartalmáig érjen — de az kettétörte a
   sort. A helyes megoldás nem a doboz rövidítése, hanem hogy legyen benne
   mit mutatni: ezért kapta meg az öt szakasz listáját. */
/* 🔄 SORREND (2026-08-04, a user kérése): ELŐBB AZ ÚJ VIDEÓ, aztán a
   folytatás. A méret a dobozzal együtt mozdult: a folytatás hordozza a több
   adatot (haladás, szakaszok, következő lépés), ezért az maradt a szélesebb. */
.dont { display: grid; gap: var(--s3); grid-template-columns: minmax(0,1fr) minmax(0,2fr); margin-bottom: var(--s8); }
.dont--ures { grid-template-columns: minmax(0,1fr); }
.dont-fo, .dont-uj {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  padding: var(--s5); text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid transparent; border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-2);
}
/* 🔄 SZÍNCSERE (2026-08-04, a user kérése): a FOLYTATÁS lett magenta, az ÚJ
   VIDEÓ lime — a gombokkal együtt. A két doboz kerete UGYANAZ A FORMA
   (3 px-es bal szegély), csak a szín különbözteti meg őket. */
.dont-fo { border-left: 3px solid var(--accent2); }
a.dont-fo:hover { background: var(--bg-card-hover); box-shadow: 0 0 0 1px var(--accent2-line), var(--shadow-3); }
.dont-cimke { font-family: var(--font-gep); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-ink); }
.dont-uj .dont-cimke { color: var(--text-dim); }
.dont-cim { font-family: var(--font-fo); font-size: clamp(21px, 2.1vw, 28px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
/* 🔴 TELJES SZÉLESSÉG (2026-08-04). Eddig `max-width: 420px` volt, és emiatt a
   haladás-sáv KESKENYEBB volt, mint az alatta futó szakasz-csík — a user
   szava: „miért nem olyan széles mint alatta". Két jelző egymás alatt csak
   akkor olvasható egy egységként, ha azonos szélességű. */
.dont-halad { display: flex; align-items: center; gap: var(--s3); width: 100%; }
.dont-sav { flex: 1 1 auto; height: 6px; border-radius: 2px; background: var(--bg-sunken); overflow: hidden; }
.dont-sav i { display: block; height: 100%; background: var(--accent-line); }
.dont-szam { flex: none; font-family: var(--font-gep); font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; }
.dont-szam b { color: var(--text); font-weight: 700; }
.dont-kov { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.dont-kov-ikon { display: inline-flex; color: var(--accent-ink); }
.dont-kov-ikon .i { width: 18px; height: 18px; vertical-align: 0; }
.dont-kov-nev { font-size: var(--fs-h3); font-weight: 600; }
/* 🔑 A GOMB MINDKÉT DOBOZBAN AZ ALJÁN — így egy vonalban állnak, akármennyi
   szöveg van fölöttük. Enélkül a rövidebb doboz gombja „lóg a levegőben",
   és a sor kettétörik. */
.dont-gomb { margin-top: auto; }
.dont-uj-mit, .dont-elso-mit { color: var(--text-muted); font-size: var(--fs-body); max-width: 62ch; }
.dont-mind { font-size: var(--fs-meta); color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border-strong); }
.dont-mind:hover { color: var(--text); border-bottom-color: var(--accent-line); }

/* ══ A FEJSOR: a címke és az „utoljára…" egy sorban ══ */
.dont-fej { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; width: 100%; }
.dont-mikor {
  margin-left: auto; font-family: var(--font-gep); font-size: var(--fs-label);
  color: var(--text-dim); white-space: nowrap;
}

/* ══ AZ ÖT SZAKASZ ══
   A film készülésének íve egyetlen sorban. Minden szakasz egy csík + egy név;
   a kész szakasz kitöltött, ahol most tartasz, ott magenta pötty jelöli.
   🔑 `minmax(0, 1fr)` — a hosszabb nevek („Közzététel") különben szétfeszítenék
   a rácsot, és a doboz oldalra csúszna. */
/* 🔑 A `margin-top` NEM negatív többé: a haladás-sáv és a szakasz-csík két
   KÜLÖN állapotjelző, és egymás hegyén-hátán ültek. Most levegő van köztük. */
.dont-szak {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px; width: 100%; margin-top: var(--s2);
}
.dont-szak-elem { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dont-szak-elem > i {
  display: block; height: 4px; border-radius: 2px;
  background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--border);
}
.dont-szak-elem > em {
  font-style: normal; font-family: var(--font-gep); font-size: var(--t-0);
  letter-spacing: 0.04em; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Elkezdett szakasz: félig kitöltött érzet — halvány, de már nem üres. */
.dont-szak-elem.folyo > i { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.dont-szak-elem.kesz  > i { background: var(--accent-line); box-shadow: none; }
.dont-szak-elem.kesz  > em { color: var(--text-muted); }
/* AHOL MOST TARTASZ — ez a legfontosabb jelzés a csíkon. */
.dont-szak-elem.itt > i  { background: var(--accent2); box-shadow: none; }
.dont-szak-elem.itt > em { color: var(--text); font-weight: 700; }

/* A következő lépés magyarázata — a NEVE önmagában nem mondja meg, mit csinálsz. */
.dont-kov-mit {
  margin-top: -6px; font-size: var(--fs-meta); line-height: 1.55;
  color: var(--text-muted); max-width: 62ch;
}

/* ══ AZ „ÚJ VIDEÓ" DOBOZ — a Hollywood Box várakozó dobozának mintája ══
   Ikon + félkövér cím + magyarázó mondat, bal szélen vastag jelzőcsíkkal.
   Ugyanaz a keret-forma, mint a folytatásnál — csak a szín más.

   🔴🔴 2026-08-07 — A GOMB NEM ÁLLT EGY VONALBAN A SZOMSZÉDÉVAL.
   A user: „új videó indítása gomb a másikkal egy vonalba."
   📏 MÉRVE: a bal gomb teteje 345 px, a jobbé 481 — **136 px eltérés**.
   🔑🔑 A GYÖKÉR-OK AZ `align-content: start` VOLT: ez a rács sorait a doboz
      TETEJÉRE tömöríti, ezért a lentebb álló `.dont-gomb { margin-top: auto }`
      szabály nem tudott dolgozni — a gomb számított `margin-top`-ja **0px**
      volt, hiába írtuk elő az `auto`-t.
   ➡️ `space-between`: az első sor (ikon + szöveg) felül marad, a gomb sora a
      doboz aljára kerül — pontosan oda, ahol a szomszéd doboz gombja is áll.
   ⚠️ A régi megjegyzés itt azt állította, hogy ez a doboz „nem nyúlik le a
      bal doboz aljáig" — MÉRVE ez már nem volt igaz: mindkét doboz 305 px
      magas, mert a rács alapból nyújtja őket. */
.dont-uj {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3); align-content: space-between;
  border-left: 3px solid var(--accent-line);
}
.dont-uj-ikon { display: inline-flex; flex: none; color: var(--accent-ink); padding-top: 2px; }
.dont-uj-ikon .i { width: 22px; height: 22px; }
.dont-uj-torzs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dont-uj-cim { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
.dont-uj .dont-uj-mit { font-size: var(--fs-meta); line-height: 1.55; }

/* ══ AZ ÖT SZAKASZ LISTÁJA ══
   🔑 EZ TÖLTI KI A DOBOZT — és nem töltelék: a bal oldali csík azt mutatja,
   HOL TARTASZ, ez pedig azt, MI VÁR RÁD. A kettő ugyanabból a forrásból jön
   (`wlai_szakaszok()`), tehát nem tudnak elcsúszni egymástól. */
.dont-lepcso { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; margin: 2px 0 0; }
.dont-lepcso-elem { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
.dont-lepcso-elem > b {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 700;
  color: var(--accent-ink); letter-spacing: 0.04em;
}
.dont-lepcso-elem > span { font-size: var(--t-1); line-height: 1.45; color: var(--text-muted); min-width: 0; }
.dont-lepcso-elem > span > i { font-style: normal; color: var(--text); font-weight: 600; }

/* A gomb a doboz ALJÁRA kerül — így a két doboz gombja egy vonalban áll. */
.dont-uj .dont-gomb, .dont-uj .dont-mind { grid-column: 1 / -1; justify-self: start; }
.dont-uj .dont-gomb { margin-top: auto; }

@media (max-width: 900px) {
  .dont { grid-template-columns: minmax(0, 1fr); }
  .dont-szak-elem > em { font-size: var(--t-0); }
}
@media (max-width: 520px) {
  /* Telefonon a nevek nem férnek ki: marad a csík, ami a haladást mutatja. */
  .dont-szak-elem > em { display: none; }
  .dont-szak { gap: 4px; }
}

.eszk-fej { margin-bottom: var(--s4); }
.eszk-fej h2 { font-family: var(--font-fo); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; }
.eszk-fej p { color: var(--text-muted); font-size: var(--fs-meta); max-width: 78ch; margin-top: 3px; }

.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(var(--racs-cs), minmax(0,1fr)); }
.tile {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); text-decoration: none;
  background: var(--bg-card); border: 1px solid transparent; border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
}
a.tile:hover { background: var(--bg-card-hover); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent-edge), var(--shadow-2); }
.tile-ico { display: inline-flex; line-height: 1; color: var(--accent-ink); flex: none; margin-top: 2px; }
.tile-ico .i { width: 22px; height: 22px; stroke-width: 1.6; vertical-align: 0; }
.tile-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-lepes { font-family: var(--font-gep); font-size: var(--t-0); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-name { font-family: var(--font-fo); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; }
.tile-desc { color: var(--text-muted); font-size: var(--fs-meta); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ============================================================
   ÉLŐ CSEMPÉK — mozgó ikon + grafikai motívum (2026-08-03)
   ------------------------------------------------------------
   A user kérése: az OpenArt kártyáin minden eszköz mellett kép van;
   nálunk „nem kellenek képek, jók lesznek mozgó ikonok vagy valami
   grafikai elem".
   🔑 KÉPEK HELYETT: tizenöt képet készíteni és karbantartani teher,
   és bármelyik elavulhat. Egy CSS-motívum sosem avul el, nem tölt be
   lassan, és a sötét témában is magától helyes marad.
   🔑 TISZTÁN CSS: a HTML-hez nem nyúltunk, tehát nincs mit elrontani
   a lapokon — és JS nélkül is minden látszik.
   🔴 `prefers-reduced-motion`: minden mozgás kikapcsol. Aki így állította
   be a gépét, annak a mozgás nem díszlet, hanem rosszullét.
   ============================================================ */
.tile { position: relative; overflow: hidden; }

/* A motívum: alig látható fény a kártya jobb hátsó sarkában. Nem kép,
   nem ikon — csak annyi, hogy a kártyának legyen mélysége.
   🔴 Az első változat HÁROMSZOR ekkora és sokkal telítettebb volt: elnyomta
   a szöveget. Egy háttér-motívum akkor jó, ha észre sem veszed — csak azt
   érzed, hogy a felület nem lapos. */
.tile::after {
  content: ""; position: absolute; z-index: 0;
  right: -26px; top: -26px; width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 66%,
              var(--accent-soft) 0%, transparent 52%);
  opacity: 0.4;
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1), opacity 0.3s;
  pointer-events: none;
}
a.tile:hover::after { transform: scale(1.22) translate(-5px, 5px); opacity: 0.7; }

/* A tartalom a motívum FÖLÖTT — enélkül a folt a szöveg alá úszna. */
.tile-ico, .tile-txt, .tile-all, .tile-soon-tag { position: relative; z-index: 1; }

/* Az ikon egy halk körben ül, és a kör lélegzik. A ciklus szándékosan
   hosszú (9 mp) és az elmozdulás pár százalék: a szem alig veszi észre,
   de a felület nem hat halottnak. */
.tile-ico {
  width: 40px; height: 40px; align-items: center; justify-content: center;
  margin-top: 0; border-radius: var(--r-lg);
  background: var(--accent-soft);
  animation: tile-lelegzik 9s ease-in-out infinite;
}
.tile-ico .i {
  width: 20px; height: 20px;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1);
}
a.tile:hover .tile-ico { animation-play-state: paused; }
a.tile:hover .tile-ico .i { transform: scale(1.12) rotate(-6deg); }

@keyframes tile-lelegzik {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 var(--accent-soft); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 5px transparent; }
}

/* A csempék NEM egyszerre lélegeznek — az katonás lenne. Minden
   csempe kicsit később indul, így a rács hulláma véletlenszerűnek hat. */
.tiles .tile:nth-child(3n+2) .tile-ico { animation-delay: -3s; }
.tiles .tile:nth-child(3n+3) .tile-ico { animation-delay: -6s; }
.tiles .tile:nth-child(4n+1) .tile-ico { animation-duration: 11s; }

@media (prefers-reduced-motion: reduce) {
  .tile-ico { animation: none; }
  .tile::after, .tile-ico .i { transition: none; }
  a.tile:hover::after { transform: none; }
  a.tile:hover .tile-ico .i { transform: none; }
}

.tile.soon { opacity: 0.55; }
.tile-soon-tag { flex: none; margin-left: auto; align-self: center; font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); background: var(--bg-sunken); border-radius: var(--r); padding: 3px 8px; }

/* ── Szakasz-sáv, térkép, folyamatsáv ── */
.szakaszok { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--s2); margin-bottom: var(--s3); }
.szak {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid transparent; border-top: 3px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1); transition: all 0.15s;
}
a.szak:hover { background: var(--bg-card-hover); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-2); }
.szak.itt { background: var(--bg-card-hover); box-shadow: 0 0 0 1px var(--accent-edge), var(--shadow-2); }
.szak.kesz, .szak.elkezdve { border-top-color: var(--accent-line); }
.szak.elkezdve { border-top-style: dashed; }
.szak.elavult { border-top-color: var(--warn-border); }
.szak-rom { font-family: var(--font-gep); font-size: var(--t-0); color: var(--text-dim); letter-spacing: 0.05em; }
.szak.itt .szak-rom, .szak.kesz .szak-rom, .szak.elkezdve .szak-rom { color: var(--accent-ink); }
.szak.elavult .szak-rom { color: var(--warn-text); }
.szak-nev { font-size: var(--fs-body); font-weight: 600; line-height: 1.2; }
.szak.var .szak-nev { color: var(--text-dim); font-weight: 600; }
.szak-mit { font-size: var(--t-1); color: var(--text-muted); line-height: 1.35; }

.terkep { margin-bottom: var(--s3); padding: 14px 16px 12px; background: var(--bg-card); border: 1px solid transparent; border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1); }
.terkep-fej { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.terkep-fej b { font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }
.terkep-arany { margin-left: auto; display: flex; align-items: center; gap: 9px; font-family: var(--font-gep); font-size: var(--t-1); color: var(--text-dim); white-space: nowrap; }
.terkep-sav { display: block; width: 120px; height: 5px; border-radius: 2px; background: var(--bg-sunken); overflow: hidden; }
.terkep-sav i { display: block; height: 100%; background: var(--accent-line); transition: width 0.3s; }
.terkep-sor { display: flex; align-items: stretch; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.terkep-szak { display: flex; align-items: center; padding: 0 7px 0 4px; font-family: var(--font-gep); font-size: var(--t-0); color: var(--text-dim); border-left: 1px solid var(--border); flex: none; }
.terkep-szak:first-child { border-left: none; padding-left: 0; }
.terkep-lepes { flex: 1 1 0; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 5px 3px 6px; border-radius: var(--r); text-decoration: none; color: inherit; transition: background 0.15s; }
.terkep-lepes:hover { background: var(--bg-card-hover); }
.terkep-kor { width: 25px; height: 25px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-sunken); border: 1.5px solid var(--border-strong); font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600; color: var(--text-dim); }
.terkep-kor .i { width: 13px; height: 13px; vertical-align: 0; }
.terkep-nev { font-size: var(--t-0); line-height: 1.2; text-align: center; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.terkep-lepes.kesz .terkep-kor { background: var(--accent); border-color: var(--accent-line); color: var(--accent-text); }
.terkep-lepes.kesz .terkep-nev { color: var(--text-muted); }
.terkep-lepes.elkezdve .terkep-kor { border-color: var(--accent-line); color: var(--accent-ink); }
.terkep-lepes.elavult .terkep-kor { border-color: var(--warn-border); color: var(--warn-text); }
.terkep-lepes.nincseszkoz { opacity: 0.55; }
.terkep-lepes.itt { background: var(--accent-soft); }
.terkep-lepes.itt .terkep-nev { color: var(--text); font-weight: 700; }
.terkep-lepes.itt .terkep-kor { border-color: var(--accent-line); color: var(--text); }

.folyamat { display: flex; align-items: flex-start; margin-bottom: var(--s6); padding: 20px 8px 4px; background: var(--bg-card); border: 1px solid transparent; border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1); overflow-x: auto; }
.fl-lepes { flex: 1 1 0; min-width: 96px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; text-decoration: none; color: inherit; padding: 0 4px 10px; }
.fl-lepes::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border-strong); z-index: 0; }
.fl-lepes:first-child::before { display: none; }
.fl-lepes.kesz::before, .fl-lepes.elkezdve::before { background: var(--accent-line); }
.fl-kor { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-sunken); border: 2px solid var(--border-strong); font-family: var(--font-gep); font-size: var(--t-1); font-weight: 600; color: var(--text-dim); }
.fl-lepes.kesz .fl-kor { background: var(--accent); border-color: var(--accent-line); color: var(--accent-text); }
.fl-lepes.elkezdve .fl-kor { border-color: var(--accent-line); border-style: dashed; color: var(--text); }
.fl-lepes.elavult .fl-kor { border-color: var(--warn-border); color: var(--warn-text); }
.fl-lepes.itt .fl-kor { box-shadow: 0 0 0 4px var(--accent-soft); color: var(--text); }
.fl-lepes.itt.kesz .fl-kor { color: var(--accent-text); }
.fl-nev { font-size: var(--fs-meta); font-weight: 600; line-height: 1.25; }
.fl-lepes.var .fl-nev, .fl-lepes.nincseszkoz .fl-nev { color: var(--text-dim); font-weight: 600; }
.fl-lepes.itt .fl-nev { color: var(--text); font-weight: 700; }
.fl-allapot { font-size: var(--t-0); color: var(--text-muted); line-height: 1.3; }

/* ── Projekt-lista ── */
.proj-lista { display: grid; gap: var(--s3); max-width: 980px; }
/* 🔴 2026-08-07 — TELEFONON A SOR TÖRDEL. A tétel VÍZSZINTES sor: [kártya]
   [Kilépés][Törlés]. 375 px-en ehhez 495 px kellett, vagyis a lap 136 px-szel
   oldalra görgethető volt — pontosan ennyivel lógott túl ez a sor.
   🔑 Tördeléssel a gombok a kártya ALÁ csúsznak, és a 44 px-es tapintható
      méretük megmarad. Széles képernyőn semmi nem változik: ott elférnek. */
.proj-tetel { display: flex; align-items: stretch; gap: var(--s2); flex-wrap: wrap; }

/* ── AZ AKTUÁLIS PROJEKT A LISTÁN BELÜL (2026-08-05) ───────
   A külön „Most ebben dolgozol" doboz (`.proj-most`) megszűnt: ugyanaz a
   projekt állt benne, ami a listában is — két helyen ugyanaz. Most a lista
   sora kap jelölést, és a kilépés is oda költözött. */
.proj-tetel--most .proj-sor {
  border-color: var(--accent2-line);
  box-shadow: 0 0 0 1px var(--accent2-line), var(--shadow-1);
}
.proj-most-jel {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
  color: var(--accent2); background: var(--accent2-soft);
  border: 1px solid var(--accent2-line); border-radius: var(--r); padding: 3px 8px;
}
/* A `.proj-kilep` szabály 2026-08-07-én kikerült: a gombja törölve (lásd a
   `muhely/projektek.php` magyarázatát — a menü sosem szűkül, tehát nem volt
   miből kilépni). Osztály nélkül a szabály csak halott súly lett volna. */
.proj-sor {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: 18px 20px; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid transparent; border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1); transition: all 0.15s;
}
a.proj-sor:hover { background: var(--bg-card-hover); box-shadow: 0 0 0 1px var(--accent-edge), var(--shadow-2); }
/* 🔴 2026-08-06 — A KUKA MELLÉ ODAKERÜLT A „TÖRLÉS" SZÓ IS (a user: „Mi az
   hogy kilépés meg törlés? ez sem egyértelmű"), és ettől a régi, ikonra
   szabott méret elromlott: a gomb 46 px SZÉLES és 177 px MAGAS lett — a szó
   nem fért ki, a doboz meg a kártya teljes magasságára nyúlt.
   ➡️ A szélesség a tartalomhoz igazodik, a magasság a sor közepén marad. */
.proj-torlo { display: flex; align-items: center; }
.proj-torol-btn { width: auto; padding: 0 var(--s4); height: auto; min-height: 44px; flex: none; align-self: center; background: var(--bg-card); border-radius: var(--r-lg); color: var(--text-dim); }
.proj-torol-btn:hover { color: var(--warn-text); border-color: var(--warn-border); background: var(--warn-bg); }
.proj-cim { font-family: var(--font-fo); font-size: var(--t-4); font-weight: 700; letter-spacing: -0.02em; flex: 1 1 240px; }
.proj-meta { font-size: var(--t-1); color: var(--text-muted); white-space: nowrap; }
.proj-jelzo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-sunken); border-radius: var(--r); padding: 4px 9px; color: var(--text-muted); white-space: nowrap; }
.proj-jelzo.aktiv { background: var(--accent-soft); color: var(--accent-ink); }

/* ── Videótípus, AI-blokk, gépek ── */
.tipus-racs { display: grid; gap: var(--s2); margin-bottom: var(--s6); grid-template-columns: repeat(var(--racs), minmax(0,1fr)); }
.tipus { display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 14px 16px; background: var(--bg-card); border: 1px solid transparent; border-left: 3px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1); transition: all 0.15s; }
.tipus:hover { background: var(--bg-card-hover); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-2); }
.tipus input { position: absolute; opacity: 0; pointer-events: none; }
.tipus b { font-size: var(--fs-body); font-weight: 600; }
.tipus span { font-size: var(--fs-meta); color: var(--text-muted); }
.tipus small { font-size: var(--t-1); color: var(--text-dim); line-height: 1.45; }
.tipus.valasztott { background: var(--accent-soft); border-left-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-1); }
.tipus.valasztott b { color: var(--accent-ink); }

/* ══ VIDEÓTÍPUS-VÁLASZTÓ: 9:16-OS KÁRTYÁK VÍZSZINTES SÁVBAN ══
   2026-08-04, a user: „bővítés, és lehetne sliderben 9:16-os kártyákkal,
   valami látványos megoldással."
   Tizenöt fajta rácsban négy sort foglalna, és a „Forgatókönyv írása" gomb
   lecsúszna a képernyőről. Sávban egy sor marad, és a félbevágott következő
   kártya elárulja, hogy van még — nem kell külön felirat, hogy „húzd el". */
/* ── NÉGY FAJTA ELÖL, A TÖBBI LENYÍLÓBAN (2026-08-05) ──────
   A görgethető sáv helyét rács vette át: tizenöt ismeretlen közül választani
   nem döntés, hanem keresés. A kártya továbbra is ÁLLÓ, mint a videó, amit
   készítesz vele — csak most egymás mellett állnak, nem elhúzva. */
.tipus-racs {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--s4);
}
/* 🔴 2026-08-05: itt `aspect-ratio: 9/16` állt, és ettől MINDEN kártya 340 px
   magas lett — miközben a szöveg 158–178 px-nél véget ért. Mérve: 162–182 px
   üres hely kártyánként, vagyis a doboz FELE. Ugyanaz a hiba, mint a Hook-tár
   kártyáinál volt.
   🔑 Az álló forma megmarad (a rácsban a kártyák egyforma magasak, és a
      `min-height` tartja őket állónak), de a magasságot a TARTALOM adja, nem
      egy arányszám. */
.tipus-kartya {
  min-height: 210px;
  position: relative; overflow: hidden;
  justify-content: flex-start;
  border-left-width: 1px;
  padding: 16px 15px;
}
/* A lenyíló: zárva egy sor, nyitva ugyanaz a rács. Saját osztály — a
   `.segeddoboz` átvétele mellékhatást hozna (2026-08-05 tanulsága). */
/* ══ A FAJTAVÁLASZTÓ LENYÍLÓ ÉS A LEÍRÁSA (2026-08-05, este) ══
   A user: „ez így nem jó, oldjuk meg egyszerű lenyílóban és egyben."
   A négy kártya + „További fajták" doboz helyére egyetlen `<select>` került,
   alatta a választott fajta menete és ritmusa. Az alábbi `.tipus-*`
   kártya-szabályok innentől HOLTAK — nem törlöm őket, mert a Kutatás és a
   Karakter-építő is használ `.tipus` osztályt; a `-racs`, `-kartya`, `-tobb`
   viszont már sehol nem keletkezik. */
.tipus-valaszto { max-width: 640px; margin-bottom: var(--s3); }
.tipus-valaszto select { cursor: pointer; }

.tipus-leiras {
  margin: 0 0 var(--s6);
  padding: 12px 16px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--r);
  max-width: 640px;
}
.tipus-leiras[hidden] { display: none; }
.tipus-leiras p { margin: 0; }
/* A MENET a fontos — ez megy szó szerint az AI utasításába. A ritmus alatta,
   halkabban: az a hangulat, nem a szerkezet. */
.tipus-leiras .tl-menet {
  font-size: var(--fs-body); font-weight: 600; color: var(--accent-ink); line-height: 1.5;
}
.tipus-leiras .tl-ritmus {
  margin-top: 5px; font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.5;
}

.tipus-tobb { margin-bottom: var(--s6); }
.tipus-tobb > summary {
  cursor: pointer; list-style: none; position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 12px 40px 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
}
.tipus-tobb > summary::-webkit-details-marker { display: none; }
.tipus-tobb > summary::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg); transition: transform .18s ease;
}
.tipus-tobb[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.tipus-tobb > summary:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
.tipus-tobb > summary b { font-size: var(--t-2); font-weight: 600; }
.tipus-tobb > summary small { font-size: var(--t-1); color: var(--text-muted); }
.tipus-tobb[open] > summary { margin-bottom: var(--s3); }
.tipus-tobb-db {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-edge); border-radius: var(--r); padding: 1px 7px;
}
/* 🔴 A HALVÁNYÍTÓ MASZK LEKERÜLT (2026-08-05, a user: „a kártyák szövege nem
   olvasható végig").
   Egy elhalványuló szövegvég azt ígéri, hogy van még — itt viszont NINCS: a
   leírás elfér. Mérve egy 338 px-es kártyán: a szöveg 70 px, alatta 180 px
   ÜRES HELY maradt. A maszk tehát olvashatatlanná tett valamit, ami hiánytalanul
   kifért. 🔑 Ha egyszer mégis hosszabb lesz egy leírás, a kártya belül
   görgethető — az őszintébb, mint egy elmosott mondatvég. */
.tipus-kartya small { overflow-y: auto; }
.tipus-kartya .tk-mit { font-weight: 600; color: var(--text); }
.tipus-kartya:hover { transform: translateY(-2px); }
.tipus-kartya.valasztott { border-left-width: 1px; }
/* A választást PIPA is jelzi, nem csak a szín — színtévesztéssel is látszik. */
.tk-pipa {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text);
}
.tk-pipa .i { width: 13px; height: 13px; vertical-align: 0; }
.tipus-kartya.valasztott .tk-pipa { display: inline-flex; }

/* A sáv nyilai (`.tipus-nyil`) és a görgetés-szabályai kikerültek: nincs mit
   görgetni, a fajták rácsban állnak (2026-08-05). */
@media (prefers-reduced-motion: reduce) {
  .tipus-kartya:hover { transform: none; }
}

.ai-blokk { margin: var(--s5) 0; padding: 18px; background: var(--bg-card); border: 1px solid var(--accent-edge); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
.ai-fej { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.ai-fej b { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-h3); font-weight: 700; }
.ai-fej b .i { width: 18px; height: 18px; color: var(--accent-ink); vertical-align: 0; }
.ai-fej span { font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.5; }
.ai-btn { font-weight: 700; }
.ai-jelzes { margin-top: 10px; font-size: var(--t-1); color: var(--text-muted); line-height: 1.5; }
.ai-jelzes.fut, .ai-jelzes.ok { color: var(--text); font-weight: 600; }
.ai-jelzes.hiba { color: var(--warn-text); font-weight: 600; }
/* 🔴 2026-08-04: itt `max-width: 680px` állt. A projekt-lap fő hasábja 1920-on
   1068 px — a kártya 680-nál megállt, és mellette 388 px maradt üresen. A user:
   „teljes szélességre". Ugyanaz a hiba, mint a `max-width: 1080px`-nél augusztus
   2-án; lásd `feedback_full_width.md`. A hasáb már úgyis korlátozza a sort. */
.ai-kartya, .ai-jelenet { margin-top: var(--s2); padding: 13px 15px; background: var(--bg-sunken); border-radius: var(--r); }
.ai-jelenet { border-left: 3px solid var(--accent-line); }
.ai-szam { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-text); font-family: var(--font-gep); font-size: var(--t-0); font-weight: 700; }
.ai-teljes { max-width: 680px; margin-top: 6px; min-height: 120px; resize: vertical; line-height: 1.6; }

/* ══ SZERKESZTHETŐ FORGATÓKÖNYV-SZÖVEG (2026-08-05) ══
   A user: „ha nem akarom újra megírni, akkor meg egyszerűen törlöm a
   projektet? mert javítás lehetőség nincs."
   🔑 LÁTSZÓDJON, HOGY ÁTÍRHATÓ, de ne nézzen ki űrlapmezőnek: a szaggatott
      aláhúzás pont annyit mond, hogy „ehhez hozzá lehet nyúlni" — ugyanaz a
      jelzés, amit a projekt címe is használ.
   🔑 A KATTINTÁSI FELÜLET a szöveg saját dobozáig ér, nem szűkül a betűkre:
      egy vékony sorra célozni bosszantó. */
/* 🔑 A jelenet KAMERAMOZGÁSA (2026-08-06) ugyanaz a formanyelv, mint a
   képleírásé: monospace, halkabb szín, szaggatott aláhúzás ha átírható.
   Saját osztály, nem az `.ai-kep` átvétele — a kettő MÁS adat, és egy nap
   könnyen elválhat egymástól. */
.ai-szoveg.szerk, .ai-kep.szerk, .ai-kamera.szerk {
  border-bottom: 1px dashed var(--border-strong);
  border-radius: 3px; padding: 3px 4px; margin-left: -4px;
  cursor: text; transition: background 0.14s, border-color 0.14s;
  min-height: 1.6em;
}
.ai-szoveg.szerk:hover, .ai-kep.szerk:hover, .ai-kamera.szerk:hover {
  background: var(--bg-card-hover); border-bottom-color: var(--accent-line);
}
.ai-szoveg.szerk:focus, .ai-kep.szerk:focus, .ai-kamera.szerk:focus {
  outline: none; background: var(--bg-card-hover);
  border-bottom-color: var(--accent-line);
  box-shadow: 0 1px 0 0 var(--accent-line);
}
@media (prefers-reduced-motion: reduce) {
  /* 🔑 A jelenet KAMERAMOZGÁSA (2026-08-06) ugyanaz a formanyelv, mint a
   képleírásé: monospace, halkabb szín, szaggatott aláhúzás ha átírható.
   Saját osztály, nem az `.ai-kep` átvétele — a kettő MÁS adat, és egy nap
   könnyen elválhat egymástól. */
.ai-szoveg.szerk, .ai-kep.szerk, .ai-kamera.szerk { transition: none; }
}

/* A „régi változat" figyelmeztetés: magyarázat ÉS a hozzá tartozó gomb.
   🔑 A gomb a szöveg ALATT áll, nem mellette: egy hosszú mondat után a szem
      lefelé keres tovább, és szűk képernyőn egymás mellett úgysem férnének el. */
.elavult-doboz { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.elavult-doboz .i { vertical-align: -2px; }

/* ══════════════════════════════════════════════════════════
   VÁLTOZÁSNAPLÓ (2026-08-04, a user kérése)
   ------------------------------------------------------------
   Egy bejegyzés = egy verzió: fejléc (verzió + dátum), cím, alatta a tételek
   címkével. Ugyanaz a szerkezet, mint a Slepnex verziónaplójában — ott vált be.

   🔑 A BAL SZÉLI VONAL FŰZI ÖSSZE a bejegyzéseket: ettől lesz idővonal, nem
      doboz-sor. A verzió-buborék rajta ül, mint egy jelölő a szalagon.
   ══════════════════════════════════════════════════════════ */
.vn-lista { display: flex; flex-direction: column; gap: var(--s4); max-width: none; } /* 2026-11-11: teljes szélesség (a user) */
.vn-tetel {
  position: relative; padding: 16px 18px 16px 22px;
  background: var(--bg-card); border-radius: var(--r-lg);
  border-left: 3px solid var(--accent-line);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
}
/* A rejtett (még nem élesített) bejegyzés halványabb, és szaggatott a vonala —
   ránézésre elkülönül attól, amit a felhasználók már látnak. */
.vn-tetel.vn-rejtett { opacity: 0.72; border-left-style: dashed; }
.vn-fej { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-bottom: 6px; }
.vn-verzio {
  font-family: var(--font-gep); font-size: var(--t-1); font-weight: 700;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 3px 9px; border-radius: var(--r);
}
.vn-fej time { font-size: var(--fs-meta); color: var(--text-dim); }
.vn-cim { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 10px; line-height: 1.35; }
.vn-sorok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* 🔑 A CÍMKE ÉS A SZÖVEG EGY SORBAN INDUL, de a szöveg tördelhet — a címke
   nem zsugorodhat, különben egy hosszú mondat mellett betűnként törne. */
.vn-sor { display: flex; align-items: flex-start; gap: var(--s2); }
.vn-szoveg { font-size: var(--fs-body); line-height: 1.55; color: var(--text); min-width: 0; }
.vn-cimke {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r);
  font-size: var(--t-0); font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.vn-cimke .i { width: 12px; height: 12px; vertical-align: 0; }
/* A négy fajta színe. A SZÖVEG IS OTT VAN mindegyiken — a szín csak
   ráerősít, nem ő hordozza az információt (színtévesztés). */
.vn-uj      { background: var(--accent-soft); color: var(--accent-ink); }
.vn-javitas { background: rgba(120,180,220,0.16); color: var(--text); }
.vn-jobb    { background: rgba(var(--m-magenta-rgb),0.14); color: var(--accent2); }
.vn-megj    { background: var(--bg-sunken); color: var(--text-dim); }
.vn-muveletek { display: flex; align-items: center; gap: var(--s2); margin-top: 12px; }
@media (max-width: 520px) {
  .vn-sor { flex-direction: column; gap: 4px; }
}

/* ══ A NYITÓMONDAT-VÁLASZTÓ a Forgatókönyv lapon (2026-08-04) ══
   A user: „Hook legyen szerintem ugyanúgy a projekt.php…faz=script oldalon.
   így van értelme." A külön lapról ugyanis nem vezetett út vissza, és a
   választott mondatot kézzel kellett volna átmásolni.
   🔑 A 120 minta ÖSSZECSUKVA indul, ha már van mentett nyitómondatod — a
      lista segédeszköz, nem a lap főszereplője. Ha még nincs, nyitva van,
      hogy egyáltalán észrevedd. */
.hookvalaszto { margin-bottom: 22px; }
/* 🔴 2026-08-04, a user: „lenyíló ok, de a cím nem. Látszódjon, hogy ez egy
   lenyíló, teljes szélességben kérem."
   Eddig `inline-flex` volt, tehát csak a szöveg szélességéig ért, és nem volt
   rajta semmi jel, ami elárulta volna, hogy ki lehet nyitni. Most végigér a
   hasábon, és jobbra ott a nyíl — ugyanaz a formanyelv, mint a Kutatás
   kérdés-kártyáinál. */
.hookvalaszto > summary {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  min-height: 48px; padding: 10px 42px 10px 14px; cursor: pointer; list-style: none;
  position: relative;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  font-size: var(--fs-body); font-weight: 600; color: var(--text);
}
.hookvalaszto > summary::-webkit-details-marker { display: none; }
.hookvalaszto > summary::marker { content: ""; }
.hookvalaszto > summary:hover { border-color: var(--accent-line); background: var(--bg-card-hover); }
.hookvalaszto > summary .i { width: 16px; height: 16px; vertical-align: 0; color: var(--accent-ink); flex: none; }
/* A nyíl: tiszta CSS, nem betűjel — a betűjelet minden gép máshogy rajzolja. */
.hookvalaszto > summary::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform 0.18s;
}
.hookvalaszto[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.hookvalaszto[open] > summary { border-color: var(--accent-line); }
@media (prefers-reduced-motion: reduce) {
  .hookvalaszto > summary::after { transition: none; }
}
.hookv-test { padding-top: 14px; }
/* 🔴 MAGASSÁG-KORLÁT: 120 mondat egy lapon több ezer pixel. Görgethető
   dobozban a választó a lap része marad, nem nyomja le a forgatókönyv-gombot.
   🔑 A RÁCS-STÍLUS ITT VAN, ÉS NEM AZ `.opts` OSZTÁLYTÓL jön: a
      `wlai_szakasz_eszkozok()` `.opts` rácsot keres, és 4+ elemnél a befoglaló
      szakaszt összecsukhatóvá teszi. A 120 sablontól az egész Forgatókönyv
      lépés lenyílóba került. Saját néven ugyanaz a kinézet, mellékhatás nélkül. */
.hookv-lista {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(var(--racs), minmax(0, 1fr));
  max-height: 340px; overflow-y: auto;
  padding: 2px; border-radius: var(--r);
}

/* ── ÖSSZECSUKHATÓ AI-KÁRTYA (a Kutatás kérdései) ──
   2026-08-04, a user: „boxokat tedd accordionba". Tíz kérdés kinyitva 4103 px
   magas lapot adott 1920-on — a válasz-mezők a nyolcadik képernyőn kezdődtek.
   Csukva tíz sor: egyben látszik, mire kell válaszolni.
   🔑 A csukott kártya is KATTINTHATÓ FELÜLET, ezért kap `hover`-t: enélkül nem
      látszik, hogy ki lehet nyitni. Tapintásra 44 px a minimális magasság. */
.ai-nyilo > summary {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  min-height: 44px; padding-right: 26px; position: relative;
  cursor: pointer; list-style: none;
  border-radius: var(--r);
}
/* A böngésző saját háromszögét mindkét motorban le kell venni. */
.ai-nyilo > summary::-webkit-details-marker { display: none; }
.ai-nyilo > summary::marker { content: ""; }
.ai-nyilo:hover { background: var(--bg-card-hover); }
/* A nyíl: tiszta CSS, nem betűjel — a betűjelet a rendszer-betűkészlet
   máshogy rajzolja minden gépen, és félrecsúszik a sor alapvonalától. */
.ai-nyilo > summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform 0.18s;
}
.ai-nyilo[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ai-nyilo[open] > summary { margin-bottom: 8px; }
/* A kinyitott szöveg a SZÁM alá igazodik, nem a kártya széléhez — így látszik,
   hogy ehhez a kérdéshez tartozik. */
.ai-nyilo > p { margin-left: 30px; }
.ai-nyilo:focus-within { box-shadow: 0 0 0 2px var(--accent-line); }
@media (prefers-reduced-motion: reduce) {
  .ai-nyilo > summary::after { transition: none; }
}

.gepek { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border); }
.gep-racs { display: grid; gap: var(--s2); grid-template-columns: repeat(var(--racs), minmax(0,1fr)); }
.gep { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; background: var(--bg-card); border: 1px solid transparent; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1); }
.gep b { font-size: var(--fs-body); font-weight: 600; }
.gep span { font-size: var(--fs-meta); color: var(--text); }
.gep small { font-size: var(--t-1); color: var(--text-muted); line-height: 1.5; }
.gep em { font-style: normal; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border-strong); font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; }

/* ── Fiók-lap ── */
.fiok-jelzes { display: none; margin: 0 0 16px; padding: 11px 14px; border-radius: var(--r); font-size: var(--t-2); line-height: 1.5; }
.fiok-jelzes.ok { display: block; background: var(--accent-soft); color: var(--accent-ink); }
.fiok-jelzes.hiba { display: block; background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); }

/* ── Belépés / regisztráció ── */
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 56px 20px 64px; }
.auth-card { background: var(--bg-card); border: 1px solid transparent; border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-3); padding: 30px; display: flex; flex-direction: column; gap: var(--s4); }
.auth-title { font-family: var(--font-fo); font-size: var(--t-5); font-weight: 700; letter-spacing: -0.03em; }
.auth-sub { color: var(--text-muted); font-size: var(--t-2); line-height: 1.5; margin: -6px 0 4px; }
.auth-error { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); border-radius: var(--r); padding: 11px 13px; font-size: var(--t-2); line-height: 1.5; }
.auth-btn { font-size: var(--t-2); font-weight: 700; }
.auth-alt { text-align: center; font-size: var(--t-2); color: var(--text-muted); }
.auth-alt a { color: var(--accent-ink); text-decoration: underline; font-weight: 600; }

/* ── Fejléc-fiók (ha valahol még használt) ── */
.auth-status { display: inline-flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.auth-name { font-size: var(--fs-meta); color: var(--text-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.auth-logout { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--r); padding: 6px 10px; font-size: var(--fs-label); cursor: pointer; font-family: inherit; }

/* ============================================================
   14. KÖZÉPRE NYÍLÓ ABLAK — semmi nem csúszik be oldalról
   ============================================================ */
.modal-hatter {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: var(--s4);
  background: rgba(6,17,29,0.55); backdrop-filter: blur(3px);
}
.modal-hatter[hidden] { display: none; }
.modal {
  width: min(560px, 100%); max-height: calc(86vh / var(--z, 1)); display: flex; flex-direction: column;
  background: var(--bg-card); border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-3); overflow: hidden;
}
.modal-fej { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 15px 18px; border-bottom: 1px solid var(--border); }
.modal-fej b { font-family: var(--font-fo); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; }
.modal-x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r); background: transparent; color: var(--text-dim); cursor: pointer; }
.modal-x:hover { background: var(--bg-sunken); color: var(--text); }
.modal-torzs { padding: var(--s3); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.uj-tetel { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; padding: 12px 13px; border: 0; border-radius: var(--r-lg); background: transparent; color: var(--text); font-family: inherit; cursor: pointer; transition: background 0.12s; }
.uj-tetel:hover { background: var(--accent-soft); }
.uj-ikon { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--bg-sunken); color: var(--accent-ink); }
.uj-adat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uj-adat b { font-size: var(--fs-body); font-weight: 600; }
.uj-adat em { font-style: normal; font-size: var(--t-1); color: var(--text-dim); }

/* ── Kereső-ablak ── */
.modal-ker { width: min(560px, 100%); }
.ker-fej { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ker-fej > .i { width: 18px; height: 18px; vertical-align: 0; color: var(--text-dim); flex-shrink: 0; }
#ker-mezo { flex: 1 1 auto; min-width: 0; height: auto; border: 0; background: transparent; padding: 0; font-family: inherit; font-size: var(--fs-h3); color: var(--text); }
#ker-mezo:focus { outline: none; box-shadow: none; }
.ker-talalatok { padding: 6px; overflow-y: auto; max-height: min(420px, 60vh); }
.ker-tetel { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: var(--r-lg); text-decoration: none; color: var(--text); font-size: var(--fs-body); }
.ker-tetel:hover, .ker-elso { background: var(--accent-soft); }
.ker-ikon { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-sunken); border-radius: var(--r); color: var(--accent-ink); }
.ker-ikon .i { width: 16px; height: 16px; vertical-align: 0; }
.ker-nev { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ker-cs { flex-shrink: 0; font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.ker-nincs { padding: 18px 12px; text-align: center; color: var(--text-muted); font-size: var(--fs-meta); }

.nagy-keret { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--m-fekete-tiszta); }
.nagy-keret video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.nagy-mit { padding: 13px 18px; color: var(--text-muted); font-size: var(--fs-meta); line-height: 1.5; }

/* ============================================================
   15. A BEÚSZÓ MOZGÁS KIKERÜLT (2026-08-05, a user kérése)
   ------------------------------------------------------------
   Volt itt egy `wlai-be` animáció: a lapcím és a Műhely két nagy
   doboza 10 px-ről csúszott a helyére minden betöltéskor.
   A user: „minden betöltésnél fentről lecsúszik, ez effekt lehet,
   vegyük ki." Egy munkafelületen, ahol naponta százszor váltasz
   lapot, a fél másodperces beúszás nem élmény, hanem várakozás.
   🔑 A tartalom eddig sem az áttetszőségtől függött (csak a helyzet
      mozgott), így az eltávolítás semmit nem rejt el — az elemek
      egyszerűen ott vannak, ahol lenniük kell.
   ============================================================ */

/* ============================================================
   16. RESZPONZÍV — 2560 · 1920 · 1280 · 1024 · 768 · 375
   ============================================================ */

/* ── 1900+ : tágasabb kimenet, több szakasz-hasáb ── */
@media (min-width: 1900px) {
  .tool-layout { grid-template-columns: minmax(0,1fr) 440px; gap: var(--s7); }
  /* CSAK a fő kimenet nő meg. A `.hu-out` és a kedvencek doboza NEM — mérve:
     enélkül a magyar jelentés doboza 1920 px-en 280 px magas üres folt lett. */
  .out:not(.hu-out):not(.kedv-doboz) textarea { min-height: 280px; }
}
@media (min-width: 2400px) {
  /* A `--lap-max` itt is `none` marad (lásd a tokeneknél): a lap a képernyő
     teljes szélességét használja, a szöveg-sorokat a saját `62ch` korlátjuk
     tartja olvashatóként. */
  .tool-layout { grid-template-columns: minmax(0,1fr) 500px; }
}

/* ── 1024–1279 : a bal sáv IKON-módba vált, helyben szélesedik ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --sav-w: 64px; }
  .oldalsav { padding: 0 6px; }
  /* Ikon-módban csak a lime pont marad a logóból — a `weblockai` és a `com`
     nem fér el 64 px-en. (A `.brand-ai` a régi, három részes logóé.) */
  .oldalsav .brand-fo, .oldalsav .brand-ai, .oldalsav .brand-com,
  .oldalsav .pv-cim, .oldalsav .pv-nyil,
  .oldalsav .szak-nev, .oldalsav .szak-all, .oldalsav .szak-nyil,
  .oldalsav .lep-nev, .oldalsav .lep-all { display: none; }
  .oldalsav .sav-brand { justify-content: center; padding: 14px 0; }
    /* Ikon-módban az „ai" a márkajel — magentában, mint a teljes logóban. */
  .oldalsav .sav-brand::after { content: "ai"; font-family: var(--font-fo); font-weight: 700; color: var(--accent2); }
  .pv-gomb, .pv-nincs, .szak-fej, .sav-lepes, .sav-pont { justify-content: center; }
  .sav-lepes { padding-left: 10px; }
  .sav-lepes .lep-ikon { position: static; }
  .oldalsav.lenyilva { width: 244px; box-shadow: var(--shadow-3); }
  .oldalsav.lenyilva .pv-cim, .oldalsav.lenyilva .pv-nyil { display: block; }
  .oldalsav.lenyilva .pv-gomb { justify-content: flex-start; }
}

/* ── ≤1279 : egy hasáb a szakaszokból, ha nem fér el kettő ── */
@media (max-width: 1279px) {
  .sec-grid { columns: 1; }
}

/* ── ≤1250 : a szakasz-sáv 5-ről 3-ra ── */
@media (max-width: 1250px) {
  .szakaszok { grid-template-columns: repeat(3,1fr); }
  .szak-mit { display: none; }
}

/* ── ≤1100 : a kimenet a tartalom FÖLÉ kerül ── */
@media (max-width: 1100px) {
  /* 🔴🔑 `minmax(0, 1fr)`, NEM sima `1fr`! A grid-elem alapból `min-width: auto`,
     vagyis a TARTALOM minimumára feszül — és ettől a Storyboard Stúdió 375 px-en
     756 px szélesre nőtt, a lap oldalra csúszott. (Mérve 2026-08-03; ugyanez a
     hiba volt a meghívó-lapon is.) */
  .tool-layout { grid-template-columns: minmax(0, 1fr); }
  .tool-layout > * { min-width: 0; }
  .out, .out-col { order: -1; position: static; }
  /* Itt a kimenet a tartalom FÖLÖTT áll, ezért alacsonyabb a felső határ —
     különben a választók lecsúsznának a képernyőről. A „Tovább" itt is nyit. */
  .out { --out-cap: 42vh; }
  .out textarea { min-height: 120px; }
  .out-note { display: none; }
}

/* ── ≤1023 (tablet) : a bal sáv eltűnik, a fejlécben hamburger.
      A menü a fejléc ALATT nyílik LE — semmi nem csúszik be oldalról. ── */
@media (max-width: 1023px) {
  :root { --sav-w: 0px; }
  .app-torzs { padding-left: 0; }
  .menu-btn { display: inline-flex; }
  .oldalsav {
    position: relative; width: 100%; height: auto;
    border-right: 0; border-bottom: 0;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.18s ease;
  }
  .oldalsav.nyitva { max-height: 78vh; opacity: 1; overflow-y: auto; border-bottom: 1px solid var(--hej-vonal); }
  .sav-folyamat { flex: 0 0 auto; min-height: auto; overflow: visible; }
  .bar-cim { display: none; }
  .tags.szuro .tag { min-height: var(--gomb-mag); padding: 10px 14px; font-size: var(--gomb-betu-meret); }
}

/* ── ≤900 ── */
@media (max-width: 900px) {
  .szakaszok { grid-template-columns: repeat(2,1fr); }
  .dont { grid-template-columns: minmax(0,1fr); gap: var(--s3); margin-bottom: var(--s6); }
  .bar-kereso .ker-szo, .bar-kereso .ker-kbd { display: none; }
  .bar-proj .pv-gomb { max-width: 190px; }
}

/* ── ≤768 (tablet álló / nagy telefon) ── */
@media (max-width: 768px) {
  .page { padding-top: var(--s5); }
  .auth-name { display: none; }
  .sec { margin-bottom: var(--s6); }
}

/* ── ≤620 (telefon) ── */
@media (max-width: 620px) {
  :root { --jsav-w: 0px; }
  .app-torzs { padding-right: 0; }
  .jobbsav {
    position: static; width: auto; flex-direction: row; justify-content: flex-end;
    border-left: 0; border-bottom: 1px solid var(--hej-vonal); padding: 8px 10px;
  }
  .rb-koz { display: none; }
  .rb-fiok .fiok-lista { right: 0; bottom: auto; top: calc(100% + 8px); }
  .site-bar { position: static; padding: 8px var(--oldal-margo); }
  .out, .out-col { top: 8px; }
  .szakaszok { grid-template-columns: 1fr; gap: 6px; }
  .szak { flex-direction: row; align-items: baseline; gap: 10px; padding: 10px 13px; }
  .dont-fo, .dont-uj { padding: var(--s4); }
  .dont-gomb { width: 100%; }
  .dont-halad { max-width: none; }
  /* Telefonon a legdrágább a függőleges hely: szorosabb fej-térköz és
     valamivel kisebb bevezető — a szöveg megmarad, csak kevesebb sor. */
  .page { padding-top: var(--s4); }
  .page:has(> .pbar) > .pbar,
  .page:has(> .pbar) > .lepteto--fent,
  .page:has(> .pbar) > .tool-bar { margin-bottom: var(--s3); }
  .head { margin-bottom: var(--s4); }
  .head p { font-size: var(--t-2); line-height: 1.55; }
  /* A LAP ALJI léptető egymás alá kerül; a felső, tömör példány marad
     egy sorban — ott pont az a lényeg, hogy ne vigyen el helyet. */
  .lepteto:not(.lepteto--fent) { flex-direction: column; align-items: stretch; }
  .lept-btn.fo { margin-left: 0; }
}

/* ── ≤420 (375-ös telefon) : egy hasáb kártya, semmi ne lógjon ki ── */
@media (max-width: 420px) {
  .head h1 { letter-spacing: -0.02em; }
  .tool-bar { gap: 6px; }
  .tool-bar .tool-btn { flex: 1 1 auto; }
}

/* ── Nyomtatás: a héj nem kell ── */
@media print {
  .oldalsav, .jobbsav, .site-bar, .tool-bar, .lepteto { display: none !important; }
  .app-torzs { padding: 0; }
  body::before { display: none; }
}

/* ============================================================
   KEDVENCEIM — a jobb sáv szív-gombja és a hozzá tartozó lista
   ------------------------------------------------------------
   A kedvenc nem a filmkészítés egy lépése, hanem a saját gyűjtemény,
   ami bármelyik lapról kell — ezért a jobb sávban a helye, a `+` alatt.
   A panel a <body> végén ül (`data-kivul`), így a lap saját színeit
   használja; a jobb sáv sötét palettája nem telepszik rá.
   ============================================================ */
.rb-kedv { position: relative; flex-shrink: 0; }
.rb-sziv[aria-expanded="true"] .i { fill: currentColor; }
.kedv-szam {
  position: absolute; top: 3px; right: 3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 3px; background: var(--accent); color: var(--accent-text, var(--m-tinta));
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--t-0); font-weight: 700; line-height: 15px; text-align: center;
}
.kedv-szam[hidden] { display: none; }

.kedv-panel {
  position: fixed; z-index: 300;
  right: calc(var(--jsav-w, 56px) + 10px); top: 66px;
  width: min(340px, calc(100vw - 90px)); max-height: min(560px, calc(78vh / var(--z, 1)));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 24px 60px rgba(4, 16, 31, 0.35);
}
.kedv-panel[hidden] { display: none; }
.kedv-panel-fej {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.kedv-panel-fej b { font-size: var(--t-2); font-weight: 700; }
.kedv-panel-torzs { overflow-y: auto; padding: 6px; }
.kedv-panel-ures { padding: 14px; color: var(--text-dim); font-size: var(--t-1); line-height: 1.55; }

.kedv-csop + .kedv-csop { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.kedv-csop-fej {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 4px;
  font-size: var(--t-0); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-dim);
}
.kedv-tetel {
  display: block; padding: 8px 9px; border-radius: 4px;
  color: var(--text); text-decoration: none;
}
.kedv-tetel:hover { background: var(--bg-card-hover); }
.kedv-tetel b { display: block; font-size: var(--t-2); font-weight: 600; }
.kedv-tetel em, .kedv-tetel i {
  display: block; font-style: normal; font-size: var(--t-1); line-height: 1.4;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kedv-tetel i { margin-top: 2px; font-size: var(--t-0); color: var(--text-dim); }

/* Keskeny nézetben nincs jobb sáv — ilyenkor a panel a lap tetején fekszik. */
@media (max-width: 1023px) {
  .kedv-panel { right: 10px; left: 10px; top: 62px; width: auto; }
}

/* ============================================================
   ÁTEMELVE a régi `stilus.css`-ből — ezeket az osztályokat a lapok
   használják (AI-kártyák a projekt-lapon, projektválasztó, videó-
   nagyító, profil-sorok, élő-pötty), de az új rendszerbe még nem
   kerültek át. Enélkül ezek az elemek stílus nélkül maradnának.
   ============================================================ */
.top-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  /* 2026-08-05: 34 → 44 px magas érintés-célpont. A látvány alig változik,
     mert a keret átlátszó — csak a megfogható terület nő. */
  min-height: 44px; padding: 7px 11px; border-radius: var(--gomb-sarok);
  font-family: inherit; font-size: var(--gomb-betu-meret); font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: all 0.15s;
}
.top-link .i { width: 14px; height: 14px; vertical-align: 0; }
.top-link:hover { color: var(--text); background: var(--bg-card); }
.top-link.active {
  color: var(--text); background: var(--accent-soft);
  border-color: var(--accent-edge); font-weight: 600;
}
.theme-toggle {
  flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--accent-line);
  color: var(--text); padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--r); cursor: pointer; transition: all 0.2s;
}
.theme-toggle:hover { background: var(--bg-card-hover); }
/* A bal sáv (kivezetett) fiók-blokkjának sora — SZŰKÍTVE a sávra, mert a
   profil-lapon ugyanez az osztálynév a mező+gomb párost jelenti, és a lenti
   `flex-direction: column` ráült: a „Mentés" gomb a mező ALÁ esett, teljes
   szélességben. Élesben mérve, 2026-08-02. */
.oldalsav .fiok-sor { display: flex; gap: 4px; padding: 2px 3px 4px; }
.oldalsav .fiok-sor .lang-toggle, .oldalsav .fiok-sor .theme-toggle { flex: 1 1 0; justify-content: center; text-align: center; }
.elo-pont {
  flex: none; width: 7px; height: 7px; border-radius: 2px;
  background: var(--text-dim); transition: background 0.15s, box-shadow 0.15s;
}
.fiok-elo[aria-pressed="true"] .elo-pont {
  background: var(--accent-line); box-shadow: 0 0 6px var(--accent);
  animation: elo-lukt 1.4s ease infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.fiok-elo[aria-pressed="true"] .elo-pont { animation: none; }
}
.fiok-jel {
  flex-shrink: 0; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--r);          /* szögletes — 4 px, sose kör */
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); font-weight: 600;
}
.dont-elso .dont-cim { font-size: clamp(23px, 2.4vw, 30px); }
/* A lépés állapota a címe mellett — a formáját a .badge adja (lásd fent). */


/* ===== Fiók-lap: adat-szerkesztés ===== */
.fiok-sor { display: flex; gap: 8px; align-items: stretch; }
.fiok-sor input { flex: 1; min-width: 0; }
.fiok-sor .tool-btn { flex: none; white-space: nowrap; }
.ai-kartya-fej { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.ai-kartya-fej b { font-size: var(--fs-body); font-weight: 600; }
.ai-kartya-fej em {
  font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0);
  color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 6px; margin-left: auto;
}
.ai-szoveg {
  margin-top: 8px; font-size: var(--t-3); line-height: 1.6; color: var(--text);
}
.ai-kep {
  margin-top: 8px; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-1); line-height: 1.55; color: var(--text-dim);
}
.ai-kep .i { width: 14px; height: 14px; }
.ai-kamera {
  margin-top: 6px; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-1); line-height: 1.55; color: var(--accent-ink);
}
.ai-kamera .i { width: 14px; height: 14px; }
.ai-kartya-cim {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-top: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.ai-kartya-cim b { font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-h2); font-weight: 700; }
.ai-kartya-cim em {
  font-style: normal; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-0); color: var(--text-dim);
}
.oldalsav .fiok-sor { flex-direction: column; }
.oldalsav.lenyilva .fiok-sor { flex-direction: row; }
.rb-elo .elo-pont {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--m-szurke-kozep); transition: background 0.15s, box-shadow 0.15s;
}
.rb-elo[aria-pressed="true"] .elo-pont {
  background: var(--accent, var(--m-lime)); box-shadow: 0 0 6px var(--m-lime);
  animation: elo-lukt 1.4s ease infinite alternate;
}
.bar-nyil { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--text-dim); }
.bar-nyil .i { width: 14px; height: 14px; vertical-align: 0; }
@media (max-width: 900px) {
.bar-cim, .bar-nyil { display: none; }
}
.pv-fejlec {
  padding: 8px 10px 6px; font-size: var(--t-0); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}
.pv-ez { color: var(--accent-ink); font-weight: 600; }
.pv-jel { margin-left: auto; display: inline-flex; color: var(--accent-ink); }
.pv-jel .i { width: 13px; height: 13px; }
.uj-sor { margin: 0; }
/* ── Nagyított előnézet: ugyanaz a középre nyíló ablak, csak szélesebb ── */
.modal-video { width: min(900px, 100%); max-height: calc(92vh / var(--z, 1)); }
.modal-video .modal-fej b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ⛔ HOLT SZABÁLY 2026-08-05 óta: az alsó léptető megszűnt, ezt az osztályt
   már egyetlen lap sem írja ki. Azért marad, hogy egy gyorsítótárból betöltött
   régi lap se essen szét. Új helyen NE használd. */
.lepteto-lab {
  max-width: var(--lap-max); margin-inline: auto;
  padding: 0 var(--oldal-margo) var(--s7);
}
.lepteto-lab .lepteto { margin-top: var(--s5); }
/* A gombokon a „Előző:" / „Tovább:" szócska és a lépés neve közé kell egy kis hely. */
.lept-btn .lept-mit { margin-right: 5px; opacity: 0.72; font-weight: 600; }
.lept-btn.fo .lept-mit { opacity: 0.8; }

/* A léptető gombjai NEM zsugorodhatnak: a projekt-sáv mellett 28 px-re
   nyomódtak össze, vagyis olvashatatlanná váltak. Ha nem fér ki, inkább
   tördeljen a sor (a `.page` amúgy is `flex-wrap: wrap`).
   🔴 2026-08-05: a konténer `flex: 0 0 auto`-ja KIKERÜLT — most saját sort kap
   (`flex: 1 1 100%`, lásd fent). Ez a szabály a fájl VÉGÉN áll, tehát azonos
   specifikusságnál ez nyerne: ezért nem elég a fenti sort átírni, ezt is. */
.lepteto--fent .lept-btn { flex: 0 0 auto; white-space: nowrap; }

/* Egy döntés két útja egy sorban (szám VAGY korosztály). Külön mezőként a
   legördülő az input alatt lógott, és mellette üresen maradt a szomszéd
   oszlop — a user ezt kifogásolta. */
/* A szám kicsi, a korosztály-lenyíló kapja a maradékot: 1fr-nél a legördülő
   szövege levágódott („— a beírt évszá…"). */
.mezo-vagy { display: grid; grid-template-columns: 68px auto minmax(0, 1fr); align-items: center; gap: var(--s2); }
.mezo-vagy > input, .mezo-vagy > select { min-width: 0; }
.mezo-vagy-jel {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim);
  padding: 0 2px; white-space: nowrap;
}
@media (max-width: 479px) {
  .mezo-vagy { grid-template-columns: 1fr; }
  .mezo-vagy-jel { justify-self: start; }
}

/* ============================================================
   FEJLÉC-SZÍN — a Slepnex árajánlat-lenyílójának fekete gombja
   (`.qv3-starter-btn`: #151515 alap, #2d2d2d rátét, #000 lenyomva).
   Tokenként, hogy egy helyen lehessen állítani az egész felületen.
   ============================================================ */
:root { --fej-bg: var(--m-sotet-sav); --fej-bg-hover: var(--m-sotet-vonal); }
:root[data-theme="dark"] { --fej-bg: var(--m-fekete-mely); --fej-bg-hover: var(--m-navy-kartya); }

/* ============================================================
   MINTÁS VÁLASZTÓ — a legördülő helyett látod, mit választasz
   ------------------------------------------------------------
   A user kérése: „mutass mintákat". Ahol a választásnak van vizuális
   tartalma (szín), ott a szöveges lenyíló helyett minta-sor áll.
   A `<select>` megmarad rejtve, tehát a lapok JS-e változatlan.
   ============================================================ */
.minta-rejtve { display: none !important; }

/* ── SZÍNVÁLASZTÓ LENYÍLÓ ──
   A natív <option> nem színezhető megbízhatóan (Chrome csak nyitva, Safari
   sehol), ezért a select helyére saját lenyíló épül. Kívülről ugyanaz a
   36 px-es mező, mint bármelyik másik — csak van benne egy színfolt. */
.szinlenyilo { position: relative; }
.szinlenyilo-gomb {
  display: flex; align-items: center; gap: 9px; width: 100%;
  height: 36px; padding: 0 11px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--field-border); border-radius: var(--r-lg);
  font-family: inherit; font-size: var(--t-2); font-weight: 600; text-align: left;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.szinlenyilo-gomb:hover { border-color: var(--border-strong); }
.szinlenyilo.nyitva .szinlenyilo-gomb,
.szinlenyilo-gomb:focus-visible {
  border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.szinlenyilo-ertek { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szinlenyilo.ures .szinlenyilo-ertek { color: var(--text-dim); }
.szinlenyilo-nyil {
  flex: 0 0 auto; width: 7px; height: 7px; margin-right: 2px;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.18s;
}
.szinlenyilo.nyitva .szinlenyilo-nyil { transform: rotate(-135deg) translate(-3px, -3px); }

.szinlenyilo-lista {
  position: fixed; z-index: 400;
  max-height: 260px; overflow-y: auto; padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 14px 34px rgba(4, 16, 31, 0.18);
}
.szinlenyilo-lista[hidden] { display: none; }
.szinlenyilo-sor {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--text);
  font-family: inherit; font-size: var(--t-2); font-weight: 600; text-align: left;
  cursor: pointer;
}
.szinlenyilo-sor:hover { background: var(--bg-card-hover); }
.szinlenyilo-sor[aria-selected="true"] { background: var(--accent-soft); font-weight: 700; }
.szinlenyilo-nev { flex: 1 1 auto; min-width: 0; }

/* A színfolt mindkét helyen ugyanaz: a gombon és a lista soraiban. */
.minta-folt {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(var(--m-fekete-tiszta-rgb), 0.18);
}
.minta-folt.nincs-szin { display: none; }

/* A „szám VAGY korosztály" mező a beköltözött címkés dobozban: a két elem
   egy sorban, a „vagy" közöttük. A doboz saját kerete adja a keretet. */
.field .mezo-vagy { gap: var(--s2); }
.field .mezo-vagy-jel { font-size: var(--t-0); }

/* ============================================================
   MÁSODIK KIEMELŐ SZÍN — magenta #fb23c2
   ------------------------------------------------------------
   A user kérése (2026-08-01): „ezt a színt be tudod építeni? Lehet
   színátmenetes is ahol jónak látod. Így a Higgsfield, a Magnific és az
   OpenArt színeivel dolgozunk."

   A neon lime MARAD a fő kiemelő (kiválasztás, fő gomb) — a magenta a
   TERMÉK helyein jelenik meg: ott, ahol a rendszer ad valamit (a kész
   prompt doboza, a haladás). Így a két szín nem versenyez: a lime azt
   mondja, „ezt választottad", a magenta azt, „ezt kaptad".
   ============================================================ */
:root {
  --accent2:      var(--m-magenta);
  --accent2-soft: rgba(var(--m-magenta-rgb), 0.10);
  --accent2-line: var(--m-magenta-mely);
  --neon-grad:    linear-gradient(90deg, var(--accent) 0%, #7ee36b 38%, var(--accent2) 100%);
}
:root[data-theme="dark"] {
  --accent2:      var(--m-magenta);
  --accent2-soft: rgba(var(--m-magenta-rgb), 0.16);
  --accent2-line: var(--m-magenta);
}

/* A kimeneti doboz fejvonala: a lap TERMÉKE — innen ismerhető fel. */
.out::before { background: var(--neon-grad); height: 3px; }

/* A haladás-csík ugyanezt az ívet járja be: zöldből magentába. */
.halad-csik > span, .prog-bar > span, .pbar-halad > span { background: var(--neon-grad); }

/* A masolas-gomb marad tömör lime (a fő akció), de a fókusz-gyűrűje
   megkapja a magentát — így a billentyűzetes használat is „márkás". */
.copy-btn:focus-visible { outline-color: var(--accent2); }

/* ── 1. A LOGÓ „ai" része — a márkajel, minden lapon ──
   🔴 ITT LIME→MAGENTA GRADIENS-KITÖLTÉS ÁLLT. Törölve: a user TISZTA magentát
   kért (2026-08-03), és a gradiens `-webkit-text-fill-color: transparent`-je
   NÉMÁN felülírta volna a `color`-t — a betű átlátszó maradt volna. */
.brand-ai { -webkit-text-fill-color: currentColor; }

/* ── 2. AMIKOR AZ AI DOLGOZIK ──
   A gomb munka közben `disabled` lesz (projekt.php: aiGomb.disabled = true),
   ebből tudja a CSS, hogy fut a hívás — nem kellett hozzá JS. A futó csík
   megnyugtat, hogy nem fagyott le; 10-30 másodperc a gondolkodás. */
/* ══ 🔴🔴 2026-08-07 — A DOBOZ DOLGOZOTT, PEDIG MÉG ADATOT SEM KAPOTT ══════
   A user: „az utolsó folyamatosan dolgozik úgy, hogy még adatot sem kapott."

   📏 A GYÖKÉR-OK: a futó csík a gomb `:disabled` állapotához volt kötve — a
      gomb viszont KÉT, egymástól teljesen független okból lehet tiltva:
        1. FUT az AI  → itt helyes a mozgás
        2. még nincs kiválasztva a videó fajtája (`$tipusMost === ''`)
           → itt a doboz AZT HAZUDTA, hogy dolgozik, pedig épp a
             felhasználóra várt. Egy új projektnél EZ az alapállapot,
             vagyis a legelső benyomás egy örökké pörgő folyamatjelző volt.

   ➡️ A csík mostantól a VALÓDI futáshoz kötődik: a JS a `.ai-jelzes` elemre
      teszi rá a `fut` osztályt, amikor elindítja a kérést, és leveszi, amikor
      végzett (`aiVege()`). Így a mozgás pontosan addig tart, ameddig a munka.
   🔑 Ez a `fut` osztály MÁR LÉTEZETT — nem új jelzőt kellett kitalálni, csak
      a meglévőt megkérdezni a helyes helyett. */
.ai-blokk { position: relative; overflow: hidden; }
.ai-blokk:has(.ai-jelzes.fut)::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 45%;
  background: var(--neon-grad); border-radius: 0 0 3px 0;
  animation: ai-fut 1.25s ease-in-out infinite;
}
@keyframes ai-fut {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(322%); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-blokk:has(.ai-jelzes.fut)::before { animation: none; width: 100%; opacity: 0.85; }
}

/* ── 3. A FILM ÚTJA — a haladás a zöldből a magentába ér ──
   A festék a SÁV teljes szélességéhez van kötve (120 px), nem a csíkéhoz:
   így a magentát csak a 100%-nál éri el. Félúton még zöldes. */
.terkep-sav i {
  background: var(--neon-grad);
  background-size: 120px 100%; background-repeat: no-repeat;
}

/* ── 4. A KEDVENCEK SZÍVE — ha van benne valami, kitöltve és magentán ── */
.rb-sziv:has(.kedv-szam:not([hidden])) { color: var(--accent2); }
.rb-sziv:has(.kedv-szam:not([hidden])) .i { fill: currentColor; }
.kedv-szam { background: linear-gradient(120deg, var(--accent) 0%, var(--accent2) 100%); color: var(--szines-text, var(--m-feher)); }

/* ── 5. AZ „ELŐZŐ" LÉPTETŐ — a „Tovább" párja, halvány átmenetben ── */
.lept-btn:not(.fo) {
  background: linear-gradient(100deg, var(--accent-soft) 0%, var(--accent2-soft) 100%);
  border-color: var(--accent-line);
}
.lept-btn:not(.fo):hover {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent2) 140%);
  color: var(--accent-text); border-color: var(--accent2-line);
}

/* ============================================================
   A KÉT SZÍN VÉGLEGES SZEREPE (a user döntése, 2026-08-01 késő este)
   ------------------------------------------------------------
   • ÁTMENET  → CSAK a díszcsíkokban (kimeneti doboz fejvonala, haladás-sáv,
                az AI futó csíkja). Sehol máshol.
   • MAGENTA  → tömören a négy kiemelt helyen (logó „ai", kedvenc-szív,
                „Előző" gomb, a hozzájuk tartozó jelek).
   • LIME     → a logó „weblock" része és minden, ami a te döntésed
                (kiválasztott kártya, fő gomb).
   ============================================================ */

/* ── A LOGÓ: nagyobb, középen, két színnel ── */
.sav-brand { justify-content: center; padding: 20px 12px 18px; }
.brand { font-size: var(--t-6); letter-spacing: -0.035em; line-height: 1.05; }
.brand .brand-fo { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.brand .brand-ai {
  color: var(--accent2);
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: var(--accent2);
}

/* ── A négy helyen TÖMÖR magenta, nem átmenet ── */
.kedv-szam { background: var(--accent2); color: var(--szines-text, var(--m-feher)); }
.lept-btn:not(.fo) {
  background: var(--accent2-soft);
  /* 🔴 2026-08-05: itt `var(--accent2-line)` (#c4128f) állt — a halvány magenta
     alapon 4,41:1, vagyis a WCAG AA 4,5-ös minimuma ALATT. Mérve, miután a
     gomb 36-ról 44 px-re nőtt és ez lett az egyetlen léptető a lapon.
     A sötétebb árnyalat 5,5:1. A KERET marad `--accent2-line`: az nem szöveg,
     ott a 3:1 a küszöb, és így a gomb színe sem változik ránézésre. */
  color: var(--m-magenta-gomb);
  border-color: var(--accent2-line);
}
.lept-btn:not(.fo):hover {
  background: var(--accent2); color: var(--szines-text, var(--m-feher)); border-color: var(--accent2-line);
}
:root[data-theme="dark"] .lept-btn:not(.fo) { color: var(--accent2); }
:root[data-theme="dark"] .lept-btn:not(.fo):hover { color: var(--m-feher); }

/* ══ A KIMENETI DOBOZ HÁROM GOMBJA — EGY FŐ MŰVELET (2026-08-07) ══════════
   ⚠️ ELŐZMÉNY: 2026-08-06-ig itt HÁROM KÜLÖNBÖZŐ SZÍN állt, és az a USER
      DÖNTÉSE volt („másolás = lime · projektbe = fekete · kedvenc = magenta.
      Így a három akció ránézésre elválik"). Most ő maga kérte az ellenkezőjét,
      egy előtte-utána bemutató alapján — ezért írjuk át.

   🔴 A user: „tegyünk egy kis rendet… szükség lenne egy elegáns designra."
   📏 MÉRVE a Látvány lapon: **37 gomb, 9-féle háttérszín**. A három gomb
      egymás alatt három színnel egyformán fontosnak látszott — pedig csak az
      egyik viszi tovább a munkát.
   ➡️ EGY fő művelet (lime), egy másodlagos (keret), egy halk (szöveg).
   🔑 A szín SZEREPET jelöl, nem díszít: a lime az, amit CSINÁLSZ. */
.ment-btn {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent-line);
  box-shadow: 0 2px 10px rgba(var(--m-lime-rgb), 0.22);
}
.ment-btn:hover { background: var(--accent-line); color: var(--accent-text); border-color: var(--accent-line); }
.ment-btn:active { background: var(--accent-line); }
.ment-btn .i { color: var(--accent-text); }

/* 🔑 A MÁSOLÁS CSAK OTT HALKUL, AHOL VAN MELLETTE FŐ GOMB. A projekt-lap
   számolt kimeneténél (Vágási terv, Felirat, Export) a Másolás AZ EGYETLEN
   művelet — ott továbbra is lime marad, különben a lap fő gombja tűnne el. */
.out:has(.ment-btn) .copy-btn {
  background: transparent; color: var(--text); border-color: var(--border-strong);
  box-shadow: none;
}
.out:has(.ment-btn) .copy-btn:hover {
  background: var(--bg-card-hover); color: var(--text); border-color: var(--text-dim);
}
.out:has(.ment-btn) .copy-btn .i { color: var(--text-muted); }

/* ⚠️ A MAGASSÁG MARAD 44 px. Először 38-ra vettem — a mérés fogta meg, hogy
   az a saját tapintható-méret szabályunk alá megy. A gomb HALKSÁGÁT a szín és
   a keret hiánya adja, nem a mérete: egy kisebb célpont nem „csendesebb”,
   csak nehezebben eltalálható. */
.kedv-btn {
  background: transparent; color: var(--text-muted); border-color: transparent;
  box-shadow: none; font-weight: 600; font-size: var(--t-2); height: auto; min-height: 44px;
}
.kedv-btn:hover { background: transparent; color: var(--accent2); border-color: transparent; }
.kedv-btn .i { color: currentColor; }

/* ── Kameramozgás: a kép VÁLASZT, a nagyítás külön gombon ──
   A kép a kártya kétharmada; ha az nagyít, a kártya „nem kapcsolható".
   A nagyító a bal felső sarokba került (a pipa a jobb felsőben ül). */
.opt-thumb { cursor: pointer; }
.thumb-nagyit {
  left: 7px; top: 7px; transform: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: var(--r);
  background: rgba(4, 16, 31, 0.66); color: var(--szines-text, var(--m-feher));
  font-size: var(--t-0); font-weight: 600;
  opacity: 0; pointer-events: auto; cursor: zoom-in;
}
.opt-thumb:hover .thumb-nagyit, .thumb-nagyit:focus-visible { opacity: 1; }
.thumb-nagyit:hover { background: rgba(4, 16, 31, 0.88); }
/* Érintésen nincs rátét, ott mindig látszódjon. */
@media (hover: none) { .thumb-nagyit { opacity: 0.92; } }

/* A klipek kicsivel kisebbek (a user kérése). A kártya szélessége eddig a
   hasábtól függött (223 px); most kötött felső határa van, és a rács balra
   igazít, hogy ne keletkezzen rés. 46 elem / 2 oszlop = 23 teli sor, árva nincs. */
.opts.media {
  grid-template-columns: repeat(var(--racs-media, 2), minmax(0, 198px));
  justify-content: start;
}
@media (min-width: 1500px) { .opts.media { --racs-media: 3; } }
@media (max-width: 767px)  { .opts.media { --racs-media: 1; grid-template-columns: minmax(0, 1fr); } }

/* ── A FILM ÚTJA keskeny képernyőn ──
   A user jelzése: „kis kijelzőn nagyon szétesik". 15 lépés × 62 px = 930 px,
   ami 1100 alatt nem fér ki: a nevek két sorba törtek, az utolsó lépések
   lecsúsztak. Megoldás: keskenyen CSAK a számok maradnak (15 × 34 px = 510 px,
   ez már elfér), a nevet a lap-fej úgyis kiírja. Az „itt tartasz" lépés
   neve viszont ott marad — az az egyetlen, ami tájékoztat. */
@media (max-width: 1099px) {
  .terkep-sor { gap: 2px; }
  .terkep-lepes { min-width: 0; flex: 1 1 auto; padding: 4px 2px 5px; }
  .terkep-nev { display: none; }
  .terkep-lepes.itt { flex: 0 0 auto; padding-inline: 8px; }
  .terkep-lepes.itt .terkep-nev {
    display: block; font-size: var(--t-0); -webkit-line-clamp: 1; white-space: nowrap;
  }
  .terkep-kor { width: 22px; height: 22px; font-size: var(--t-0); }
  .terkep-szak { padding: 0 4px 0 2px; font-size: var(--t-0); }
  .terkep-fej { gap: 8px; margin-bottom: 8px; }
  .terkep-arany { font-size: var(--t-0); }
  .terkep-sav { width: 84px; }
}
@media (max-width: 599px) {
  /* Telefonon a szakasz-jelek (I. II. III.) is elmaradnak — a számok elégek. */
  .terkep-szak { display: none; }
  .terkep-kor { width: 20px; height: 20px; font-size: var(--t-0); }
}

/* ── …és ugyanez a SAJÁT doboza szerint ──
   A képernyő-alapú szabály kevés volt: 1280 px-en a lap-hasáb csak ~1180 px,
   és a sáv ott is levágta az utolsó három lépést. A `container` a sáv VALÓDI
   szélességét méri — ez a helyes mérce, mert a hasáb szélessége nem a
   képernyőből következik (a bal menü és a jobb ikonsáv elvesz 272 px-et). */
.terkep { container-type: inline-size; }
@container (max-width: 1080px) {
  .terkep-sor { gap: 2px; }
  .terkep-lepes { min-width: 0; flex: 1 1 auto; padding: 4px 2px 5px; }
  .terkep-nev { display: none; }
  .terkep-lepes.itt { flex: 0 0 auto; padding-inline: 8px; }
  .terkep-lepes.itt .terkep-nev {
    display: block; font-size: var(--t-0); -webkit-line-clamp: 1; white-space: nowrap;
  }
  .terkep-kor { width: 22px; height: 22px; font-size: var(--t-0); }
  .terkep-szak { padding: 0 4px 0 2px; font-size: var(--t-0); }
}
@container (max-width: 620px) {
  .terkep-szak { display: none; }
  .terkep-kor { width: 20px; height: 20px; font-size: var(--t-0); }
}

/* ── A FILM ÚTJA: három állapot, három jelentés (a user jóváhagyta) ──
   kész → LIME („ezt megcsináltad")
   itt  → MAGENTA („ide nézz, most itt tartasz")
   hátralévő → semleges szürke (ne vonja el a figyelmet)
   Ha mind a 15 kör lime lenne, a kész és a hátralévő egyformán nézne ki. */
.terkep-lepes.itt { background: var(--accent2-soft); }
.terkep-lepes.itt .terkep-kor {
  background: var(--accent2); border-color: var(--accent2-line); color: var(--szines-text, var(--m-feher));
}
.terkep-lepes.itt .terkep-nev { color: var(--accent2-line); font-weight: 700; }
:root[data-theme="dark"] .terkep-lepes.itt .terkep-nev { color: var(--accent2); }
/* A „kész" marad lime, a hátralévő pedig az alap szürke — ahhoz nem nyúlunk. */

/* A rajzos lenyíló: a meglévő CSS-előnézet kicsiben, a lenyíló soraiban és a
   gombon. A rajzokhoz (`elonezetek.css`) nem nyúlunk, csak a méretüket adjuk. */
.minta-rajz {
  flex: 0 0 auto; width: 34px; height: 22px; margin: 0;
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(var(--m-fekete-tiszta-rgb),0.2);
}
.szinlenyilo-sor .minta-rajz { width: 38px; height: 24px; }

/* ── A MŰHELY-CSEMPÉK: magenta ráhúzáskor, és a lépés állapota ──
   A csempe LINK, nem választás — ezért magenta a jele („ide kattints"),
   a lime marad annak, amit kiválasztasz. Az állapot-pont pedig ugyanazt
   mondja, mint a bal menü: a csempe és a menüpont egy lépésről beszél. */
.tile { position: relative; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; }
.tile:hover {
  border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2), var(--shadow-2);
  transform: translateY(-1px);
}
.tile:hover .tile-lepes { color: var(--accent2-line); }
:root[data-theme="dark"] .tile:hover .tile-lepes { color: var(--accent2); }
.tile:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* Állapot-jel a csempe jobb felső sarkában. */
.tile-all {
  position: absolute; right: 10px; top: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 3px;
}
.tile-all.kesz { background: var(--accent); color: var(--accent-text); }
.tile-all.kesz .i { width: 12px; height: 12px; vertical-align: 0; }
.tile-all.elkezdve { width: 9px; height: 9px; right: 13px; top: 13px; background: var(--accent-line); }
.tile-all.elavult  { width: 9px; height: 9px; right: 13px; top: 13px; background: var(--warn-border); }

/* ============================================================
   A MEZŐS LAPOK OPTIMALIZÁLÁSA (a user jelzése: „nagyon hosszúak és
   nehezen használhatóak", „van ahol indokolatlanul full screen, van ahol
   össze van húzva")
   ------------------------------------------------------------
   A gyökér-ok: a mezők egymás ALATT futottak, beégetett 520-560 px-es
   szélességgel — a lap kétharmada üresen maradt, a lap meg végtelen lett.
   Mostantól rácsban ülnek, a lap szélességéhez igazodva.
   ============================================================ */
.mezo-racs { align-items: start; }
/* A hosszú szövegmező (Miről szól?) végigér a soron — ott a hely a szövegé. */
.field-szeles { grid-column: 1 / -1; max-width: none; }
.field-szeles textarea { min-height: 92px; }

/* 🔴 2026-08-02: itt is `max-width: 1080px` állt. Egy mezőt tényleg nem kell
   2000 px szélesre húzni — de a MEZŐ-RÁCS igenis érjen végig, és a mezők
   osszák el a helyet egymás között. Így ugyanannyi mező több oszlopba fér,
   nem pedig a lap bal kétharmadába szorul. */
.sec > .field-row { max-width: none; }
.field-row > .field { max-width: none; }
/* Nagy képernyőn több mező fér egy sorba — a hely kihasználva, a mezők
   olvasható szélességben maradnak. */
@media (min-width: 1600px) { .sec > .field-row.mezo-racs { --racs: 3; } }
@media (min-width: 2200px) { .sec > .field-row.mezo-racs { --racs: 4; } }

/* ── A KUTATÁS mezői: KETTESÉVEL, minden szélességen ──
   2026-08-04, a user: „a beviteli boxokbol van 4 legyen 2 egymás mellett ugy
   kisebb a hely." Mind a négy szövegmező `hosszu`, tehát `field-szeles` volt,
   és a `grid-column: 1 / -1` miatt egymás ALATT állt végig — 1920-on négy
   teljes szélességű doboz egymás után.

   🔑 A `data-faz` szelektor SZÁNDÉKOSAN erősebb (0,4,0), mint a fenti
      `.sec > .field-row.mezo-racs` (0,3,0) — különben 1600 px felett a 3
      oszlopos szabály nyerne, és megint nem kettesével állnának.
   🔑 421 px ALATT nem nyúlunk hozzá: ott a gyökér `--racs: 1`, és egy 375-ös
      telefonon két szövegmező egymás mellett használhatatlan.
   🔑 Az ötödik mező (legördülő) magától végigér a soron — az „árva sor elleni”
      szabály `.field-row`-ra már ki van építve, nem kell külön kezelni. */
@media (min-width: 421px) {
  .sec > .field-row.mezo-racs[data-faz="kutatas"] { --racs: 2; }
  .mezo-racs[data-faz="kutatas"] > .field-szeles { grid-column: auto; }

  /* 🔴 SAJÁT ÁRVA-SZABÁLY KELL IDE. A fenti általános `.field-row` árva-szabály
     csak a 421–767 és az 1100–2399 sávban fut, mert ott a gyökér `--racs` = 2.
     A 768–1099 és a 2400+ sávban a gyökér 3-at ad — de MI itt 2-re állítottuk,
     tehát ott az általános szabály nem ér ide. Mérve 768 px-en: az ötödik mező
     (a legördülő) FÉL SZÉLESSÉGBEN, egyedül maradt az utolsó sorban.
     1920-on ugyanez hibátlan volt — ezért kötelező mind az öt szélesség. */
  .mezo-racs[data-faz="kutatas"]:has(> :nth-child(3)):has(> :nth-child(2n+1):last-child) > :last-child {
    grid-column: 1 / -1;
  }
}

/* ── A KUTATÁS négy szövegdoboza EGY MÉRETŰ ──
   2026-08-04, a user: „A boxokat hozd egy méretüre."
   Mérve 1440 px-en a négy doboz: 136 · 187 · 136 · 152 px. Két külön ok:
     · a „Tények, számok, dátumok” öt sorosra van állítva (a többi három),
     · a „Honnan tudod?” súgószövege két sorba törik, a többié egybe.
   Ezért MINDKETTŐT rögzíteni kell — a szövegmező magasságát ÉS a súgó helyét.
   Egyiket önmagában javítva a dobozok továbbra is eltérnének.
   🔑 A `resize: vertical` megmarad: aki hosszabb szöveget ír, lehúzhatja.
      A fix magasság a KIINDULÓ állapot, nem börtön.
   🔴 `align-items: stretch` NEM KELL, sőt ÁRT. Kipróbáltam: a sor első doboza
      202 px-re nyúlt, a második 184 maradt és ALULRA igazodott — a kettő alja
      egy vonalban, a teteje nem. Mivel a doboz három része (címke · szövegmező ·
      súgó) már mind kötött, a rács eredeti `start` igazítása magától egyformát
      ad. Kevesebb szabály, jobb eredmény. */
.mezo-racs[data-faz="kutatas"] > .field { align-self: start; }
.mezo-racs[data-faz="kutatas"] > .field > textarea { height: 124px; min-height: 124px; }
.mezo-racs[data-faz="kutatas"] > .field > small { min-height: 32px; }

/* 🔴 A GYÖKÉR-OK, amiért a felső két doboz 18 px-szel eltolódott egymáshoz
   képest: az `elonezetek.css` 733. sorában áll egy
   `.field-szeles + .field-szeles { margin-top: 18px }`. Az AKKOR készült,
   amikor ezek a mezők egymás ALATT futottak — ott a margó adta a térközt.
   Rácsban viszont a `gap` adja, és a margó csak az elsőt hagyja ki: a sor
   első doboza margó nélkül, a másodika 18 px-szel lejjebb ült.
   A második sorban ez NEM látszott, mert ott mindkét doboz megkapta.
   🔑 Nem az `elonezetek.css`-t írjuk át: ott a szabály a minta-soros lapokon
      továbbra is helyes. Csak ITT, a rácsba tett Kutatás-mezőknél nullázzuk. */
.mezo-racs[data-faz="kutatas"] > .field-szeles + .field-szeles { margin-top: 0; }

/* ── A KAMERAMOZGÁS rácsa: töltse ki a helyet ──
   Az előző körben fix 198 px-et adtam, és 1500 felett három oszlopot — ettől
   a kártyák aprók lettek, a hasáb jobb fele meg üres maradt. Most a kártya
   RUGALMAS (1fr), csak az oszlopszám kötött, hogy ne maradjon árva sor.
   🔑 A teli sor csak a „Mind” nézetre igaz, és a lista azóta 70 elemű
   (2→35 teli sor). Csoportra szűrve 8–12 elem látszik, ott az utolsó sor
   úgyis részleges — ezért az oszlopszámot NEM a darabszámhoz igazítjuk,
   hanem ahhoz, hogy a kártya ne legyen apró. */
.opts.media {
  grid-template-columns: repeat(var(--racs-media, 2), minmax(0, 1fr));
  justify-content: stretch;
}
@media (min-width: 1500px) { .opts.media { --racs-media: 4; } }
@media (min-width: 2200px) { .opts.media { --racs-media: 6; } }
@media (max-width: 767px)  { .opts.media { --racs-media: 2; } }
@media (max-width: 460px)  { .opts.media { --racs-media: 1; } }

/* ── Keskeny nézet: a kimenet fölül marad, de ne nyomja le a tartalmat ──
   1100 px alatt a kimeneti hasáb a lap tetejére kerül (a user korábbi kérése:
   „telefonon a képernyő teteje a prompt-dobozé"). Amióta a doboz a szöveghez
   nő, egy ÜRES doboz + a kedvencek 1200 px-t foglalt, mielőtt a választék
   elkezdődött volna. Üresen tehát tömör, és a kedvencek a lap aljára kerülnek. */
@media (max-width: 1099px) {
  .out textarea:placeholder-shown,
  .out textarea.is-empty { min-height: 78px; max-height: 78px; }
  .out:not(.hu-out):not(.kedv-doboz) textarea:placeholder-shown { min-height: 78px; }
  /* A kedvencek és a magyar jelentés a tartalom UTÁN — üresen semmit nem adnak. */
  .out-col { display: contents; }
  .out-col > .out { order: -1; margin-bottom: var(--s4); }
  .out-col > .hu-out, .out-col > .kedv-doboz { order: 3; margin-top: var(--s4); }
}

/* ── AZ ÖSSZEGZÉSED — egy helyen, magyarul, a lap tetején ──
   A user kifogása: 86 kártya közül választ, és az eredmény csak angolul, a
   prompt-dobozban látszik. Itt magyarul áll, és a tételre kattintva odaugrik
   a szakaszhoz (ha csukva volt, kinyílik). */
.valasztas-sav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4); padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.valasztas-sav[hidden] { display: none; }
.valasztas-cimke {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
  margin-right: var(--s2);
}
.valasztas-tetel {
  display: inline-flex; align-items: center; gap: 6px;
  /* 2026-08-05: 28 → 44 px. Ez volt a legkisebb kattintható elem az egész
     Műhelyben. Az `align-items` `baseline`-ról `center`-re vált, különben a
     megnőtt dobozban a szöveg a tetejére tapadna. */
  min-height: 44px; max-width: 100%; padding: 5px 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-edge); border-radius: var(--r);
  font-family: inherit; font-size: var(--t-1); color: var(--text);
  cursor: pointer; transition: border-color 0.14s, background 0.14s;
}
.valasztas-tetel:hover { background: var(--accent); border-color: var(--accent-line); }
.valasztas-tetel em {
  font-style: normal; font-size: var(--t-0); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink);
  white-space: nowrap;
}
.valasztas-tetel:hover em { color: var(--accent-text); }
.valasztas-tetel span {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 767px) { .valasztas-tetel { font-size: var(--t-1); } }

/* ── „Fel" gomb a hosszú lapokon ──
   Négy-hat képernyő görgetés után a másolás-gomb messze van. Csak akkor
   jelenik meg, ha lejjebb vagy egy képernyőnyivel; a jobb ikonsáv mellé ül. */
.fel-gomb {
  position: fixed; z-index: 90;
  right: calc(var(--jsav-w, 56px) + 14px); bottom: 18px;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fej-bg); color: var(--szines-text, var(--m-feher));
  border: 1px solid var(--fej-bg); border-radius: var(--r-lg);
  box-shadow: 0 6px 18px rgba(4, 16, 31, 0.26);
  cursor: pointer; transition: background 0.14s, transform 0.14s;
}
.fel-gomb[hidden] { display: none; }
.fel-gomb:hover { background: var(--accent2); border-color: var(--accent2); transform: translateY(-2px); }
.fel-gomb .i { width: 17px; height: 17px; transform: rotate(90deg); }
@media (max-width: 1023px) { .fel-gomb { right: 14px; bottom: 14px; } }

/* A keresőből odaugrott kártya egy pillanatra kigyullad. */
.opt.ker-kiemelt {
  box-shadow: 0 0 0 3px var(--accent2), 0 8px 22px rgba(var(--m-magenta-rgb), 0.28);
  border-color: var(--accent2);
}

/* ── FIÓK-LAP: az előfizetés állapota és a teendő EGYMÁS MELLETT ──
   A user kérése nagy kijelzőre; a többi méretre innen származtatva:
   1200 px alatt egymás alá kerül, mert két szűk hasábban a szöveg törne. */
/* 1. oszlop: a fiókod · 2. oszlop: az előfizetés állapota, alatta a teendő.
   1200 px alatt egymás alá kerül — két szűk hasábban a szöveg törne. */
.fiok-racs {
  display: grid; gap: var(--s4) var(--s6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.fiok-racs > .sec { margin-bottom: 0; }
.fiok-elof { display: grid; gap: var(--s4); align-content: start; }
.fiok-elof > .sec { margin-bottom: 0; }
@media (max-width: 1199px) { .fiok-racs { grid-template-columns: minmax(0, 1fr); } }

/* Az előfizetés-gombok: nem az egész sávot foglalják el. */
.elof-gomb {
  display: inline-flex; width: auto; max-width: 300px;
  text-decoration: none; text-align: center; margin-top: var(--s2);
}
/* A fiók-lap szakaszai: olvasható sávban, de a rács tölti ki a helyet. */
/* 2026-11-11: minden lap teljes szélességű (a user), a 720 px-es korlát KI */
.fiok-lap .sec { max-width: none; }
.fiok-racs .sec, .fiok-elof .sec { max-width: none; }

/* Előfizetésem → „Fizetés és lemondás” (2026-10-06): soronként egy gomb és a
   magyarázata. Bal oldalon egyforma széles gomb, jobbra a szöveg; keskenyen egymás alatt. */
.fiok-lap .fk-stripe { max-width: none; }
.fk-stripe-sorok { display: grid; }
.fk-stripe-sor {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--s2) var(--s5); align-items: center;
  margin: 0; padding: var(--s4) 0; border-top: 1px solid var(--border);
}
.fk-stripe-sor:first-child { border-top: 0; padding-top: 0; }
.fk-stripe-sor .wg { width: 100%; justify-content: center; text-align: center; }
.fk-stripe-sor span { color: var(--text-dim); }
/* Személyes adatok (2026-10-07): egy lista, soronként egy adat és egy Módosítás gomb,
   a szerkesztés helyben nyílik a sor alatt. Minden szakasz ugyanolyan széles. */
/* 2026-11-11: minden lap teljes szélességű (a user), a 60rem-es korlát KI */
.adat-lap .sec, .adat-lap #adataim, .adat-lap .fk-veszely { max-width: none; }
.adat-lista { display: grid; }
.adat-sor { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; gap: var(--s2) var(--s5); align-items: center;
  padding: var(--s4) 0; border-top: 1px solid var(--border); }
.adat-sor:first-child { border-top: 0; padding-top: 0; }
.adat-cim { font-size: var(--fs-meta); font-weight: 700; }
.adat-ertek { min-width: 0; display: grid; gap: 2px; }
.adat-ertek > span { color: var(--text); overflow-wrap: anywhere; }
.adat-ertek > small { color: var(--text-muted); font-size: var(--t-1); line-height: 1.45; }
.adat-sor > .wg { justify-self: end; }
.adat-sor.szerk > .adat-ertek, .adat-sor.szerk > [data-modosit] { display: none; }
.adat-sor.szerk { align-items: start; }
.adat-sor.szerk > .adat-cim { padding-top: .4rem; }
.adat-szerk:not([hidden]) { grid-column: 2 / -1; display: grid; gap: var(--s3); }
.adat-szerk .field { max-width: 100%; margin: 0; }
.adat-ketto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.adat-gombok { margin-top: var(--s1); }
.adat-sor > .fiok-jelzes { grid-column: 2 / -1; margin: 0; }
@media (max-width: 640px) {
  .adat-sor { grid-template-columns: minmax(0, 1fr) auto; }
  .adat-cim { grid-column: 1 / -1; }
  .adat-szerk:not([hidden]), .adat-sor > .fiok-jelzes { grid-column: 1 / -1; }
  .adat-ketto { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .fk-stripe-sor { grid-template-columns: minmax(0, 1fr); } }

/* A fiók-lap mentés/csere gombjai színesek: ezek a lap FŐ akciói. */
.fiok-sor .tool-btn {
  background: var(--accent); color: var(--accent-text);
  border-color: var(--accent-line); font-weight: 700;
}
.fiok-sor .tool-btn:hover {
  background: var(--accent-line); color: var(--szines-text, var(--m-feher)); border-color: var(--accent-line);
}

/* A „Csomag: Ingyenes" sor a szűk második oszlopban betűnként tördelt: a
   háromoszlopos `.pkap-sor` rács ott nem fér el. A doboz SAJÁT szélességét
   nézzük — a képernyőé itt félrevezet, mert három hasáb osztozik rajta. */
.fiok-elof { container-type: inline-size; }

/* 🔴 A `.pkap-lista` a KÉPERNYŐ szélessége alapján vált két oszlopra — de itt
   egy ~250 px-es hasábban ül, ahol 1280-on is csak 118 px jut egy dobozra, és
   a szöveg betűnként tördelődik. A hasáb szélessége a mérce, nem a képernyőé.
   (Mérve 2026-08-02 az éles lapon.) */
/* Az állapot-lista a saját tartalmához igazodik, nem a képernyő-töréspontokhoz:
   annyi hasáb, amennyibe 280 px még belefér. Két tétel van benne, tehát
   szélesen kettő, keskenyen egy — sosem három, üres cellával. */
.fiok-elof .pkap-lista { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* 900 px alatt a jobb hasábban a címke SAJÁT SORBA kerül — de a két kártya
   marad egymás mellett. Enélkül a „KÖVETKEZŐ FORDULÓNAP: 2099.12.31." három
   sorba tördelődött a kártyán belül, a csomag neve mellett. */
@container (max-width: 900px) {
  .fiok-elof .pkap-sor { grid-template-columns: auto 1fr; }
  .fiok-elof .pkap-sor em { grid-column: 1 / -1; justify-self: start; }
}

@container (max-width: 560px) {
  .fiok-elof .pkap-lista { grid-template-columns: minmax(0, 1fr); }
  /* A `nowrap`-es jobb oldali címke szűk hasábban a KÖZÉPSŐ oszlopot nyomja
     nullára — így tört betűnként a „Stúdió". A képernyő-alapú media query ezt
     NEM fogta meg, mert a képernyő széles volt, csak a hasáb keskeny. */
  .fiok-elof .pkap-sor { grid-template-columns: auto 1fr; }
  .fiok-elof .pkap-sor em { grid-column: 1 / -1; justify-self: start; }
}
@container (max-width: 420px) {
  .pkap-sor { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pkap-sor b { font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
}
/* A hosszú e-mail ne feszítse szét a mezőt. */
.fiok-sor input { text-overflow: ellipsis; }

/* A mező és a gombja EGY magasságban: az input 36 px, a gomb alapból 38 —
   ettől látszott a gomb feljebb csúszva. Most mindkettő 36, egy vonalon. */
.fiok-sor { align-items: center; }
.fiok-sor .tool-btn { height: 36px; min-height: 36px; padding: 0 16px; }

/* Az input a `.fiok-sor`-ban ül, ezért a `.field > input` (36 px) nem éri el —
   az általános 42 px maradt rajta, és 3 px-et csúszott a gombjához képest. */
.fiok-sor input, .fiok-sor .tool-btn { height: 36px; min-height: 36px; }

/* ── „MIT KÉSZÍTESZ?" — a felső sáv közepén ──
   A `+` 2026-08-02-ig a jobb ikonsávban ült, ikonként. A user kérése: kerüljön
   a felső sáv KÖZEPÉRE, felirattal. Ez a felület legfontosabb akciója: innen
   indul minden munka. A sötét sávon lime gomb — messziről látszik. */
.bar-uj {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto; height: 34px; padding: 0 16px;
  background: var(--accent); color: var(--accent-text, var(--m-tinta));
  border: 1px solid var(--accent-line); border-radius: var(--r);
  font-family: inherit; font-size: var(--t-2); font-weight: 700; white-space: nowrap;
  cursor: pointer; transition: filter 0.14s, transform 0.1s;
}
.bar-uj:hover { filter: brightness(1.07); }
.bar-uj:active { transform: translateY(1px); }
/* A projektválasztó és a Kedvenceim 2026-08-03 óta LINK, nem gomb (a lenyílóik
   megszűntek). A böngésző alapból aláhúzza és kékre festi a linket — ezt itt
   vissza kell venni, különben a két gomb kilóg a sorból. */
a.bar-uj { text-decoration: none; }
a.bar-uj:visited { color: var(--szines-text, var(--m-feher)); }
a.bar-proj-btn:visited, a.bar-kedv:visited { color: var(--szines-text, var(--m-feher)); }
.bar-uj:focus-visible { outline: 2px solid var(--m-feher); outline-offset: 2px; }
.bar-uj .i { width: 16px; height: 16px; vertical-align: 0; stroke-width: 2.6; }

/* Szűk sávban a felirat elmarad, a gomb ikonos marad — de középen.
   🔴 2026-08-03: a határ 767 px volt, és a felső sáv PONT 768-on csordult ki
   (mérve: 834 px). A 768 az egyik kötelező tesztfelbontás — egy pixellel
   kerülte el a szabályt. A gombok feliratai 900 px alatt maradnak el. */
@media (max-width: 900px) {
  .bar-uj { padding: 0 10px; }
  .bar-uj span { display: none; }
}

/* ── A PROJEKTVÁLASZTÓ — a „Mit készítesz?" BAL oldalán, magentában ──
   2026-08-02, a user kérése. Eddig a sáv bal szélén ült, kétsoros, keret
   nélküli halvány gombként: nem látszott rajta, hogy kattintható. Most a
   másik két akciógombbal azonos formájú, csak a színe más.
   A neve hosszú is lehet, ezért fogy el három ponttal — a gomb nem nyúlhat
   szét, mert akkor a mellette álló kettőt tolná ki a sávból. */
.bar-proj-btn {
  background: var(--accent2); border-color: var(--accent2-line); color: var(--szines-text, var(--m-feher));
  max-width: 280px; gap: 7px;
}
.bar-proj-btn .bar-proj-nev {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-proj-btn:focus-visible { outline: 2px solid var(--m-feher); outline-offset: 2px; }
/* Szűk sávban a felirat elmarad — mint a másik két gombnál —, de a nyíl marad,
   különben egy magányos mappa-ikon nem mondaná meg, hogy nyílik valami. */
@media (max-width: 767px) {
  .bar-proj-btn { max-width: none; }
  .bar-proj-btn .bar-proj-nev { display: none; }
}

/* A jobb ikonsáv tetején felszabadult hely: a szinkron-jelzés feljebb csúszik. */
.rb-indit { display: none; }

/* ============================================================
   A HÁROM SÁV EGY ANYAGBÓL — a BAL sávhoz igazítva (a user: „az a jó")
   ------------------------------------------------------------
   Mérve, mi volt a különbség:
     bal   → gradiens  #061931 → #04101f  · szöveg #f1f5f9
     felső → tömör     #061931 (a gradiens TETEJE)
     jobb  → tömör     #04101f (a gradiens ALJA), és a szövegszíne SÖTÉT volt
             (#0d1520) — sötét betű sötét háttéren.
   Mostantól mindhárom UGYANAZT a gradienst kapja, a saját irányában, és
   ugyanazt a szöveg- és vonalszínt. Egy forrásból, tokenekből.
   ============================================================ */
.site-bar {
  background: linear-gradient(180deg, var(--hej-1), var(--hej-2));
  color: var(--hej-szoveg);
  border-bottom-color: var(--hej-vonal);
}
.jobbsav {
  background: linear-gradient(180deg, var(--hej-1), var(--hej-2));
  color: var(--hej-szoveg);
  border-left-color: var(--hej-vonal);
}
/* A jobb sáv ikonjai a sáv szövegszínét vegyék fel (eddig sötétek voltak). */
.jobbsav .rb-gomb, .jobbsav .rb-gomb .i { color: var(--hej-halk); }
.jobbsav .rb-gomb:hover, .jobbsav .rb-gomb:hover .i { color: var(--hej-szoveg); }
.jobbsav .rb-gomb:hover { background: rgba(var(--m-feher-rgb), 0.08); }

/* 🔴🔴 2026-08-07 — A JAVASLAT-GOMB KIVÉTEL: MAGENTÁN FEHÉR IKON.
   📏 A MÉRÉS FOGTA MEG: a magenta háttér átment, de az ikon a fenti szabálytól
      `--hej-halk` (halvány szürkéskék) maradt — **kontraszt 1,78**, vagyis a
      jel alig látszott a saját gombján. A képernyőképen ez fel sem tűnt, mert
      az ikon apró.
   🔑 KÉT OKBÓL kellett IDE, a héj-szabály UTÁN: a `.jobbsav .rb-gomb` két
      osztályos (erősebb), és a fájlban is később áll, mint a `.rb-javaslat`.
      Ugyanaz a szelektor-erő kell hozzá — és az `.i`-t is külön kell címezni,
      különben az SVG marad halk. */
.jobbsav .rb-javaslat, .jobbsav .rb-javaslat .i { color: var(--szines-text, var(--m-feher)); }
.jobbsav .rb-javaslat:hover, .jobbsav .rb-javaslat:hover .i { color: var(--szines-text, var(--m-feher)); }
.jobbsav .rb-javaslat:hover { background: var(--accent2); filter: brightness(1.1); }

/* 🔑 A gradiens a KÉPERNYŐ magasságához van kötve, nem az elemhez.
   Enélkül a felső sáv 76 px alatt futtatja le ugyanazt az átmenetet, amit a
   bal sáv 900 px alatt — így a felső sáv alja már a sötét véghez ért, miközben
   a bal sáv ott még világos volt. A sarokban látható színtörés ebből jött. */
.oldalsav, .site-bar, .jobbsav {
  background: linear-gradient(180deg, var(--hej-1) 0%, var(--hej-2) 100%);
  background-size: 100% 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 🔑 A SZÍNTÖRÉS VALÓDI OKA (mérve, 2026-08-02): a bal sáv jobb felső sarkában
   egy 250 px-es lime fény-folt ült (`rgba(201,255,53,.10)`), a felső és a jobb
   sávon viszont nem — ezért volt a logó környéke zöldes, a többi sáv meg tiszta
   navy. A user kérése az EGYSÉG volt, ezért a folt kikerül: így mind a három sáv
   pontosan ugyanaz az anyag. (Ha hiányozna, mindhárom sáv megkaphatja.) */
.oldalsav::before { display: none; }

/* ═══════════════════════════════════════════════════════════
   CSOMAGOK ÉS AI-KERET (2026-08-02)
   ═══════════════════════════════════════════════════════════
   Két dolog jelenik meg itt, és mindkettő PÉNZRŐL szól:

   1. a keret-sáv — mennyit használtál el a 30 napos AI-keretedből,
   2. a csomag-kártyák — mit kapsz, ha fizetsz.

   A szereposztás a lap többi részével azonos: a LIME azt jelöli, amit
   választasz vagy már a tiéd, a MAGENTA azt, ahova nézni kell. Ezért az
   ajánlott csomag kap magenta keretet, és nem a drágább.
   ------------------------------------------------------------ */

/* ── A keret fogyása ──────────────────────────────────────── */
.keret-sav {
  grid-column: 1 / -1;
  height: 6px; margin-top: 6px;
  background: var(--bg-sunken);
  border-radius: var(--r);
  overflow: hidden;
}
.keret-sav i {
  display: block; height: 100%;
  background: var(--neon-grad);
  border-radius: var(--r);
  transition: width .35s ease;
}
/* Ha már a keret négyötödénél tart, a sáv MAGENTÁRA vált — ez az a pont,
   ahol érdemes szólni, nem akkor, amikor már elfogyott. A `sok` osztályt a
   PHP teszi rá, mert a százalék ott dől el. */
.keret-sav.sok i { background: var(--accent2); }
.pkap-sor small { grid-column: 1 / -1; font-size: var(--fs-meta); color: var(--text-muted); }

/* ── Havi / éves kapcsoló ─────────────────────────────────── */
.ciklus-valto {
  display: inline-flex; gap: 2px; margin-bottom: var(--s4);
  padding: 3px; background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.ciklus-gomb {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 34px; padding: 0 var(--s4);
  background: transparent; border: 0; border-radius: var(--r);
  font-family: var(--font-szo); font-size: var(--t-2); font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ciklus-gomb:hover { color: var(--text); }
.ciklus-gomb.valasztott {
  background: var(--bg-card); color: var(--text);
  box-shadow: var(--shadow-1);
}
.ciklus-gomb em {
  font-style: normal; font-family: var(--font-gep);
  font-size: var(--t-0); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent-ink);
}
.ciklus-gomb:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }

/* ── ARC RÖGZÍTÉSE (Karakter-építő, összecsukható recept) ──── */
.arcfix {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card); overflow: hidden;
}
.arcfix summary {
  cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; position: relative;
}
.arcfix summary::-webkit-details-marker { display: none; }
.arcfix summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg); transition: transform .18s ease;
}
.arcfix[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.arcfix summary b { display: block; font-size: var(--fs-h3); }
.arcfix summary small { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-muted); }
.arcfix-test { padding: 0 16px 16px; }
.arcfix-gep {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin: 12px 0; padding: 10px 14px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--belso-sarok);
}
.arcfix-gep-cimke {
  font-family: var(--font-gep); font-size: var(--fs-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.arcfix-gep b { font-size: var(--fs-h3); color: var(--accent-ink); }
.arcfix-gep-alt { font-size: var(--fs-meta); color: var(--text-muted); }
#arcfix-out {
  width: 100%; font-family: var(--font-gep); font-size: var(--t-1); line-height: 1.7;
  padding: 12px 14px; border: 1px solid var(--field-border); border-radius: var(--r);
  background: var(--bg-sunken); color: var(--text); resize: vertical;
}
.arcfix-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.arcfix-lab .out-note { margin: 0; flex: 1 1 260px; }

/* ── SEGÉD-DOBOZ — a referencia-lapok közös formája (2026-08-03) ──
   Ugyanaz a csukott doboz, mint az „Arc rögzítése", de nem egyedi ID-kre
   épül: ruhatár-, helyszín-, termék- és beillesztés-lap is ezt használja.
   🔑 Csukva indul: ezek segédeszközök, nem a lap fő folyamata. Aki nem
   keresi, annak nem foglal helyet. */
.segeddoboz {
  margin-top: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card); overflow: hidden;
}
.segeddoboz summary {
  cursor: pointer; list-style: none; padding: 13px 44px 13px 16px; position: relative;
}
.segeddoboz summary::-webkit-details-marker { display: none; }
.segeddoboz summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg); transition: transform .18s ease;
}
.segeddoboz[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.segeddoboz summary:hover { background: var(--bg-card-hover); }
.segeddoboz summary b { display: block; font-size: var(--t-2); font-weight: 600; }
.segeddoboz summary small {
  display: block; margin-top: 2px; font-size: var(--t-1); color: var(--text-muted); line-height: 1.5;
}
.segeddoboz-test { padding: 0 16px 16px; }
.segeddoboz-test textarea {
  width: 100%; margin-top: 10px; padding: 12px 14px;
  font-family: var(--font-gep); font-size: var(--t-1); line-height: 1.65;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--field-border); border-radius: var(--r); resize: vertical;
}
.segeddoboz-test .copy-btn { margin-top: 10px; }

/* ── MODELL-AJÁNLÓ (2026-08-03) ──
   „Melyik géppel készítsd el?" — a válasz a szabálykönyv 3.0 táblázatából jön.
   A fő ajánlás kiemelve, a tartalék halkabban: a szem lássa, melyik az első. */
.mj-valasz { margin-top: 14px; }
.mj-valasz[hidden] { display: none; }
/* 2026-08-06: a LÉPÉSHEZ tartozó ajánlás — ez jelenik meg magától, kérdés
   nélkül. A doboz tetején álljon, ezért nincs felső margója. */
.mj-valasz.mj-kesz { margin-top: 0; margin-bottom: var(--s4); }
/* A feladat neve. 2026-08-06 (második kör): a MAGYARÁZÓ sor, nem a főszereplő —
   ezért az ajánlás ALÁ került, kisbetűvel. Nagybetűs címsorként a doboz tetején
   ülve úgy nézett ki, mint egy lista fejléce; négy ilyen alatt maga a doboz lett
   listává, és a user joggal kérdezte: „most akkor melyik?" */
.mj-mire {
  font-size: var(--t-1); color: var(--text-dim);
  margin: 2px 0 0; padding-left: 2px;
}
.mj-sor {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 13px; margin-bottom: 7px;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--belso-sarok);
}
.mj-sor.mj-fo {
  background: var(--accent-soft); border-color: var(--accent-line);
}
.mj-cimke {
  flex: 0 0 auto; min-width: 96px;
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
}
.mj-sor.mj-fo .mj-cimke { color: var(--accent-ink); }
.mj-sor b { font-size: var(--t-2); font-weight: 600; color: var(--text); }
.mj-sor.mj-fo b { font-size: var(--t-2); }

/* ── A KÉT NYÍLÓ: „Miért ezt?" és „Más lenne a feladat?" ─────
   🔴 2026-08-06, a user a képernyőképről: „egy teljesen kezdő ezzel az
   információval mit fog tudni kezdeni? Megijed tőle és lemondja."
   A dobozban hét blokk állt egyszerre. Innentől EGY NÉV látszik, a többi
   (indoklás, korlátok, feladat-lista, tiltó lista) ezek mögé került.
   🔑 Halk, szöveges nyíló — nem gomb: nem versenyezhet a fő üzenettel. */
.mj-miert > summary,
.mj-mas > summary {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 4px 2px;
  font-size: var(--t-1); font-weight: 600; color: var(--text-muted);
  cursor: pointer; list-style: none;
}
.mj-miert > summary::-webkit-details-marker,
.mj-mas > summary::-webkit-details-marker { display: none; }
.mj-miert > summary::before,
.mj-mas > summary::before {
  content: "›"; display: inline-block; font-size: var(--t-3); line-height: 1;
  transition: transform .15s; color: var(--text-dim);
}
.mj-miert[open] > summary::before,
.mj-mas[open] > summary::before { transform: rotate(90deg); }
.mj-miert > summary:hover, .mj-mas > summary:hover { color: var(--text); }
.mj-miert-test { padding: 2px 0 6px; }
.mj-miert-test .mj-elv {
  margin: 10px 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--text-dim);
  max-width: 68ch;
}
.mj-mas { margin-top: 10px; border-top: 1px solid var(--border); }

/* „Mire jó, és mi a korlátja" — a modell neve alatt (2026-08-06).
   A user kérdéséből: „miért a Midjourney-t erőlteti…" — a név önmagában nem
   indokol semmit. A KORLÁT dőlt betűvel, mert az a fenntartás, nem az ajánlás. */
/* 🔴 2026-08-06 — „HOL ÉRED EL": a modell neve alatt, halványan. Az első
   kérdés, amit a felhasználó feltesz — mérve, hogy a Midjourney (az addigi
   alapeset) a Higgsfielden nem is létezik. */
.mj-hol {
  margin: -6px 0 10px; padding: 0 13px;
  font-size: var(--t-1); line-height: 1.5; color: var(--text-dim);
  max-width: 68ch;
}
/* 🔑 2026-08-07 — A PROJEKT SAJÁT TIPPJE, a „hol éred el" alatt. Nem a
   „Miért ezt?" nyíló mögé való: ez a KONKRÉT projektre vonatkozik (magyar
   narráció · álló videó · kész szereplő-leírás), tehát cselekvésre szólít.
   Egy sor, halvány kiemeléssel — nem új doboz. */
.mj-tipp {
  display: flex; align-items: flex-start; gap: 7px;
  margin: -4px 0 10px; padding: 7px 13px;
  font-size: var(--t-1); line-height: 1.5; color: var(--text-muted);
  background: var(--bg-sunken); border-radius: var(--r);
  max-width: 68ch;
}
.mj-tipp .i { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.mj-mirejo {
  margin: -3px 0 9px; padding: 0 13px;
  font-size: var(--t-1); line-height: 1.5; color: var(--text-muted);
  max-width: 68ch;
}
.mj-mirejo em { font-style: italic; color: var(--text-dim); }

.mj-tiltott {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin: 12px 0 0; padding: 10px 13px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--belso-sarok); color: var(--warn-text);
  font-size: var(--t-1); line-height: 1.5;
}
.mj-tiltott .i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }

/* ── „Cégként vásárolok" ──────────────────────────────────── */
/* Egyetlen sor a kártyák fölött. A jelölőnégyzet 18 px, de a kattintható
   felület a teljes sor (a `label` fogja a szöveget is) — így telefonon is
   könnyen eltalálható, tapadó felület nélkül. */
.ceg-valto {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--r-lg); cursor: pointer;
}
.ceg-valto:hover { border-color: var(--border-strong, var(--accent-line)); }
.ceg-valto input {
  width: 18px; height: 18px; margin: 1px 0 0 0;
  accent-color: var(--accent); cursor: pointer; flex: 0 0 auto;
}
.ceg-valto span { display: block; }
.ceg-valto b {
  display: block; font-size: var(--t-2); font-weight: 700; color: var(--text);
}
.ceg-valto small {
  display: block; margin-top: 2px;
  font-size: var(--t-1); line-height: 1.45; color: var(--text-muted);
}
.ceg-valto:focus-within { outline: 2px solid var(--accent-line); outline-offset: 1px; }

/* ── A csomag-kártyák ─────────────────────────────────────── */
/* Konténer-alapú, nem képernyő-alapú: ez a blokk egy OSZLOPBAN ül, tehát a
   képernyő szélessége semmit nem mond arról, van-e hely két kártyának.
   A profil-lapon a jobb hasáb ~500 px széles 1280-on, de 1920-on már 800 —
   media query-vel az egyiken üresen állna a hely, a másikon összetörne.

   🔑 A `container-type` a SZÜLŐRE kell, nem a rácsra: egy elem nem kérdezheti
   le a saját konténer-méretét, csak a fölötte lévőét. (Először a rácsra tettem
   — a mérés hozta ki, hogy 1280-on is egymás alatt maradtak a kártyák.)
   A `:has()` miatt ez csak azt a szakaszt érinti, amiben tényleg csomag van. */
.sec:has(> .csomag-racs) { container-type: inline-size; }
.csomag-racs {
  display: grid; grid-template-columns: 1fr; gap: var(--s4);
}
@container (min-width: 620px) {
  .csomag-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.csomag {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
}
.csomag.ajanlott {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px var(--accent2), var(--shadow-2);
}
.csomag-cimke {
  position: absolute; top: -10px; left: var(--s4);
  padding: 3px 9px; border-radius: var(--r);
  background: var(--accent2); color: var(--szines-text, var(--m-feher));
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
}
.csomag-nev {
  margin: 0; font-family: var(--font-fo);
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em;
}
.csomag-ar { display: flex; align-items: baseline; gap: var(--s2); margin: 0; }
.csomag-ar b {
  font-family: var(--font-fo); font-size: var(--t-6); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}
.csomag-ar em {
  font-style: normal; font-size: var(--fs-meta); color: var(--text-muted);
}
.csomag-kinek { margin: 0; font-size: var(--fs-body); color: var(--text-muted); }

.csomag-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.csomag-lista li {
  position: relative; padding-left: 22px;
  font-size: var(--fs-body); line-height: 1.45;
}
/* Pipa, nem golyó: azt mondja, „ez jár", nem azt, hogy „ez egy tétel". */
.csomag-lista li::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 5px; height: 9px;
  border: solid var(--accent-line);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.csomag-lista li b { font-weight: 700; }

.csomag-gomb { margin-top: auto; }

/* Sötét témában a kártya a süllyesztett háttéren üljön, hogy elváljon. */
:root[data-theme="dark"] .ciklus-gomb.valasztott,
:root[data-theme="dark"] .csomag { background: var(--bg-elevated); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ciklus-gomb.valasztott,
  :root:not([data-theme="light"]) .csomag { background: var(--bg-elevated); }
}

/* Mozgás-érzékenyeknek nincs animáció. */
@media (prefers-reduced-motion: reduce) {
  .keret-sav i { transition: none; }
}

/* Az ár alatti sor (2026-08-02 → átalakítva 2026-08-04).
   Halkabb, mint az ár — de OLVASHATÓ. Az első változat 12 px-es szürke mono
   volt, a user szava: „olyan pici és olyan szürke hogy nem lehet látni".
   Most a lap alap-betűje 15 px-en, közepes vastagsággal, teljes szövegszínnel.
   A £19 harmincnégy pixeles félkövér — nincs veszélye, hogy ez elnyomja.

   🔴 A `csomag-atvaltas` az ÁRFOLYAMOS átszámítás helye volt; 2026-08-04-én
   listaárra váltottunk, és a helyére a `csomag-bontas` került: az ÉVES díj
   havi bontása. Az osztály itt marad, mert ugyanaz a szerep és a súly. */
.csomag-atvaltas, .csomag-bontas {
  margin: -2px 0 0;
  font-size: var(--t-2); font-weight: 600;
  color: var(--text);
}
/* Havi ciklusban nincs mit bontani — ilyenkor a sor üres, és ne tartson helyet. */
.csomag-bontas:empty { display: none; }

/* ── PÉNZNEM-VÁLTÓ (2026-08-04) ──
   A ciklus-váltó testvére, ugyanaz a forma. Szándékosan LINK, nem gomb:
   JS nélkül is működik, és a jobb gombbal új lapon is megnyitható. */
.penznem-valto {
  display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0 0 var(--s4) var(--s2);
  padding: 3px; background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.penznem-gomb {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 var(--s3);
  border-radius: var(--r); text-decoration: none;
  font-family: var(--font-gep); font-size: var(--t-1); font-weight: 600;
  letter-spacing: 0.03em; color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.penznem-gomb:hover { color: var(--text); background: var(--bg-card-hover); }
.penznem-gomb.valasztott {
  background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-1);
}
.penznem-gomb:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }

/* 🔴 TELEFONON 44 PX A GOMB — a saját szabályunk szerint ennyi a legkisebb
   biztonságosan eltalálható felület. Mérve 375 px-en: a 34 px-es gomb ez alatt
   volt. A ciklus-váltó IS itt van, mert a kettő egymás alatt ül ugyanabban a
   sávban: ha csak az egyiket növelném, a másik törpének látszana mellette.
   Desktopon marad a 34 — ott egérrel kattintasz, és a sűrűbb sáv szebb. */
@media (max-width: 520px) {
  .penznem-valto { margin-left: 0; }
  .penznem-gomb, .ciklus-gomb { height: 44px; }
}


/* A fiók-lap elrendezése (2026-08-02, a user tételes kérése):
     1. oszlop — A fiókod
     2. oszlop — Az előfizetésed állapota, alatta a teendő
   Az „Ami mindig ingyenes" doboz LEKERÜLT a lap aljára. Korábban harmadik
   oszlopként ült ott, és emiatt szorult az állapot 327 px-re — abban a hosszú
   fordulónap-címke betűnként törte szét a csomag nevét. Két oszlop fér el
   kényelmesen, három nem. */
.out--also {
  margin-top: var(--s6);
  max-width: none;
}
/* A hét eszköz vízszintesen fusson, ne egymás alatt: teljes szélességben egy
   oszlopnyi link csak üres helyet csinálna. */
.out--also > div:last-child { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* 🔑 A `max-width: 100%` nem díszítés: a `.sec-hint` 62ch korlátja (≈502 px)
   ERŐSEBB volt a `flex-basis: 100%`-nál, ezért a bevezető mondat mellé
   becsúszott az első eszköz-link, és a doboz SZÉTESETT. Mérve 1440-en. */
.out--also > div:last-child > p { flex: 1 0 100%; max-width: 100%; margin: 0 0 var(--s2); }
.out--also > div:last-child > div { margin: 0 !important; }

/* ── KEDVENCEIM a felső sávban (2026-08-02, a user kérése) ──────────────
   „a kedvenceket tedd be a felső shell Mit készítesz mellé magentában jól
   láthatóan… gomb kellene egy szív ikonnal mint a mit készitesznél."

   A két fő gomb egymás mellett, azonos formában, de MÁS szereppel:
     lime    = amit most CSINÁLSZ  („Mit készítesz?")
     magenta = amit MÁR ELTETTÉL   („Kedvenceim")
   Ez ugyanaz a szereposztás, ami a lap többi részén is fut. */
.bar-kedv {
  background: var(--accent2);
  border-color: var(--accent2-line);
  color: var(--szines-text, var(--m-feher));
}
.bar-kedv .i { fill: currentColor; stroke: none; }
.bar-kedv:focus-visible { outline: 2px solid var(--m-feher); outline-offset: 2px; }

/* A darabszám a feliraton BELÜL, nem sarokba ragasztott pötty: a gomb így
   egyben olvasható marad („Kedvenceim 3"). */
.bar-kedv .kedv-szam {
  position: static; background: rgba(var(--m-feher-rgb), 0.24); color: var(--szines-text, var(--m-feher));
  min-width: 18px; height: 18px; line-height: 18px; border-radius: 3px;
  padding: 0 5px; font-size: var(--t-0);
}

/* A gomb a sáv közepén ül, ezért a panel is oda nyíljon — nem a jobb szélre,
   ahol a gomb régen volt. */
.kedv-panel { right: auto; left: 50%; transform: translateX(-50%); }

/* A gombok felirata 900 px alatt marad el — a sáv 768-on másképp kicsordul
   (mérve 2026-08-03: 834 px kellett volna 768 helyett). */
@media (max-width: 900px) {
  .bar-kedv { padding: 0 10px; }
  .bar-kedv span:not(.kedv-szam) { display: none; }
  .kedv-panel { left: 10px; right: 10px; transform: none; width: auto; }
}

/* 🔴 A második gombtól a sáv túlcsordult 375 px-en: 406 px kellett volna
   375 helyett, és a keresőgomb kilógott. A projektválasztó vitte a legtöbbet
   (165 px), ezért ott szorítunk — a cím amúgy is három ponttal végződik.
   (Mérve 2026-08-02, a Kedvenceim gomb betétele után.)
   🔑 Ez a szorítás SZŰK képernyőre való: külön töréspontban marad, hogy a
   fenti 900 px-es felirat-rejtés ne vigye magával — 768-on a projektnév
   ettől feleslegesen rövidülne. */
@media (max-width: 767px) {
  .bar-proj { max-width: 30vw; }
}

/* ============================================================
   VARÁZSLÓ-MÓD — egy szakasz = egy lap
   ------------------------------------------------------------
   2026-08-02, a user kérése: „mivel ez egy folyamat, nézzen is ki úgy."
   A rész a `wlai_varazslo()` réteghez tartozik (lásd `_kozos.php`).
   Egyetlen eszközlap HTML-je sem változott: a réteg a meglévő `.sec`
   szakaszokat rejti el és mutatja egyesével.
   ============================================================ */

/* A hasábos elrendezésnek varázslóban nincs értelme: egyszerre egy
   szakasz látszik, az pedig érjen végig. */
.varazslo-mod .sec-grid { columns: auto; column-gap: 0; }
.varazslo-mod .sec-grid > .sec { break-inside: auto; margin-bottom: 0; }

/* ── A FOLYAMATJELZŐ ──
   Nem sorszám, hanem a DÖNTÉSEID: „Stílus: Moziszerű · Haj: —".
   Így egy pillantással látod, hol tartasz ÉS mit választottál. */
.varazs-jelzo {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 var(--s5); padding: 0 0 var(--s4);
  border-bottom: 1px solid var(--border);
}
.varazs-pont {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  min-width: 0; max-width: 210px; padding: 7px 11px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text-dim); font-family: inherit; text-align: left;
  cursor: pointer; transition: border-color 0.14s, background 0.14s, color 0.14s;
}
.varazs-pont:hover { border-color: var(--border-strong); color: var(--text); }
.varazs-pont em {
  font-style: normal; font-size: var(--t-0); font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.varazs-pont span {
  font-size: var(--t-1); line-height: 1.25; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* Amit már megadtál — zöld pipa-jelleg, de szín nélkül: a keret beszél. */
.varazs-pont.kesz { border-color: var(--accent-edge); background: var(--accent-soft); color: var(--accent-ink); }
.varazs-pont.kesz span { color: var(--accent-ink); }
/* Ahol most állsz. */
.varazs-pont.itt {
  border-color: var(--accent-line); background: var(--accent);
  color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-line);
}
.varazs-pont.itt em, .varazs-pont.itt span { color: var(--accent-text); }

/* ── A LÉPTETŐ a szakasz alatt ── */
.varazs-lab {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.varazs-szam {
  font-family: var(--font-gep); font-size: var(--t-1); color: var(--text-dim);
  margin-right: auto;
}
.varazs-kihagy {
  background: none; border: 0; padding: 8px 4px;
  color: var(--text-dim); font-family: inherit; font-size: var(--t-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.varazs-kihagy:hover { color: var(--text); }
.varazs-vissza[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── A ZÁRÓ LAP ── */
.varazs-osszes { display: flex; flex-direction: column; gap: 2px; margin: var(--s3) 0 var(--s5); }
.varazs-sor {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: var(--s3); align-items: baseline; width: 100%;
  padding: 9px 12px; background: var(--bg-card);
  border: 1px solid transparent; border-radius: var(--r);
  color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
}
.varazs-sor:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
.varazs-sor b { font-size: var(--t-1); font-weight: 600; color: var(--text-muted); }
.varazs-sor span { font-size: var(--t-2); line-height: 1.4; overflow-wrap: anywhere; }
.varazs-sor.ures span { color: var(--text-dim); font-style: italic; }
.varazs-kov { margin-top: var(--s3); }

/* ── Szűk képernyő ──
   375-ön a folyamatjelző oldalra görgethető sáv lesz: a kilenc-tíz pont
   nem törhet öt sorba, mert akkor a szakasz lejjebb csúszna a képből. */
@media (max-width: 767px) {
  /* 🔴 `min-width: 0` és `max-width: 100%` NÉLKÜL a nowrap-sáv NEM görgetni
     kezd, hanem KIFESZÍTI a szülő rácsot: mérve 375 px-en a `.sec-grid`
     1242 px széles lett, és az egész lap oldalra csúszott (103 kilógó elem).
     A grid-cella alapból `min-width: auto` — ez a csapda. */
  .varazslo-mod .sec-grid { min-width: 0; }
  .varazs-jelzo {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s3);
    max-width: 100%; min-width: 0;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .varazs-pont { flex: 0 0 auto; max-width: 60vw; }
  .varazs-lab { gap: var(--s2); }
  .varazs-lab .btn { flex: 1 1 auto; }
  .varazs-szam { width: 100%; margin-right: 0; order: -1; }
  .varazs-sor { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Varázslóban a régi „Az összeállításod" sáv FELESLEGES: a folyamatjelző
   ugyanazt mutatja, csak léptet is. Két egyforma sáv egymás alatt zavaró. */
.varazslo-mod .valasztas-sav { display: none; }
/* A léptetésből kivett segéd-doboz (pl. Arc rögzítése) a lap tetején marad,
   halkabban — nem versenyez a szakasszal, amin épp dolgozol. */
.varazslo-mod .sec[data-nem-varazslo] { margin-bottom: var(--s4); }

/* ============================================================
   A FILM ÚTJA — a teljes folyamat egy sávban  (`wlai_ut()`)
   ------------------------------------------------------------
   2026-08-02. A régi `.terkep` a user szavával „fapados" volt: tizenöt
   egyforma szürke kör, római számokkal elválasztva, és egy 120 px-es
   csonk-csík. Amit a mostani másképp csinál:
     · az öt szakasz NEVET kapott és külön blokkban áll,
     · a lépéseket ÖSSZEKÖTŐ VONAL fűzi fel — a megtett részen tömör,
       előtte halvány: ettől folyamat, nem doboz-sor,
     · ahol állsz, az kiemelt (magenta) és nagyobb,
     · a haladás a teljes szélességben fut.
   A régi `.terkep*` szabályok maradnak: más lapok is használhatják.
   ============================================================ */
/* 🔑 Több levegő (2026-08-04): a doboz zsúfolt volt, tizenöt lépés fért bele
   14 pixeles kereten belül. */
/* ══ A FILM ÚTJA — lime keret, körbejáró magenta fénnyel ══
   A user kérése (2026-08-04): *„vékony lime keretet és egy magenta fény
   folyamatosan járjon körbe lassan, ezzel jelezzük hogy hol lehet a projekt
   utját követni."*

   🔑 HOGYAN JÁR KÖRBE: a `::before` egy FORGÓ kúp-színátmenet (conic-gradient),
   ami kétszer akkora, mint a doboz — így a széle mindig kilóg. A `::after`
   egy 1 pixellel beljebb kezdődő tömör takarás: emiatt a forgó fényből
   CSAK a keret vonalán marad látható egy szakasz. Ez a legmegbízhatóbb út;
   a `mask-composite`-os megoldás régebbi Safariban szétesik.

   🔑 A TARTALOM `z-index: 1` — enélkül a takarás a szöveg FÖLÉ kerülne,
   és a doboz üresnek látszana.

   9 másodperc egy kör: lassú, észrevehető, de nem vonja el a figyelmet. */
.ut {
  position: relative; isolation: isolate;
  margin-bottom: var(--s4); padding: var(--s4) var(--s5) var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--accent-edge); border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  overflow: hidden;
}
/* ── A KÖRBEFORGÓ FÉNY KIKERÜLT (2026-08-05, a user kérése) ──
   A folyamatsáv keretén egy magenta fény futott körbe 9 másodpercenként
   (`conic-gradient` + `ut-korbe`). A user egy képpel jelezte: „itt van valami
   árnyék. Ez nem kell." — a fény sötétebb szakasza tényleg árnyéknak látszik,
   és mivel folyamatosan mozog, a szem újra meg újra odakap.
   🔑 Semmi nem veszett el: a doboz kerete, háttere és árnyéka a `.ut` saját
      szabályaiból jön. Csak a mozgás állt le. */
.ut-fej {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s4); padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.ut-cim {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted);
}
/* A körök és a vonal jelentése — egyszer elolvasod, és utána érted a sávot.
   Szűk helyen elmarad: ott a kör `title`-je mondja meg ugyanezt. */
.ut-magyarazat { font-size: var(--t-1); color: var(--text-dim); line-height: 1.4; }
@media (max-width: 900px) { .ut-magyarazat { display: none; } }
/* A haladás a teljes maradék szélességet megkapja — nem egy csonk a sarokban.
   🔴 2026-08-04, a user: „a zöld csík az Ötlettől indul."
   Eddig a csík a CÍM UTÁN kezdődött (mérve 1440 px-en: x=522), a lépések sávja
   viszont x=276-nál — vagyis a csík nem ahhoz igazodott, aminek a haladását
   mutatja. Saját sorba téve pontosan az ELSŐ lépéstől az UTOLSÓIG ér, tehát a
   kitöltöttsége ránézésre megfeleltethető a köröknek.
   🔑 `flex-basis: 100%` a `.ut-fej` `flex-wrap: wrap`-jével együtt töri új
      sorba — nem kell hozzá a szerkezethez nyúlni. */
.ut-halad { display: flex; align-items: center; gap: 11px; flex: 1 0 100%; min-width: 140px; }
.ut-sav {
  flex: 1 1 auto; height: 6px; border-radius: 3px;
  background: var(--bg-sunken); overflow: hidden; box-shadow: inset 0 0 0 1px var(--card-ring);
}
.ut-sav i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-line), var(--accent));
  transition: width 0.45s cubic-bezier(.4,0,.2,1);
}
.ut-halad em {
  font-style: normal; font-family: var(--font-gep); font-size: var(--t-1);
  color: var(--text-dim); white-space: nowrap;
}

/* ── Az öt szakasz ──
   🔴 2026-08-02: `flex: 0 0 auto` volt, ezért a szakaszok balra tömörültek, és
   egy 1660 px-es ablakban a jobb harmad ÜRESEN maradt. A user: „teljes képen
   kérem." Most a szakaszok a lépéseik SZÁMÁVAL arányosan osztják el a helyet
   (a Forgatás két lépés, az Utómunka öt — nem egyforma széles a kettő), és a
   lépések is nyúlnak. Szűk képernyőn visszaáll a görgethető, tömör alakra. */
/* 🔑 A SZAKASZOK LÁTHATÓAN ELVÁLNAK (2026-08-04). Eddig csak egy 16 pixeles
   hézag választotta el őket, és a tizenöt kör egyetlen összefolyó sornak
   látszott — nem lehetett megmondani, hol ér véget a Forgatás és hol kezdődik
   az Utómunka. Most halvány függőleges vonal és több hely van közöttük. */
/* 🔴🔴 2026-08-06 — A LÉPÉS-FELIRATOK EGYMÁSBA LÓGTAK A SZAKASZHATÁRON.
   Mérve 1280 px-en, belépve, angol felülettel: „Export" és „Cover and post"
   **11 px-nyi átfedés**, „Ambient sound" és „Quality check" **7 px**.
   🔑 A GYÖKÉR-OK: a szakasz `min-width: 0`-val ANNYIRA zsugorodhatott, hogy a
      benne lévő lépések már nem fértek el — mérve: **az utolsó lépés 46 px-szel
      kilógott a saját szakasz-dobozából**, bele a szomszéd szakaszba.
      A `.ut-nev { max-width: 78px }` ezen nem segít: nem a felirat széles,
      hanem a doboza keskeny.
   ➡️ A szakasz nem mehet a tartalma alá (`min-content`), és ha így nem fér ki
      egy sorba, a sáv TÖRDEL. Mérve: átfedés **2 → 0**, vízszintes görgetés
      **0**, a sáv 1280-on két sorba rendeződik, 1920 fölött marad egy sor. */
.ut-szakaszok { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s5); overflow-x: auto; padding-bottom: 4px; }
.ut-szakasz { flex: 1 1 auto; min-width: min-content; position: relative; }

/* ══ 🔴 2026-08-07 — A MÁSODIK SORBA TÖRDELT SZAKASZ SZÉTTERÜLT ═════════
   A user egy képernyőképpel: „pici monitoron ez zavaró így."
   📏 MÉRVE (1150 px széles sávnál): az első sorban a lépések 65-88 px
      szélesek, a második sorban egyedül maradó „Ha kell" hármas viszont
      **1104 px-re feszült — 368 px per lépés**, a normál ötszöröse. A három
      kör így a fél képernyő távolságában állt egymástól.
   🔑 A GYÖKÉR-OK a `flex: 1 1 auto`: egy sorban négy szakasz osztozik a
      helyen, de amikor az ötödik magára marad, ugyanaz a `flex-grow` az
      EGÉSZ sort neki adja.
   ➡️ Ez az egy szakasz nem nyúlik, hanem a tartalma szerint áll.
   🔑 Nagy képernyőn, ahol mind az öt szakasz egy sorba fér, semmi nem
      változik: a másik négy tölti ki a helyet, ahogy eddig. */
.ut-szakasz--hakell { flex: 0 1 auto; }

/* ══ 🔴🔴 2026-08-07 — A „HA KELL" HÁRMAS TÖMÖR SOR LETT ════════════════
   A user egy képernyőképpel: „ezzel nem vagyok kibékülve" — és a kérdésemre
   MIND A NÉGY kifogást bejelölte: a lógó vonal, a külön sor, az üres közök és
   az egész megjelenése.

   📏 Amit mértem: a csoport a sáv KÖZEPÉN lebegett 174 px-en, a bal szélén egy
      1 px-es szakasz-ELVÁLASZTÓ vonallal — ami a sor ELEJÉN semmit nem
      választ el —, a 28 px-es körök között 30 px üres hellyel és összekötő
      vonallal. Vagyis a fő menet formanyelvét viselte, pedig nem a menet.

   🔑 A HÁROM LÉPÉS OPCIONÁLIS: nem sorrend, hanem LISTA. Ezért nem
      folyamatsávként áll, hanem tömör felsorolásként — kis állapot-körrel és
      a név MELLETTE, nem alatta.
   🔑 CSAK CSS: a HTML és a linkek változatlanok, tehát a kattinthatóság, a
      `title` és az állapot-színek (kész · elavult · itt) mind megmaradnak.
   🔑 A 44 px-es tapintható magasság megmarad — a kör lett kisebb, nem a
      célpont. */
.ut-szakasz--hakell::before { display: none; }        /* a semmit elválasztó vonal */
.ut-szakasz--hakell .ut-szak-nev { justify-content: flex-start; margin-bottom: 6px; }
.ut-szakasz--hakell .ut-lepesek { flex-wrap: wrap; gap: 2px 6px; justify-content: flex-start; }
.ut-szakasz--hakell .ut-lepes {
  flex: 0 0 auto; max-width: none; min-width: 0;
  flex-direction: row; gap: 7px; padding: 4px 10px 4px 6px;
}
.ut-szakasz--hakell .ut-lepes::before { display: none; }   /* az összekötő vonal */
.ut-szakasz--hakell .ut-kor { width: 20px; height: 20px; font-size: var(--t-0); border-width: 2px; }
.ut-szakasz--hakell .ut-kor .i { width: 11px; height: 11px; }
.ut-szakasz--hakell .ut-nev {
  max-width: none; min-height: 0; text-align: left; -webkit-line-clamp: 1;
  font-size: var(--t-1);
}

/* 🔴🔴 …DE A BAJ ÁLTALÁNOSABB VOLT — ezt a MÁSODIK mérés mutatta meg.
   A „Ha kell" megjavítása után 900-1000 px-en a **Közzététel** terült szét
   ugyanígy (**329 és 379 px per lépés**): bármelyik szakasz megkapja a hibát,
   amelyik a második sorba kerül, és ott sok hely marad neki.
   ➡️ A LÉPÉS MAGA NEM NYÚLHAT A VÉGTELENSÉGIG. A 120 px mért érték: az első
      sorban a lépések 62-92 px szélesek, tehát ez nem szorítja össze őket,
      csak a szétterülést fogja meg.
   🔑 `justify-content: center`: a megmaradt hely a szakasz SZÉLEIN oszlik el,
      nem a lépések KÖZÖTT — így a körök egymás mellett maradnak, ahogy egy
      folyamatsávon kell. */
.ut-lepes   { max-width: 120px; }
.ut-lepesek { justify-content: center; }
.ut-szakasz + .ut-szakasz::before {
  content: ""; position: absolute; left: calc(var(--s5) / -2); top: 2px; bottom: 6px;
  width: 1px; background: var(--border);
}
/* 🔑 A SZAKASZ NEVE A SAJÁT SZAKASZA KÖZEPÉN ÁLL (a user kérése, 2026-08-04).
   Balra igazítva úgy nézett ki, mintha az első lépéshez tartozna; középen
   viszont látszik, hogy az EGÉSZ csoport fölé tartozik. */
.ut-szak-nev {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-bottom: 10px;
  font-size: var(--t-0); font-weight: 600; color: var(--text-dim); white-space: nowrap;
}
.ut-szak-nev i {
  font-style: normal; font-family: var(--font-gep); font-size: var(--t-0);
  letter-spacing: 0.08em; color: var(--text-dim); opacity: 0.7;
}
/* A kész szakasz neve is jelzi magát — nem kell külön pipa. */
.ut-szakasz.kesz .ut-szak-nev { color: var(--accent-ink); }
.ut-szakasz.kesz .ut-szak-nev i { opacity: 1; }

/* ── A lépések, összekötő vonallal ── */
.ut-lepesek { display: flex; align-items: flex-start; }
.ut-lepes {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  /* 2026-08-05: a KÖR marad 28 px (a sáv arányai nem változnak), de a
     kattintható doboz 44 px magas lesz — a tizenhárom lépés kis célpont volt
     telefonon, és pont ez a fő navigáció a menetben. */
  min-height: 44px; min-width: 58px; padding: 3px 4px 5px; border-radius: var(--r);
  text-decoration: none; color: inherit; transition: background 0.14s;
}
.ut-lepes:hover { background: var(--bg-card-hover); }
/* A VONAL: a kör közepének magasságában fut az előző körig. A megtett
   szakaszon tömör, előtte halvány — ez adja a folyamat érzetét. */
.ut-lepes::before {
  content: ""; position: absolute; left: -50%; right: 50%; top: 15px;
  height: 2px; background: var(--border); z-index: 0;
}
.ut-lepesek > .ut-lepes:first-child::before { display: none; }
/* 🔴 A user kérése (2026-08-04): „a már befejezett lépések tömör zöld és a csík
   zöldből magentába színátmenettel — a magenta CSAK az utolsó két elem között
   jelenik meg."
   A megtett szakaszok tömör zöldek maradnak; egyedül az AKTUÁLIS lépéshez vezető
   vonal vált magentába. Így a szem odaugrik, ahol éppen állsz, és a magenta nem
   szóródik szét az egész sávon — ugyanaz az elv, mint a magenta körnél. */
/* 🔑 A `megtett` MINDEN lépésre rákerül az elsőtől az aktuálisig — nem csak a
   késszel megjelöltekre. Így a zöld az Ötlettől indul MINDEN lapon, ahogy a
   user kérte; a kitöltöttséget a körök mutatják, nem a vonal.
   ⚠️ Az `itt` szabály SZÁNDÉKOSAN a `megtett` UTÁN áll: azonos a súlyuk
      (egy osztály + egy elem), tehát a későbbi nyer — az aktuális lépéshez
      vezető szakaszon az átmenet kell, nem a tömör zöld. */
/* 🔴 A `kesz` SZÁNDÉKOSAN KIMARADT innen. Mérve a Kutatás lapon: a Forgatókönyv
   „kész” jelölést kapott (mert egy nyitómondat el volt mentve hozzá), és a
   vonala zöld lett — vagyis a zöld TÚLFUTOTT azon a lépésen, ahol állunk.
   A vonal az UTAT mutatja (meddig jutottál), a kitöltöttséget a KÖRÖK mutatják.
   A kettőt keverve a sáv két különböző dolgot mondott egyszerre. */
.ut-lepes.megtett::before { background: var(--accent-line); }
.ut-lepes.itt::before {
  background: linear-gradient(90deg, var(--accent-line) 0%, var(--accent2) 100%);
}
.ut-kor {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 2px solid var(--border-strong);
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600; color: var(--text-dim);
  transition: transform 0.16s, background 0.16s, border-color 0.16s;
}
.ut-kor .i { width: 14px; height: 14px; vertical-align: 0; stroke-width: 3; }
/* 🔴 FIX MAGASSÁG (2026-08-04). Eddig csak a sorok SZÁMA volt korlátozva
   (`line-clamp: 2`), a magasság nem — ezért az egysoros nevek („Ötlet",
   „Zene") rövidebb dobozt kaptak, mint a kétsorosak („Kamera és fény",
   „Vágás és ritmus", „Miniatűr és poszt”), és a sor hullámzott.
   Két sornyi hely MINDIG van: így a tizenöt kör egy vonalban áll. */
.ut-nev {
  max-width: 78px; min-height: 2.5em;
  font-size: var(--t-0); line-height: 1.25; text-align: center; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* KÉSZ — kitöltött, pipás */
.ut-lepes.kesz .ut-kor { background: var(--accent); border-color: var(--accent-line); color: var(--accent-text); }
.ut-lepes.kesz .ut-nev { color: var(--text-muted); }
/* ELKEZDVE — félig */
.ut-lepes.elkezdve .ut-kor { border-color: var(--accent-edge); color: var(--accent-ink); background: var(--accent-soft); }
/* FRISSÍTENDŐ — figyelmeztető keret */
.ut-lepes.elavult .ut-kor { border-color: var(--warn-border); color: var(--warn-text); background: var(--warn-bg); }
/* AHOL ÁLLSZ — nagyobb és magenta, ahogy a user mutatta */
.ut-lepes.itt .ut-kor {
  transform: scale(1.16);
  background: var(--accent2); border-color: var(--accent2-line); color: var(--szines-text, var(--m-feher));
  box-shadow: 0 0 0 4px var(--accent2-soft, rgba(var(--m-magenta-rgb),.16));
}
.ut-lepes.itt .ut-nev { color: var(--accent2); font-weight: 600; }
.ut-lepes:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ── TÖMÖR változat: az eszközlapok tetején ──
   Ott a szakasz a munka, nem a térkép: alacsonyabb, és csak annak a lépésnek
   írjuk ki a nevét, ahol épp állsz — a többi kör magáért beszél. */
/* 🔴 EGYSÉGES MINDEN LAPON (a user kérése, 2026-08-04): *„minden oldalon ott
   van, de mindenhol máshogy néz ki. Egységes kell legyen, és ha szerkesztem,
   akkor mindenhol módosulnia kell."*

   Eddig a tömör változat MÁSIK ARCOT mutatott: eltűnt a cím, eltűnt MIND A
   TIZENÖT lépés neve, és kisebbek voltak a körök — vagyis ugyanaz az elem az
   eszközlapokon felismerhetetlen volt a projekt-laphoz képest.

   Most a KÜLÖNBSÉG CSAK A KERET: kevesebb belső margó, hogy az eszközlapon ne
   vigye el a helyet a munka elől. Minden más — a cím, a nevek, a körök, a
   szakasz-feliratok — a KÖZÖS szabályokból jön. Egy helyen szerkeszted, és
   mindenhol változik. */
.ut--tomor { padding: 12px 16px 11px; margin-bottom: var(--s3); }
.ut--tomor .ut-fej { margin-bottom: 12px; padding-bottom: 9px; }

/* ── Szűk képernyő ──
   A sáv oldalra görgethető. 🔑 `min-width: 0` KELL a görgethető ősre is,
   különben nem görget, hanem kifeszíti a lapot (ez a varázsló-jelzőnél már
   egyszer 1242 px-es rácsot csinált 375-ön). */
.ut, .ut-szakaszok { min-width: 0; max-width: 100%; }
@media (max-width: 767px) {
  .ut { padding: 12px 12px 10px; }
  .ut-fej { gap: var(--s3); }
  .ut-cim { font-size: var(--t-0); }
  .ut-szakaszok { gap: var(--s3); }
  .ut-nev { display: none; }
  .ut-lepes { min-width: 40px; }
  .ut-lepes.itt .ut-nev { display: block; }
}

/* Szűk képernyőn a szakaszok NE nyúljanak: ott a görgetés a helyes válasz,
   különben a tizenöt lépés összepréselődne olvashatatlanra. */
@media (max-width: 1099px) {
  .ut-szakasz { flex: 0 0 auto; }
  .ut-lepes   { flex: 0 0 auto; }
}

/* 🗑️ ITT ÁLLT A LAP ALJI TÖRLŐ-SÁV — TÖRÖLVE (2026-08-03).
   A 08-02-i döntés az volt, hogy a veszélyes műveletnek a lap alján, halkan a
   helye. A user ezt visszautasította: „nagyon rossz helyre tetted, magenta
   színnel kell a gomb és valami jól látható helyre tedd."
   → A gomb a lap TETEJÉRE került, a projekt neve fölé (`.proj-fejsor`), és a
   megerősítő kérdés maradt a védőháló. */

/* ── JELSZÓ-ERŐSSÉG MÉRŐ  (`wlai_jelszo_ero()`) ──
   2026-08-02, a user kérése. Négy szakasz, alattuk egy szó és egy mondat:
   a szó az ítélet, a mondat megmondja, MIT tegyél, hogy jobb legyen.
   A szín önmagában nem hordoz információt (a szó mindig ott van) — így
   színtévesztéssel is olvasható. */
.jero { margin-top: 7px; }
.jero-sav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.jero-sav i {
  display: block; height: 4px; border-radius: 2px;
  background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--card-ring);
  transition: background 0.2s;
}
.jero-alsó { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.jero-alsó b { font-size: var(--t-1); font-weight: 700; letter-spacing: 0.01em; }
.jero-alsó span { font-size: var(--t-1); line-height: 1.4; color: var(--text-dim); }

.jero.p0 .jero-sav i:nth-child(1) { background: var(--m-piros); }
.jero.p0 .jero-alsó b { color: var(--m-piros); }
.jero.p1 .jero-sav i:nth-child(-n+2) { background: var(--m-borostyan); }
.jero.p1 .jero-alsó b { color: var(--m-borostyan-mely); }
.jero.p2 .jero-sav i:nth-child(-n+3) { background: var(--m-lime-kozep); }
.jero.p2 .jero-alsó b { color: var(--m-lime-ink); }
.jero.p3 .jero-sav i { background: var(--accent-line); }
.jero.p3 .jero-alsó b { color: var(--accent-ink); }
:root[data-theme="dark"] .jero.p1 .jero-alsó b { color: var(--m-borostyan); }
:root[data-theme="dark"] .jero.p2 .jero-alsó b { color: var(--m-lime-sotet); }

/* A belépő képernyőn a mezők keskenyebbek — ott is elférjen. */
.lp-mezo .jero { margin-top: 8px; }

/* ============================================================
   SUPERADMIN felület  (`muhely/admin.php`)
   2026-08-02. Csak az admin látja; másnak a lap 404.
   ============================================================ */
.adm-szamok {
  display: grid; gap: var(--s3); margin-bottom: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.adm-szam {
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 17px 14px; background: var(--bg-card);
  border: 1px solid transparent; border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
}
.adm-szam b {
  font-family: var(--font-fo); font-size: var(--t-6); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--text);
}
.adm-szam span { font-size: var(--t-1); font-weight: 600; color: var(--text-muted); }
.adm-szam em { font-style: normal; font-size: var(--t-0); color: var(--text-dim); }
/* A fizető felhasználók száma a legfontosabb szám a lapon. */
.adm-szam.kiemelt { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-edge), var(--shadow-1); }
.adm-szam.kiemelt b { color: var(--accent-ink); }

/* ── A táblázat ──
   Vízszintesen görgethető saját dobozban: a lap maga SOHA nem csúszhat
   oldalra (ez a szabály minden széles tartalomra áll). */
.adm-tabla-doboz {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card);
}
.adm-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
.adm-tabla th {
  position: sticky; top: 0; z-index: 1;
  padding: 11px 14px; text-align: left; white-space: nowrap;
  background: var(--bg-sunken); border-bottom: 1px solid var(--border);
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
}
.adm-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.adm-tabla tr:last-child td { border-bottom: 0; }
.adm-tabla tbody tr:hover { background: var(--bg-card-hover); }
.adm-tabla td b { display: block; font-weight: 600; }
.adm-tabla td em { display: block; font-style: normal; font-size: var(--t-1); color: var(--text-dim); }
.adm-tabla .szam { text-align: right; font-family: var(--font-gep); }
.adm-jel { display: block; margin-top: 3px; font-size: var(--t-0); color: var(--text-dim); }
.adm-tabla .badge { margin-left: 6px; }

/* A superadmin bejárata a fiók-lapon — csak az admin látja. */
.adm-belepo {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5); padding: 14px 18px;
  background: var(--bg-card); border: 1px solid var(--accent-edge); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.adm-belepo:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.adm-belepo-ikon { display: inline-flex; color: var(--accent-ink); }
.adm-belepo-ikon .i { width: 20px; height: 20px; }
.adm-belepo-txt { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.adm-belepo-txt b { font-size: var(--t-2); font-weight: 600; }
.adm-belepo-txt em { font-style: normal; font-size: var(--t-1); color: var(--text-dim); }
.adm-belepo > .i:last-child { color: var(--text-dim); }

/* ============================================================
   REFERENCIA-KÉPEK (Karakter-építő „Arc rögzítése" + projekt-lap)
   ------------------------------------------------------------
   A csempe négyzet alakú, a kép `object-fit: cover` — így egy álló
   és egy fekvő kép egymás mellett is rendezett sort ad. A rács
   magától tördel: telefonon két oszlop, nagy képernyőn hat.
   ============================================================ */
.kepdoboz {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  min-width: 0;
}
/* ── CSUKHATÓ VÁLTOZAT (2026-08-05) ────────────────────────
   A projekt-lapon ez a doboz nyolc lépésen ismétlődik, és fél képernyőt vitt
   el a munka elől. Csukva egy sor — a képek száma a fejlécben marad látható.
   🔑 Saját osztály, nem a `.segeddoboz` átvétele: egy osztálynevet a stílusáért
      átvenni mellékhatást hoz. */
.kepdoboz--csukhato > summary {
  cursor: pointer; list-style: none; position: relative; padding-right: 32px;
  margin-bottom: 0;
}
.kepdoboz--csukhato > summary::-webkit-details-marker { display: none; }
.kepdoboz--csukhato > summary::after {
  content: ""; position: absolute; right: 6px; top: 12px; width: 8px; height: 8px;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg); transition: transform .18s ease;
}
.kepdoboz--csukhato[open] > summary::after { transform: rotate(-135deg); top: 15px; }
.kepdoboz--csukhato[open] > summary { margin-bottom: var(--s3); }
/* Csukva a magyarázó mondat sem kell — a cím és a darabszám elmondja a lényeget. */
.kepdoboz--csukhato:not([open]) > summary > span { display: none; }
.kepdoboz-db {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-edge); border-radius: var(--r);
}
.kepdoboz-fej { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s3); }
.kepdoboz-fej b { font-size: var(--fs-h3); font-weight: 600; }
.kepdoboz-fej span { font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.5; }

.kep-racs {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  min-width: 0;
}
.kep-csempe {
  position: relative; margin: 0; min-width: 0;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.kep-csempe > a { display: block; aspect-ratio: 1 / 1; background: var(--bg-sunken); }
.kep-csempe img {
  display: block; width: 100%; height: 100%; max-width: 100%;
  object-fit: cover;
}
.kep-csempe figcaption {
  padding: 7px 9px; border-top: 1px solid var(--border); background: var(--bg-card);
  min-width: 0;
}
.kep-csempe figcaption b {
  display: block; font-size: var(--t-1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kep-csempe figcaption em {
  display: block; font-style: normal; font-family: var(--font-gep);
  font-size: var(--t-0); color: var(--text-dim); margin-top: 1px;
}
/* A törlés-gomb a kép sarkában ül. Telefonon nincs egérmutatás, ezért
   ott mindig látszik — a `hover` csak a mutatós gépeken rejti el. */
.kep-torol {
  position: absolute; top: 5px; right: 5px;
  background: var(--bg-blur); border-color: var(--border-strong);
  backdrop-filter: blur(6px);
}
.kep-torol:hover { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
@media (hover: hover) and (pointer: fine) {
  .kep-torol { opacity: 0; transition: opacity .15s; }
  .kep-csempe:hover .kep-torol, .kep-torol:focus-visible { opacity: 1; }
}

/* ── „ÍRD LE A KÉPET” (2026-08-06) ───────────────────────────
   A gomb a csempe ALJÁN ül, teljes szélességben és felirattal — nem egy
   második ikon a sarokban. Egy sarok-ikon itt nem mondaná meg, mit csinál,
   és a törlés mellett össze is lehetne téveszteni vele.
   🔑 44 px magas: minden kattintható elem tapintható méretű (a 2026-08-05-i
      mérés után 0 elem maradt a küszöb alatt — ez se essen vissza). */
.kep-elemez {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px; border-radius: 0;
  border: 0; border-top: 1px solid var(--border);
  font-size: var(--t-1); font-weight: 600;
}
.kep-elemez .i { width: 15px; height: 15px; flex: 0 0 auto; }
/* A felirat elfogy, ha a csempe szűk — az ikon akkor is megmondja, mi ez. */
.kep-elemez span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kep-elemez:disabled { opacity: .55; cursor: progress; }

.kep-ures { margin: 0; font-size: var(--fs-meta); color: var(--text-dim); }
.kep-ures[hidden] { display: none; }

.kep-labsav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s4);
}
.kep-labsav small { font-size: var(--t-1); color: var(--text-dim); flex: 1 1 200px; }
.kep-gomb { cursor: pointer; }

.kep-jelzes { margin: 10px 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--text-muted); }
.kep-jelzes.ok { color: var(--text); font-weight: 600; }
.kep-jelzes.hiba { color: var(--warn-text); font-weight: 600; }

/* ============================================================
   SUPERADMIN — a szakasz-menü és a lapok közös elemei
   ------------------------------------------------------------
   A `muhely/admin.php` a belépő, minden szakasz saját lap. A menü
   egyetlen helyről épül (`wlai_admin_lapok()`), és mindenhol
   ugyanaz — így nem lehet elveszni benne.
   ============================================================ */
/* ── VISSZAÚT (2026-08-05) ─────────────────────────────────
   A user: „az oldalakról nem lehet visszatérni az előzőre." Ugyanaz a forma
   fent és lent, ugyanaz, mint a Műhely-eszközökön a „A folyamathoz". */
.adm-pbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s4);
}
.adm-vissza {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; text-decoration: none;
  background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--r);
  color: var(--text); font-size: var(--fs-meta); font-weight: 600; transition: all .15s;
}
.adm-vissza:hover { border-color: var(--accent-line); background: var(--bg-card-hover); }
.adm-vissza--halvany { color: var(--text-muted); }
.adm-pbar-most {
  font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-edge); border-radius: var(--r); padding: 3px 8px;
}
/* A lap ALJÁN is — hosszú listákon a fejléc rég kigörgött a képernyőről. */
.adm-lab {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--border);
}

/* ── A MENÜ HÁROM CSOPORTBAN (2026-08-05) ──────────────────
   Tíz egyforma gomb egy sorban lista volt, nem menü. */
.adm-menu {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3) var(--s5);
  margin: 0 0 var(--s5); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}
.adm-menu-csoport { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adm-menu-cim {
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim);
}
.adm-menu-sor { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* A belépő a csoportok ELŐTT áll, és nem tartozik egyikhez sem — ezért kap
   egy kis elválasztó vonalat maga után. */
.adm-menu-belepo { align-self: flex-end; margin-right: var(--s2); }

/* ── A SZÁMOK HÁROM BLOKKBAN (2026-08-05) ──────────────────
   Tizenegy egyforma doboz nem mondta meg, mit kell megnézni és mit csinálni. */
.adm-blokk { margin-bottom: var(--s5); }
.adm-blokk-cim {
  margin-bottom: var(--s3);
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim);
}
.adm-menu-elem {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s4);
  font-size: var(--t-2); font-weight: 600; text-decoration: none; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  transition: background .15s, border-color .15s, color .15s;
}
.adm-menu-elem:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--border-strong); }
.adm-menu-elem.aktiv {
  background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line);
}
.adm-menu-elem .i { width: 15px; height: 15px; }

/* Visszajelzés egy művelet után — a lap tetején, nem felugró ablakban. */
.adm-uzenet {
  margin: 0 0 var(--s5); padding: 12px 16px;
  border-radius: var(--belso-sarok); font-size: var(--t-2); line-height: 1.5;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink);
}

.adm-urlap { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.adm-urlap .mezo-racs { width: 100%; }
.adm-jelolo { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-2); cursor: pointer; }
.adm-jelolo input { width: 17px; height: 17px; accent-color: var(--accent-line); }

/* A kód maga: gépbetű, ritkítva — telefonról is le lehet olvasni. */
.adm-kod {
  font-family: var(--font-gep); font-size: var(--t-2); letter-spacing: 1.2px;
}
.adm-muvelet { white-space: nowrap; }
.adm-muvelet .adm-mini-urlap { display: inline-block; margin-right: 6px; }
.adm-muvelet .adm-mini-urlap:last-child { margin-right: 0; }

/* A belépő „hova tovább" kártyái — ugyanaz a forma, mint a gép-ajánlásé. */
a.adm-kartya { text-decoration: none; color: inherit; display: block; transition: border-color .15s, background .15s; }
a.adm-kartya:hover { border-color: var(--accent-line); background: var(--accent-soft); }
a.adm-kartya b { display: flex; align-items: center; gap: var(--s2); }
a.adm-kartya .i { width: 16px; height: 16px; color: var(--accent-ink); }

/* ── A szám-kártya, ami VISZ is valahova ──────────────────────
   A user kifogása: „a tabok nem kattinthatóak". Amelyik szám mögött van lap,
   az mostantól link — és ránézésre is látszik rajta. */
a.adm-szam-link { text-decoration: none; color: inherit; cursor: pointer; }
a.adm-szam-link:hover {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2);
  transform: translateY(-1px);
}
a.adm-szam-link { transition: box-shadow .15s, border-color .15s, transform .12s; }
a.adm-szam-link:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ============================================================
   SUPERADMIN — FELHASZNÁLÓ-KÁRTYÁK (a Slepnex platform-lapjainak formája)
   ------------------------------------------------------------
   Táblázat helyett kártya: egy fiókról nyolc adatot mutatunk, az egy sorba
   nem fér el olvashatóan. A műveletek a kártya alján, elválasztva — a
   törlés a jobb szélen, külön, mert visszafordíthatatlan.
   ============================================================ */
.adm-szuro {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-bottom: var(--s5);
}
.adm-szuro-elem {
  display: inline-flex; align-items: center; height: auto; padding: 0 var(--s3);
  font-size: var(--gomb-betu-meret); font-weight: 600; text-decoration: none; color: var(--text-muted);
  background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--gomb-sarok);
  transition: background .15s, color .15s, border-color .15s;
}
.adm-szuro-elem:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--border-strong); }
.adm-szuro-elem.aktiv { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.adm-szuro-db { margin-left: auto; font-size: var(--t-1); color: var(--text-dim); font-family: var(--font-gep); }

.adm-kartya-user {
  margin-bottom: var(--s4); padding: var(--s4) var(--s5) var(--s3);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  min-width: 0;
}
/* A felfüggesztett fiók ránézésre más — nem kell elolvasni a jelvényt. */
.adm-kartya-user.tiltott { background: var(--warn-bg); border-color: var(--warn-border); }

.auk-fej {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3);
  padding-bottom: var(--s3);
}
.auk-nev { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-right: auto; }
.auk-nev b { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; }
.auk-nev code {
  font-family: var(--font-gep); font-size: var(--t-1); color: var(--text-dim);
  background: var(--bg-sunken); padding: 2px 7px; border-radius: var(--r); align-self: flex-start;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.auk-jelek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.auk-allapot { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-1); color: var(--text-dim); }
.auk-allapot.el { color: var(--accent-ink); font-weight: 600; }
.badge--tilt { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }

/* 2026-10-06: az adatok egy tömör, tördelődő sorban („rendezzük össze”). */
.auk-adatok {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  padding: var(--s3) 0; border-top: 1px solid var(--border);
  font-size: var(--t-1); color: var(--text-dim);
}
.auk-adatok b { font-weight: 600; color: var(--text); }

.auk-muveletek { padding-top: var(--s3); border-top: 1px solid var(--border); }
.auk-sor:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.auk-tobb { margin-left: auto; }
.auk-tobb .i { transition: transform .15s; }
.auk-tobb[aria-expanded="true"] .i { transform: rotate(180deg); }
.auk-tobb-sor:not([hidden]) { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--border); }

/* A kereső: név, e-mail vagy licencszám. */
.auk-kereso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.auk-kereso-mezo {
  flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: var(--s2);
  height: 40px; padding: 0 var(--s3); background: var(--bg-card);
  border: 1px solid var(--field-border); border-radius: var(--r);
}
.auk-kereso-mezo:focus-within { border-color: var(--accent-line); }
.auk-kereso-mezo .i { width: 16px; height: 16px; color: var(--text-dim); flex: none; }
.auk-kereso-mezo input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--t-2); color: var(--text);
}
.auk-licenc {
  font-family: var(--font-gep); font-size: var(--t-1); color: var(--text);
  background: var(--bg-sunken); padding: 2px 7px; border-radius: var(--r);
  border: 1px solid var(--border); max-width: 100%; overflow-wrap: anywhere;
}
/* 🔴 2026-09-28: `flex-wrap` nélkül a választó + gomb 375 px-en 23 px-szel
   kilógott a kártyából (a lap oldalra görgetett). */
.auk-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; max-width: 100%; }
.auk-form select {
  height: 32px; padding: 0 var(--s2); font-size: var(--t-1); font-family: inherit;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--field-border); border-radius: var(--r);
}
/* A törlés a jobb szélre kerül, a többitől elszakítva: külön mozdulat kell hozzá. */
.auk-torles { margin-left: auto; }

/* ============================================================
   MEGHÍVÓK — a Slepnex platform-lapjának felépítése
   ============================================================ */
.mh-mod {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
}
.mh-mod > b { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-2); }
.mh-mod > b .i { width: 16px; height: 16px; color: var(--accent-ink); }
.mh-mod-gombok { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mh-mod-gomb {
  height: 32px; padding: 0 var(--s3); font-family: inherit; font-size: var(--t-1); font-weight: 600;
  color: var(--text-muted); background: var(--bg-sunken);
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mh-mod-gomb:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--border-strong); }
.mh-mod-gomb.aktiv { background: var(--accent); color: var(--accent-text); border-color: var(--accent-line); }
.mh-mod-mit { flex: 1 1 260px; font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; }

.mh-szamok { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Bal hasáb az űrlap, jobb hasáb a lista — ahogy a mintában. Szűk helyen
   egymás alá kerül, a lista előre. */
.mh-racs { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
/* 🔑 `minmax(0, 1fr)`, nem `1fr`: a puszta `1fr` alsó határa a TARTALOM
   minimális szélessége, ezért 375 px-en a doboz 434 px-re feszült, és a lap
   oldalra csúszott. Mérve — 74 px túlcsordulás, 56 kilógó elem. */
@media (max-width: 1100px) { .mh-racs { grid-template-columns: minmax(0, 1fr); } }
.mh-racs > * { min-width: 0; }
.mh-urlap-doboz { align-self: start; }
.mh-urlap { display: flex; flex-direction: column; gap: var(--s3); }
.mh-urlap .mezo-racs { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.mh-urlap .field { min-width: 0; }
.mh-urlap input, .mh-urlap select, .mh-urlap textarea { max-width: 100%; }

.mh-lista { display: flex; flex-direction: column; gap: var(--s3); }
.mh-tetel {
  padding: var(--s3) var(--s4); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0;
}
.mh-tetel.halvany { opacity: 0.62; }
.mh-tetel-fo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* A kód és a link is EGY kattintással másolható — a gomb maga a szöveg. */
.mh-kod, .mh-link {
  font-family: var(--font-gep); cursor: copy; border-radius: var(--gomb-sarok);
  border: 1px solid transparent; font-size: var(--gomb-betu-meret);
}
.mh-kod {
  padding: 4px 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-edge);
}
.mh-link {
  flex: 1 1 200px; min-width: 0; max-width: 100%; padding: 4px 9px; font-size: var(--gomb-betu-meret); text-align: left;
  color: var(--text-dim); background: var(--bg-sunken);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mh-kod:hover, .mh-link:hover { border-color: var(--accent-line); }
.mh-kod.masolva, .mh-link.masolva { background: var(--accent); color: var(--accent-text); }
.mh-cimke { font-style: normal; font-size: var(--t-1); font-weight: 600; color: var(--text-muted); }
.mh-cimzett, .mh-bevalto, .mh-jegyzet { font-size: var(--t-1); color: var(--text-dim); }
.mh-bevalto { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-weight: 600; }
.mh-bevalto .i { width: 13px; height: 13px; }
.mh-jegyzet { flex: 1 0 100%; font-style: italic; }

.mh-tetel-adat {
  display: grid; gap: var(--s2) var(--s4); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border);
}
.mh-tetel-adat > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mh-tetel-adat span {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim); font-family: var(--font-gep);
}
.mh-tetel-adat b { font-size: var(--t-1); font-weight: 600; }
.mh-tetel-muvelet {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border);
}

/* ============================================================
   2026-08-03 — hat bejelentett kifogás javítása
   ============================================================ */

/* ── 1. A PRO-FELHÍVÁS: legyen látható ────────────────────────
   „ez a felhivás legyen figyelmfelkeltőbb és lehet rajta mozgó fénycsik is.
    használhatod a magenta és lime szineket is stilusosan."
   A fénycsík BALRÓL JOBBRA fut át a sávon, lassan. Aki mozgás-mentes
   felületet kért a rendszerében, annál nem indul el (lásd a szabály alján). */
.pro-hivas {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5); padding: 16px 20px;
  font-size: var(--t-2); font-weight: 600; line-height: 1.5; color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--accent2); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--accent2-soft, transparent), var(--shadow-2);
}
/* Bal szélen egy vastag, lime→magenta csík: ez fogja meg a szemet elsőként. */
.pro-hivas::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}
/* A futó fény. Ferde, halvány, és NEM takarja a szöveget. */
.pro-hivas::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg,
      transparent, rgba(var(--m-lime-rgb),0.30) 40%, rgba(var(--m-magenta-rgb),0.22) 60%, transparent);
  transform: skewX(-18deg);
  animation: pro-feny 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pro-feny {
  0%   { left: -60%; }
  55%  { left: 115%; }
  100% { left: 115%; }
}
.pro-hivas-ikon { display: inline-flex; flex: none; color: var(--accent2); margin-left: 4px; }
.pro-hivas-ikon .i { width: 20px; height: 20px; }
.pro-hivas b { font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .pro-hivas::after { animation: none; display: none; }
}

/* ── 2. A `£` BETŰTÍPUSA ──────────────────────────────────────
   A user: „A £ jel borzalmas… és a £ betütipusát cseréld le majd."
   A megjelenítő betű (Bricolage Grotesque) fontja csúnyán rajzolja a font
   jelét. Az ÁR ezért az IBM Plex Sansot kapja, ahol a `£` rendes formájú —
   a szám továbbra is ugyanolyan nagy és vastag marad. */
.csomag-ar b, .lp-osszeg, .lp-ar, .ar-szam {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: "tnum" 1;   /* egyforma széles számjegyek */
}

/* ── 3. LAKAT a menüpontok mellé ──────────────────────────────
   „tegyél egy lakatot hogy egyértelmű legyen hogy előfizetés kell hozzá." */
.lep-lakat { display: inline-flex; align-items: center; flex: none; margin-left: auto; color: var(--text-dim); }
.lep-lakat .i { width: 13px; height: 13px; vertical-align: 0; }
.sav-lepes:hover .lep-lakat, .szak-fej:hover .lep-lakat { color: var(--accent2); }

/* ── 4. AZ ALMENÜ EGYSÉGES SZÍNE ──────────────────────────────
   „az almanupontos szinéz pedig egységesítsd, most összevissza van fehér és
    szürke szinnel." Egy szabály: minden almenüpont ugyanazt a halk színt
   kapja, és CSAK az számít másnak, ahol éppen állsz. */
.szak-lepesek .sav-lepes,
.szak-lepesek .sav-lepes.kesz,
.szak-lepesek .sav-lepes.elavult,
.szak-lepesek .sav-lepes.projekt-kell {
  color: var(--hej-halk); background: transparent; opacity: 1;
}
.szak-lepesek .sav-lepes .lep-nev { color: inherit; font-weight: 600; }
.szak-lepesek .sav-lepes:hover { color: var(--hej-szoveg); background: rgba(var(--m-feher-rgb),0.06); }
/* Ahol állsz — EZ az egyetlen kiemelés. */
.szak-lepesek .sav-lepes.itt,
.szak-lepesek .sav-lepes.itt .lep-nev { color: var(--hej-szoveg); font-weight: 600; }
/* Az állapot-jel (pipa / felkiáltó) továbbra is színes — az nem a szöveg. */
.szak-lepesek .sav-lepes .lep-jel.kesz { color: var(--accent); }
.szak-lepesek .sav-lepes .lep-jel.elavult { color: var(--warn-border); }

/* ── 5. A MŰHELY-CSEMPÉK: lime, nem magenta ───────────────────
   „cseréld a magenta keretet limera és a tabok szine is halvány lime legyen
    mint máshol és egér ráhuzáskor mozoghatnak." */
.tile:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2);
  transform: translateY(-3px);
}
.tile:hover .tile-lepes { color: var(--accent-ink); }
:root[data-theme="dark"] .tile:hover .tile-lepes { color: var(--accent); }
.tile:hover .tile-ico { transform: scale(1.08); }
.tile-ico { transition: transform 0.15s ease; }
.tile:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tile:hover { transform: none; }
  .tile:hover .tile-ico { transform: none; }
}

/* ── 6. A PROJEKT-LENYÍLÓ ÖSSZECSÚSZOTT ───────────────────────
   Az elemek `<a>`-k, bennük ikon ÉS szöveg — de nem volt rajtuk `display`,
   ezért a két rész egymásra futott. Egy sor, ikon + szöveg, rendes térközzel. */
.pv-tetel {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 34px; line-height: 1.3;
}
.pv-tetel .i { width: 15px; height: 15px; flex: none; vertical-align: 0; }
.pv-tetel > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tetel .pv-jel { margin-left: auto; color: var(--accent-ink); }

/* ── A MŰHELY-CSEMPÉK ALAPSZÍNE — halvány lime ────────────────
   🔴 Az előző körben CSAK a ráhúzást állítottam limére, az ALAPÁLLAPOT maradt
   fehér — a user szerint „nem zöldek hanem inkább szürke. Lime legyen."
   Most a csempe alapból is halvány lime, ahogy a többi kiválasztható elem. */
.tile {
  background: var(--accent-soft);
  border-color: var(--accent-edge);
}
.tile:hover {
  background: var(--bg-card);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2);
  transform: translateY(-3px);
}
/* Sötét témában a halvány lime egy visszafogott, zöldes felület. */
:root[data-theme="dark"] .tile { background: rgba(var(--m-lime-rgb),0.07); border-color: rgba(var(--m-lime-rgb),0.22); }
:root[data-theme="dark"] .tile:hover { background: rgba(var(--m-lime-rgb),0.13); border-color: var(--accent); }

/* ── A csempe-színek MEGFORDÍTVA (a user kérése, 2026-08-03) ──
   „Vagy használd külön az eszközöket tabok szineit pont forditva kérem.
    Mikor ráhuzom az egeret akkor legyen lime."
   Alapból tehát nyugodt fehér kártya, és CSAK a ráhúzás gyújtja ki limére. */
.tile { background: var(--bg-card); border-color: var(--border); }
.tile:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2);
  transform: translateY(-3px);
}
:root[data-theme="dark"] .tile { background: var(--bg-card); border-color: var(--border); }
:root[data-theme="dark"] .tile:hover { background: rgba(var(--m-lime-rgb),0.13); border-color: var(--accent); }

/* ── A LOGÓ PONTJA ────────────────────────────────────────────
   🔑 KÉT LOGÓ VAN, ÉS MÁS A PONTJUK:
   • `.logo-pont` — a NYILVÁNOS oldalé (`weblock.ai`): magenta pont, ez a
     2026-08-03 délelőtti kérés („a logoba tegyél egy magenta pontot");
   • `.brand-pont` — a FELÜLETÉ (`weblockai.com`): a pont a szöveg színe,
     mert ott az „ai" viszi a magentát (a user pontosítása aznap este:
     „az ai magenta, a . fehér"). */
.brand-pont, .logo-pont {
  font-style: normal; font-weight: 700; margin: 0 0.5px;
}
.logo-pont  { color: var(--accent2); }
.brand-pont { color: inherit; }

/* ── KEDVENCEK a saját lapján ─────────────────────────────────
   Kártyák, nem sorok — és TÖBB OSZLOPBAN, ha van hely. A user kifogása:
   „kezdem unni hogy nem használod ki a teret ilyenkor." */
.kedv-lista {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}
.kedv-kartya {
  display: flex; align-items: stretch; gap: 0; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
  overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.kedv-kartya:hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2); transform: translateY(-2px); }
.kedv-fo {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
  padding: var(--s3) var(--s4); text-decoration: none; color: inherit;
}
.kedv-eszkoz {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim);
}
.kedv-eszkoz .i { width: 13px; height: 13px; vertical-align: 0; color: var(--accent-ink); }
.kedv-nev { font-size: var(--t-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kedv-elonez {
  font-size: var(--t-1); color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kedv-mikor { font-style: normal; font-size: var(--t-0); color: var(--text-dim); font-family: var(--font-gep); margin-top: 2px; }

/* A kuka MAGENTA — a user kérése. Külön hasáb a kártya jobb szélén, hogy
   a törlés soha ne essen egybe a megnyitással. */
.kedv-torlo { display: flex; margin: 0; border-left: 1px solid var(--border); }
.kedv-kuka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--accent2);
  transition: background .15s, color .15s;
}
.kedv-kuka .i { width: 17px; height: 17px; vertical-align: 0; }
.kedv-kuka:hover { background: var(--accent2); color: var(--szines-text, var(--m-feher)); }
.kedv-kuka:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }

/* ── A PROJEKT-LISTA IS TÖLTSE KI A TERET ─────────────────────
   Eddig `max-width: 980px` ült rajta, egy oszlopban — 2560 px-en ez a lap
   harmada. Ezért a lista MOSTANTÓL IS teljes szélességű.

   🔴🔴 2026-08-07 — DE A TÖBB OSZLOP KÁOSZT CSINÁLT. A user: „ezt az oldalt
   igazítsd meg, mert jelenleg kicsit káosznak érzem."
   📏 MÉRVE: itt `repeat(auto-fill, minmax(460px, 1fr))` állt, vagyis 2-3
      oszlop. Csakhogy egy projekt-tétel VÍZSZINTES sor: [kártya][Kilépés]
      [Törlés] egymás mellett (`.proj-tetel { display: flex }`). A szűk
      oszlopban ez nem fért el, ezért **a gombok kilógtak a kártyából a
      SZOMSZÉD oszlop területére** — a törlés-gomb a másik projekt mellett
      lebegett, kártya nélkül.
   🔑 A két szabály egymás ellen dolgozott: az egyik listát épített, a másik
      kártya-rácsot. Egy oszlopban minden a helyére áll, és a lista így is
      kitölti a lap szélességét.
   ⏭️ Ha valaha kártya-rács kell, ahhoz a TÉTEL BELSEJÉT is függőlegessé kell
      tenni (a gombok a kártyán BELÜL, alul) — nem elég az oszlopszám. */
.proj-lista {
  max-width: none;
  grid-template-columns: 1fr;
}

/* A lenyíló alján: átjáró a kedvencek saját lapjára. */
.kedv-panel-mind {
  display: flex; align-items: center; gap: var(--s2);
  padding: 11px 16px; border-top: 1px solid var(--border);
  font-size: var(--t-2); font-weight: 600; color: var(--accent2); text-decoration: none;
  transition: background .15s;
}
.kedv-panel-mind:hover { background: var(--bg-card-hover); }
.kedv-panel-mind .i { width: 15px; height: 15px; vertical-align: 0; }
.kedv-panel-mind .i:last-child { margin-left: auto; }

/* ============================================================
   HOLLYWOOD BOX
   ============================================================ */
/* A gomb a felső sávban, a Kedvenceim mellett — magenta, mert ez sem
   „amit csinálsz" (lime), hanem egy külön műhely. */
.bar-hollywood {
  background: var(--accent2); color: var(--szines-text, var(--m-feher)); border-color: var(--accent2);
  text-decoration: none;
}
.bar-hollywood:hover { filter: brightness(1.06); }
.bar-hollywood .i { width: 16px; height: 16px; }

/* Az admin-kártyán a bekapcsolt állapot magentán látszik. */
.btn--magenta { background: var(--accent2); color: var(--szines-text, var(--m-feher)); border-color: var(--accent2); }
.btn--magenta:hover { filter: brightness(1.06); }

/* A lap: bal hasáb a fotó és a név, jobb hasáb a csomag. */
.hb-racs { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 1100px) { .hb-racs { grid-template-columns: minmax(0, 1fr); } }
.hb-racs > * { min-width: 0; }

.hb-doboz {
  margin-bottom: var(--s3); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.hb-doboz-fej {
  display: flex; align-items: center; gap: var(--s2);
  padding: 9px 12px; background: var(--bg-sunken); border-bottom: 1px solid var(--border);
}
.hb-doboz-fej b {
  font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700;
}
.hb-doboz-fej em {
  font-style: normal; font-family: var(--font-gep); font-size: var(--t-0); color: var(--text-dim);
}
/* A másolás-gomb MINDEN dobozon ott van — a user kérése. */
.hb-masol {
  margin-left: auto; height: 26px; padding: 0 10px;
  font-family: inherit; font-size: var(--t-1); font-weight: 600; cursor: pointer;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-edge); border-radius: var(--r);
  transition: background .15s, color .15s;
}
.hb-masol:hover { background: var(--accent); color: var(--accent-text); }
.hb-masol.kesz { background: var(--accent); color: var(--accent-text); }
.hb-doboz-torzs { margin: 0; padding: 12px 14px; font-size: var(--t-2); line-height: 1.6; white-space: pre-wrap; }
/* A két prompt gépbetűvel — azt másolod be a generátorba. */
.hb-doboz.hb-gep .hb-doboz-torzs {
  font-family: var(--font-gep); font-size: var(--t-1); line-height: 1.7;
  background: var(--bg-sunken);
}

/* ── RÁHÚZÁS (drag & drop) a képtárban ────────────────────────
   A doboz EGÉSZE fogadja a képet. Ráhúzáskor lime keret és halvány lime
   felület — egyértelmű, hova ejtheted. A szaggatott keret azt mondja:
   „ide még nincs semmi, de ide jöhet." */
.kepdoboz { transition: border-color .15s, background .15s, box-shadow .15s; }
.kepdoboz.rahuzva {
  border: 2px dashed var(--accent-line);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(var(--m-lime-rgb),0.18);
}
/* Ráhúzás közben a doboz belseje ne kapkodjon: a csempék és a gomb nem
   nyelik el az eseményt (a `dragleave` villogása ettől szűnik meg). */
.kepdoboz.rahuzva * { pointer-events: none; }
:root[data-theme="dark"] .kepdoboz.rahuzva { background: rgba(var(--m-lime-rgb),0.10); }
.kep-huzd { font-size: var(--t-1); color: var(--text-dim); }

/* ── AZ EJTŐZÓNA — látszódjon, hogy ide húzhatsz ──────────────
   A user kifogása (2026-08-03): a korábbi sor „nem mutatta, hogy drag and
   drop lehetőség van benne". Szaggatott keret + nagy ikon: ez a forma
   mindenhol ezt jelenti. A `<label>` miatt kattintásra IS működik. */
.kep-zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; margin-top: var(--s3); padding: var(--s6) var(--s4);
  text-align: center; cursor: pointer;
  background: var(--bg-sunken);
  border: 2px dashed var(--border-strong); border-radius: var(--r-lg);
  transition: border-color .15s, background .15s, transform .12s;
}
.kep-zona:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.kep-zona-ikon { display: inline-flex; color: var(--text-dim); margin-bottom: 2px; transition: color .15s, transform .15s; }
.kep-zona-ikon .i { width: 30px; height: 30px; stroke-width: 1.4; }
.kep-zona:hover .kep-zona-ikon { color: var(--accent-ink); transform: translateY(-2px); }
.kep-zona b { font-size: var(--t-2); font-weight: 600; }
.kep-zona-vagy { font-size: var(--t-1); color: var(--text-muted); }
.kep-zona-hatar { margin-top: 6px; font-size: var(--t-0); color: var(--text-dim); font-family: var(--font-gep); }

/* Ráhúzás közben a ZÓNA gyullad ki, nem az egész doboz — így pontosan
   látod, hova ejtheted. */
.kepdoboz.rahuzva .kep-zona {
  border-color: var(--accent-line); background: var(--accent-soft);
  transform: scale(1.01);
}
.kepdoboz.rahuzva .kep-zona-ikon { color: var(--accent-ink); transform: translateY(-3px); }
:root[data-theme="dark"] .kep-zona { background: rgba(var(--m-feher-rgb),0.03); }
:root[data-theme="dark"] .kepdoboz.rahuzva .kep-zona { background: rgba(var(--m-lime-rgb),0.10); }

/* ── A PROJEKT-KUKA MAGENTA (a user kérése, 2026-08-03) ──────
   Ugyanaz a nyelv, mint a kedvenceknél: ami töröl, az magenta. */
.proj-torol-btn { color: var(--accent2); }
.proj-torol-btn:hover { background: var(--accent2); color: var(--m-feher); }

/* ── HOLLYWOOD BOX — a csomag dobozai, ÚJRARAJZOLVA ───────────
   A user kérése (2026-08-03): „a cimsorok lime háttérrel, magenta gombokkal,
   jól látható egyértelmű feliratokkal." A korábbi halk szürke fejléc és apró
   nagybetűs felirat ránézésre nem mondta meg, mit tartalmaz a doboz. */
.hb-doboz { margin-bottom: var(--s4); border-color: var(--accent-edge); }

.hb-doboz-fej {
  background: var(--accent);            /* tömör lime */
  border-bottom: 1px solid var(--accent-line);
  padding: 11px 14px;
}
/* A felirat OLVASHATÓ: rendes méret, sötét szöveg a limén, nem apró nagybetű. */
.hb-doboz-fej b {
  font-family: var(--font-fo); font-size: var(--t-2); font-weight: 700;
  letter-spacing: -0.01em; text-transform: none; color: var(--accent-text);
}
/* A fejléc jobb oldalán a beállítások (platform · modell · arány). */
.hb-doboz-fej em {
  font-family: var(--font-gep); font-size: var(--t-0); font-style: normal;
  color: rgba(10,15,22,0.72);
}
/* A másolás-gomb MAGENTA — a lime fejlécen ez a legjobban látható akció. */
.hb-masol {
  height: 30px; padding: 0 14px; font-size: var(--t-1); font-weight: 700;
  background: var(--accent2); color: var(--szines-text, var(--m-feher)); border: 1px solid var(--accent2);
}
.hb-masol:hover { background: var(--m-magenta-kozep); border-color: var(--m-magenta-kozep); color: var(--szines-text, var(--m-feher)); }
.hb-masol.kesz { background: var(--m-zold-mely); border-color: var(--m-zold-mely); color: var(--szines-text, var(--m-feher)); }

/* 🔴 ITT ÁLLT KÉT SÖTÉT-TÉMA SZABÁLY — TÖRÖLVE (a user jelzése, 2026-08-03:
   „hollywood.php sötét módban nem látszik a cím").
   Amíg a fejléc TÖMÖR lime volt, jó volt rájuk a sötét betű. Aztán a user
   halványabb sávot kért (`--accent-soft`), ami sötét témában szinte átlátszó —
   a sötét betű így SÖTÉT HÁTTÉRRE került, vagyis olvashatatlan lett.
   🔑 A csere azért nem javította magától, mert ezek `:root[data-theme]`-mel
   SPECIFIKUSABBAK voltak a lentebb álló, helyes szabálynál. A tanulság: egy
   szín-átalakítás után a téma-felülírásokat is végig kell nézni, különben az
   egyik témában némán ott marad a régi állapot.
   A helyes színt a lenti `--text` / `--text-muted` adja, ami magától követi a témát. */

/* ── A CSOMAG-FEJLÉC RENDBETÉVE (2026-08-03) ──────────────────
   🔴 Az `em` a fejlécben egy MÁSIK szabályt örökölt: a gép-ajánló kártyák
   `.gep em` stílusát (szaggatott felső vonal + saját térköz), mert a
   prompt-dobozom ugyanazt a `gep` osztálynevet viselte. Az osztály átnevezve
   (`hb-gep`), a fejléc pedig itt kap kifejezett, felülírhatatlan formát:
   egyetlen sor, függőlegesen középre, jól olvasható betűvel. */
.hb-doboz-fej {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 12px 14px;
}
.hb-doboz-fej b { line-height: 1.25; margin: 0; }
.hb-doboz-fej em {
  /* minden örökölt díszítés kikapcsolva */
  border: 0 !important; margin: 0 !important; padding: 0 !important;
  text-decoration: none; background: none;
  font-family: var(--font-gep); font-style: normal;
  font-size: var(--t-1); font-weight: 600; line-height: 1.3;
  color: rgba(10,15,22,0.78);
  margin-right: auto !important;      /* a gomb marad a jobb szélen */
}
.hb-masol { margin-left: 0; flex: none; }
/* Szűk helyen a beállítás-sor a cím ALÁ kerül, teljes szélességben — nem
   törik szét szavanként. */
@media (max-width: 620px) {
  .hb-doboz-fej em { flex: 1 0 100%; margin-right: 0 !important; }
  .hb-masol { margin-left: auto; }
}

/* ── A CSOMAG VÉGSŐ FORMÁJA (2026-08-03, a user tételes kérése) ─
   „1-4 nem kell hogy másolható legyen, azok csak információk és lehetnek egy
    boxban · 5,6 másolható · Gombokat igazítsd meg, jobb szélre · Lime sávokat
    halványabbra, most zavaró." */

/* A fejléc-sáv HALVÁNY lime, nem tömör — a tömör túl hangos volt. */
.hb-doboz-fej {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-edge);
}
.hb-doboz-fej b { color: var(--text); }
.hb-doboz-fej em { color: var(--text-muted); }
.hb-doboz { border-color: var(--border); }

/* A GOMB a jobb szélen, mindig ugyanott — nem a szöveg tolja el. */
.hb-doboz-fej { justify-content: flex-start; }
.hb-doboz-fej em { margin-right: 0 !important; }
.hb-masol { margin-left: auto !important; flex: none; }

/* ══ 1-4: az elemzés — EGY doboz, másolás-gomb nélkül ══ */
.hb-info .hb-doboz-fej { background: var(--bg-sunken); border-bottom-color: var(--border); }
.hb-info-torzs { padding: 4px 0; }
.hb-info-sor {
  display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: var(--s3); padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.hb-info-sor:last-child { border-bottom: 0; }
.hb-info-sor > span {
  font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-dim); line-height: 1.5;
}
.hb-info-sor > b { font-size: var(--t-2); font-weight: 600; line-height: 1.55; min-width: 0; }
@media (max-width: 620px) {
  .hb-info-sor { grid-template-columns: 1fr; gap: 2px; }
}

/* ── A „Csomag készítése" gomb: MAGENTA, teljes szélességben ──
   A user kérése (2026-08-03). A doboz alatt áll, mert ez a lap fő akciója. */
.hb-keszit {
  width: 100%; margin-top: var(--s4);
  font-weight: 700; letter-spacing: -0.005em;
}
.hb-keszit .i { width: 17px; height: 17px; }

/* Egy-kép módban a törlés MINDIG látszik — nem kell rátalálni egérrel.
   (A törlés a lemezről is viszi a fájlt, lásd `wlai_kep_torol`.) */
.kepdoboz[data-egy="1"] .kep-torol {
  opacity: 1 !important;
  background: var(--accent2); color: var(--szines-text, var(--m-feher)); border-color: var(--accent2);
}
.kepdoboz[data-egy="1"] .kep-torol:hover { background: var(--m-magenta-kozep); border-color: var(--m-magenta-kozep); }
/* Egy kép esetén a csempe nagyobb — ez a munkakép, nézni is kell rajta valamit. */
.kepdoboz[data-egy="1"] .kep-racs { grid-template-columns: minmax(0, 220px); }
/* A `hidden` erősebb, mint a `.kep-zona` flexe — enélkül a rejtett zóna
   továbbra is látszana. */
.kep-zona[hidden] { display: none !important; }

/* ── A MUNKAKÉP a SAJÁT arányában (a user kérése, 2026-08-03) ──
   „a feltöltött kép formátumát tartsd meg, látszódjon a teljes kép."
   A rácsos nézetben marad a négyzetes vágás (ott a rendezett sor számít),
   de egy-kép módban a munkakép egészben látszik, ahogy feltöltötted. */
.kepdoboz[data-egy="1"] .kep-csempe > a {
  aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken);
}
.kepdoboz[data-egy="1"] .kep-csempe img {
  width: 100%; height: auto; max-height: 420px;
  object-fit: contain;
}
/* Így a csempe is széthúzódhat: a kép aránya dönt, nem egy fix négyzet. */
.kepdoboz[data-egy="1"] .kep-racs { grid-template-columns: minmax(0, 260px); }

/* A munkakép TELJES SZÉLESSÉGBEN (a user kérése, 2026-08-03) — a doboz
   teljes szélességét elfoglalja, a magasság az arányból jön. */
.kepdoboz[data-egy="1"] .kep-racs { grid-template-columns: minmax(0, 1fr); }
.kepdoboz[data-egy="1"] .kep-csempe img { max-height: none; }

/* ============================================================
   HOLLYWOOD BOX — ARCHÍVUM (slider · nagy ablak · rács)
   A user kérése (2026-08-03): lapozható sáv a Csomag gomb FÖLÖTT, a képre
   kattintva külön ablak lapozással, és ugyanez rácsban is.
   ============================================================ */
.hb-arch { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); }
.hb-arch-fej { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.hb-arch-fej > b { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-2); }
.hb-arch-fej > b .i { width: 16px; height: 16px; color: var(--accent2); }
.hb-arch-db {
  font-family: var(--font-gep); font-size: var(--t-0); padding: 2px 7px;
  background: var(--bg-sunken); border-radius: var(--r); color: var(--text-dim);
}
.hb-arch-racs-gomb {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px; cursor: pointer;
  font-family: inherit; font-size: var(--t-1); font-weight: 600;
  color: var(--text-muted); background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: var(--r);
}
.hb-arch-racs-gomb:hover { border-color: var(--accent2); color: var(--accent2); }
.hb-arch-racs-gomb .i { width: 14px; height: 14px; }

/* A lapozható sáv. Vízszintesen görgethető, a nyilak a két szélén. */
.hb-arch-sav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hb-arch-lista {
  display: flex; gap: var(--s2); overflow-x: auto; scroll-behavior: smooth;
  padding-bottom: 4px; min-width: 0; flex: 1;
  scrollbar-width: thin;
}
.hb-arch-elem {
  flex: 0 0 108px; display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 7px; cursor: pointer; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .15s, transform .12s;
}
.hb-arch-elem:hover { border-color: var(--accent2); transform: translateY(-2px); }
.hb-arch-elem img { width: 100%; height: 84px; object-fit: cover; display: block; }
.hb-arch-nev {
  padding: 5px 7px 0; font-size: var(--t-1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-arch-meta { padding: 0 7px; font-family: var(--font-gep); font-size: var(--t-0); color: var(--text-dim); }
/* 🔴 2026-08-03: a nyilak halvány szürkék voltak a fehér dobozon — a user
   szava: „jelenleg nem látszanak". Mostantól LIME: a lapon ez a szín jelenti
   azt, hogy „ide nyúlj". */
.hb-arch-nyil {
  flex: none; width: 26px; height: 62px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text);
  border: 1px solid var(--accent-line); border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.hb-arch-nyil:hover:not(:disabled) { background: var(--accent2); border-color: var(--accent2); color: var(--szines-text, var(--m-feher)); }
.hb-arch-nyil .i { stroke-width: 2.6; }
/* Ha nincs merre lapozni, halványul — de a lime alak megmarad, hogy tudd,
   hol keresd, amint lesz mit lapozni. */
.hb-arch-nyil:disabled { opacity: .32; cursor: default; box-shadow: none; }
.hb-arch-nyil .i { width: 15px; height: 15px; }

/* ── A nagy ablak ── */
.hb-ablak { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.hb-ablak[hidden] { display: none; }
.hb-ablak-hatter { position: absolute; inset: 0; background: rgba(6,25,49,0.62); backdrop-filter: blur(3px); }
.hb-ablak-doboz {
  position: relative; display: flex; flex-direction: column;
  width: min(1100px, 100%); max-height: 92vh;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.hb-ablak-fej {
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--accent-soft);
}
.hb-ablak-fej b { font-size: var(--t-3); font-weight: 700; }
.hb-ablak-fej span { font-family: var(--font-gep); font-size: var(--t-1); color: var(--text-muted); margin-right: auto; }
.hb-ablak-torzs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); padding: var(--s4); overflow-y: auto; }
@media (max-width: 900px) { .hb-ablak-torzs { grid-template-columns: minmax(0, 1fr); } }
.hb-ablak-kep { display: flex; align-items: flex-start; justify-content: center; background: var(--bg-sunken); border-radius: var(--r); overflow: hidden; }
.hb-ablak-kep img { max-width: 100%; height: auto; display: block; }
.hb-ablak-adat { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.hb-ablak-sor { display: flex; flex-direction: column; gap: 3px; }
.hb-ablak-sor span {
  font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-dim);
}
.hb-ablak-sor p { margin: 0; font-size: var(--t-2); line-height: 1.55; white-space: pre-wrap; }
.hb-ablak-lab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: 12px 16px; border-top: 1px solid var(--border); }
.hb-ablak-szam { font-family: var(--font-gep); font-size: var(--t-1); color: var(--text-dim); }
.hb-vissza { margin-left: auto; }

/* ── A rács ── */
.hb-racs-doboz { width: min(1200px, 100%); }
.hb-racs-lista { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); padding: var(--s4); overflow-y: auto; }
.hb-racs-elem {
  display: flex; flex-direction: column; gap: 2px; padding: 0 0 8px; cursor: pointer; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  transition: border-color .15s, transform .12s;
}
.hb-racs-elem:hover { border-color: var(--accent2); transform: translateY(-2px); }
.hb-racs-elem img { width: 100%; height: 130px; object-fit: cover; display: block; }

/* ============================================================
   HOLLYWOOD BOX — FORDÍTÓ · MAGYAR SZERKESZTÉS · AI-SZERKESZTŐ
   A user kérése (2026-08-03): „tegyél a másolás mellé egy fordítót, ami
   megmutatja magyar nyelven is… ha nem jó amit írtál, akkor beleírok magyarul
   és azonnal átíródik az angol szöveg is… kellene bele egy AI szerkesztő is."

   A fejlécben három gomb áll egymás mellett. A másolás marad a magenta
   FŐ akció; a két eszköz halkabb, mert azok a ritkább mozdulatok.
   ============================================================ */
/* 🔴 2026-08-03, a user kérése: „használd külön az eszközöket, a dobozai
   kijelöléskor olyanok, mint a gombok színei."
   A kijelölt eszköz MAGENTA volt — pont a Másolás gomb színe —, így a három
   gomb egybemosódott. Az eszközök mostantól TINTA-színnel jelölik magukat:
   a magenta marad a fő akcióé (Másolás), az eszköz más karaktert kap.
   🔑 `--text` / `--bg-card` párost használunk, mert az sötét témában magától
   megfordul — nem kell külön sötét szabály, és sehol nem lesz olvashatatlan.
   🔴 A sarok korábban SZÖGLETES volt: a `--r-sm` változó nem is létezik ebben
   a rendszerben (mérve: 0px). A helyes név `--r` (4px). */
.hb-eszk {
  height: 30px; padding: 0 12px; font-size: var(--t-1); font-weight: 600;
  background: var(--bg-card); color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.hb-eszk:hover { border-color: var(--text); color: var(--text); }
.hb-eszk.aktiv { background: var(--text); border-color: var(--text); color: var(--bg-card); }
/* A másolás marad a jobb szélen, az eszközök előtte sorakoznak. */
.hb-doboz-fej .hb-eszk:first-of-type { margin-left: auto; }
.hb-masol { margin-left: 8px !important; }

/* ── A BEJEGYZÉS SZÖVEGE — két nyelv egy dobozban, szerkeszthetően ──
   A user kérése (2026-08-03): „ugyanabban a boxban, ahol a generált szöveg van,
   mindkét nyelven bele lehessen nyúlni… ami automatikusan mentődik."
   A mező NEM néz ki mezőnek elsőre: a szöveg olvasható marad, de bármikor
   beleírhatsz. A mentést a mező alatti halk sor nyugtázza. */
.hb-caption-torzs { display: flex; flex-direction: column; gap: var(--s4); padding: 14px; }
.hb-nyelv { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hb-nyelv-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hb-nyelv-fej > b { font-size: var(--t-2); font-weight: 700; }
.hb-nyelv-fej > em {
  font-style: normal; font-size: var(--t-1); color: var(--text-dim); margin-right: auto;
}
.hb-nyelv-mezo {
  width: 100%; min-height: 118px; resize: vertical;
  padding: 12px 13px; font-family: inherit; font-size: var(--t-2); line-height: 1.6;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  white-space: pre-wrap;
}
.hb-nyelv-mezo:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hb-nyelv-allapot { font-size: var(--t-1); color: var(--text-dim); min-height: 1em; }

/* ── A POSZT HOSSZA (2026-08-06) ──────────────────────────────
   A user: „a posztok karakterszáma nem lehet több mint 250."
   Eddig a fejlécben állt egy szám korlát nélkül — abból nem derült ki, hogy
   sok-e. Most a mező ALATT áll, a korláthoz mérve, és túllépésnél színt vált.
   🔑 Nem csak a szín jelez: a „túl hosszú" szöveg is kiíródik. Aki nem látja
      a színkülönbséget, annak a szám maga semmit nem mondana. */
.hb-nyelv-szam {
  font-family: var(--font-gep); font-size: var(--t-0);
  color: var(--text-dim); min-height: 1em;
}
.hb-nyelv-szam.tul,
.hb-doboz-fej em.tul { color: var(--warn-text); font-weight: 700; }

/* Az AI-gomb: fekete alap, szikra — mindenhol ez jelzi, hogy a gép dolgozik
   helyetted. Nem keverhető össze a másolással (magenta) és a kézi mezőkkel. */
.hb-ai {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--text); border-color: var(--text); color: var(--bg-card);
}
.hb-ai:hover { background: var(--m-fekete-tiszta); border-color: var(--m-fekete-tiszta); color: var(--szines-text, var(--m-feher)); }
.hb-ai .i { width: 15px; height: 15px; }
.hb-ai[disabled] { opacity: .55; cursor: default; }

/* Telefonon a három gomb ne préselődjön egy sorba a címmel. */
@media (max-width: 620px) {
  .hb-doboz-fej .hb-eszk:first-of-type { margin-left: 0; }
  .hb-doboz-fej { gap: 8px; }
  .hb-masol { margin-left: auto !important; }
}

/* A doboz-fejléc gombjai EGY csoportban — szűk dobozban a csoport törik
   egészben, nem esik ki a másolás-gomb külön sorba (mérve, 2026-08-03). */
.hb-doboz-gombok { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.hb-doboz-gombok .hb-masol { margin-left: 0 !important; }
.hb-doboz-fej .hb-doboz-gombok .hb-eszk:first-of-type { margin-left: 0; }
@media (max-width: 620px) {
  .hb-doboz-gombok { margin-left: 0; width: 100%; }
}

/* ── A MUNKAKÉP MAGASSÁGA (2026-08-03, mérés után) ────────────
   🔴 A munkakép teljes szélességben, magasság-korlát nélkül állt: egy álló
   fotó 910 px-t vitt el, és a galéria meg a „Csomag készítése" gomb a lap
   aljára szorult — a user jogosan érezte úgy, hogy a galéria nincs a gomb
   fölött. A kép TELJES marad és tartja az arányát (`contain`), csak nem
   nyomja le a lap fontos elemeit. */
/* 🔴 2026-08-03, MÁSODIK javítás: a magasság-korlát + `contain` miatt az álló
   képek oldalt üres sávokkal ültek a dobozban. A user: „minden képet teljes
   szélességében kértem, mivel minden képnek más a mérete, úgy kell megoldani,
   hogy minden kép jó legyen."
   A megoldás az arány tisztelete: a kép a doboz TELJES szélességét kapja, a
   magasság az arányból jön. Fekvő, álló, négyzetes — mindegyik kitölti a
   szélességet, és egyik sincs levágva. A magasság-korlát elhagyható, mert a
   gombok és a galéria már a kép FÖLÖTT vannak. */
.kepdoboz[data-egy="1"] .kep-csempe img {
  width: 100%; height: auto; max-height: none;
  object-fit: contain;
  display: block;
}
.kepdoboz[data-egy="1"] .kep-csempe > a {
  display: block; aspect-ratio: auto; background: transparent;
}

/* ============================================================
   HOLLYWOOD BOX — ÁLLAPOTJELZŐ és az „Új csomag" gomb
   A user kérése (2026-08-03): „Készíts állapotjelzőt hasonló megjelenéssel,
   mint a Pro-előfizetés figyelmeztetésnél. Fent, A csomag fekete box felett
   legyen, teljes szélességben. Alapállapotban lime színű és nincs mozgás."

   🔑 A MOZGÁS ITT JELENTÉS: a fénycsík CSAK akkor fut, amíg a gép dolgozik.
   Álló sáv = nincs folyamatban semmi. Így a mozgás önmagában is információ,
   nem dísz.
   ============================================================ */

/* A jobb hasáb burkolója: a jelző és a csomag EGY rács-cellában marad. */
.hb-jobb-oszlop { display: flex; flex-direction: column; min-width: 0; }

.hb-allapot {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; margin-bottom: var(--s3); padding: 14px 18px;
  font-size: var(--t-2); line-height: 1.5; color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--accent-edge); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-1);
}
/* Bal szélen a vastag jelzőcsík — ez hordozza az állapot színét. */
.hb-allapot::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--accent);
}
.hb-allapot b { display: block; font-weight: 700; }
.hb-allapot > span:last-child { min-width: 0; }
.hb-allapot > span:last-child > span { color: var(--text-muted); }
.hb-allapot-ikon { display: inline-flex; flex: none; color: var(--accent-ink); }
.hb-allapot-ikon .i { width: 20px; height: 20px; }

/* ── MUNKA KÖZBEN: magenta él és végigfutó fény ── */
.hb-allapot[data-allapot="fut"] { border-color: var(--accent2); }
.hb-allapot[data-allapot="fut"]::before {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}
.hb-allapot[data-allapot="fut"] .hb-allapot-ikon { color: var(--accent2); }
.hb-allapot[data-allapot="fut"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg,
      transparent, rgba(var(--m-lime-rgb),0.30) 40%, rgba(var(--m-magenta-rgb),0.22) 60%, transparent);
  transform: skewX(-18deg);
  animation: pro-feny 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* ── HIBA: a rendszer figyelmeztető színei ── */
.hb-allapot[data-allapot="hiba"] {
  background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text);
}
.hb-allapot[data-allapot="hiba"]::before { background: var(--warn-text); }
.hb-allapot[data-allapot="hiba"] .hb-allapot-ikon { color: var(--warn-text); }
.hb-allapot[data-allapot="hiba"] > span:last-child > span { color: var(--warn-text); }

/* Aki mozgásmentes felületet kért a rendszerében, annál a fény sem indul el. */
@media (prefers-reduced-motion: reduce) {
  .hb-allapot[data-allapot="fut"]::after { animation: none; display: none; }
}

/* ── Az „Új csomag készítése" gomb a képdoboz FÖLÖTT ── */
.hb-uj { margin-bottom: var(--s4); font-weight: 700; }
.hb-uj .i { width: 16px; height: 16px; }

/* A „Csomag készítése" gomb az „Új csomag" alatt áll (a user kérése,
   2026-08-03) — a két akció egy helyen, a lap tetején. */
.hb-keszit { margin-top: 0; margin-bottom: var(--s2); }
.hb-bal .ai-jelzes:empty { display: none; }
.hb-bal .kepdoboz { margin-top: var(--s4); }

/* ── A KÉPFELTÖLTÉS HALADÁSA (a user kérése, 2026-08-03) ──────
   „Látszódjon, hogy hogy áll a képfeltöltési folyamat."
   A doboz tetején fut végig egy magenta sáv, a százalékot a doboz alján lévő
   sor írja. A `--tolt` értéket a feltöltő JS állítja, kép közben. */
.kepdoboz { position: relative; }
.kepdoboz[data-tolt]::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px;
  width: var(--tolt, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: var(--r-lg) 0 0 0;
  transition: width .18s linear;
  z-index: 2;
}
.kepdoboz[data-tolt] { border-color: var(--accent2); }
.kep-jelzes.ok { color: var(--text); font-weight: 600; }

/* ── ÁLLAPOTJELZŐ CSÍK + MÉGSE (2026-10-03, a user kérése: „legyen egy
   állapotjelző csík, ami mutatja, hol jár a feltöltés”). A vékony felső
   sávot nem vette észre: ez vastag, felirattal, a doboz alján. */
.kep-folyamat { display: grid; gap: 8px; margin-top: var(--s3); }
.kep-folyamat[hidden] { display: none !important; }
.kep-csik {
  height: 12px; border-radius: var(--r-sm, 4px); overflow: hidden;
  background: var(--bg-sunken); border: 1px solid var(--border-strong);
}
.kep-csik span {
  display: block; height: 100%; width: var(--tolt, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .18s linear;
}
.kep-folyamat-sor { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.kep-folyamat-szoveg { min-width: 0; font-size: var(--t-1); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.kep-megse { flex: none; min-height: 44px; }
.kep-megse[hidden] { display: none !important; }

/* ── Az „Új csomag készítése" gomb a bejegyzés-doboz ALATT ──
   A jobb hasáb aljára került (a user kérése): ott ér véget a munka. */
#hb-eredmeny .hb-uj { margin-top: var(--s4); margin-bottom: 0; }

/* ── PRÓBAIDŐ-SÁV (2026-08-03) ────────────────────────────────
   A Pro-felhívás formája, de LIME: ez nem figyelmeztetés, hanem jó hír —
   „mindent kipróbálhatsz". Alapban mozdulatlan; az utolsó három napon vált
   magentára, és akkor indul el a fénycsík is. */
.proba-hivas { border-color: var(--accent-line); }
.proba-hivas::before { background: var(--accent); }
.proba-hivas .pro-hivas-ikon { color: var(--accent-ink); }
.proba-hivas::after { content: none; }

.proba-hivas.surgos { border-color: var(--accent2); }
.proba-hivas.surgos::before { background: linear-gradient(180deg, var(--accent), var(--accent2)); }
.proba-hivas.surgos .pro-hivas-ikon { color: var(--accent2); }
.proba-hivas.surgos::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg,
      transparent, rgba(var(--m-lime-rgb),0.30) 40%, rgba(var(--m-magenta-rgb),0.22) 60%, transparent);
  transform: skewX(-18deg);
  animation: pro-feny 4.5s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .proba-hivas.surgos::after { animation: none; display: none; }
}

/* ============================================================
   META-SZABÁLYKÖNYV (superadmin, 2026-08-03)
   Egy hosszú dokumentum, amit OLVASNI kell — tehát tipográfia, nem felület.
   Szélesség-korlát a szövegre (a hosszú sor olvashatatlan), de a táblázatok
   és a kódok a teljes helyet kapják.
   ============================================================ */
.ms-fejsor {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5);
}
.ms-hol { font-size: var(--t-1); color: var(--text-dim); }
.ms-szamok { margin-bottom: var(--s4); }

.ms-doc { padding: var(--s6) var(--s5); }
.ms-doc > * { max-width: 78ch; }
.ms-doc h2, .ms-doc h3, .ms-doc h4, .ms-doc h5 {
  font-family: var(--font-fo); letter-spacing: -0.01em; line-height: 1.25;
}
.ms-doc h2 {
  font-size: var(--t-5); font-weight: 700; margin: var(--s7) 0 var(--s3);
  padding-bottom: 10px; border-bottom: 2px solid var(--accent);
}
.ms-doc h2:first-child { margin-top: 0; }
.ms-doc h3 { font-size: var(--t-4); font-weight: 700; margin: var(--s6) 0 var(--s2); color: var(--text); }
.ms-doc h4 { font-size: var(--t-3); font-weight: 600; margin: var(--s5) 0 var(--s2); color: var(--text-muted); }
.ms-doc h5 { font-size: var(--t-2); font-weight: 600; margin: var(--s4) 0 6px; color: var(--text-muted); }
.ms-doc p { margin: 0 0 var(--s3); font-size: var(--t-2); line-height: 1.7; }
.ms-doc ul, .ms-doc ol { margin: 0 0 var(--s3) 0; padding-left: 22px; }
.ms-doc li { margin-bottom: 7px; font-size: var(--t-2); line-height: 1.65; }
.ms-doc hr { border: 0; border-top: 1px solid var(--border); margin: var(--s6) 0; }
.ms-doc code {
  font-family: var(--font-gep); font-size: var(--t-1);
  background: var(--bg-sunken); padding: 2px 6px; border-radius: var(--r);
}
.ms-doc a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.ms-doc blockquote {
  margin: 0 0 var(--s4); padding: 14px 18px;
  background: var(--accent-soft); border-left: 4px solid var(--accent-line);
  border-radius: var(--belso-sarok);
}
.ms-doc blockquote p:last-child { margin-bottom: 0; }

/* A jelölőnégyzetes lista: a checklist pontjai előtt üres négyzet. */
.ms-doc .md-check { list-style: none; padding-left: 4px; }
.ms-doc .md-check li { position: relative; padding-left: 26px; }
.ms-doc .md-check li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 15px; height: 15px;
  border: 2px solid var(--border-strong); border-radius: 3px;
}

/* A táblázat a teljes szélességet kapja, és külön görög, ha kell. */
.ms-doc .md-tabla { max-width: none; overflow-x: auto; margin: 0 0 var(--s4); }
.ms-doc table { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
.ms-doc th {
  text-align: left; padding: 10px 13px; white-space: nowrap;
  background: var(--bg-sunken); border-bottom: 2px solid var(--border-strong);
  font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}
.ms-doc td { padding: 10px 13px; border-bottom: 1px solid var(--border); line-height: 1.55; }
.ms-doc tbody tr:last-child td { border-bottom: 0; }

/* A szerkesztő: nagy, gépbetűs mező — ez egy dokumentum, nem egy űrlap. */
.ms-urlap { display: flex; flex-direction: column; gap: var(--s3); }
.ms-mezo {
  width: 100%; min-height: 60vh; resize: vertical;
  padding: 16px; font-family: var(--font-gep); font-size: var(--t-1); line-height: 1.7;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.ms-mezo:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ms-urlap-lab { display: flex; flex-wrap: wrap; gap: var(--s2); }

@media (max-width: 620px) {
  .ms-doc { padding: var(--s4) var(--s3); }
  .ms-doc h2 { font-size: var(--t-5); }
}

/* 🔴 375 px-en 64 px-t csúszott a lap: a szabálykönyvben vannak szóköz nélküli
   hosszú szavak („Tragédiához/halálhoz/balesethez/kórházhoz…") és hosszú
   webcímek, amiket a böngésző nem tud törni. Keskeny képernyőn bárhol
   törhetnek — a szöveg olvashatósága ennél fontosabb. */
.ms-doc p, .ms-doc li, .ms-doc td, .ms-doc th,
.ms-doc blockquote, .ms-doc h2, .ms-doc h3, .ms-doc h4, .ms-doc h5 {
  overflow-wrap: anywhere;
}
.ms-doc code { overflow-wrap: anywhere; }

/* ── A SZABÁLYKÖNYV FRISSÍTÉSE UTASÍTÁSSAL (2026-08-03) ──────
   A user kérése: „nem beleírni akarok, hanem utasítást akarok frissíteni,
   úgy mint itt a chaten." Ez a doboz a lap FŐ útja — a kézi szerkesztő
   másodlagos lett. */
.ms-parbeszed { border-color: var(--accent-edge); }
.ms-utasitas {
  width: 100%; min-height: 110px; resize: vertical;
  padding: 14px 15px; font-family: inherit; font-size: var(--t-2); line-height: 1.6;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: var(--r);
}
.ms-utasitas:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ms-ai-gomb { height: 40px; padding: 0 18px; font-size: var(--t-2); }
.ms-hint-kicsi { font-size: var(--t-1); color: var(--text-dim); }

/* A javaslat: még NEM szabály. Magenta él jelzi, hogy döntést vár. */
.ms-javaslat { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2), var(--shadow-1); }
.ms-valtozas { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s4); }
.ms-valtozas b { font-size: var(--t-1); font-weight: 700; color: var(--text-muted); margin-top: var(--s2); }
.ms-valtozas p { margin: 0; font-size: var(--t-2); line-height: 1.65; }
.ms-idezet {
  padding: 10px 14px; background: var(--bg-sunken);
  border-left: 3px solid var(--border-strong); border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--t-2); color: var(--text-muted);
}
.ms-meret { margin-top: var(--s2); font-size: var(--t-1); color: var(--text-dim); font-family: var(--font-gep); }
.ms-javaslat-lab { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* Az előnézet halványabb kerettel: látszik, hogy ez még csak terv. */
.ms-elonezet { border-style: dashed; }
.ms-elonezet-cimke {
  font-family: var(--font-gep); font-size: var(--t-0); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: var(--s4);
}

/* ── GÖRGETÉS-ZÁR NYITOTT ABLAKNÁL (a user kérése, 2026-08-03) ──
   „Ha aktív a modal, csak ott lehessen görgetni, alatta az oldalon nem."
   🔑 A `position: fixed` kell, nem elég az `overflow: hidden` — a mobil
   böngészők az utóbbit figyelmen kívül hagyják a body-n. A görgetés helyét a
   JS jegyzi meg és állítja vissza, különben a lap a tetejére ugrana. */
body.modal-nyitva {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow-y: scroll;   /* a görgetősáv helye megmarad — nem ugrik a tartalom */
}

/* ── A NAGY ABLAK TARTALMA: ugyanaz a doboz-design, mint a fő nézetben ──
   A user kérése (2026-08-03): „ezen a panelen is ugyanúgy legyen megcsinálva
   a design, fejlécekkel, gombokkal együtt." */
.hb-ablak-adat .hb-doboz { margin-bottom: var(--s3); }
.hb-ablak-adat .hb-doboz:last-child { margin-bottom: 0; }
.hb-ablak-adat .hb-nyelv-mezo { min-height: 96px; background: var(--bg-sunken); }
.hb-ablak-adat .hb-caption-torzs { padding: 12px; gap: var(--s3); }
/* A kép ne nőjön az ablak fölé: a jobb hasáb görög, a bal marad a helyén. */
.hb-ablak-kep { position: sticky; top: 0; align-self: start; }

/* A nagy ablakban a fejléc szűkebb: a beállítás-sor menjen a cím ALÁ, a
   másolás-gomb pedig maradjon a cím mellett. (A `order` a flex-sorrendet
   állítja: cím → gombok → beállítások.) */
.hb-ablak-adat .hb-doboz-fej > b { order: 1; }
.hb-ablak-adat .hb-doboz-gombok { order: 2; margin-left: auto; }
.hb-ablak-adat .hb-doboz-fej > em {
  order: 3; flex: 1 0 100%; margin-right: 0 !important;
}

/* ── „A GÉP VISSZADOBTA" — az elutasítás-napló gombja (2026-08-03) ──
   A csomag alján ül, halkan: nem akció, hanem lehetőség. Amikor kinyílik,
   magenta él jelzi, hogy most tőled vár valamit. */
.hb-elutasit { margin-top: var(--s4); }
.hb-elutasit-gomb { width: 100%; justify-content: center; height: 34px; }
.hb-elutasit-urlap {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 10px; padding: 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--accent2); border-radius: var(--r);
}
.hb-elutasit-urlap[hidden] { display: none; }
.hb-elutasit-mezo { display: flex; flex-direction: column; gap: 3px; }
.hb-elutasit-mezo > span { font-size: var(--t-1); font-weight: 600; color: var(--text-muted); }
/* A Platform és a Melyik modell LENYÍLÓ (a user kérése, 2026-08-03) — a
   `select` és az `input` ugyanúgy néz ki, hogy a négy mező egy sorozat legyen. */
.hb-elutasit-mezo > input,
.hb-elutasit-mezo > select {
  height: 36px; padding: 0 11px; font-family: inherit; font-size: var(--t-2);
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: 4px;
}
.hb-elutasit-mezo > select { cursor: pointer; }
/* Az „Egyéb…" szabad mezője a lenyíló ALATT jelenik meg, kis térközzel. */
.hb-elutasit-mezo > .hb-elutasit-sajat { margin-top: 6px; }
.hb-elutasit-mezo > input:focus,
.hb-elutasit-mezo > select:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hb-elutasit-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ============================================================
   DRAMATURGIAI PRÓBA  (`muhely/storyboard.php`, 2026-08-03)
   ------------------------------------------------------------
   Öt kérdés a jelenetre, és egy élő visszajelzés alattuk. A hangnem
   szándékosan halk: ez segítség, nem hibaüzenet — EGY kivétellel.
   A hiányzó „változás” kap sárga keretet, mert az az egyetlen, amitől
   a jelenet dramaturgiailag halott lesz.
   ============================================================ */
.dr-fig {
  margin-top: var(--s2); padding: 11px 14px;
  border-radius: var(--r); font-size: var(--t-2); line-height: 1.55;
  background: var(--bg-sunken); color: var(--text-muted);
  border: 1px solid var(--border);
}
.dr-fig[hidden] { display: none; }
.dr-fig.dr-baj {
  background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text);
}
.dr-fig.dr-jo {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink);
}

/* ============================================================
   KARAKTERLAP — a három réteg  (`muhely/karakter.php`, 2026-08-03)
   ------------------------------------------------------------
   Számozott lépések egymás alatt. A sorrend maga is tanít: előbb a
   teljes alak, aztán az arc, végül az érzelmek — és CSAK a végén,
   egyetlen képre összerakva szabad feltölteni bármit.
   ============================================================ */
.cb { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); }
.cb-fej { margin-bottom: var(--s4); }
.cb-fej b { display: block; font-size: var(--t-2); font-weight: 600; }
.cb-fej small { display: block; margin-top: 3px; font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; }

.cb-lepes {
  margin-bottom: var(--s3); padding: 13px 15px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cb-lepes-fej { display: flex; align-items: center; gap: var(--s2); margin-bottom: 7px; }
.cb-lepes-fej b { font-size: var(--t-2); font-weight: 600; }
.cb-szam {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 22px; height: 22px;
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--r); font-family: var(--font-gep); font-size: var(--t-1); font-weight: 700;
}
.cb-mit { margin: 0 0 9px; font-size: var(--t-2); color: var(--text-muted); line-height: 1.55; }
.cb-lepes textarea {
  width: 100%; margin-bottom: 9px; padding: 10px 12px;
  font-family: var(--font-gep); font-size: var(--t-1); line-height: 1.5;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: var(--r); resize: vertical;
}
/* A figyelmeztetés a lépésen BELÜL: ott olvassa el, ahol a hiba születne. */
.cb-figyelem {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin-bottom: 9px; padding: 9px 12px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--belso-sarok); color: var(--warn-text);
  font-size: var(--t-1); line-height: 1.5;
}
.cb-figyelem .i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.cb-vegso { border-color: var(--accent-line); background: var(--accent-soft); }
.cb-vegso .cb-mit { color: var(--text); }

/* ── EGYÉNI KÉPKOCKÁK ──
   Kártyánként egy képkocka: mit látunk + képkivágás + szög. A kártya-forma
   azért kell, hogy nyolc képkockánál se folyjon össze a huszonnégy mező. */
.sb-kocka {
  margin-bottom: var(--s3); padding: 13px 15px 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--card-ring);
}
.sb-kocka-fej {
  margin-bottom: 9px;
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink);
}
/* A két lenyíló egymás mellett, ha van hely — telefonon egymás alatt.
   🔑 `minmax(0, 1fr)`: enélkül a hosszú opció-szöveg szétfeszítené a kártyát. */
.sb-kocka-sor {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.sb-kocka-sor .field { max-width: 100%; }

/* ============================================================
   SUPERADMIN — BEVÉTEL  (`muhely/admin-bevetel.php`, 2026-08-03)
   ------------------------------------------------------------
   A lapon KÉT különböző természetű dolog van, ezért két formanyelv:
   · a felső szám-kártyák a becslést mutatják (`.adm-szam`, közös),
   · a lenti oszlopdiagram a ténylegesen beérkezett pénzt.

   🔑 A diagram SAJÁT dobozában görget, a lap maga soha nem csúszik
   oldalra. Tizenkét hónap 375 px-en nem fér el olvashatóan — inkább
   görgessen, mint hogy a számok összenyomódjanak.
   ============================================================ */

/* A két szekció egymás mellett, ha van hely.
   🔑 `minmax(0, 1fr)` — sima `1fr` esetén az oszlop a TARTALOM minimumára
   feszülne, és a lap oldalra csúszna (ezt 375 px-en már egyszer megettük). */
.bev-racs {
  display: grid; gap: var(--s5); align-items: start;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.bev-racs > .sec { margin-bottom: 0; }

/* Az árfolyam csak tájékoztatás — halkabb, mint a valódi számok. */
.bev-atvaltas {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  margin: calc(-1 * var(--s4)) 0 var(--s5);
  font-size: var(--t-2); color: var(--text-muted);
}
.bev-atvaltas b { font-family: var(--font-gep); font-weight: 600; color: var(--text); }
.bev-atvaltas em { font-style: normal; font-size: var(--t-1); color: var(--text-dim); }

/* Jegyzet: ami a szám pontosságát árnyalja. Nem hiba, csak tudni kell róla. */
.bev-jegyzet {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin: 0 0 var(--s5); padding: 12px 16px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--r); color: var(--warn-text);
  font-size: var(--t-2); line-height: 1.55;
}
.bev-jegyzet .i { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }

/* ── Az oszlopdiagram ──
   Minden hónap egy grid-oszlop, azon belül három sor: összeg · sáv · hónap.
   A középső sor kapja a maradék helyet, így a sáv `height: X%`-a ahhoz mérődik. */
.bev-diagram {
  display: grid; gap: 6px;
  grid-template-columns: repeat(12, minmax(64px, 1fr));
  height: 260px; padding: var(--s4) var(--s3) var(--s3);
  overflow-x: auto; overflow-y: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.bev-oszlop {
  min-width: 0;                       /* különben a szám feszíti szét az oszlopot */
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px;
  text-align: center;
}
.bev-oszlop b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  color: var(--text-muted); line-height: 1.2;
}
/* A sáv alulról nő. A nullás hónap is kap egy vékony vonalat — így látszik,
   hogy ott is volt hónap, csak nem érkezett pénz. */
.bev-oszlop i {
  align-self: end; width: 100%; min-height: 3px;
  background: var(--bg-sunken); border-radius: var(--r) var(--r) 0 0;
}
.bev-oszlop.van i { background: var(--accent); }
.bev-oszlop span {
  font-family: var(--font-gep); font-size: var(--t-0); color: var(--text-dim);
  line-height: 1.3;
}
/* Januárnál kiírjuk az évet is — enélkül nem tudni, hol fordul a naptár. */
.bev-oszlop span em {
  display: block; font-style: normal; font-size: var(--t-0); color: var(--text-muted);
}

/* Az „ingyen adott hozzáférés” kártyái linkek, és az `a.adm-kartya { display:block }`
   miatt a magyarázó sorok egymás után FOLYNAK. Itt külön sorba kell törni őket,
   különben a szám után egy hosszú, olvashatatlan mondat marad. */
.bev-racs .gep-racs a.adm-kartya span,
.bev-racs .gep-racs a.adm-kartya small { display: block; }

@media (max-width: 900px) {
  .bev-racs { grid-template-columns: minmax(0, 1fr); }
  .bev-diagram { height: 220px; }
}

/* ============================================================
   RAJZOLT KAMERAMOZGÁS-ELŐNÉZET (.kam-rajz) — tiszta CSS, semmi kép

   MIÉRT: az első 46 kameramozgáshoz van letöltött videó-előnézet, az
   azóta felvettekhez NINCS, és ugyanabból a forrásból nem is szerezhető.
   Ehelyett egy absztrakt „jelenetet” rajzolunk, és MAGA A MOZGÁS animálja:
   ha a kamera jobbra fordul, a kép balra úszik ki — pontosan úgy, ahogy a
   valódi felvételen. Így a kártya nem üres, és nem kell hozzá egy bájt sem.

   A minta a `.elonez` rétegezését követi:
     • .kam-ter          = a jelenet (ég, horizont, talaj) — EZ mozog,
     • .kam-ter::before  = a téma (megvilágított alak a kép közepén),
     • .kam-ter::after   = a függőleges oszlopok, amiktől LÁTSZIK a mozgás.
   Rögzített színekkel dolgozik (ez egy „felvétel”), ezért sötét és világos
   témában egyformán olvasható.

   🔑 A mozgás ALAPBÓL ÁLL, és csak ráfutáskor vagy kiválasztva indul —
   ugyanaz a szabály, mint a videós kártyáknál. Így nem táncol egyszerre
   húsz doboz a képernyőn.
   ============================================================ */
.opt-thumb.kam-rajz { background: #070a11; cursor: pointer; }

/* A jelenet: alkonyati táj. Azért ezt rajzoljuk, mert a videós kártyák mellett
   áll — egy mértani ábra ott olcsónak hatna. A horizont, a nap és a széli
   sötétedés együtt már FELVÉTELNEK néz ki, nem diagramnak.
   🔑 A nap SZÁNDÉKOSAN nincs középen: a tükrözés (Tükröződésen át) csak
   aszimmetrikus képen látszik. */
.kam-ter {
  position: absolute; inset: -18%;
  background:
    radial-gradient(40% 54% at 42% 45%,
      rgba(255, 176, 86, 0.40) 0%, rgba(255, 138, 58, 0.11) 44%, transparent 72%),
    linear-gradient(180deg,
      #0a1226 0%, #16294f 28%, #40405f 46%, #8a5340 51.6%,
      #2a1c15 53%, #150f0b 74%, #0b0806 100%);
  transform-origin: 50% 50%;
  will-change: transform, filter;
}
/* A nap: ez a fő fénypont, és ezen olvasható le legjobban minden mozgás. */
.kam-ter::before {
  content: ""; position: absolute;
  left: 42%; top: 36%; width: 14%; aspect-ratio: 1; margin-left: -7%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%,
    #fff7e4 0%, #ffcd7c 44%, #f2903c 76%, rgba(242, 144, 60, 0) 100%);
}
/* Textúra + széli sötétedés. A vékony függőleges csíkok nélkül a vízszintes
   mozgás egy sima felületen észrevétlen maradna — ezek teszik olvashatóvá. */
.kam-ter::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(var(--m-feher-rgb), 0.055) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg,
      rgba(var(--m-fekete-tiszta-rgb), 0.16) 0 1px, transparent 1px 30px),
    linear-gradient(180deg, transparent 56%, rgba(var(--m-fekete-tiszta-rgb), 0.30) 100%),
    radial-gradient(112% 88% at 50% 50%, transparent 50%, rgba(var(--m-fekete-tiszta-rgb), 0.52) 100%);
}

/* ── A mozgások. A `.fut` kapcsolja be — enélkül minden áll. ──
   Az irány mindig a KAMERÁÉ: „fordulás jobbra” = a kép balra úszik.
   A lejátszás-jel („▶”) ráfutáskor magától eltűnik: azt a közös
   `.opt-thumb.fut::after` szabály intézi, itt nincs vele teendő. */

/* Fordulás helyben */
.kam-rajz.ka-korbe.fut .kam-ter { animation: 9s linear infinite ka-k-korbe; }
@keyframes ka-k-korbe { from { transform: translateX(0); } to { transform: translateX(-46%); } }

.kam-rajz.ka-dolt.fut .kam-ter { animation: 5s ease-in-out infinite alternate ka-k-dolt; }
@keyframes ka-k-dolt { from { transform: rotate(0deg); } to { transform: rotate(-11deg) scale(1.06); } }

/* Zoom és fókusz */
.kam-rajz.ka-vertigo.fut .kam-ter { animation: 6s ease-in-out infinite alternate ka-k-vertigo; }
@keyframes ka-k-vertigo { from { transform: scale(1); } to { transform: scale(1.42); } }
/* A vertigónál a TÉMA mérete nem változik — ettől lesz szédítő. */
.kam-rajz.ka-vertigo.fut .kam-ter::before { animation: 6s ease-in-out infinite alternate ka-k-vertigo-tema; }
@keyframes ka-k-vertigo-tema { from { transform: scale(1); } to { transform: scale(0.7); } }

.kam-rajz.ka-fokusz.fut .kam-ter { animation: 4.5s ease-in-out infinite alternate ka-k-fokusz; }
@keyframes ka-k-fokusz { from { filter: blur(0); } to { filter: blur(2.6px); } }
.kam-rajz.ka-fokusz.fut .kam-ter::before { animation: 4.5s ease-in-out infinite alternate ka-k-fokusz-tema; }
@keyframes ka-k-fokusz-tema { from { filter: blur(2.6px); } to { filter: blur(0); } }

.kam-rajz.ka-elesedes.fut .kam-ter { animation: 4s ease-out infinite ka-k-elesedes; }
@keyframes ka-k-elesedes {
  0%   { filter: blur(5px); }
  70%  { filter: blur(0); }
  100% { filter: blur(0); }
}

/* Kocsizás, követés, térbeli */
.kam-rajz.ka-iv.fut .kam-ter { animation: 6.5s ease-in-out infinite alternate ka-k-iv; }
@keyframes ka-k-iv { from { transform: scale(1) translateX(0); } to { transform: scale(1.3) translateX(9%); } }

.kam-rajz.ka-felul.fut .kam-ter { animation: 5.5s linear infinite ka-k-felul; }
@keyframes ka-k-felul { from { transform: translateY(0) scale(1.15); } to { transform: translateY(-24%) scale(1.15); } }

.kam-rajz.ka-atlo.fut .kam-ter { animation: 6s ease-in-out infinite alternate ka-k-atlo; }
@keyframes ka-k-atlo { from { transform: translate(0, 0) scale(1); } to { transform: translate(-13%, 6%) scale(1.24); } }

/* Kézi kamera — a remegés a jellemzője, ezért rövid, szabálytalan ciklus */
.kam-rajz.ka-razas.fut .kam-ter { animation: 0.7s steps(1, end) infinite ka-k-razas; }
@keyframes ka-k-razas {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-2.4%, 1.6%) rotate(1.2deg); }
  40%  { transform: translate(2%, -1.8%) rotate(-1deg); }
  60%  { transform: translate(-1.4%, -2.2%) rotate(0.8deg); }
  80%  { transform: translate(2.6%, 1.2%) rotate(-1.4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.kam-rajz.ka-lepes.fut .kam-ter { animation: 1.5s ease-in-out infinite ka-k-lepes; }
@keyframes ka-k-lepes {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1.06); }
  25%  { transform: translate(-1%, -1.6%) rotate(-0.8deg) scale(1.06); }
  50%  { transform: translate(0, 0.6%) rotate(0deg) scale(1.06); }
  75%  { transform: translate(1%, -1.6%) rotate(0.8deg) scale(1.06); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1.06); }
}

.kam-rajz.ka-lebeges.fut .kam-ter { animation: 5s ease-in-out infinite alternate ka-k-lebeges; }
@keyframes ka-k-lebeges { from { transform: translate(0, 0); } to { transform: translate(-1.1%, 0.8%); } }

.kam-rajz.ka-lopakodo.fut .kam-ter { animation: 7s ease-in-out infinite alternate ka-k-lopakodo; }
@keyframes ka-k-lopakodo {
  0%   { transform: scale(1) translate(0, 0); }
  33%  { transform: scale(1.12) translate(0.8%, -0.6%); }
  66%  { transform: scale(1.2) translate(-0.7%, 0.5%); }
  100% { transform: scale(1.34) translate(0.4%, 0); }
}

.kam-rajz.ka-kezikor.fut .kam-ter { animation: 7s linear infinite ka-k-kezikor; }
@keyframes ka-k-kezikor {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-10%) rotate(0.9deg); }
  50%  { transform: translateX(-20%) rotate(-0.7deg); }
  75%  { transform: translateX(-10%) rotate(1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.kam-rajz.ka-kereses.fut .kam-ter { animation: 4.5s steps(1, end) infinite ka-k-kereses; }
@keyframes ka-k-kereses {
  0%, 18%   { transform: translateX(0); }
  22%, 44%  { transform: translateX(-16%); }
  48%, 66%  { transform: translateX(9%); }
  70%, 100% { transform: translateX(-4%); }
}

/* Drón és daru */
.kam-rajz.ka-emelkedes.fut .kam-ter { animation: 6.5s ease-in-out infinite alternate ka-k-emelkedes; }
@keyframes ka-k-emelkedes { from { transform: scale(1.55) translateY(-12%); } to { transform: scale(1) translateY(0); } }

.kam-rajz.ka-legikor.fut .kam-ter { animation: 8s linear infinite ka-k-legikor; }
@keyframes ka-k-legikor { from { transform: translateX(0) scale(1.12); } to { transform: translateX(-32%) scale(1.12); } }

.kam-rajz.ka-atrepules.fut .kam-ter { animation: 5s ease-in infinite ka-k-atrepules; }
@keyframes ka-k-atrepules {
  0%   { transform: scale(1); filter: blur(0); }
  78%  { transform: scale(2.3); filter: blur(0.6px); }
  100% { transform: scale(3.2); filter: blur(2px); }
}

.kam-rajz.ka-lefele.fut .kam-ter { animation: 6s ease-in-out infinite alternate ka-k-lefele; }
@keyframes ka-k-lefele { from { transform: scale(1) translateY(0); } to { transform: scale(1.5) translateY(7%); } }

.kam-rajz.ka-legiuldozes.fut .kam-ter { animation: 3.5s linear infinite ka-k-legiuldozes; }
@keyframes ka-k-legiuldozes { from { transform: translateY(0) scale(1.18); } to { transform: translateY(-18%) scale(1.18); } }

/* Különlegesek */
.kam-rajz.ka-megallt.fut .kam-ter { animation: 5s ease-in-out infinite alternate ka-k-megallt; }
@keyframes ka-k-megallt { from { transform: translateX(6%) scale(1.1); } to { transform: translateX(-20%) scale(1.1); } }
/* Bullet time: a téma MEGDERMED, ezért ellenmozgással a helyén tartjuk. */
.kam-rajz.ka-megallt.fut .kam-ter::before { animation: 5s ease-in-out infinite alternate ka-k-megallt-tema; }
@keyframes ka-k-megallt-tema { from { transform: translateX(-5%); } to { transform: translateX(18%); } }

.kam-rajz.ka-tukor.fut .kam-ter { animation: 6s ease-in-out infinite alternate ka-k-tukor; }
@keyframes ka-k-tukor { from { transform: scaleX(-1) translateX(6%); } to { transform: scaleX(1) translateX(0); } }

.kam-rajz.ka-rejtett.fut .kam-ter { animation: 3.6s ease-in-out infinite ka-k-rejtett; }
@keyframes ka-k-rejtett {
  0%, 34%   { transform: translateX(0); filter: blur(0); }
  50%       { transform: translateX(-30%); filter: blur(7px); }
  66%, 100% { transform: translateX(-60%); filter: blur(0); }
}

.kam-rajz.ka-fejjel.fut .kam-ter { animation: 7s ease-in-out infinite alternate ka-k-fejjel; }
@keyframes ka-k-fejjel { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }

.kam-rajz.ka-oner.fut .kam-ter { animation: 9s ease-in-out infinite ka-k-oner; }
@keyframes ka-k-oner {
  0%   { transform: scale(1) translateX(0); }
  30%  { transform: scale(1.5) translateX(-6%); }
  55%  { transform: scale(1.5) translateX(-22%); }
  80%  { transform: scale(2.1) translateX(-16%); }
  100% { transform: scale(1) translateX(0); }
}

/* 🔴 Aki kikapcsolta a mozgást a gépén, annál MINDEN áll — a kártya akkor is
   olvasható marad, mert a jelenet maga rajzolt, nem a mozgásból áll össze. */
@media (prefers-reduced-motion: reduce) {
  .kam-rajz .kam-ter,
  .kam-rajz .kam-ter::before,
  .kam-rajz .kam-ter::after { animation: none !important; }
}

/* ============================================================
   MI ÚJSÁG — a rendszer változásai a felhasználó felé (`_ujsag.php`)

   🔑 KÉT ÁLLAPOT. Amíg van olvasatlan hír, a sáv nyitva áll és lime keretet
   kap. Ha mindet látta, egyetlen halvány sorrá zsugorodik — ott marad, de
   nem versenyez a „Folytatom” gombbal, ami a lap valódi dolga.
   ============================================================ */
.ujsag {
  margin: 0 0 var(--s5);
  /* 🔴 `--border`, NEM `--line`: az utóbbi SOHA nem létezett ebben a rendszerben.
     Egy ismeretlen változóval az EGÉSZ `border` deklaráció érvénytelen, ezért a
     sávnak némán nem volt kerete — hibaüzenet nélkül, hónapokig. */
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-card);
  overflow: hidden;
}
.ujsag.van-uj { border-color: var(--accent-line, var(--accent)); }

.ujsag-fej {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: 44px; padding: 10px var(--s4);
  background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--text-dim); text-align: left;
}
.ujsag-fej:hover { color: var(--text); }
.ujsag-cimke {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-1); font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ujsag.van-uj .ujsag-cimke { color: var(--text); }
.ujsag-cimke .i { width: 15px; height: 15px; }

/* Az „N új” jelzés: a SZÁM az információ, ezért az kap hangsúlyt. */
.ujsag-uj {
  padding: 2px 8px; border-radius: var(--r);
  background: var(--accent); color: var(--accent-text);
  font-size: var(--t-0); font-weight: 700; line-height: 1.5;
}
.ujsag-nyil { margin-left: auto; display: inline-flex; transition: transform 0.18s; }
.ujsag-nyil .i { width: 16px; height: 16px; transform: rotate(90deg); }
.ujsag.nyitva .ujsag-nyil { transform: rotate(180deg); }

/* Csukva NULLA magasság — nem hagy maga után rést a lapon. */
.ujsag-lista { display: none; padding: 0 var(--s4) var(--s4); }
.ujsag.nyitva .ujsag-lista { display: block; }

.ujsag-tetel {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s3);
  padding-top: var(--s4); border-top: 1px solid var(--border);
}
.ujsag-tetel + .ujsag-tetel { margin-top: var(--s4); }
.ujsag-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r);
  background: var(--bg-sunken); color: var(--text-dim);
}
.ujsag-ikon .i { width: 16px; height: 16px; }
.ujsag-szoveg b { display: block; font-size: var(--t-2); line-height: 1.35; }
.ujsag-szoveg time {
  display: block; margin: 2px 0 6px;
  font-family: var(--font-gep); font-size: var(--t-0); color: var(--text-muted);
}
.ujsag-szoveg p { margin: 0; color: var(--text-dim); font-size: var(--t-2); line-height: 1.55; }
.ujsag-gomb {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: var(--t-2); font-weight: 600; color: var(--accent-ink);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.ujsag-gomb:hover { text-decoration-thickness: 2px; }
.ujsag-gomb .i { width: 14px; height: 14px; }

/* Telefonon az ikon-oszlop elveszi a szöveg helyét — ott sortörés jobb. */
@media (max-width: 520px) {
  .ujsag-tetel { grid-template-columns: minmax(0, 1fr); }
  .ujsag-ikon { display: none; }
}

/* A régebbi hírek egyetlen sorban — a cím elmondja, miről van szó.
   Enélkül három teljes hír nyomta le a „Folytatom” kártyát a hajtás alá. */
.ujsag-tetel--sor { display: block; padding-top: 10px; }
.ujsag-tetel--sor + .ujsag-tetel--sor { margin-top: 0; }
.ujsag-tetel--sor > a,
.ujsag-tetel--sor > span {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 0; color: var(--text-dim); text-decoration: none;
}
.ujsag-tetel--sor > a:hover { color: var(--text); }
.ujsag-tetel--sor b { font-size: var(--t-2); font-weight: 600; }
.ujsag-tetel--sor time { margin: 0; white-space: nowrap; }
.ujsag-tetel--sor .i { width: 13px; height: 13px; margin-left: auto; flex: 0 0 auto; }
@media (max-width: 520px) {
  .ujsag-tetel--sor > a, .ujsag-tetel--sor > span { flex-wrap: wrap; gap: 2px 10px; }
}

/* ============================================================
   AI-KERET A FELSŐ SÁVBAN (`wlai_bar_keret`)

   A user szava: „ez pénz, nem szabad csendben fogynia." Eddig csak a
   fiók-lapon látszott — vagyis ott, ahova munka közben senki nem megy.
   Itt EGY szám áll: mennyi maradt. A figyelmeztető szín csak 80% fölött
   kapcsol be, addig ne vonja el a figyelmet a munkáról.
   ============================================================ */
.bar-keret {
  display: flex; align-items: baseline; gap: 5px; flex-shrink: 0;
  padding: 6px 10px; border-radius: var(--r);
  border: 1px solid var(--border); background: rgba(var(--m-feher-rgb), 0.05);
  color: var(--text-dim); font-size: var(--fs-meta);
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bar-keret:hover {
  border-color: var(--accent-line); color: var(--text);
  background: rgba(var(--m-lime-rgb), 0.08);
}
.bar-keret .i { width: 14px; height: 14px; align-self: center; }
.bar-keret b { font-family: var(--font-gep); font-size: var(--t-1); color: var(--text); }
.bar-keret span { font-family: var(--font-gep); font-size: var(--t-0); }

/* Fogyóban: a SZÁM vált színt, nem az egész doboz — a riasztás legyen halk. */
.bar-keret.fogy b { color: var(--m-borostyan); }
.bar-keret.fogy { border-color: rgba(255, 176, 46, 0.45); }

/* Korlátlan fióknál nincs mit számolni, de a jelző ott marad: enélkül az
   adminok soha nem látnák, hogy egyáltalán működik. */
.bar-keret--korlatlan { opacity: 0.72; }
.bar-keret--korlatlan span { font-family: inherit; font-size: var(--fs-meta); }

/* Szűk sávon a per-jeles teljes keret nem fér el a kereső és a három gomb
   mellé — ott csak a maradék szám marad, az a lényeg. */
@media (max-width: 1100px) { .bar-keret span { display: none; } }
@media (max-width: 760px)  { .bar-keret { display: none; } }

/* ── ÁTTEKINTÉS: a menü első pontja (2026-08-03) ──
   A user szava a „Minden eszköz” kivétele után: „nem egyértelmű, hogy a logóra
   kell kattintani." A belépő ezért a sáv TETEJÉRE került, a szakaszok elé —
   és egy vonal választja el a folyamattól, hogy ne tűnjön a film egyik
   lépésének. */
/* 2026-08-03, a user pontosítása: „a Műhely menüpontot húzd hozzá a menühöz."
   → A pont a `sav-folyamat`-on BELÜL, a szakaszokkal egy blokkban áll; az
   elválasztó vonal lekerült, csak egy kis térköz maradt alatta. */
.sav-attekintes { margin: 0 0 4px; }

/* ── A BAL MENÜ NEM VILLAN (a user jelzése, 2026-08-03) ──
   A becsukott szakaszok neve a <html data-sav-zarva="…">-ban áll, még a menü
   kirajzolása ELŐTT (lásd a `<head>` scriptjét a `_kozos.php`-ban). Így a
   böngésző már az első festéskor a helyes állapotot mutatja — korábban a lap
   alján futó script csukta be őket utólag, és a menü láthatóan összerándult.
   A `~=` a szóközzel elválasztott listában keres, ezért egyetlen attribútum
   elég mind az öt szakaszhoz. */
/* 🔑 A `:not(.nyitva-kell)` az AKTUÁLIS szakaszt kihagyja: amelyikben állsz,
   az akkor is nyitva marad, ha korábban becsuktad. */
[data-sav-zarva~="fejlesztes"]  .sav-szakasz[data-szakasz="fejlesztes"]:not(.nyitva-kell)  .szak-lepesek,
[data-sav-zarva~="elokeszites"] .sav-szakasz[data-szakasz="elokeszites"]:not(.nyitva-kell) .szak-lepesek,
[data-sav-zarva~="forgatas"]    .sav-szakasz[data-szakasz="forgatas"]:not(.nyitva-kell)    .szak-lepesek,
[data-sav-zarva~="utomunka"]    .sav-szakasz[data-szakasz="utomunka"]:not(.nyitva-kell)    .szak-lepesek,
[data-sav-zarva~="kozzetetel"]  .sav-szakasz[data-szakasz="kozzetetel"]:not(.nyitva-kell)  .szak-lepesek { display: none; }

[data-sav-zarva~="fejlesztes"]  .sav-szakasz[data-szakasz="fejlesztes"]:not(.nyitva-kell)  .szak-nyil,
[data-sav-zarva~="elokeszites"] .sav-szakasz[data-szakasz="elokeszites"]:not(.nyitva-kell) .szak-nyil,
[data-sav-zarva~="forgatas"]    .sav-szakasz[data-szakasz="forgatas"]:not(.nyitva-kell)    .szak-nyil,
[data-sav-zarva~="utomunka"]    .sav-szakasz[data-szakasz="utomunka"]:not(.nyitva-kell)    .szak-nyil,
[data-sav-zarva~="kozzetetel"]  .sav-szakasz[data-szakasz="kozzetetel"]:not(.nyitva-kell)  .szak-nyil { transform: rotate(-90deg); }

/* ── A PROJEKT FEJSORA: vissza-link balra, törlés jobbra (2026-08-03) ──
   A user: „ezt nagyon rossz helyre tetted, magenta színnel kell a gomb és
   valami jól látható helyre tedd." A gomb a lap aljáról ide, a projekt neve
   fölé került. A `space-between` tartja a két szélen; szűk kijelzőn a törlés
   a link ALÁ csúszik, nem szorul rá. */
.proj-fejsor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
/* 🔴 2026-08-04, a user: „a fenti vissza gomb balra rendezve."
   A gomb DOBOZA eddig is a bal szélen ült — a FELIRATA viszont 11 px-szel
   beljebb kezdődött a belső margó miatt, miközben a projekt neve alatta
   pontosan a szélen. Ez a 11 px látszott elcsúszásnak.
   🔑 Negatív margóval húzzuk vissza, NEM a belső margó nullázásával: így a
      felirat a szélre kerül, de a fölé húzott háttér és a kattintható felület
      megmarad a mostani méretében. */
.proj-fejsor > .top-link { margin-left: -13px; }
@media (max-width: 520px) { .proj-fejsor > .top-link { margin-left: 0; } }
.proj-torlo-fent { margin: 0; }
.proj-torlo-fent .i { width: 15px; height: 15px; vertical-align: 0; }
@media (max-width: 520px) {
  .proj-fejsor { align-items: stretch; }
  .proj-torlo-fent, .proj-torlo-fent .btn { width: 100%; justify-content: center; }
}

/* ── A PROJEKT TÖRLÉSE A FOLYAMAT-SÁVBÓL (`.pbar`, 2026-08-03) ──
   A user: „a projekt törlése a folyamat bármely szakaszából elérhető kell
   legyen." A gomb a sáv JOBB SZÉLÉN áll — ugyanabban a sorban, ami kiírja,
   melyik projektben dolgozol, tehát ránézésre egyértelmű, mit töröl. */
.pbar-torlo { margin: 0 0 0 auto; flex: none; }
.pbar-torlo .i { width: 15px; height: 15px; vertical-align: 0; }
/* Szűk kijelzőn a sáv amúgy is tördel: ott a gomb saját sorba kerül, teljes
   szélességben — így nem szorítja ki a projekt nevét. */
@media (max-width: 620px) {
  .pbar-torlo { margin-left: 0; width: 100%; }
  .pbar-torlo .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   NEWS — hírből tartalom (Enterprise)
   ============================================================ */

/* A menüpont a felső sávban — MAGENTA, mint a Hollywood Box és a Kedvenceim.
   (Először áttetsző-fehérre vettem, hogy elváljon tőlük; a user visszakérte a
   magentát: „a news szintén magenta szinu mint a többi gomb.") */
.bar-news {
  background: var(--accent2); color: var(--szines-text, var(--m-feher)); border-color: var(--accent2);
  text-decoration: none;
}
.bar-news:hover { filter: brightness(1.06); }
.bar-news .i { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .bar-news { padding: 0 10px; }
  .bar-news span { display: none; }
}

/* A napi keret. Nem díszcsík: egy hírkeresés a szokásos hívás negyvenszerese,
   ezért látnia kell, mennyi maradt — mielőtt elfogy. */
.news-keret {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 var(--s4); padding: 7px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  font-size: var(--t-1); font-weight: 600; color: var(--text-muted);
}
.news-keret .i { width: 15px; height: 15px; color: var(--accent); }

.news-sec { margin-bottom: var(--s4); }

/* 🔴 minmax(0, 1fr), sose sima 1fr: a sima 1fr a TARTALOM minimumára feszül,
   és 375 px-en oldalra csúsztatja a lapot. Ez a csapda már háromszor harapott. */
.news-valaszto {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s3);
}
.news-valaszto > * { min-width: 0; }
@media (max-width: 720px) {
  .news-valaszto { grid-template-columns: minmax(0, 1fr); }
}

/* A kártya maga a választás. A rádiógomb rejtve dolgozik — a kijelölést a
   lime keret mutatja („ezt TE választottad"). */
.news-kartya {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s3) var(--s4);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  cursor: pointer; transition: border-color 0.14s, background 0.14s;
}
.news-kartya:hover { border-color: var(--accent-line); }
.news-kartya input { position: absolute; opacity: 0; pointer-events: none; }
.news-kartya.kivalasztva {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.news-kartya:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-kartya-fej { display: flex; align-items: center; gap: 8px; font-size: var(--t-2); }
.news-kartya-fej .i { width: 18px; height: 18px; color: var(--accent); flex: none; }
.news-kartya-mit  { font-size: var(--t-1); color: var(--text); line-height: 1.5; }
.news-kartya-mire { font-size: var(--t-1); color: var(--text-muted); }

.news-inditas { margin-top: var(--s2); }

/* ── AZ EREDMÉNY ── */
.news-eredmeny { margin-top: var(--s5); }
.news-eredmeny[hidden] { display: none; }

.news-fejsav {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.news-fejsav b { font-size: var(--t-3); }
.news-fejsav .btn { margin-left: auto; }
@media (max-width: 520px) {
  .news-fejsav .btn { margin-left: 0; width: 100%; justify-content: center; }
}

.news-doboz {
  padding: var(--s4);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  margin-bottom: var(--s3);
}
.news-doboz h3 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px; font-size: var(--t-1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.news-doboz h3 .i { width: 15px; height: 15px; color: var(--accent); }
.news-doboz p { margin: 0; line-height: 1.6; white-space: pre-wrap; }

/* A hír maga nagyobb — ez a lap egyetlen fő állítása. */
.news-hir p { font-size: var(--t-4); font-weight: 600; line-height: 1.45; }
/* Az indoklás a lime oldalán áll: ettől lesz ellenőrizhető, nem hihető. */
.news-miert { border-left: 3px solid var(--accent); }
.news-ures { color: var(--text-muted); font-style: italic; }

.news-parban {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.news-parban > * { min-width: 0; }
@media (max-width: 720px) {
  .news-parban { grid-template-columns: minmax(0, 1fr); }
}

/* A nyers válasz és a források csukva indulnak — segédanyag, nem a fő üzenet. */
.news-nyers, .news-forrasok {
  margin-bottom: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-card);
}
.news-nyers > summary, .news-forrasok > summary {
  padding: 10px var(--s4); cursor: pointer;
  font-size: var(--t-1); font-weight: 700; color: var(--text-muted);
}
.news-nyers > summary:hover, .news-forrasok > summary:hover { color: var(--text); }
.news-nyers pre {
  margin: 0; padding: 0 var(--s4) var(--s4);
  font-size: var(--t-1); line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.news-forras-lista { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--s4); }
.news-forras-lista a {
  font-size: var(--t-1); color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-forras-lista a:hover { color: var(--accent-ink); text-decoration: underline; }
.news-lekerdezesek {
  padding: var(--s3) var(--s4) var(--s4);
  font-size: var(--t-1); color: var(--text-muted); word-break: break-word;
}

/* ── NEWS: 2. lépcső — a gyártási csomag ── */
.news-gyartas { margin: var(--s5) 0 var(--s4); }
.news-gyartas .sec-label { margin-bottom: var(--s3); }

/* A beállítások: mind „a hírből" alapból. Ami nem érvényes az adott
   poszt-típusra, az el is tűnik — üres kérdést nem teszünk fel. */
.news-beall {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(0, 200px));
  margin-bottom: var(--s4);
}
.news-beall > * { min-width: 0; }
.news-beall-mezo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.news-beall-mezo[hidden] { display: none; }
.news-beall-mezo > span {
  font-size: var(--t-0); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.news-beall-mezo select {
  width: 100%; height: 36px; padding: 0 10px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  font-family: inherit; font-size: var(--t-2);
}
@media (max-width: 520px) {
  .news-beall { grid-template-columns: minmax(0, 1fr); }
}

.news-csomag { margin-top: var(--s4); }
.news-csomag[hidden] { display: none; }
.news-csomag-fej {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.news-csomag-fej b    { font-size: var(--t-4); }
.news-csomag-fej span { font-size: var(--t-1); color: var(--text-muted); }

/* A nyitó sáv és a poszt szövege: ez a csomag legfontosabb doboza. */
.news-nyito { border-left: 3px solid var(--accent2); }

/* Egy jelenet. A klipek külön készülnek, ezért mindegyik önálló kártya. */
.news-jelenet {
  padding: var(--s3) var(--s4);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  margin-bottom: var(--s2);
}
.news-jelenet-fej {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.news-jelenet-fej b    { font-size: var(--t-2); }
.news-jelenet-fej span { font-size: var(--t-1); color: var(--text-muted); margin-left: auto; }

/* 🔴 minmax(0, …): a hosszú angol prompt különben szétfeszítené a sort. */
.news-sor {
  display: grid; grid-template-columns: minmax(0, 108px) minmax(0, 1fr) auto;
  gap: var(--s3); align-items: start; padding: 5px 0;
}
.news-sor > b {
  font-size: var(--t-0); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); padding-top: 2px;
}
/* 🔑 `pre-wrap`: a FELIRAT mezőben a sortörés maga az információ — a felirat
   két sorra van tördelve (max 32 karakter soronként). Enélkül a böngésző
   összevonná őket, és pont az veszne el, amit a mező mutatni akar. */
.news-sor > span { font-size: var(--t-2); line-height: 1.55; word-break: break-word;
                   white-space: pre-wrap; }
/* Ami a GÉPNEK megy, az más anyag: monospace, hogy ránézésre elváljon. */
.news-sor-kod > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-1); color: var(--text-muted);
}
@media (max-width: 620px) {
  .news-sor { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .news-sor .hb-masol { justify-self: start; }
}

/* ============================================================
   ÖNFRISSÍTÉS — a heti kör javaslatai (superadmin)
   ------------------------------------------------------------
   A javaslat a `.ms-javaslat` magenta élét örökli: az jelzi, hogy
   ez még NEM szabály, hanem döntést vár. Ami itt új, az a
   KÜLÖNBSÉG-NÉZET — a valódi sorok, amik változnának.
   ============================================================ */
.onfr-javaslat { margin-bottom: var(--s5); }

.onfr-forrasok { margin: 0 0 var(--s4); }
.onfr-forrasok b {
  display: block; margin-bottom: 5px;
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
}
.onfr-forrasok ul { margin: 0; padding-left: 18px; }
.onfr-forrasok li { margin-bottom: 4px; font-size: var(--t-2); line-height: 1.55; }
.onfr-forrasok a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px;
                   overflow-wrap: anywhere; }

.onfr-diff-doboz { margin-bottom: var(--s3); }

/* A különbség saját dobozban görög — a LAP maga soha nem csúszhat oldalra. */
.onfr-diff {
  overflow-x: auto; max-height: 60vh; overflow-y: auto;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px 0;
}
/* 🔴 minmax(0, 1fr) a sávnál is: egy hosszú, szóköz nélküli sor különben
   szétfeszítené a rácsot, és a doboz görgetése helyett a LAP csúszna el. */
.onfr-diff-sor {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  align-items: start; padding: 1px 0;
}
.onfr-diff-sor > span {
  font-family: var(--font-gep); font-size: var(--t-1); font-weight: 700;
  text-align: center; color: var(--text-dim); user-select: none;
}
.onfr-diff-sor > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-1); line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere; color: var(--text-muted); padding-right: 12px;
}
.onfr-diff-sor.plusz  { background: var(--accent-soft); }
.onfr-diff-sor.plusz  > span,
.onfr-diff-sor.plusz  > code { color: var(--accent-ink); }
.onfr-diff-sor.minusz { background: var(--warn-bg); }
.onfr-diff-sor.minusz > span,
.onfr-diff-sor.minusz > code { color: var(--warn-text); text-decoration: line-through;
                               text-decoration-thickness: 1px; }

.onfr-lab { margin-top: var(--s4); }
.onfr-lab form { display: contents; }

@media (max-width: 620px) {
  .onfr-diff { max-height: 50vh; }
  .onfr-lab .btn { width: 100%; justify-content: center; }
  .onfr-lab form { display: block; width: 100%; }
}

/* ============================================================
   TÖBBSZÖRÖS VÁLASZTÁS — lenyíló formában (2026-08-04)
   ------------------------------------------------------------
   A user kérése: „ahol van értelme a lenyílóban több opciót kiválasztani,
   ott legyen lehetőség." Kinézetre lenyíló, viselkedésre jelölőnégyzet-lista.
   🔑 Szándékosan NEM `<select multiple>`: ahhoz Ctrl kell, telefonon pedig
   használhatatlan. Így JS nélkül is nyílik, és látszik, mit választottál.
   ============================================================ */
.tobbvalaszt { position: relative; }
.tobbvalaszt > summary {
  display: flex; align-items: center; gap: var(--s2);
  height: 40px; padding: 0 34px 0 12px; cursor: pointer;
  background: var(--bg-sunken); border: 1px solid var(--field-border); border-radius: var(--r);
  font-size: var(--fs-body); color: var(--text); list-style: none;
}
.tobbvalaszt > summary::-webkit-details-marker { display: none; }
/* A lenyíló-nyíl — ugyanaz a jel, mint a `<select>`-en. */
.tobbvalaszt > summary::after {
  content: ""; position: absolute; right: 13px; top: 16px;
  width: 7px; height: 7px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg); transition: transform .15s;
}
.tobbvalaszt[open] > summary::after { transform: rotate(-135deg); top: 19px; }
.tobbvalaszt > summary:hover { border-color: var(--border-strong); }
.tobbvalaszt > summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.tv-ertek { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-szam {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-gep); font-size: var(--t-0); font-weight: 700;
}
.tv-szam[hidden] { display: none; }

/* A lista a mező ALATT nyílik ki, és nem tolja szét a rácsot: a doboz
   fölé rétegződik, saját görgetéssel. */
.tv-lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 280px; overflow-y: auto; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
/* 🔑 TÖMÖRebb SOROK (a user kérése, 2026-08-04): a lista magas volt, tizenkét
   opciónál fölöslegesen sokat kellett görgetni. */
.tv-elem {
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px 9px; border-radius: var(--r); cursor: pointer;
  font-size: var(--fs-meta); line-height: 1.3;
}
.tv-elem:hover { background: var(--bg-card-hover); }

/* 🔴 SAJÁT JELÖLŐNÉGYZET — az „árnyék" oka.
   A böngésző alapértelmezett négyzete VILÁGOS hátteret és saját belső keretet
   rajzol; sötét témán ez egy fénylő folt, ami árnyéknak látszik a szomszédja
   mellett. Az `accent-color` csak a BEPIPÁLT állapotot színezi — az üres
   négyzeten nem segít. Ezért rajzoljuk magunk: átlátszó háttér, a rendszer
   keretszíne, és lime kitöltés pipával, ha be van jelölve. */
/* 🔴 A `min-height` ÉS a `padding` KINULLÁZÁSA KÖTELEZŐ. A közös mező-szabály
   (`.field input, .field select, …`) minden beviteli elemnek 42 px minimum
   magasságot és 10/13 px belső margót ad — és ez a doboz a `.field`-en BELÜL
   ül, tehát a jelölőnégyzetre is ráült. Emiatt lett 42 px magas a 16 px
   helyett, és emiatt volt fölöslegesen magas minden sor. A `height` önmagában
   NEM elég: a `min-height` erősebb nála. Mérve, nem feltételezve. */
.tv-elem > input {
  flex: none; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background: var(--bg-sunken); border: 1.5px solid var(--field-border);
  border-radius: 3px; position: relative;
  transition: background .12s, border-color .12s;
}
.tv-elem > input:hover { border-color: var(--border-strong); }
.tv-elem > input:checked { background: var(--accent); border-color: var(--accent-line); }
/* A pipa két vonalból — így nem kell hozzá betűkészlet vagy kép. */
.tv-elem > input:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid var(--accent-text); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tv-elem > input:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }

.tv-elem > span { min-width: 0; }
.tv-elem:has(input:checked) { background: var(--accent-soft); }
.tv-elem:has(input:checked) > span { color: var(--accent-ink); font-weight: 600; }

@media (max-width: 520px) {
  /* 🔑 Telefonon a sor MARAD 44 px magas — ott az ujjad a mérce, nem az egér.
     A tömörítés (a user kérése) az asztali nézetre vonatkozik, ahol egérrel
     kattintasz és a görgetés a drága. */
  .tobbvalaszt > summary { height: 44px; }
  .tv-elem { padding: 10px; min-height: 44px; }
  .tv-lista { max-height: 60vh; }
}

/* ── JOGI SOR A MŰHELY ALJÁN (2026-08-04) ──
   A fiók-lapon lehet előfizetni, tehát a feltételeknek a belépés mögött is
   elérhetőnek kell lenniük. Diszkrét, de megtalálható. */
.app-jogi {
  margin: 40px auto 0; padding: 18px var(--oldal-margo) 26px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
}
/* ── A JOGI SÁV A LAP ALJÁN MARAD (2026-08-05, a user kérése) ──
   A user: „ezt a részt rögzítsd le a kép aljára fixen." Rövid lapon (Projektek,
   Műhely) a sáv a tartalom után lógott, alatta 80-200 px üresen — mérve.
   🔑 NEM `position: fixed`: az MINDEN lapon elvenne egy sávnyit a munkából, és
      hosszú listáknál a tartalmat fedné. Ehelyett a törzs kitölti a képernyőt,
      és a sáv alá kerül — rövid lapon a kép alján ül, hosszún a tartalom végén.
   ⚠️ Mérve, hogy biztonságos: a `body` többi gyereke vagy `display: none`
      (scriptek, modális hátterek), vagy `fixed`/`absolute` (ikon-készlet,
      fel-gomb) — egyik sem vesz részt a flex-elrendezésben. */
body { display: flex; flex-direction: column; min-height: calc(100vh / var(--z, 1)); }
body > .app-torzs { flex: 1 0 auto; }
.app-jogi { flex: 0 0 auto; }

/* 🔴 2026-08-05, a user: „az adatvédelmi sáv a footerben nem stimmel."
   Igaza volt: a jogi sor a törzs-burkon KÍVÜL íródik ki (a `wlai_footer()` a
   `</div>` után teszi), ezért nem tudott a bal oldalsávról — és az első link
   fele eltűnt alatta („…tvédelem"). A képein ez végig ott volt.
   🔑 CSS-sel oldjuk meg, nem a kiírás sorrendjének átrendezésével: a HTML-hez
      nyúlva minden lap láblécét kockáztatnánk egy behúzásért. */
body:has(.app-torzs) .app-jogi {
  padding-left: calc(var(--sav-w) + var(--oldal-margo));
  padding-right: calc(var(--jsav-w) + var(--oldal-margo));
}
.app-jogi nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.app-jogi a {
  color: var(--text-dim); text-decoration: none; font-size: var(--t-1);
  padding: 5px 0; min-height: 26px;
}
.app-jogi a:hover { color: var(--text); }
/* 🔴 2026-08-04, a user: „a © 2026 WEBLOCK MEDIA LTD … sáv jelenleg szét van
   esve. Kerüljön a helyére."
   Itt egy `margin-left: auto` állt, ami a cégadatot a lap JOBB SZÉLÉRE tolta:
   1440 px-en ~700 px üresség tátongott a jogi linkek és a cégnév között, és a
   kettő két külön dolognak látszott. Most egymás mellett futnak, balra zárva —
   a `gap: 8px 20px` adja a térközt, és szűk helyen magától tördelődik. */
.app-jogi span { font-size: var(--t-1); color: var(--text-dim); }

/* Létszám-plafon a Meghívók lapon (2026-08-04). */
.mh-plafon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 6px; }
.mh-plafon input {
  padding: 9px 11px; border: 1px solid var(--field-border); border-radius: var(--r);
  background: var(--bg-card); color: var(--text); font-size: var(--fs-body);
}
.mh-plafon-all { font-size: var(--fs-meta); color: var(--text-muted); }
.mh-plafon-all.tele { color: var(--magenta, var(--m-magenta)); font-weight: 600; }

/* ── Fiók-törlés (2026-08-04, GDPR) ──
   🔴 ÖSSZECSUKVA ÉS VÖRÖSSEL. Egy visszafordíthatatlan műveletnek látszania
   kell annak, ami — de nem szabad nyitva állnia egy olyan lapon, ahol nevet
   és jelszót is szoktak írni. */
.fiok-torles { margin-top: var(--s5); border-top: 1px solid var(--border); padding-top: var(--s4); }
.fiok-torles > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--text-dim);
  padding: 8px 0; min-height: 32px;
}
.fiok-torles > summary::-webkit-details-marker { display: none; }
.fiok-torles > summary::before {
  content: ""; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .18s ease;
}
.fiok-torles[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.fiok-torles > summary:hover { color: var(--text); }
.fiok-torles-belso {
  margin-top: var(--s3); padding: var(--s4);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--bg-sunken);
}
.torles-gomb { background: var(--m-piros-mely) !important; border-color: var(--m-piros-mely) !important; color: var(--m-feher) !important; }
.torles-gomb:hover { background: var(--m-piros-sotet) !important; border-color: var(--m-piros-sotet) !important; }
.torles-gomb:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Javaslat-doboz (2026-08-04, a zárt teszthez) ── */
/* 🎨 A JAVASLAT-GOMB — a Hollywood Box állapotjelzőjének formanyelvével
   (a user kérése, 2026-08-04): lime→magenta átmenet, és végigfut rajta
   ugyanaz a fénycsík, ami ott a „dolgozik a rendszer" jelzés.

   🔑 UGYANAZ AZ ANIMÁCIÓ (`pro-feny`) és ugyanazok a szín-arányok, mint a
   `.hb-allapot[data-allapot="fut"]`-nál — nem egy hasonló, hanem A MÁSIK.
   Két egyforma szándékú elem ne nézzen ki kicsit másképp.

   🔑 A FÉNY ITT MINDIG FUT, nem csak munka közben: a gombnak az a dolga,
   hogy észrevedd. Az állapotjelzőnél a mozgás információt hordoz (dolgozik),
   itt a figyelmet hívja — ezért nincs hozzá állapot. */
.bar-javaslat {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--accent) 0%, var(--accent) 38%, var(--accent2) 100%) !important;
  border-color: var(--accent2) !important;
  color: var(--lime-sotet, #06111d) !important;
}
.bar-javaslat::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg,
      transparent, rgba(var(--m-feher-rgb),0.42) 40%, rgba(var(--m-feher-rgb),0.22) 60%, transparent);
  transform: skewX(-18deg);
  animation: pro-feny 4.5s ease-in-out infinite;
  pointer-events: none;
}
.bar-javaslat .i, .bar-javaslat span { position: relative; z-index: 1; }
.bar-javaslat:hover { filter: brightness(1.08); }

/* Aki mozgásmentes felületet kért a rendszerében, annál a fény sem indul el. */
@media (prefers-reduced-motion: reduce) {
  .bar-javaslat::after { animation: none; display: none; }
}
.jav-tetel { padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.jav-tetel:last-child { border-bottom: 0; padding-bottom: 0; }
.jav-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.jav-fajta { font-size: var(--fs-meta); color: var(--text-muted); }
.jav-fej time { font-size: var(--fs-meta); color: var(--text-dim); margin-left: auto; }
.jav-szoveg { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--text); }
.jav-valasz {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  background: var(--bg-sunken); border-left: 3px solid var(--accent, var(--m-zold-mely));
  border-radius: 0 var(--r) var(--r) 0;
}
.jav-valasz b { display: block; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 5px; }
.jav-valasz p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
.jav-urlap { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.jav-urlap-sor { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.jav-urlap-sor select { min-height: 44px; }
.jav-urlap select {
  padding: 9px 11px; border: 1px solid var(--field-border); border-radius: var(--r);
  background: var(--bg-card); color: var(--text); font-size: var(--fs-meta);
}

/* ── A JAVASLAT-GOMB HELYE A FELSŐ SÁVBAN (2026-08-04) ──
   🔴 MÉRÉSBŐL: a gomb hozzáadása után a sáv 375 px-en 417-re, 1280-on
   1428-ra nőtt — vagyis vízszintesen görgetni kellett volna az egész lapon.
   Ugyanaz a csapda, ami a Kedvenceim gombnál is előjött 2026-08-02-án: a
   felső sávban minden új gomb valakinek a helyét veszi el.

   A megoldás nem a gomb elhagyása (a tesztelőnek LÁTNIA kell), hanem hogy
   szűk helyen csak az IKON marad. Az ikon egyértelmű, a `title` pedig
   kimondja a nevét annak, aki rákérdez. */
@media (max-width: 1400px) {
  .bar-javaslat span { display: none; }
  .bar-javaslat { padding: 0 11px; }
}
/* 1400 px felett kényelmesen elfér a felirattal is. */

/* ── A FELSŐ SÁV SZŰK HELYEN GÖRGETHETŐ (2026-08-04) ──
   🔴 MÉRÉSBŐL: 375 px-en a sáv tartalma 419 px — és ez NEM egyetlen gomb
   hibája. Hét gomb van benne (menü, új videó, projekt, Hollywood Box, News,
   Kedvenceim, Javaslat) plusz a kereső; a javaslat-gomb csak az utolsó
   csepp volt. Egy admin-fióknál mind látszik, egy tesztelőnél kevesebb.

   🔑 AZÉRT A SÁVOT TESSZÜK GÖRGETHETŐVÉ, ÉS NEM VESZÜNK EL EGY GOMBOT: így
   a következő gomb sem fogja túltolni. A `scrollbar-width: none` miatt nem
   jelenik meg görgetősáv — a felhasználó egyszerűen elhúzza az ujjával.

   🔴🔴 2026-08-06 — EZ A SZABÁLY 768 PX ALATT ÜLT, PEDIG A HIBA FÖLÖTTE VAN.
   Mérve egy 1408 px széles ablakban, belépve: a sávnak 1273 px kellett volna,
   a helye 1136 — a keresőgomb 81 px-szel túllógott, és ettől az EGÉSZ belépés
   mögötti felület vízszintesen görgethető lett (`scrollWidth` 1489 > 1408).
   A gombok mind `flex-shrink: 0`-k, tehát nem zsugorodnak; a hét gomb + a
   projekt neve + a keret + a kereső együtt egyszerűen szélesebb.
   ➡️ A megoldás UGYANAZ, csak a korlát nélkül: a sáv MAGA görgessen, ne az
      oldal. Ahol elfér, semmi nem változik — az `auto` csak túlcsordulásnál
      görget.
   🔑 Mérve, hogy nem vág le semmit: a fejlécben MÁR NINCS lenyíló lista
      (a projekt-gomb 2026-08-06 óta sima link a projektekhez), tehát az
      `overflow-y: auto` mellékhatásának nincs mit levágnia. */
.site-bar {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.site-bar::-webkit-scrollbar { display: none; }

/* A kereső billentyű-jelzése („Ctrl+K") 1400 px alatt kimarad: egérrel
   úgyis rákattintanak, és pont ez a 40 px hiányzott 1280-on.
   🔴 2026-08-06 — A HATÁR 1400 VOLT, DE A SÁV MÁR 1408-ON KICSORDULT (mérve,
   belépve: 1273 px kellett, 1136 volt). A jelzés és a „Keresés" szó együtt
   88 px — pont annyi, hogy a Korlátlan-keret és a nagyító is elférjen.
   🔑 A NAGYÍTÓ IKON MARAD, tehát nincs funkcióvesztés; a Ctrl+K ugyanúgy
      működik, csak nincs kiírva. */
@media (max-width: 1500px) {
  .bar-kereso .ker-kbd,
  .bar-kereso .ker-szo { display: none; }

  /* 🔴🔴 2026-08-06 — VISSZAVONVA, MÉG AZNAP. Itt a négy másodlagos gomb
     felirata eltűnt 1500 px alatt (ikonos gombok). A user kifogása:
     „visszaállíthatod nyugodtan — egyáltalán miért nyúltál hozzá kérés
     nélkül?" **Igaza volt.** Ő a vízszintes görgetést hagyta jóvá; azt, hogy
     MELYIK gomb felirata tűnjön el, ÉN döntöttem el helyette — pedig pár
     órával korábban magam írtam, hogy „gombot nem veszek el magamtól".
     🔑 A GÖRGETÉS EZ NÉLKÜL IS MEG VAN OLDVA: a sáv magában görget
        (`.site-bar { overflow-x: auto }`), tehát az OLDAL nem csúszik el.
        Ami visszajön: 1280-on a sávot húzni kell a keresőig. Ez a user
        döntése, nem az enyém. */
}

/* Csatolt képek a javaslatnál (2026-08-04). */
.jav-kepek { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.jav-kepek a { display: block; line-height: 0; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); transition: border-color .15s; }
.jav-kepek a:hover { border-color: var(--accent-line); }
.jav-kepek img { width: 110px; height: 78px; object-fit: cover; display: block; }

/* ── A javaslat-űrlap sorrendje (2026-08-04) ──
   fajta → szöveg → KÉPEK → Elküldöm.

   🔑 A képdoboz az űrlapon KÍVÜL van (a feltöltés AJAX-szal megy, azonnal),
   de a gomb ELŐTT kell látszania. A `display: contents` az űrlap elemeit a
   szekció flex-gyerekeivé teszi, így a kettő EGY sorrendbe fésülhető —
   az űrlap küldése ettől változatlanul működik. */
.jav-uj { display: flex; flex-direction: column; }
.jav-uj > form { display: contents; }
.jav-uj .sec-label { order: 1; }
.jav-uj .field { order: 2; }
.jav-uj .kepdoboz { order: 3; margin-top: 4px; }
.jav-uj button[type="submit"] { order: 4; align-self: flex-start; margin-top: 18px; }

/* ── LÉPÉS-MUTATÓ SOR (2026-08-06) ──
   „Ez a dolog átkerült ide" — magyarázó mondat és a gomb EGY sorban.

   🔴 A referencia-lapok (karakter · helyszín · termék) átköltöztek a
   Referenciák lépésbe. Némán eltüntetni őket funkcióvesztés lett volna:
   aki eddig ott kereste, most ezen a soron át talál oda.
   🔑 Saját osztály, nem a `.tag` átvétele: a `.tag` kijelölhető KAPCSOLÓ
   (`aria-pressed`), ez meg egy sima link — a kettő nem ugyanaz. */
.sec-mutato {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3); margin-top: var(--s4);
}
.sec-mutato .btn { flex: 0 0 auto; }

/* ── A TERVRAJZ ÁTVETT DRAMATURGIAI ÍVE (2026-08-06) ──
   Az öt kérdést a Jelenetek lépésben adod meg; ez a lap már csak MUTATJA,
   amit onnan kapott. Ezért olvasható lista, nem beviteli mezők. */
.dr-atvett { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.dr-sor {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--s2) var(--s4);
  padding: 10px 12px; border-radius: var(--r);
  background: var(--bg-sunken); border: 1px solid var(--border);
}
.dr-sor b { font-size: var(--fs-meta); font-weight: 600; color: var(--text-muted); }
.dr-sor span { font-size: var(--fs-body); color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .dr-sor { grid-template-columns: 1fr; gap: 2px; }
}

/* A Jelenetek lépés dramaturgiai mezői — egymás alatt, teljes szélességben. */
.drama-mezok { margin-bottom: var(--s5); }
.drama-mezok .field { margin-bottom: var(--s3); }

/* A mikro-narratíva egysoros emlékeztetője (nem doboz — csak egy sor). */
.mikro-narrativa {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin-bottom: var(--s5);
}
.mikro-narrativa .i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════
   A SLEPNEX FORMANYELVE — CSAK FORMÁK, SZÍNEK NÉLKÜL (2026-08-07)

   A user: „a slepnex designt húzd rá erre a projektre. Színeket ne, csak a
   stílust, formákat."

   📏 A KÉT RENDSZER MÉRT KÜLÖNBSÉGE:
   | forma            | Slepnex          | weblockai (volt) |
   | gomb sarka       | 6 px             | 4 px             |
   | kártya sarka     | 12 px            | 8-10 px          |
   | szakasz-fejléc   | VILÁGOS + vonal  | FEKETE SÁV       |
   | kártya belseje   | 14 / 18 px       | 11 px            |

   🔑🔑 A LEGNAGYOBB KÜLÖNBSÉG A FEJLÉC. A Slepnex SEHOL nem használ fekete
      sávot: a kártya feje ugyanolyan világos, mint a törzse, csak egy
      hajszálvonal választja el. Ettől nyugodt a lap — nem a sávok
      versenyeznek a tartalommal.
   🔑 A SZÍNEK ÉRINTETLENEK: a lime, a magenta és a sötét héj marad. Csak a
      sarok, a keret, a térköz és a fejléc-forma jön a Slepnexből.
   ⚠️ A `--r: 6px` a rendszer MINDEN 4 px-es sarkát 6-ra viszi. Ez a
      `feedback_no_pill_radius` szabállyal ÖSSZEFÉR: az max 4 px-et ír a
      pill ELLEN — a Slepnex maga is kimondja, hogy „a pill-alak tiltott,
      max 8 px". 6 px messze van a pilltől.

   ⏮️ VISSZAVONÁS: ez az egy blokk törlendő, plusz a fenti három token
      visszaáll 4/8/10-re. Semmi más nem változott.
   ════════════════════════════════════════════════════════════════════════ */
:root { --r: 6px; --r-lg: 10px; --r-xl: 12px; }

/* ── A SZAKASZ MOSTANTÓL KÁRTYA ──────────────────────────────────────
   Keret + lekerekített sarok + finom árnyék, a tartalom 18 px belső térrel.
   A fejléc a kártya TETEJE, nem külön sáv fölötte. */
.sec {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card); box-shadow: var(--shadow-1);
  padding: 0 18px 18px; overflow: hidden;
}
/* A fejléc: világos, alatta hajszálvonal. A negatív margó viszi ki a vonalat
   a kártya széléig — enélkül 18 px-es réssel lógna a levegőben. */
.sec > .sec-label {
  background: transparent; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  margin: 0 -18px 18px; padding: 14px 18px;
  font-size: var(--t-2); font-weight: 700;
}
/* ⚠️ A csukható nyíl fehér volt (a fekete sávhoz szabva) — átlátszó fejlécen
   láthatatlan lenne. A szöveg színét veszi át. */
.sec > .sec-label.csukhato:hover { background: var(--bg-card-hover); color: var(--text); }
.sec > .sec-label.csukhato:active { background: var(--bg-card-hover); }
.sec > .sec-label.csukhato::after {
  border-right-color: currentColor; border-bottom-color: currentColor; opacity: .5;
}
.sec > .sec-label .sec-count { color: var(--text-muted); }

/* ⚠️ CSUKOTT SZAKASZ: ne maradjon üres sáv a fejléc alatt.
   📏 Mérve a Kép lapon: a csukott „Készen kapod" 86 px magas volt, ebből
      48 a fejléc és **37 px ÜRES** — a fejléc alatti margó és a kártya alsó
      belső tere olyankor is ott ült, amikor nem volt mit körülvenniük. */
.sec.zarva { padding-bottom: 0; }
.sec.zarva > .sec-label { border-bottom: 0; margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   A FUTÓSZALAG ÉS A KÉSZ CSOMAG (2026-08-13)

   🔴 A user: „a jelenlegi rendszert ÉN SEM HASZNÁLNÁM… nincs meg a hűha
      érzés." A gomb és az eredmény-lap ehhez a mondathoz készült: egy
      kattintás, látható haladás, majd MINDEN egy lapon.
   🔑 Semmi új szín és semmi új forma — a meglévő kártya-, doboz- és
      hajszálvonal-nyelvet használja (lime/magenta érintetlen, sarok 4-12 px).
   ════════════════════════════════════════════════════════════════════ */

/* A haladás-lista: minden legyártott lépés egy sor, ahogy elkészül. */
.szalag-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.szalag-sor {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  padding: 7px 0 7px 24px; position: relative;
  border-top: 1px solid var(--border);
  font-size: var(--t-2); line-height: 1.45; color: var(--text-dim);
}
.szalag-sor:first-child { border-top: 0; }
.szalag-sor b { color: var(--text); font-weight: 600; }
/* A pipa és a kihagyás-jel pszeudo-elem: a JS-nek nem kell ikont építenie. */
.szalag-sor::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 6px; height: 10px;
  border-right: 2px solid var(--accent-line); border-bottom: 2px solid var(--accent-line);
  transform: rotate(45deg);
}
.szalag-sor.kihagyva { color: var(--text-muted); }
.szalag-sor.kihagyva::before {
  top: 15px; left: 2px; width: 10px; height: 0;
  border-right: 0; border-bottom: 2px solid var(--border-strong); transform: none;
}

/* ── A KÉSZ CSOMAG LAPJA ───────────────────────────────────────── */

/* A film adatai: cimke + érték, egy sorban, tömören. */
.tenyek p { margin: 0 0 6px; font-size: var(--t-2); line-height: 1.5; color: var(--text-dim); }
.tenyek b { color: var(--text); font-weight: 600; margin-right: 6px; }

/* A jelenetek — a csomag gerince. Számozva, mert a promptok is így hivatkoznak rájuk. */
.csomag-jelenetek { margin: 12px 0 0; padding-left: 22px; }
.csomag-jelenetek > li { margin-bottom: 14px; padding-left: 4px; }
.csomag-jelenetek b { font-size: var(--t-2); font-weight: 700; }
.csomag-mp {
  margin-left: 8px; padding: 1px 7px; border-radius: var(--r);
  background: var(--bg-sunken); color: var(--text-muted);
  font-size: var(--t-0); font-weight: 600;
}
.csomag-szoveg { margin: 4px 0 2px; font-size: var(--t-2); line-height: 1.5; color: var(--text); }
/* A képleírás ANGOL és gépnek szól — más betű, halkabb, hogy ránézésre elváljon. */
.csomag-kep {
  margin: 0; font-family: var(--font-gep); font-size: var(--t-0); line-height: 1.5;
  color: var(--text-muted); overflow-wrap: anywhere;
}
.csomag-hangok, .csomag-cimek { margin: 10px 0 0; padding-left: 22px; }
.csomag-hangok > li, .csomag-cimek > li {
  margin-bottom: 7px; font-size: var(--t-2); line-height: 1.5; color: var(--text-dim);
}
.csomag-hangok code {
  display: block; margin-top: 2px;
  font-family: var(--font-gep); font-size: var(--t-0); color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════════════
   2026-08-14 — A USER KÉPERNYŐKÉPEI ALAPJÁN

   🔴 1. A LENYÍLÓ CSONKOLTA A SZÖVEGET, PEDIG VOLT HELY.
   📏 Mérve a Jelenetek lépésen: a lenyíló 420 px, a szülője 615 —
      **195 px kihasználatlan hely**, és közben a leghosszabb opció
      (99 karakter) félbevágva jelent meg: „Oktató — Megtanítasz valamit,
      ami után a néző jobban csiná…".
   🔎 AZ OK MÁSODSZOR UGYANAZ A FÁJL: az `elonezetek.css` a `design.css`
      UTÁN töltődik be, és ott maradt egy
      `.field.field-szeles select { max-width: 420px }`. (Ugyanez a csapda
      harapott a kártya-rácsnál is — lásd fent, `.opts.elonezetes`.)
      Az előnézet-fájlhoz NEM nyúlunk, ezért innen ütjük el, erősebb
      szabállyal: az osztály duplázása emeli a súlyt.
   🔑 A szélességet a SZÜLŐ szabja meg — de nem KORLÁTLANUL: 2560 px-en a
      lenyíló 1598 px lett, ami egy legördülőnél már nem szélesség, hanem
      üresség. A 760 px a leghosszabb opcióhoz mérve elég (99 karakter
      ≈ 700 px), és nem nyúlik el. */
.field.field-szeles.field-szeles > select { max-width: min(100%, 760px); }

/* 🎨 2. A MEZŐK HÁTTERE — a user kérése és a színkódja (#eaeff6).
   „Ettől tűnik kicsit rendezettebbnek és átláthatóbbnak az egész."
   🔑 A SZÍN MÁR LÉTEZETT a rendszerben `--bg-sunken` néven, pontosan
      ezzel az értékkel — csak a beviteli mezők nem használták: fehér mező
      ült a fehér kártyán, és a kettő között semmi nem választott.
      Ezért NEM új színt vezetünk be, hanem a meglévő változót — így a
      sötét téma is magától követi (ott #05101c).
   🔑 Fókuszban és beírás közben viszont FEHÉR: ahol épp dolgozol, ott a
      mező „kinyílik". Ez adja a mélységet, amit a kártyák is használnak. */
.field > input, .field > select, .field > textarea,
.field .mezo-vagy > input, .field .mezo-vagy > select,
.wlai-select, .sec-keres, .jelenet-mezo, .ai-teljes {
  background: var(--bg-sunken);
}
.field > input:focus, .field > select:focus, .field > textarea:focus,
.wlai-select:focus, .sec-keres:focus, .jelenet-mezo:focus, .ai-teljes:focus {
  background: var(--bg-card);
}

/* ════════════════════════════════════════════════════════════════════
   A LÉPÉS EREDMÉNYE — nem másolandó prompt (2026-08-14)

   🔴 A user: „ezeknek nem a jobb oldali promptok mezőben kellene lennie?"
   📏 Az ok: a rendszer másik hét lapján a jobb oldali doboz MINDIG a kész
      promptot tartja („ezt másold"). A Referenciák lapon viszont a lépés
      EREDMÉNYÉT („ezt rögzíted") — ugyanaz a hely, ugyanaz a forma, más
      jelentés. Ebből félreértés lesz, és lett is.
   🔑 A minta a `.hu-out` (a magyar jelentés doboza): ott is a FORMA mondja
      meg, hogy ezt nem bemásolni kell. Itt ugyanez, három jellel:
      tömör magenta csík a lime-os átmenet helyett · pipa-ikon a fejlécben ·
      a magyarázat a szövegdoboz FÖLÖTT, nem alatta.
   ════════════════════════════════════════════════════════════════════ */
.out--lepes::before { background: var(--accent2-line); }
.out--lepes .out-head { background: var(--bg-sunken); }
.out--lepes .out-head b {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); letter-spacing: 0.1em;
}
.out--lepes .out-head b .i { width: 14px; height: 14px; color: var(--accent2); }
/* A magyarázat a doboz TETEJÉN: aki elolvassa, azelőtt olvassa, hogy
   félreértené. (Eddig a doboz alján állt, a szövegmező mögött.) */
.out--lepes .out-mi {
  margin: 0; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-1); line-height: 1.55; color: var(--text-dim);
}
/* Itt a fő tett a MENTÉS, nem a másolás — a másoló gomb halkabb. */
.out--lepes .copy-btn {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border-strong); font-weight: 600;
}
.out--lepes .copy-btn:hover { color: var(--text); border-color: var(--accent2-line); }

/* ════════════════════════════════════════════════════════════════════
   „EZT A GENERÁTOR VISSZADOBHATJA" — a prompt kockázat-jelzése (2026-09-12)

   🔴 Egy valódi eset szülte: a Higgsfield NSFW-jelöléssel dobta vissza a
      képet, és a promptban egyetlen hely illett rá — „bare torso". A Metán
      maga a kép rendben lett volna (22.3: fitness, gym); a GENERÁTOR szűrője
      utasította el, a puszta szó miatt.
   🔑 A doboz a PROMPT ELŐTT áll — utána már bemásolta az ember.
   A keretet és a színt a `.warn.show` adja; itt csak a lista rendje kell.
   ════════════════════════════════════════════════════════════════════ */
.hb-kockazat > b { display: block; margin-bottom: 4px; }
.hb-kockazat > p { margin: 0 0 8px; }
.hb-kockazat ul { margin: 0; padding-left: 20px; }
.hb-kockazat li { margin-bottom: 4px; line-height: 1.5; }
.hb-kockazat li:last-child { margin-bottom: 0; }
/* A kifogásolt kifejezés gépbetűvel — ránézésre látszik, hogy a PROMPT szava. */
.hb-kockazat li > b { font-family: var(--font-gep); font-size: var(--t-1); }

/* ════════════════════════════════════════════════════════════════════
   SUPERADMIN — STRIPE-KULCSOK (2026-09-28)
   A TicketWright `admin/platform/stripe` lapjának felépítése: „Hol tartunk”
   pipák, maszkolt kulcsok, alattuk a teendő a Stripe-nál.
   ════════════════════════════════════════════════════════════════════ */
.stp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.stp-lista li {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.stp-lista li > .i { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--warn-border); }
.stp-lista li.kesz > .i { color: var(--accent-line); }
.stp-lista li > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stp-lista li b { font-size: var(--t-2); }
.stp-lista li span { font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; }

.stp-urlap { display: flex; flex-direction: column; gap: var(--s4); max-width: 720px; }
.stp-mezo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stp-mezo > label { font-weight: 600; font-size: var(--t-2); }
.stp-mezo input { max-width: 100%; font-family: var(--font-gep); }
.stp-mezo small { font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; overflow-wrap: anywhere; }
.stp-mentve { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.stp-mentve code, .stp-masol code {
  font-family: var(--font-gep); font-size: var(--t-1); padding: 3px 8px;
  background: var(--bg-sunken); border-radius: var(--r); overflow-wrap: anywhere;
}
.stp-mentve span { font-size: var(--t-1); color: var(--text-dim); }
.stp-urlap > .btn { align-self: flex-start; }
.stp-torol { display: inline-block; margin: var(--s3) var(--s2) 0 0; }
.stp-masol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3); min-width: 0; }
.stp-masol code { max-width: 100%; }

/* ════════════════════════════════════════════════════════════════════
   SUPERADMIN — BEÁGYAZÓ KÓDOK (2026-09-28)
   A TicketWright `admin/platform/embed-codes` felépítése: a lista soronként
   egy kód (név, hova, hol, gombok), a szerkesztő bal oldalt a nagy mezőkkel,
   jobb oldalt a döntésekkel dobozokban.
   ════════════════════════════════════════════════════════════════════ */
.bgk-fej { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.bgk-sav { font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; }

.adm-tabla-doboz:has(.bgk-tabla) { margin-bottom: var(--s6); }
.bgk-tabla td { line-height: 1.45; }
.bgk-tabla td.bgk-nev { width: 38%; min-width: 220px; }
.bgk-gombok .tool-btn { padding-left: 12px; padding-right: 12px; }
.bgk-tabla td em { margin-top: 3px; overflow-wrap: anywhere; }
.bgk-tabla tr.all td { color: var(--text-dim); }
.bgk-nev > a { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.bgk-nev > a:hover { color: var(--accent-ink); text-decoration: underline; }
.bgk-jelek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.bgk-halk {
  font-size: var(--t-1); color: var(--text-dim); padding: 2px 8px;
  border: 1px solid var(--border); border-radius: var(--r);
}
.bgk-baj {
  display: block; margin-top: 6px; padding: 6px 10px; font-size: var(--t-1); line-height: 1.5;
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--r); color: var(--warn-text);
}
.bgk-gombok { white-space: nowrap; text-align: right; }
.bgk-gombok form { display: inline; margin: 0; }
.bgk-gombok .tool-btn { margin-left: 4px; }

.bgk-szerk {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--s4); align-items: start;
}
.bgk-szerk-fo { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.bgk-szerk-fo .field { display: flex; flex-direction: column; gap: 6px; }
.bgk-szerk-fo .field > label { font-weight: 600; font-size: var(--t-2); }
.bgk-szerk-fo .field > small { font-size: var(--t-1); color: var(--text-dim); }
.bgk-kod { font-family: var(--font-gep); font-size: var(--t-1); line-height: 1.5; resize: vertical; tab-size: 2; }
.bgk-szerk-oldal { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.bgk-doboz {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.bgk-doboz h2 { margin: 0; font-size: var(--t-2); font-weight: 700; }
.bgk-doboz h3 { margin: var(--s2) 0 0; font-size: var(--t-1); font-weight: 600; color: var(--text-dim); }
.bgk-doboz p { margin: 0; }
.bgk-valaszto, .bgk-pipa { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; min-height: 44px; }
.bgk-pipa { min-height: 44px; align-items: center; }
.bgk-valaszto input, .bgk-pipa input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-line); }
.bgk-pipa input { margin-top: 0; }
.bgk-valaszto > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bgk-valaszto b { font-size: var(--t-2); font-weight: 600; }
.bgk-valaszto small { font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; }
.bgk-pipa > span { font-size: var(--t-2); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.bgk-halom { display: flex; flex-direction: column; gap: 2px; padding-left: var(--s4); }
.bgk-megse { align-self: center; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-2); color: var(--text-dim); padding: 8px; }

/* Telefonon és táblagépen a sorok kártyák: a négy oszlop 1023 px alatt
   nem fér el (768-on mérve a gombok kicsúsztak a dobozból). */
@media (max-width: 1023px) {
  .adm-tabla-doboz:has(.bgk-tabla) { overflow: visible; border: 0; background: none; }
  .bgk-tabla, .bgk-tabla tbody, .bgk-tabla tr, .bgk-tabla td { display: block; width: 100%; }
  .bgk-tabla thead { display: none; }
  .bgk-tabla tr {
    margin-bottom: var(--s2); padding: 4px 0;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  }
  .bgk-tabla td { border: 0; padding: 6px 14px; }
  .bgk-tabla td.bgk-gombok { white-space: normal; text-align: left; display: flex; flex-wrap: wrap; gap: var(--s2); }
  .bgk-gombok .tool-btn { margin-left: 0; }
}
@media (max-width: 860px) {
  .bgk-szerk { grid-template-columns: minmax(0, 1fr); }
}


/* ── A SUPERADMIN CSOPORTJAI A BAL SÁVBAN (2026-09-28) ──
   Az alpontok egy vékony vonal mellett, beljebb húzva: ránézésre látszik,
   melyik csoporthoz tartoznak (a TicketWright almenüjének behúzása). */
.sav-admin .szak-lepesek { margin: 0 0 6px 17px; padding-left: 6px; border-left: 1px solid var(--border); }
.sav-admin .sav-lepes { padding-left: 32px; }
/* A hosszú név („Generátor-szabálykönyv”) nem fér ki a 216 px-es sávban:
   levágás helyett két sorba törik, hogy mindig olvasható legyen. */
.sav-admin .sav-lepes .lep-nev { white-space: normal; overflow: visible; line-height: 1.3; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .sav-admin .szak-lepesek { margin-left: 0; padding-left: 0; border-left: 0; }
  .sav-admin .sav-lepes { padding-left: 10px; }
}

/* Fiók lap (2026-09-28): a gombsor az előfizetés alatt. */
.fiok-gombok { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.fiok-gombok .auth-btn, .fiok-gombok .tool-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.fiok-gombok .elof-gomb { margin-top: 0; }
@media (max-width: 520px) { .fiok-gombok > * { width: 100%; } }
/* Fiók lap: a régi fiók-gombok is legalább 44 px (érintés), 2026-09-28. */
.fiok-sor .tool-btn, #adataim .tool-btn { min-height: 44px; }

/* ── FIÓK LAP, ÁTRENDEZVE (2026-09-28, a user: „legyen átláthatóbb, és a
   profil törlése piros legyen”) ── Előfizetés elöl, alatta két egyforma kártya
   (név és értesítés · belépés), a végén KÜLÖN, piros keretben a törlés. */
.fiok-lap .fk-elof { max-width: none; margin-bottom: var(--s5); }
.fiok-lap .fiok-racs { margin-bottom: var(--s6); align-items: stretch; }
.fiok-lap .fiok-racs > .sec {
  padding: var(--s4) var(--s5); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card);
}
.fiok-lap .fiok-racs .field:last-child { margin-bottom: 0 !important; }
.fiok-lap #adataim { margin-bottom: var(--s5); }
.fiok-lap #adataim, .fiok-lap .fk-veszely { max-width: none; }
.fk-nincs-jelszo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border);
}
.fk-nincs-jelszo small { flex: 1 1 14rem; font-size: var(--t-1); color: var(--text-muted); line-height: 1.45; }
.fk-veszely {
  --piros: var(--m-piros-mely);
  max-width: none; padding: var(--s3) var(--s5);
  border: 1px solid var(--piros); border-radius: var(--r-lg);
  background: rgba(179, 38, 30, 0.05);
}
:root[data-theme="dark"] .fk-veszely { --piros: var(--m-piros-vilagos); background: rgba(255, 138, 128, 0.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fk-veszely { --piros: var(--m-piros-vilagos); background: rgba(255, 138, 128, 0.06); } }
.fk-veszely .fiok-torles { margin: 0; border: 0; padding: 0; }
.fk-veszely .fiok-torles > summary { color: var(--piros); font-size: var(--t-2); font-weight: 700; min-height: 44px; }
.fk-veszely .fiok-torles > summary:hover { color: var(--piros); text-decoration: underline; text-underline-offset: 3px; }
.fk-veszely .fiok-torles-belso { border-color: var(--piros); background: transparent; margin-bottom: var(--s3); }
/* A „Licenceim és letöltés” nem fér ki egy sorban (levágva látszott): a sáv
   alján két sorba törhet, mint a Superadmin hosszú nevei. */
.sav-also-admin .lep-nev { white-space: normal; overflow: visible; line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════════
   SUPERADMIN — TUDÁSBÁZIS (2026-09-29)
   A közös adminból költözött ide. A lista és a szerkesztő a Beágyazó kódok
   elemeit használja (.bgk-tabla, .bgk-szerk, .bgk-doboz); itt csak ami új.
   ════════════════════════════════════════════════════════════════════ */
.tb-uj { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s4); }
.tb-uj .field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; min-width: 0; }
.tb-uj .field > label { font-weight: 600; font-size: var(--t-2); }
.tb-uj .btn { flex: 0 0 auto; }

.tb-nyelv {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: var(--r);
  font-family: var(--font-gep); font-size: var(--t-1); white-space: nowrap;
  border: 1px solid var(--border);
}
.tb-nyelv.kesz  { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-ink); }
.tb-nyelv.hiany { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }

/* Rendezett lista (2026-10-04, a user: „nagyon kusza”): összegző sor + lenyíló
   „Új cikk”, két csoport (Vázlatok, Megjelent), soronként cím + halk meta-sor,
   jobbra egy gomb és egy halk törlés. */
.tbl-fej { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.tbl-osszeg { margin: 0; align-self: center; color: var(--text-dim); font-size: var(--t-2); }
.tbl-uj { flex: 0 0 auto; max-width: 100%; }
.tbl-uj > summary { list-style: none; cursor: pointer; }
.tbl-uj > summary::-webkit-details-marker { display: none; }
.tbl-uj[open] { flex: 1 1 100%; }
.tbl-uj[open] > summary { margin-bottom: var(--s3); }
.tbl-uj .tb-uj { margin-bottom: 0; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r); }
.tbl-uj .field small { color: var(--text-dim); font-size: var(--t-1); }

.tbl-csoport { margin-bottom: var(--s5); }
.tbl-csoport > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 var(--s2); font-size: var(--t-3); }
.tbl-csoport > h2 > span { color: var(--text-dim); font-family: var(--font-gep); font-size: var(--t-1); font-weight: 400; }
.tbl-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.tbl-sor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.tbl-fo { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tbl-cim { font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.tbl-cim:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.tbl-meta, .tbl-hiany { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: var(--t-1); color: var(--text-dim); }
.tbl-meta a { color: inherit; }
.tbl-meta a:hover { color: var(--accent-ink); }
.tbl-hiany span { color: var(--warn-text); }
.tbl-gombok { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.tbl-gombok form { margin: 0; }
.tbl-gombok .tool-btn { min-height: 44px; display: inline-flex; align-items: center; }
.tbl-torol { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--text-dim); font: inherit; font-size: var(--t-1); cursor: pointer; }
.tbl-torol:hover, .tbl-torol:focus-visible { color: var(--piros); text-decoration: underline; text-underline-offset: 3px; }

.tb-vissza { margin: 0 0 var(--s3); font-size: var(--t-2); }
.tb-vissza a { color: var(--text-dim); text-decoration: none; }
.tb-vissza a:hover { color: var(--accent-ink); text-decoration: underline; }

/* A két nyelv egymás mellett, ha elfér (min. 260 px/hasáb) — különben
   egymás alatt, párban (HU cím, EN cím, HU bevezető, EN bevezető). */
.tb-ket { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(260px, 45%), 1fr)); gap: var(--s3) var(--s4); }
.tb-ket .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tb-ket .field > label { font-weight: 600; font-size: var(--t-2); }
.tb-ket input, .tb-ket textarea { max-width: 100%; }

.tb-blokkok { min-height: 22rem; white-space: pre; overflow-wrap: normal; overflow-x: auto; }

.tb-sugo { font-size: var(--t-2); color: var(--text-dim); }
.tb-sugo summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.tb-sugo p { margin: var(--s2) 0; line-height: 1.6; }
.tb-sugo ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.tb-sugo code { font-family: var(--font-gep); font-size: var(--t-1); overflow-wrap: anywhere; }

.bgk-doboz .field { display: flex; flex-direction: column; gap: 6px; }
.bgk-doboz .field > label { font-family: var(--font-gep); font-size: var(--t-1); color: var(--text-dim); overflow-wrap: anywhere; }
.bgk-doboz .field input { max-width: 100%; font-family: var(--font-gep); }
.tb-elo { font-size: var(--t-2); text-align: center; }

/* Cikkszerkesztő, blokk-kártyák (2026-10-04, a user: „ez is elég rosszul néz ki”).
   A közös `.field` 460 px-re szűkít: a szerkesztő mezői a teljes hasábot kapják.
   A régi soros mező JS nélkül marad meg; a szkript kártyákra bontja. */
.bgk-szerk-fo .field { max-width: none; }
.bgk-szerk-fo .field > input, .bgk-szerk-fo .field > textarea { width: 100%; }
.tb-ket textarea { field-sizing: content; min-height: 6.5em; }
/* Az `arculat.css` `.field label { display: block !important }` szabálya miatt kell az !important. */
.field.tbs.tbs-kesz > label, .field.tbs.tbs-kesz > textarea { display: none !important; }
.tbs-fej { display: flex; align-items: baseline; gap: 8px; }
.tbs-fej h2 { margin: 0; font-size: var(--t-3); }
.tbs-db { color: var(--text-dim); font-family: var(--font-gep); font-size: var(--t-1); }
.tbs-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.tbs-blokk {
  display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.tbs-blokk:focus-within { border-color: var(--accent-edge); }
.tbs-h2, .tbs-h3 { background: transparent; }
.tbs-h2 .tbs-torzs textarea, .tbs-h3 .tbs-torzs textarea { font-weight: 700; }
.tbs-eszk { display: flex; align-items: center; gap: 6px; }
.tbs-szam { min-width: 2ch; color: var(--text-dim); font-family: var(--font-gep); font-size: var(--t-1); }
.tbs-tipus, .tbs-abravalaszto {
  min-height: 36px; padding: 0 8px; max-width: 100%;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--field-border); border-radius: var(--r);
  font: inherit; font-size: var(--t-1); font-weight: 600; cursor: pointer;
}
.tbs-tipus { margin-right: auto; width: min(100%, 15rem); }
.tbs-mozgat {
  width: 36px; height: 36px; flex: 0 0 auto; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--text-dim); font-size: var(--b-xl, 1.125rem); line-height: 1; cursor: pointer;
}
.tbs-mozgat:hover:not(:disabled) { border-color: var(--border); color: var(--text); }
.tbs-mozgat:last-child:hover { color: var(--piros); }
.tbs-mozgat:disabled { opacity: .3; cursor: default; }
.tbs-torzs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s2) var(--s3); }
.tbs-torzs.egy { grid-template-columns: minmax(0, 1fr); }
.tbs-torzs label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tbs-torzs label > span { font-size: var(--t-1); color: var(--text-dim); }
.tbs-torzs textarea {
  width: 100%; min-height: 3.2em; padding: 8px 10px; field-sizing: content; resize: vertical;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--field-border); border-radius: var(--r);
  font: inherit; font-size: var(--t-2); line-height: 1.5;
}
.tbs-prompt .tbs-torzs textarea { font-family: var(--font-gep); font-size: var(--t-1); }
.tbs-sugo { margin: 0; font-size: var(--t-1); color: var(--text-dim); }
.tbs-uj { align-self: flex-start; min-height: 44px; }
@media (max-width: 480px) {
  .tbs-blokk { padding: var(--s2); }
  .tbs-mozgat { width: 44px; height: 44px; }
  .tbs-tipus { min-height: 44px; height: 44px; }
}

/* ════════════════════════════════════════════════════════════════════
   SUPERADMIN — VEVŐK (2026-09-29)
   A lista a Beágyazó kódok táblázatát használja (.bgk-tabla), a kereső a
   Tudásbázis „új cikk” sorát (.tb-uj); itt csak ami új.
   ════════════════════════════════════════════════════════════════════ */
.vv-tabla td.bgk-nev b { overflow-wrap: anywhere; }
.vv-tabla td .badge { margin-left: 0; }
/* A szélességek CSAK táblázatnézetben: 1023 px alatt a sor kártya
   (.bgk-tabla), ott a 34% szó közepén törte az e-mail-címet (768-on mérve). */
@media (min-width: 1024px) {
  .vv-tabla td.bgk-nev { width: 34%; }
  .vv-tabla td em { max-width: 22ch; }
}
@media (max-width: 1023px) {
  .vv-tabla td.bgk-nev { width: 100%; min-width: 0; }
}
.vv-licenc { font-family: var(--font-gep); white-space: nowrap; }
/* 44 px-es érintési felület úgy, hogy a sáv ne nőjön meg: a padding kifelé
   nő, a negatív margó visszahúzza. */
.vv-mind {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 10px; margin: -14px -10px -14px auto;
  color: inherit; font-size: var(--t-1); font-weight: 600;
  text-decoration: none; opacity: .85;
}
.vv-mind:hover { opacity: 1; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   LICENCEIM ÉS LETÖLTÉS (2026-09-29) — `muhely/licencek.php`
   Az ügyfélkapu tartalma a Műhelyen belül (egy otthon). A sorok a Fiók lap
   elemei (.pkap-lista, .fiok-gombok); itt csak ami új.
   ════════════════════════════════════════════════════════════════════ */
/* 2026-11-11, a user: „nincs középre rendezve, szélesíteni kell”: a 760 px-es szakasz-korlát KI, a lap szokásos középre rendezett szélessége (1180/1320) érvényes */
.lk-lap .sec { max-width: none; }
.lk-szam { font-family: var(--font-gep); letter-spacing: .04em; }
.lk-lap .fiok-gombok form { margin: 0; }
@media (max-width: 520px) { .lk-lap .fiok-gombok form > button { width: 100%; } }
.lk-lap .elof-gomb { margin-top: 0; max-width: none; }

.lk-portal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s2) 0 0; }
.lk-portal .tool-btn { min-height: 44px; }
.lk-portal span { font-size: var(--t-1); color: var(--text-muted); }

/* Elállás a felületről (2026-09-30): csendes szöveges gomb, ami megerősítő dobozt nyit.
   Szándékosan nem hangsúlyos (nem ez a lap fő dolga), de mindig látszik és 44 px magas. */
.lk-elallas { margin: var(--s4) 0 0; }
.lk-elallas > summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  list-style: none; font-size: var(--t-2); color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.lk-elallas > summary::-webkit-details-marker { display: none; }
.lk-elallas > summary:hover, .lk-elallas[open] > summary { color: var(--text); }
.lk-elallas > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }
.lk-elallas-doboz {
  margin-top: var(--s2); padding: var(--s4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--bg-card);
  display: grid; gap: var(--s3);
}
.lk-elallas-doboz > p { margin: 0; }
.lk-elallas-doboz form { margin: 0; }
.lk-elallas-sor { margin-top: var(--s4); }
/* A licencszám egyben marad (a kötőjelnél tört két oszlopban, 480 és 768 px-en). */
.lk-szam { white-space: nowrap; }

.lk-jel {
  margin-left: auto; padding: 3px 9px; border-radius: var(--r);
  font-size: var(--t-1); font-weight: 600; background: rgba(var(--m-feher-rgb),.12);
}
.lk-jel.kesz { background: var(--accent); color: var(--accent-text); }

.lk-kapcs { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.lk-kapcs form { grid-row: 1 / span 2; grid-column: 2; margin: 0; }
.lk-kapcs .tool-btn { min-height: 44px; }

.lk-kovetkezo {
  margin: var(--s4) 0; padding: var(--s4); border-radius: var(--r-lg);
  background: var(--accent-soft); border: 1px solid var(--accent-edge);
}
.lk-kovetkezo p { margin: 6px 0 var(--s3); color: var(--accent-ink); }

.lk-utmutato > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--text-muted); }
.lk-lepesek { margin: var(--s3) 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--s3); }
.lk-lepesek li > b { display: block; margin-bottom: 2px; }
.lk-lepesek li > span { display: block; color: var(--text-muted); line-height: 1.55; }
.lk-cim-sor { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 6px 0; }
.lk-cim-sor code { font-family: var(--font-gep); font-size: var(--t-2); padding: 8px 10px; border-radius: var(--r); background: var(--bg-sunken); color: var(--text); overflow-wrap: anywhere; }
.lk-cim-sor .tool-btn { min-height: 44px; }
/* A lépések képei (2026-09-29): keretben, a szöveg alatt; koppintásra teljes méret. */
.lk-kep {
  display: block; margin-top: var(--s2); max-width: 520px;
  border: 1px solid var(--border); border-radius: var(--belso-sarok); overflow: hidden; background: var(--m-sotet-sav);
}
.lk-kep img { display: block; width: 100%; height: auto; }
.lk-kep:hover { border-color: var(--accent-edge); }
.lk-lepesek li:nth-child(3) .lk-kep { max-width: 240px; }
/* A weblockai-konnektor (2026-09-29): nem kötelező, ezért becsukva, a lap alján.
   🔴 A fejléc itt a <details> gyereke, nem a .sec-é, ezért a `.sec > .sec-label`
   (világos kártyafej, 7408. sor) NEM hat rá: sötét sáv lett. Ugyanazt kapja meg itt. */
.sec > .lk-opcio > summary.sec-label {
  background: transparent; color: var(--text);
  border: 0; border-radius: 0;
  margin: 0 -18px; padding: 14px 18px;
  font-size: var(--t-2); font-weight: 700;
  cursor: pointer; min-height: 44px; gap: 6px; list-style: none;
}
.lk-opcio > summary::-webkit-details-marker { display: none; }
.lk-opcio > summary::before { content: "▸"; opacity: .6; transition: transform .15s; }
.lk-opcio > summary:hover { background: var(--bg-card-hover); }
.lk-opcio[open] > summary::before { transform: rotate(90deg); }
.sec > .lk-opcio[open] > summary.sec-label { border-bottom: 1px solid var(--border); margin-bottom: 18px; }
/* Csukva ne maradjon üres sáv a fejléc alatt: az arculat.css 342. sora
   `!important`-tal 22 px-et ad alulra, ezért itt is `!important` kell. */
.sec:has(> .lk-opcio:not([open])) { padding-bottom: 4px !important; }
.lk-jel + .lk-jel { margin-left: 0; }
.lk-opcio .lk-jel:not(.kesz) { background: var(--bg-sunken); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .lk-opcio > summary::before { transition: none; } }

/* Csomagváltó (2026-10-05): a három díjcsomag egymás alatt, a saját kiemelve.
   Telefonon a sor három eleme egymás alá kerül, gépen név | mi jár | ár. */
.lk-csv { margin: var(--s4) 0 0; scroll-margin-top: 80px; }
.lk-csv-cim { display: block; margin-bottom: var(--s2); }
.lk-csv-lista { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: var(--s2); }
.lk-csv-lista li {
  display: grid; gap: 4px var(--s3); padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-card);
}
.lk-csv-lista li.sajat { border-color: var(--accent-edge); background: var(--accent-soft); }
.lk-csv-nev { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-weight: 700; }
.lk-csv-nev .lk-jel { margin-left: 0; }
/* „Hamarosan” csomag a váltóban (2026-10-06): lakattal, halványítva. */
.lk-jel-hamar { display: inline-flex; align-items: center; gap: 4px; }
.lk-jel-hamar .i { width: 13px; height: 13px; }
.lk-csv-lista li.lk-csv-zar .lk-csv-mi, .lk-csv-lista li.lk-csv-zar .lk-csv-ar { opacity: .55; }
.lk-csv-mi { color: var(--text-muted); font-size: var(--t-1); line-height: 1.5; }
.lk-csv-ar { font-family: var(--font-gep); white-space: nowrap; }
@media (min-width: 640px) {
  .lk-csv-lista li { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; align-items: center; }
}
/* „Csomagot váltok” a keretszöveg mögött, ha a keret 20% alá ment. */
.um-valt {
  display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px;
  font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   SUPERADMIN — MINTAFILMEK (2026-09-29) — `muhely/admin-mintafilmek.php`
   Soronként: bal oldalt a borító, jobbra a link és a két cím.
   ════════════════════════════════════════════════════════════════════ */
.mf-urlap { max-width: none; } /* 2026-11-11: teljes szélesség (a user) */
.mf-sor {
  display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--s3);
  margin: 0 0 var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card);
}
.mf-sor legend { padding: 0 6px; font-weight: 700; font-size: var(--t-2); }
.mf-kep { width: 90px; aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; }
.mf-kep img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-kep span { font-size: var(--t-1); color: var(--text-dim); text-align: center; padding: 4px; }
.mf-mezok { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.mf-mezok .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.mf-mezok .field > label { font-weight: 600; font-size: var(--t-2); }
.mf-ket { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(200px, 45%), 1fr)); gap: var(--s2) var(--s3); }
.mf-nez { font-size: var(--t-1); color: var(--text-muted); align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 520px) { .mf-sor { grid-template-columns: minmax(0, 1fr); } .mf-kep { width: 72px; } }
/* 2026-09-29: kártyás lista — a mező a címkéjén belül (a klónozott kártyán
   nem ismétlődhet `id`), jobb oldalt a ↑ ↓ Törlés oszlop. */
.mf-mezok .field > label { display: flex; flex-direction: column; gap: 6px; }
.mf-mezok .field > label > input { font-weight: 400; }
.mf-sor:has(> .mf-muvelet:not([hidden])) { grid-template-columns: 90px minmax(0, 1fr) auto; }
.mf-muvelet { display: flex; flex-direction: column; gap: 6px; }
.mf-kis { min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.mf-kis:disabled { opacity: .35; cursor: default; }
.mf-torol:hover { color: var(--m-piros-halvany); border-color: rgba(220,38,38,.45); }
@media (max-width: 520px) {
  .mf-sor:has(> .mf-muvelet:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .mf-muvelet { flex-direction: row; }
}

/* Átjelentkezés sávja (2026-10-06): a superadmin más fiókjában van, innen jut vissza. */
.atj-sav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px var(--oldal-margo) 0; padding: 10px 14px; border: 1px solid var(--m-magenta); border-radius: var(--r); background: rgba(var(--m-magenta-rgb),.12); font-size: var(--t-2); line-height: 1.4; }
.atj-sav > .i { width: 18px; height: 18px; flex: none; color: var(--m-magenta); }
.atj-sav > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.atj-sav form { margin: 0; }

/* 2026-11-09: egységes méretek tokenből (eddig az egyseges.css 10. része írta felül) */
.tag{ height: auto; padding-top: 0 !important; padding-bottom: 0 !important; position: relative; }
.tag::after{ content: ""; position: absolute; inset: -6px -2px; }
.adm-szuro-elem{ padding-top: 0 !important; padding-bottom: 0 !important; position: relative; }
.adm-szuro-elem::after{ content: ""; position: absolute; inset: -6px -2px; }
.mh-link{ min-height: var(--gomb-mag) !important; height: auto; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; position: relative; }
.mh-link::after{ content: ""; position: absolute; inset: -6px -2px; }
.mh-kod{ min-height: var(--gomb-mag) !important; height: auto; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; position: relative; }
.mh-kod::after{ content: ""; position: absolute; inset: -6px -2px; }
.top-link{ min-height: var(--gomb-mag) !important; height: auto; padding-top: 0 !important; padding-bottom: 0 !important; position: relative; }
.top-link::after{ content: ""; position: absolute; inset: -6px -2px; }

/* ── belso-arculat.css ── */
/* ============================================================
   weblockai — A BELSŐ FELÜLET A NYILVÁNOS ARCULATBAN (2026-09-29)

   A user: „A publikus oldalak, főleg a főoldal design, színek, betűtípus
   nagyon jól néz ki, ezt szeretném, ha alkalmaznád a belépés utáni
   felületekre. Mindenhol, minden legyen teljes szélességben, nagyon nagy
   kijelzőn arányosan.”

   🔴 A SZÍNEK NEM INNEN JÖNNEK. Az első változat a főoldal majdnem fekete
      alapját tette be; a user: „a belső felület háttérszíne sötét módban az
      a kék, az kell vissza”, és a világos/sötét kapcsoló is maradjon. A
      színeket ezért továbbra is a design.css adja (navy sötét + világos).

   🔑 A design.css + arculat.css + elonezetek.css UTÁN töltődik.
   🔑 Lekerekítés: gomb, mező legfeljebb 4 px; doboz 8 px (lent, 2026-09-29).
   ============================================================ */

:root {
  --r-lg: 4px;
  --r-xl: 4px;
  /* a főoldal címbetűje; a szöveg Inter marad (ugyanaz, mint kint) */
  --font-fo: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* ── Címek: a főoldal betűje (Bricolage 800) ──
   Az arculat.css név szerint írja a Plus Jakartát ezekre, ezért itt is
   név szerint kell. A kis, csupa nagybetűs címkék (.sec-label) maradnak. */
h1, h2, h3, h4,
.head h1, .tile-name, .dont-cim, .dont-uj-cim {
  font-family: var(--font-fo);
  letter-spacing: -0.02em;
}
h1, h2, .head h1, .dont-cim, .dont-uj-cim { font-weight: 700; }
h3, h4, .tile-name { font-weight: 700; }

/* ── LAPSZÉLESSÉG (2026-11-10, a user: „az összes oldal legyen full screen, ahol
   indokolt, a többi legyen középre rendezett, normális szélesség, kijelzőtípushoz igazítva”) ──
   Alap: középen, telefonon és tableten teljes, laptopon 1180, nagy monitoron 1320 px
   (2500 px fölött a 1.3-as nagyítás arányosan növeli). Munkalap (filmtervező, galéria,
   storyboard, képalkotó, Hollywood Box, hirdetés, táblázatos superadmin-lap):
   `class="page page--teljes"`, az teljes szélességű marad.
   A lapok saját korlátja (filmtervező 1000 px, Javaslat 760 px) továbbra sem él. */
/* 🔁 2026-11-11, a user: „az egyik oldal full screen, a másik random középre rendezett … gagyi”:
   MINDEN lap teljes szélességű, a tartalom mindenhol ugyanott kezdődik (a bal menü után). A fenti 11-10-i szabály felülírva. */
:root { --lap-normal: none; }
.page, .um-lap { max-width: var(--lap-normal) !important; margin-inline: auto; }
.page.page--teljes { max-width: none !important; }
.page > .sec[style*="max-width"] { max-width: none !important; }

/* ── NAGYON NAGY KIJELZŐN ARÁNYOSAN ──
   2200 px fölött az egész felület arányosan nő, hogy 2560-on is ugyanúgy
   nézzen ki, mint 1920-on (különben apró betű és üres tenger).
   🔴 A nagyítás a `vh`-t is felszorozza: a `100vh` így 130%-a a képernyőnek, és
      a lap alja kilóg (2026-10-05). A `--z` a nagyítás mértéke: képernyőmagasságot
      mindig így írj: `calc(100vh / var(--z, 1))`. */
/* 2026-11-11, a user: nagy monitoron a nagyítás KI („mintha rossz felbontás”). A `--z` marad 1, a `calc(100vh / var(--z, 1))` alak így is jó. */

/* ── ERŐSEBB KERETEK A DOBOZOKON (2026-09-29, a user kérése) ──
   „A dobozok csak egy vékony szürke vonallal vannak elválasztva, egybefolyik
   minden. Erősebbek, kicsit lekerekítettebbek, a színe lime, mint a
   Higgsfieldben.” A mintákon kipróbálva, a user: „az egész Műhelyre”.
   🔑 Dobozon 8 px sarok; a GOMBOK és mezők maradnak 4 px (a pill-tilalom rájuk szól).
   🔑 Csak a teljes keretű dobozok. Kimaradnak, amelyeknek szándékos színes
      jelölése van (.szak teteje, .tipus és .dont-fo bal csíkja, .ai-blokk, .ut,
      .pro-hivas), mert az egységes keret eltüntetné a jelzést. A régi filmtervező
      (`um-*`) is kimarad: a lapon belüli stílusa később töltődik, és úgyis lecseréljük.
   🔑 2026-10-24 óta a Hollywood Box is (a user: „Legyen teljesen egységes a felület”).
   🔑 `:where()` a lapszűrőn: a pontosság egy osztálynyi marad, így a kijelölt
      és hover-állapotok (pl. `.tile.itt`) továbbra is felülírják. */
:root {
  --doboz-keret: color-mix(in srgb, var(--accent-line) 55%, var(--border-strong));
  --doboz-sarok: 8px;
}
:is(
  .sec, .tile, .terkep, .folyamat, .proj-sor, .gep, .kedv-panel, .segeddoboz,
  .csomag, .adm-szam, .adm-tabla-doboz, .kepdoboz, .adm-kartya-user, .mh-mod,
  .mh-tetel, .kedv-kartya, .cb-lepes, .sb-kocka, .bev-diagram, .news-keret,
  .news-kartya, .news-doboz, .news-jelenet, .bgk-doboz, .out, .ujsag
) {
  border-width: 1.5px; border-style: solid; border-color: var(--doboz-keret);
  border-radius: var(--doboz-sarok);
}
/* Két pontosabb szabályú doboz (mérve, 09-29): a Fiók lap kártyái (`.fiok-lap .fiok-racs > .sec`)
   és a Külön eszközök kártyái (`.esz-kartya`, a lapon belüli stílus később töltődik, ezért
   dupla osztály; a lap saját hover-szabálya így is nyer, mert az még később jön).
   🔑 KÜLÖN szabály a kettő: egy közös `:is()` a legerősebb tag pontosságát kapná,
      és elnyomná a kártyák hover-kiemelését. */
.fiok-lap .fiok-racs > .sec,
.esz-kartya.esz-kartya {
  border-width: 1.5px; border-style: solid; border-color: var(--doboz-keret);
  border-radius: var(--doboz-sarok);
}

/* ── ÁRVA SOROK ÉS TELEFONOS LAPOZÓ (2026-09-30, mérve mindkét arculatban) ──
   A user szabálya: sehol nem lehet tört sor. A lapok saját stílusa később
   töltődik, ezért `:root` adja a pontosságot.
   🔑 A rács helyett tördelő sor: az utolsó sor elemei KITÖLTIK a sort, így nem
      marad se egyedül álló elem, se lyuk (a régi rácsban szürke üres cella volt). */
:root .mf-osszegzo { display: flex; flex-wrap: wrap; }
:root .mf-osszegzo > div { flex: 1 1 140px; min-width: 0; }

/* A 9 platform: 3×3; telefonon 2 oszlop, a kilencedik végigér. */
@media (min-width: 600px) {
  :root .mf-platformok:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  :root .mf-platformok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .mf-platformok > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Külön eszközök „ezt kapod” sora: az oszlopszám az elemszámból (7 lépés: 4+3,
   4 lépés: 2+2, különben 3 egy sorban), és az utolsó sor kitölti a helyet. */
:root .esz-folyamat { display: flex; flex-wrap: wrap; }
:root .esz-folyamat > li { flex: 1 1 30%; min-width: 0; }
:root .esz-folyamat:has(> :nth-child(4):last-child) > li { flex-basis: 45%; }
:root .esz-folyamat:has(> :nth-child(7):last-child) > li { flex-basis: 22%; }
@media (max-width: 700px) { :root:root:root .esz-folyamat > li { flex-basis: 45%; } }

/* A skill-doboz listája két oszlopban: a páratlan utolsó végigér. */
:root .um-skillek ul > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* A lapozó telefonon: „Előző” és „Következő” egy sorban, a „Kész, tovább”
   (a fő lépés) fölöttük, teljes szélességben. Eddig egyedül lógott alattuk. */
@media (max-width: 599px) {
  :root .md-app .nz-lapoz > :is(.btn, .wg) { flex: 1 1 40%; justify-content: center; }
  :root .md-app .nz-lapoz > [data-nz-kesz] { flex-basis: 100%; order: -1; }
  :root .md-app .nz-lapoz > [data-nz-lep="1"] { margin-left: 0; }
}

/* ── „A teljes film” idővonal sávnevei (2026-09-30, a mostani arculatban mérve) ──
   A színes sávnév halvány volt a világos kártyán (Narráció 3,5 · Zene 3,2 · Zörej 2,0),
   telefonon pedig kilógott a 62 px-es oszlopából (a „Narráció” 23 px-szel).
   A felirat a lap szövegszíne, az oszlop szélesebb. (Az A arculat a sajátját hozza.) */
/* a szín beágyazott stílusban jön (film.php), ezért kell az !important */
:root .md-savnev { color: var(--text) !important; }
@media (max-width: 760px) {
  :root .md-savok { grid-template-columns: 5.75rem auto; }
  :root .md-savnev { letter-spacing: .02em; }
}


/* ── 2026-09-30, a teljes újramérés (40 lap × 8 szélesség) maradék hibái ── */
/* „Folytatom” kártyák: az oszlopszám az elemszámból (768 px-en 2+1 lett a háromból). */
@media (min-width: 761px) {
  :root .ft-folytat:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .ft-folytat:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A skill-csomag ábrája (ZIP → mappa → 32 kis ZIP): 760 px-ig egymás alatt,
   fölötte egy sorban. Tableten a harmadik doboz egyedül csúszott új sorba. */
@media (min-width: 601px) and (max-width: 760px) {
  :root .um-zip { flex-direction: column; align-items: stretch; }
  :root .um-zip-nyil { justify-content: center; }
  :root .um-zip-nyil::after { content: '↓'; }
}
@media (min-width: 761px) {
  :root .um-zip { flex-wrap: nowrap; align-items: stretch; }
  :root .um-zip-lep { flex: 1 1 0; justify-content: center; }
  :root .um-zip-nyil { align-self: center; }
}
/* Meghívók, keskeny telefon: a „FELHASZNÁLVA” felirat kilógott a 88 px-es oszlopból. */
@media (max-width: 400px) {
  :root .mh-tetel { padding: var(--s3); }
  :root .mh-tetel-adat { column-gap: 10px; }
  :root .mh-tetel-adat span { letter-spacing: .02em; }
  /* az űrlap kétoszlopos rácsában a „HÁNY NAPRA AD HOZZÁFÉRÉST” 3 px-szel lógott ki */
  :root .mh-urlap .mezo-racs { column-gap: 10px !important; }
  :root .mh-urlap .mezo-racs label { letter-spacing: .02em !important; }
  /* Felhasználók: a hosszú feliratú gomb („Hollywood Box — bekapcsolva”) törhet, ne lógjon ki a kártyából */
  :root .auk-form .btn { white-space: normal; height: auto; min-height: 44px; max-width: 100%; line-height: 1.3; text-align: left; }
}
/* Bevétel: a két hasábos elrendezésben (901–1279 px) a három „ingyen adott” kártya
   85 px-es oszlopokba szorult, a szöveg kilógott. Ott egymás alá kerülnek. */
@media (min-width: 901px) and (max-width: 1279px) {
  :root:root:root .bev-racs .gep-racs { grid-template-columns: minmax(0, 1fr) !important; }
  :root:root:root .bev-racs .gep-racs > * { grid-column: auto !important; }
}
/* A törlés ikon-gombja 32 px széles volt; érintéshez legalább 44 × 44 px kell. */
:root .btn.btn--danger.btn--icon { min-width: 44px; justify-content: center; }
/* A lépés-sáv telefonon a MOSTANI arculatban is (mérve 320–375 px): az „5. Összevágás”
   felirat 7–18 px-szel kilógott a gombjából. Az ötödik oszlop szélesebb, mint az A-ban. */
@media (max-width: 760px) { :root .md-lepesek { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); } }
@media (max-width: 420px) { :root .md-lepesek .nev { letter-spacing: -0.01em; } }

/* ══ IZZÓ KÁRTYA (2026-11-11, a user: „nagyon kopár és csúnya … lime vagy magenta színekkel a doboz keret higisen”) ══
   Az Eszközök lap kártyái felváltva lime és magenta peremet kapnak, halk belső fénnyel; rámutatva felizzanak.
   Ugyanez a minta mehet más lapok kártyáira: `--iz-rgb` adja a színt. */
:root:root :is(.esz-racs > li > .esz-kartya, .at-kartya, .fiok-lap .fiok-racs > .sec){ --iz-rgb: var(--m-lime-rgb); }
:root:root :is(.at-kartya:nth-of-type(even), .fiok-lap .fiok-racs > .sec:nth-child(even)){ --iz-rgb: var(--m-magenta-rgb); }
:root:root .esz-racs > li:nth-child(even) > .esz-kartya{ --iz-rgb: var(--m-magenta-rgb); }
:root:root :is(.esz-kartya.esz-kartya, .at-kartya.at-kartya, .fiok-lap .fiok-racs > .sec.sec){
  border-color: rgba(var(--iz-rgb), .5); border-top-color: rgba(var(--m-feher-rgb), .28);
  background-image: radial-gradient(130% 100% at 0% 120%, rgba(var(--iz-rgb), .16), transparent 62%),
    radial-gradient(70% 60% at 100% 0%, rgba(var(--m-feher-rgb), .04), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .10), 0 0 0 1px rgba(var(--iz-rgb), .12), 0 0 22px rgba(var(--iz-rgb), .14);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
:root:root .esz-kartya.esz-kartya:is(:hover, :focus-visible){
  border-color: rgba(var(--iz-rgb), .95); background-color: var(--bg-card); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .16), 0 0 0 1px rgba(var(--iz-rgb), .35), 0 0 18px rgba(var(--iz-rgb), .45), 0 0 52px rgba(var(--iz-rgb), .22);
}
:root:root .esz-kartya.esz-kartya b .i{ color: rgb(var(--iz-rgb)); }
:root:root[data-theme="light"] :is(.esz-kartya.esz-kartya, .at-kartya.at-kartya, .fiok-lap .fiok-racs > .sec.sec){ background-image: none; box-shadow: 0 0 0 1px rgba(var(--iz-rgb), .18); }
@media (prefers-reduced-motion: reduce){ :root:root .esz-kartya.esz-kartya{ transition: none; } :root:root .esz-kartya.esz-kartya:hover{ transform: none; } }

/* ── hej.css ── */
/* 🔒 CLAUDE_STABLE - 2026-09-29 - a user jónak mondta: héj a TW mintájára + verzió és összecsukó nyíl, 5 felbontás mérve */
/* ══════════════════════════════════════════════════════════════
   weblockai — A BAL ÉS A JOBB SÁV A TICKETWRIGHT MINTÁJÁRA
   /assets/hej.css   ·   2026-09-29

   A user kérése: „csináljunk egy olyan bal oldali shell menüt, mint a
   ticketnél van, és oda rakjunk mindent” · „a Superadmin és a Licenceim
   a jobb oldalra kerülnek, úgy, mint itt” (a TicketWright profil-panelje).

   🔑 A SZÁMOK A TICKETWRIGHT FORRÁSÁBÓL JÖNNEK (`tw-shell.css`, a fájl
      végi „kimérve, 2026-09-21” blokkok): sormagasság, térköz, sarok,
      betűméret, panelméret, mozgás. A SZÍN a weblockai-é: ahol ott türkiz
      áll, itt a lime (#c9ff35).
   🔑 Utolsóként töltődik be, és a bal sáv szabályai a `.wh-menu` alatt
      állnak, így a `design.css` régi sáv-szabályait felülírja.
   ══════════════════════════════════════════════════════════════ */

/* ── A bal sáv szélessége: 230 px (a TicketWrighté) ──
   Csak ott, ahol a sáv teljes; 1024–1279 között az ikonos sáv marad. */
@media (min-width: 1280px) {
  :root { --sav-w: 14.375rem; }
}

/* ── A menü ────────────────────────────────────────────────── */
.oldalsav .wh-menu {
  padding: .75rem .125rem 1.5rem;
  gap: .125rem;
}
.wh-menu .sav-pont {
  display: flex; align-items: center; gap: .6875rem;
  min-height: 2.75rem; margin: 0;
  /* A keret mindig ott van (átlátszóan), így az aktív sor nem ugrik el. */
  padding: .5rem .6875rem;
  border: 1px solid transparent; border-radius: 8px;
  font-size: var(--b-m, .875rem); font-weight: 600; color: var(--m-pala);
  text-decoration: none;
}
.wh-menu .sav-pont .lep-ikon { width: 1.125rem; height: 1.125rem; color: var(--m-pala); }
.wh-menu .sav-pont .lep-ikon .i { width: 100%; height: 100%; }
.wh-menu .sav-pont:hover { background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher); }
.wh-menu .sav-pont:hover .lep-ikon { color: var(--m-feher); }

/* Az aktív sor: fehér szöveg, halvány lime alap és keret, lime ikon. */
.wh-menu .sav-pont.itt {
  color: var(--m-feher); font-weight: 600;
  background: linear-gradient(100deg, rgba(var(--m-lime-rgb),.16), rgba(var(--m-lime-rgb),.05));
  border-color: rgba(var(--m-lime-rgb),.28);
  border-radius: 9px;
}
.wh-menu .sav-pont.itt .lep-ikon { color: var(--m-lime); }

/* A TicketWright menüje tagolatlan sor: nincs elválasztó vonal, csak levegő. */
.wh-menu .sav-pont--elval { margin-top: .5rem; padding-top: .5rem; border-top-color: transparent; }

/* A kész lépés pipája a sor jobb szélén. */
.wh-menu .lep-jel { margin-left: auto; color: var(--m-lime); }

/* Csoportcím a menüben (2026-10-06, közös változat): „A filmed lépései”, „Eszközök”, „Segítség”. */
.wh-menu-cim {
  display: block; margin: .875rem 0 .25rem; padding: 0 .6875rem;
  font-size: var(--b-xs, .6875rem); font-weight: 700; letter-spacing: .08em; line-height: 1.4;
  text-transform: uppercase; color: rgba(var(--m-feher-rgb),.55);
}
/* „most ez”: a film következő lépése, lime címke a sor végén (a `_ft-js.php` teszi ki). */
.wh-menu .lep-jel.most {
  padding: .125rem .4375rem; border-radius: 4px;
  background: var(--m-lime); color: var(--m-fekete);
  font-size: var(--b-xs, .6875rem); font-weight: 700; line-height: 1.3; white-space: nowrap;
}

/* Zárolt lépés: látszik, de halványan. */
.wh-menu .sav-pont--zarva { color: var(--m-szurke-kozep); }
.wh-menu .sav-pont--zarva .lep-ikon,
.wh-menu .sav-pont--zarva .lep-jel { color: var(--m-szurke-kozep); }

/* ── A helyben nyíló csoport (harmonika) ──────────────────── */
.wh-harmonika { margin: 0; }
.wh-harmonika > summary { list-style: none; cursor: pointer; }
.wh-harmonika > summary::-webkit-details-marker { display: none; }
.wh-nyil {
  margin-left: auto; display: grid; place-items: center;
  opacity: .6; transition: transform .15s ease;
}
.wh-nyil .i { width: .875rem; height: .875rem; }
.wh-harmonika[open] > summary .wh-nyil { transform: rotate(90deg); opacity: .9; }

.wh-al { display: grid; gap: 1px; margin: .125rem 0 .25rem; padding: 0 0 0 .5rem; }
.wh-al-elem {
  display: flex; align-items: center; gap: .6875rem;
  width: 100%; min-height: 2.625rem;
  padding: .5625rem .75rem .5625rem .5rem;
  background: none; border: 0; border-radius: 9px;
  font: inherit; font-size: var(--b-m, .875rem); font-weight: 600; color: var(--m-pala);
  text-align: left; text-decoration: none; cursor: pointer;
}
.wh-al-elem:hover { background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher); }
.wh-al-elem.itt { background: rgba(var(--m-lime-rgb),.12); color: var(--m-feher); }
.wh-al-elem:focus-visible,
.wh-menu .sav-pont:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 2px; }
/* Az alpont ikonja csak az ikonos sávban kell (lent). */
.wh-al-ikon { display: none; }
/* A Sablonok lenyílói (2026-11-12): a sablon neve vékonyabb, az első sor (a típus lapja) lime. */
[data-sab-csop] .wh-al { margin-left: 1.0625rem; padding-left: .5rem; border-left: 1px solid rgba(var(--m-feher-rgb),.1); }
[data-sab-csop] .wh-al-elem { min-height: 2.25rem; padding-block: .375rem; font-weight: 500; font-size: var(--b-s, .8125rem); line-height: 1.3; }
[data-sab-csop] .wh-al-elem--tipus { font-weight: 600; color: var(--m-lime); }
@media (min-width: 1024px) and (max-width: 1279px) { [data-sab-csop] .wh-al { display: none; } }
@media (min-width: 1280px) { html[data-sav="zart"] [data-sab-csop] .wh-al { display: none; } }

@media (prefers-reduced-motion: reduce) { .wh-nyil { transition: none; } }

/* ── 1024–1279: ikonos sáv ──
   A régi szabály a feliratot már elrejti; itt a sorok középre kerülnek, és
   az alpontok a saját ikonjukkal látszanak (a felirat nem fér el). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .oldalsav .wh-menu { padding-inline: 0; }
  .wh-menu .sav-pont { justify-content: center; padding-inline: 0; }
  .wh-menu .lep-jel, .wh-nyil { display: none; }
  .wh-menu-cim { height: 1px; margin: .5rem .75rem; padding: 0; overflow: hidden; color: transparent; background: rgba(var(--m-feher-rgb),.1); }
  .wh-al { padding: 0; margin: 0 0 .25rem; }
  .wh-al-elem { justify-content: center; padding-inline: 0; }
  .wh-al-ikon { display: inline-flex; width: 1rem; height: 1rem; }
  .wh-al-ikon .i { width: 100%; height: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   A SÁV FEJE: logó, alatta a verzió, mellette az összecsukó nyíl
   (2026-09-29, a user kérése). A TicketWright számai: 16/14 px térköz,
   71 px magas fej, 32 px-es gomb, a verzió 12 px/400 monospace.
   🔑 1280 alatt a fej „nincs” (`display: contents`): ott a régi logó-
      szabályok dolgoznak változatlanul, a nyíl és a verzió rejtve.
   ══════════════════════════════════════════════════════════════ */
.wh-fej { display: contents; }
.wh-csuk, .wh-verzio { display: none; }

@media (min-width: 1280px) {
  .wh-fej {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    flex-shrink: 0; min-height: 4.4375rem; padding: 1rem .875rem;
    border-bottom: 1px solid var(--border);
  }
  /* 🔴 A logó 32 px-es betűvel 177 px széles: a nyíl mellette 16 px-szel
     kilógott a 230-as sávból (mérve). 26 px-en 144 px, a nyíl elfér. */
  .wh-fej .sav-brand {
    min-width: 0; padding: 0; border-bottom: 0;
    justify-content: flex-start; font-size: var(--b-3xl, 1.75rem);
  }
  .wh-logo-ki { display: flex; flex-direction: column; min-width: 0; }
  .wh-verzio {
    display: block;
    font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
    font-size: var(--b-s, .8125rem); font-weight: 400; line-height: 1.6; letter-spacing: 0;
    color: var(--m-pala); -webkit-text-fill-color: var(--m-pala);
  }
  .wh-csuk {
    position: relative; flex: none;
    display: grid; place-items: center;
    width: 2rem; height: 2rem; padding: 0;
    background: none; border: 0; border-radius: 8px;
    color: var(--m-pala); cursor: pointer;
  }
  /* A látszó gomb 32 px, a kattintható terület 44 px. */
  .wh-csuk::after { content: ''; position: absolute; inset: -6px; }
  .wh-csuk .i { width: 1rem; height: 1rem; transform: rotate(180deg); }
  .wh-csuk:hover { background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher); }
  .wh-csuk:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 2px; }

  /* ── Összecsukva: 64 px-es ikonos sáv, a logó helyén a nyitó nyíl ──
     Ugyanaz a kép, mint 1024–1279 között (`design.css`, fent). */
  html[data-sav="zart"] { --sav-w: 64px; }
  html[data-sav="zart"] .oldalsav { padding: 0 6px; }
  html[data-sav="zart"] .wh-fej { justify-content: center; padding-inline: 0; }
  html[data-sav="zart"] .wh-fej .sav-brand { display: none; }
  html[data-sav="zart"] .wh-csuk .i { transform: none; }
  html[data-sav="zart"] .oldalsav .pv-cim, html[data-sav="zart"] .oldalsav .pv-nyil,
  html[data-sav="zart"] .oldalsav .szak-nev, html[data-sav="zart"] .oldalsav .szak-all,
  html[data-sav="zart"] .oldalsav .szak-nyil,
  html[data-sav="zart"] .oldalsav .lep-nev, html[data-sav="zart"] .oldalsav .lep-all { display: none; }
  html[data-sav="zart"] .oldalsav .pv-gomb, html[data-sav="zart"] .oldalsav .szak-fej,
  html[data-sav="zart"] .oldalsav .sav-lepes, html[data-sav="zart"] .oldalsav .sav-pont { justify-content: center; }
  html[data-sav="zart"] .oldalsav .wh-menu { padding-inline: 0; }
  html[data-sav="zart"] .wh-menu .sav-pont { padding-inline: 0; }
  html[data-sav="zart"] .wh-menu .lep-jel, html[data-sav="zart"] .wh-nyil { display: none; }
  html[data-sav="zart"] .wh-menu-cim { height: 1px; margin: .5rem .75rem; padding: 0; overflow: hidden; color: transparent; background: rgba(var(--m-feher-rgb),.1); }
  html[data-sav="zart"] .wh-al { padding: 0; margin: 0 0 .25rem; }
  html[data-sav="zart"] .wh-al-elem { justify-content: center; padding-inline: 0; }
  html[data-sav="zart"] .wh-al-ikon { display: inline-flex; width: 1rem; height: 1rem; }
  html[data-sav="zart"] .wh-al-ikon .i { width: 100%; height: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   A JOBB SÁV PANELJEI — a TicketWright profil-panelje
   360 széles, teljes magasságú, a sáv mellől tárul fel, bal sarkai 14 px.
   ══════════════════════════════════════════════════════════════ */
.wh-panel-elem { margin: 0; flex-shrink: 0; }
.wh-panel-elem > summary { list-style: none; }
.wh-panel-elem > summary::-webkit-details-marker { display: none; }

/* A megnyitott panel gombja: lime alap (a TicketWrightban türkiz). */
.jobbsav details[open] > .rb-gomb,
.jobbsav details[open] > .rb-gomb .i { color: var(--m-lime); }
.jobbsav details[open] > .rb-gomb {
  background: rgba(var(--m-lime-rgb),.14); border-color: rgba(var(--m-lime-rgb),.32);
}
/* Superadmin-lapon a gomb jelzi, hol vagy. */
.jobbsav .wh-sav-gomb.itt,
.jobbsav .wh-sav-gomb.itt .i { color: var(--m-lime); }
.jobbsav .wh-profil > summary { margin-top: 2px; }
.jobbsav .wh-profil[open] > summary,
.jobbsav .wh-profil > summary.itt { box-shadow: 0 0 0 3px rgba(var(--m-lime-rgb),.35); }

.wh-panel {
  position: fixed; top: 0; bottom: 0; right: var(--jsav-w); left: auto;
  z-index: 130;
  width: 22.5rem; max-width: calc(100vw - var(--jsav-w));
  padding: 1.25rem 1.375rem;
  overflow-y: auto; overscroll-behavior: contain;
  background-color: color-mix(in srgb, var(--hej-lap, #0b2340) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(var(--m-feher-rgb),.1);
  border-radius: 14px 0 0 14px;
  box-shadow: -12px 0 40px rgba(var(--m-fekete-tiszta-rgb),.45);
  color: var(--m-feher-tort); text-align: left;
}

/* A görgetősáv ne vágjon világos csíkot a sötét panelbe (a TicketWrightban
   ugyanez a hiba volt). 🔴 A két szabvány kiüti egymást: ahol van
   `::-webkit-scrollbar`, ott a `scrollbar-width` nem állhat mellette. */
@supports not selector(::-webkit-scrollbar) {
  .wh-panel, .oldalsav, .oldalsav .wh-menu { scrollbar-width: thin; scrollbar-color: rgba(var(--m-feher-rgb),.18) transparent; }
}
.wh-panel::-webkit-scrollbar,
.oldalsav::-webkit-scrollbar, .oldalsav .wh-menu::-webkit-scrollbar { width: 6px; }
.wh-panel::-webkit-scrollbar-track,
.oldalsav::-webkit-scrollbar-track, .oldalsav .wh-menu::-webkit-scrollbar-track { background: transparent; }
.wh-panel::-webkit-scrollbar-thumb,
.oldalsav::-webkit-scrollbar-thumb, .oldalsav .wh-menu::-webkit-scrollbar-thumb { background: rgba(var(--m-feher-rgb),.18); border-radius: 3px; }
.wh-panel:hover::-webkit-scrollbar-thumb,
.oldalsav:hover::-webkit-scrollbar-thumb, .oldalsav .wh-menu:hover::-webkit-scrollbar-thumb { background: rgba(var(--m-feher-rgb),.28); }

/* Fejrész: cím + ✕ */
.wh-panel-fej {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 0 0 1.5rem;
}
.wh-panel-cim { font-size: var(--b-l, 1rem); font-weight: 700; color: var(--m-feher); }
.wh-panel-x {
  position: relative; flex: none;
  width: 1.75rem; height: 1.75rem; padding: 0;
  display: grid; place-items: center;
  background: rgba(var(--m-feher-rgb),.06); color: rgba(var(--m-feher-rgb),.6);
  border: 1px solid rgba(var(--m-feher-rgb),.1); border-radius: 7px;
  cursor: pointer; font-size: var(--b-s, .8125rem); line-height: 1;
}
/* A látszó doboz 28 px marad (a TicketWright mérete), a kattintható
   terület 44 px — a saját szabályunk szerint ennyi a legkisebb. */
.wh-panel-x::after { content: ''; position: absolute; inset: -8px; }
.wh-panel-x:hover { background: rgba(var(--m-feher-rgb),.12); color: var(--m-feher); }

/* A profil feje: 42-es kör, név, szerep */
.wh-profil-fej {
  display: flex; align-items: center; gap: .75rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid rgba(var(--m-feher-rgb),.08);
}
.wh-monogram {
  flex: none; width: 2.625rem; height: 2.625rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--m-lime), var(--m-lime-kozep)); color: var(--m-fekete);
  font-size: var(--b-m, .875rem); font-weight: 700; letter-spacing: .02em;
}
.wh-profil-ki { min-width: 0; }
.wh-profil-nev {
  display: block; font-size: .9375rem; font-weight: 700; color: var(--m-feher);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-profil-szerep {
  display: block; margin-top: .125rem;
  font-size: var(--b-s, .8125rem); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(var(--m-feher-rgb),.5);
}

/* A sorok: 44 magas, 15 px, 8 px sarok, 11 px térköz */
.wh-sorok { display: flex; flex-direction: column; padding: .5rem; }
.wh-sor {
  display: flex; align-items: center; gap: .6875rem;
  min-height: 2.75rem; padding: .5625rem .75rem;
  border: 1px solid transparent; border-radius: 8px;
  font-size: var(--b-m, .875rem); font-weight: 400; color: var(--m-pala);
  text-decoration: none;
}
.wh-sor > span { flex: 1; min-width: 0; }
.wh-sor .i { flex: none; width: 1.125rem; height: 1.125rem; color: var(--m-pala); }
.wh-sor .wh-sor-nyil { width: 1rem; height: 1rem; opacity: .35; }
.wh-sor:hover { background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher); }
.wh-sor:hover .i { color: var(--m-feher); }
.wh-sor.itt { background: rgba(var(--m-feher-rgb),.07); color: var(--m-feher); font-weight: 600; }
.wh-sor.itt .i { color: var(--m-lime); }
.wh-sor:focus-visible, .wh-kilep:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 1px; }
/* Profil panel (2026-10-04, a Slepnex mintájára): vékony elválasztó és a piros Veszélyes zóna */
.wh-sor-valaszto { display: block; height: 1px; margin: .5rem .75rem; background: rgba(var(--m-feher-rgb),.06); }
.wh-sor--veszely, .wh-sor--veszely .i { color: var(--m-piros-halvany); }
.wh-sor--veszely:hover { background: rgba(220,38,38,.14); color: var(--m-piros-halo); }
.wh-sor--veszely:hover .i { color: var(--m-piros-halo); }

/* Csoportfelirat (SÚGÓ, a Superadmin csoportjai) */
.wh-panel-sav {
  margin: .75rem 0 .25rem; padding: .75rem 0 0 .75rem;
  border-top: 1px solid rgba(var(--m-feher-rgb),.06);
  font-size: var(--b-xs, .6875rem); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(var(--m-feher-rgb),.58);
}

/* A Superadmin csoportjai a Profil panelben (2026-10-05): lenyíló sor, alatta behúzva a lapok */
.wh-csop { margin: 0; }
.wh-csop > summary { list-style: none; cursor: pointer; }
.wh-csop > summary::-webkit-details-marker { display: none; }
.wh-csop > summary .wh-sor-nyil { transition: transform .15s ease; }
.wh-csop[open] > summary { color: var(--m-feher); }
.wh-csop[open] > summary .wh-sor-nyil { transform: rotate(90deg); opacity: .7; }
.wh-csop-sorok { display: flex; flex-direction: column; margin: 0 0 .25rem; padding-left: 1rem; }
.wh-csop-sorok .wh-sor-nyil,
.wh-sor[data-sa-link] .wh-sor-nyil { display: none; }

/* ── Profil panel, közös változat (2026-10-06) ──
   Sor rövid leírással; adminnak két fül (Fiókom | Superadmin), rádiógombbal,
   tehát szkript nélkül is vált. A lime alá húzás jelzi a nyitott fület. */
.wh-sor--leir { align-items: center; padding-block: .5rem; }
.wh-sor--leir > span { display: flex; flex-direction: column; gap: .0625rem; }
.wh-sor--leir b { font-weight: 600; color: var(--m-feher-tort); }
.wh-sor--leir small {
  font-size: var(--b-s, .8125rem); line-height: 1.35; color: rgba(var(--m-feher-rgb),.58);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-sor--leir:hover b, .wh-sor--leir.itt b { color: var(--m-feher); }

.wh-ful-r { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.wh-fulek {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  margin: 0 0 .5rem; padding: .25rem;
  background: rgba(var(--m-feher-rgb),.05); border-radius: 8px;
}
.wh-fulek label {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
  border-radius: 6px; font-size: var(--b-m, .875rem); font-weight: 600; color: var(--m-pala); cursor: pointer;
}
.wh-fulek label:hover { color: var(--m-feher); background: rgba(var(--m-feher-rgb),.06); }
#wh-ful-fiok:checked ~ .wh-fulek [for="wh-ful-fiok"],
#wh-ful-sa:checked ~ .wh-fulek [for="wh-ful-sa"] { background: var(--m-lime); color: var(--m-fekete); }
#wh-ful-fiok:focus-visible ~ .wh-fulek [for="wh-ful-fiok"],
#wh-ful-sa:focus-visible ~ .wh-fulek [for="wh-ful-sa"] { outline: 2px solid var(--m-lime); outline-offset: 2px; }
#wh-ful-fiok:checked ~ .wh-ful-lap--sa,
#wh-ful-sa:checked ~ .wh-ful-lap--fiok { display: none; }
.wh-ful-lap { display: flex; flex-direction: column; }

/* Kilépés: piros SZÖVEG, nem piros doboz */
.wh-kilep {
  display: flex; align-items: center; gap: .6875rem;
  width: 100%; min-height: 2.75rem; margin: .75rem 0 0;
  padding: .5625rem .75rem;
  background: none; border: 0; border-radius: 8px;
  font: inherit; font-size: var(--b-m, .875rem); font-weight: 400; color: var(--m-piros-halvany);
  text-align: left; cursor: pointer;
}
.wh-kilep .i { width: 1.125rem; height: 1.125rem; color: inherit; }
.wh-kilep:hover { background: rgba(220,38,38,.14); color: var(--m-piros-halo); }

/* ── Profil panel görgetés nélkül (2026-10-06, a user: „kicsi monitoron se kelljen görgetni”;
   20:40: „a széles menü rettenetes” → keskeny, egy hasáb marad) ──
   A szélesség az eredeti 22.5rem. Egérrel (pointer: fine) a sorok 36 px-esek,
   érintőképernyőn 44 px maradnak. A „Profil” címsor nem foglal külön sort.
   Alul: (régiben Tudásbázis) · Kinézet · Veszélyes zóna · Kilépés. */
.wh-panel { padding: 1rem 1.125rem; }
.wh-panel-fej { margin-bottom: .625rem; }
.wh-profil-fej { padding-bottom: .75rem; }
.wh-monogram { width: 2.25rem; height: 2.25rem; }
.wh-profil .wh-panel-fej { position: absolute; top: 1rem; right: 1.125rem; margin: 0; }
.wh-profil .wh-panel-cim { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wh-profil .wh-profil-fej { padding-right: 2.75rem; }
.wh-sorok { padding: .375rem 0 0; }
.wh-sor-valaszto { margin: .25rem .75rem; }
.wh-panel-sav { margin: .375rem 0 0; padding: .5rem 0 .125rem .75rem; }
.wh-csop-sorok { padding-left: .75rem; margin-bottom: .125rem; }
.wh-lab {
  display: flex; flex-direction: column;
  margin-top: .375rem; padding-top: .375rem; border-top: 1px solid rgba(var(--m-feher-rgb),.08);
}
.wh-lab .wh-kilep { margin: 0; }
.wh-lab .wh-sor-nyil { display: none; }
@media (pointer: fine) {
  .wh-panel :is(.wh-sorok, .wh-lab) :is(.wh-sor, .wh-kilep) { min-height: 2.25rem; padding-block: .3125rem; }
  .wh-panel .wh-sor--leir { padding-block: .25rem; }
  .wh-panel .wh-sor--leir small { line-height: 1.25; }
  .wh-fulek label { min-height: 2.25rem; }
}
/* A profilpanel lent áll, a profilgombnál, és csak a tartalma magasságáig ér (2026-10-06 21:20,
   a user: „a felső részét vidd lejjebb, mert nagy monitoron széthúzódik”). Ha nem fér el,
   a képernyő tetejéig ér és görget. Telefonon marad a teljes képernyő. */
@media (min-width: 621px) {
  .wh-profil > .wh-panel { top: auto; bottom: 0; max-height: 100dvh; }
}
/* Alacsony ablak: a leírás elmarad, a sorköz szűkül. */
@media (max-height: 760px) and (pointer: fine) {
  .wh-panel .wh-sor--leir small { display: none; }
  .wh-panel { padding-block: .75rem; }
}

/* ── A panel feltárul, nem bepattan (280 ms, a TicketWright mozgása) ── */
@keyframes wh-panel-be { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes wh-panel-ki { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
details[open] > .wh-panel { animation: wh-panel-be 280ms cubic-bezier(.4, 0, .2, 1); }
details[open].wh-zarul > .wh-panel {
  animation: wh-panel-ki 280ms cubic-bezier(.4, 0, .2, 1) forwards;
  pointer-events: none;
}
details[open].wh-azonnal > .wh-panel { animation: none; }
@media (prefers-reduced-motion: reduce) {
  details[open] > .wh-panel, details[open].wh-zarul > .wh-panel { animation: none; }
}

/* ── Telefonon a jobb sáv a lap tetején vízszintes sor: a panel a teljes
      képernyőt kapja. ── */
@media (max-width: 620px) {
  .wh-panel {
    right: 0; left: 0; width: auto; max-width: none;
    z-index: 200; border-radius: 0; border-width: 0;
  }
}

/* ══ A NÉZET VÁLASZTÓJA A FELSŐ SÁVBAN (2026-09-30) ══════════════════
   A user: „ha superadmin funkciókban vagyok, nem látom a nézet lenyílót”.
   A bal sávból ide került; minden belső lapon látszik (`wlai_bar_nezet()`).
   A gomb semleges (sötét lapka), hogy ne versenyezzen a színes gombokkal. */
.bar-uj.bar-nezet, .bar-uj.bar-nezet:visited {
  background: var(--m-szurke-hover); color: var(--m-feher-tort); border-color: rgba(var(--m-feher-rgb),.16); font-weight: 600;
}
.bar-uj.bar-nezet:hover { filter: none; background: var(--m-szurke-felulet); }
.bar-uj.bar-nezet b { font-weight: 700; color: var(--m-lime); }
.bar-uj.bar-nezet .bn-nyil { width: 14px; height: 14px; opacity: .8; }
/* 900 px alatt a felirat elmarad (mint a sáv többi gombjánál), az ikon és a nyíl marad */

.bar-nezet-lista {
  position: fixed; inset: auto; margin: 0; padding: 6px; min-width: 230px; max-width: calc(100vw - 16px);
  background: var(--m-sotet-doboz); color: var(--m-feher-tort); border: 1.5px solid var(--m-sotet-vonal); border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(var(--m-fekete-tiszta-rgb),.7);
}
.bar-nezet-lista:popover-open { display: flex; flex-direction: column; gap: 2px; }
.bar-nezet-lista .bn-elem {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
  background: none; border: 0; border-radius: 10px; color: var(--m-szurke-vilagos); text-align: left; text-decoration: none;
  font: 600 15px/1.2 'Inter', system-ui, sans-serif; cursor: pointer;
}
.bar-nezet-lista .bn-elem .i { flex: none; width: 17px; height: 17px; }
/* a user, 2026-09-30: „egér ráhúzáskor is lime legyen a szín” */
.bar-nezet-lista .bn-elem:hover { background: var(--m-lime); color: var(--m-fekete); }
.bar-nezet-lista .bn-elem:focus-visible { outline: 2px solid var(--m-lime); outline-offset: -2px; }
.bar-nezet-lista .bn-elem.itt, .bar-nezet-lista .bn-elem[aria-checked="true"] { background: var(--m-lime); color: var(--m-fekete); }

/* ══ KILÉPÉS-ABLAK (2026-10-05, a user: „a kilépés gomb legyen valami designba illő”) ══
   A böngésző szürke confirm()-ja helyett: fekete kártya magenta kerettel, Anton cím.
   Mindkét témában sötét, mert ez a márka kártyája.
   10-05 este (a user: „nincs jó helyen, használj magentát is, lekerekített szegélyek,
   a gombok legyenek magenta és lime”): a design.css `* { margin: 0 }` sora levette a
   böngésző középre igazító `margin: auto`-ját, ezért ült a bal felső sarokban.
   Magentán és lime-on sötét tinta jár (fehér magentán 3,43, bukik; arculat.css). */
.wl-kilep{ margin: auto; padding: 0; border: 0; background: transparent; color: var(--m-feher); max-width: none; overflow: visible; }
.wl-kilep::backdrop{ background: rgba(4, 5, 8, .72); backdrop-filter: blur(3px); }
.wl-kilep-doboz{ width: min(26rem, calc(100vw - 2rem)); box-sizing: border-box; margin: 0;
  background: var(--m-sotet-sav); border: 2px solid var(--m-magenta); border-radius: 16px; padding: clamp(1.25rem, 4vw, 1.75rem);
  box-shadow: 0 1.5rem 4rem rgba(var(--m-fekete-tiszta-rgb), .55), 0 0 0 6px rgba(var(--m-magenta-rgb), .12);
  display: flex; flex-direction: column; gap: .75rem; }
.wl-kilep-ikon{ width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 12px;
  background: var(--m-magenta); color: var(--m-fekete); }
.wl-kilep-ikon .i{ width: 1.35rem; height: 1.35rem; }
.wl-kilep-doboz h2{ margin: .25rem 0 0; font-family: "Anton", Impact, sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.05; color: var(--m-feher); }
.wl-kilep-doboz p{ margin: 0; color: var(--m-szurke-vilagos); font-size: var(--b-l, 1rem); line-height: 1.5; }
.wl-kilep-gombok{ display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .5rem; }
.wl-kilep-gombok button{ flex: 1 1 9rem; min-height: 2.875rem; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; border-radius: 10px; font: inherit; font-weight: 700; font-size: var(--b-l, 1rem); cursor: pointer;
  color: var(--m-fekete); border: 0; transition: filter .15s ease, transform .15s ease; }
.wl-kilep-gombok .i{ width: 1.1rem; height: 1.1rem; }
.wl-kilep-megse{ background: var(--m-lime); }
.wl-kilep-igen{ background: var(--m-magenta); }
.wl-kilep-gombok button:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.wl-kilep-gombok button:focus-visible{ outline: 2px solid var(--m-feher); outline-offset: 3px; }
.wl-kilep-igen:disabled{ opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: no-preference){
  .wl-kilep[open] .wl-kilep-doboz{ animation: wl-kilep-be .18s ease-out; }
  @keyframes wl-kilep-be{ from{ opacity: 0; transform: translateY(.5rem) scale(.98); } to{ opacity: 1; transform: none; } }
}

/* ── A vendég sáv alja (2026-11-11, a user: „a többit meg be kell tenni a bal shell aljára”):
   Árak, Tudásbázis, GYIK, Kapcsolat, Belépés; a `margin-top: auto` a sáv aljára nyomja. */
.wh-menu .wh-also {
  display: flex; flex-direction: column; gap: .125rem;
  margin-top: auto; padding-top: .75rem;
  border-top: 1px solid rgba(var(--m-feher-rgb),.1);
}
.wh-menu .wh-also .sav-pont { white-space: nowrap; }

/* 2026-11-11 minta: vendég jobb sáv csak ott, ahol a fejléc nincs fent (1024 px felett) */
@media (max-width: 1023px){ .jobbsav--vendeg{ display: none !important; } .app-torzs:has(> .jobbsav--vendeg){ padding-right: 0; } }
/* 2026-11-11 délután: a vendég jobb sávja felül a Mi ez?, Árak, Tudásbázis, GYIK, Kapcsolat ikonjaival (a bal sáv aljáról). */
.jobbsav .rb-vendeg-menu{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jobbsav :is(.rb-vendeg-menu .rb-gomb, .rb-sugo).itt, .jobbsav :is(.rb-vendeg-menu .rb-gomb, .rb-sugo).itt .i{ color: var(--m-lime); }
.jobbsav :is(.rb-vendeg-menu .rb-gomb, .rb-sugo).itt{ background: rgba(var(--m-lime-rgb),.10); border-color: rgba(var(--m-lime-rgb),.25); }
/* 🪟 2026-11-11: a belépő ablak (`wlai_belepo_ablak()`): fekete doboz középen, a belseje a `/belepes/?ablak=1` */
.wl-belepo{ position: fixed; inset: 0; margin: auto; height: fit-content; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; color: var(--m-feher);
  background: var(--m-fekete); border: 1px solid rgba(var(--m-feher-rgb),.14); border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.wl-belepo::backdrop{ background: rgba(var(--m-fekete-tiszta-rgb),.72); backdrop-filter: blur(3px); }
.wl-belepo iframe{ display: block; width: 100%; height: 420px; border: 0; background: var(--m-fekete); }
.wl-belepo-zar{ position: absolute; top: 6px; right: 6px; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px; color: var(--m-szurke-csendes); font-size: 18px; cursor: pointer; }
.wl-belepo-zar:hover, .wl-belepo-zar:focus-visible{ color: var(--m-feher); background: rgba(var(--m-feher-rgb),.08); }
/* 2026-11-11: a keretbe tett nyilvános lapok csak sötétek (a Plakát-arculat), ott a téma-gomb nem kell */
body.lp--hej .jobbsav #theme-btn{ display: none; }
/* 2026-11-11, a user: a belépő ablak sarka a dobozok kerekítését kapja, a pereme lime izzást (az `.izzas` 4 px-ét felülírja) */
:root:root:root:root .wl-belepo.izzas{ border-radius: var(--doboz-sarok, 16px); }
/* 2026-11-11, a user: „jobb oldalon felesleges hely van”: a böngésző görgetősávja (15 px) a jobb sáv mellett állt. A keretes lapokon nincs látható oldal-görgetősáv (görgetni ugyanúgy lehet). */
html:has(.app-torzs){ scrollbar-width: none; }
html:has(.app-torzs)::-webkit-scrollbar{ display: none; }

/* ── arculat-a.css ── */
/* ══════════════════════════════════════════════════════════════
   weblockai — AZ „A” ARCULAT MINTÁJA (2026-09-29)
   /assets/arculat-a.css

   A user a három irányból az A-t választotta (Higgsfield-irány), világos
   móddal és Higgsfield-féle lekerekítéssel („kerekítsük le a széleket”).
   CSAK AKKOR töltődik, ha a `wlai_arculat=a` süti él (`?arculat=a`, kikapcsolás
   `?arculat=0`). Mindenki más a mostani felületet látja.

   🔑 A SÁVOK (bal, jobb, felső) MINDKÉT MÓDBAN FEKETÉK: a világos tartalmat
      erős fekete keret fogja össze, ahogy eddig a navy.
   🔑 VILÁGOSBAN a „tinta” a fekete: a lime csak fekete tömbön jelenik meg
      (fehéren elsápadna). A kijelölés fekete blokk lime felirattal.
   🔑 A komponens-szabályok `:root`-tal kezdődnek, mert a lapok saját stílusa
      (pl. a filmtervezőé) később töltődik; így ez nyer.
   ══════════════════════════════════════════════════════════════ */

/* ── Közös: betű, sarok, sávok ── */
:root{
  --font-fo: 'Anton', 'Inter', system-ui, sans-serif;
  /* 2026-10-24, a user: „a dobozok sarkai az egész felületen kicsit nagyobb rádiusszal, csak egy picit” (16 → 20, 18 → 22) */
  --r: 10px; --r-lg: 12px; --r-xl: 22px;
  --doboz-sarok: 20px;

  --hej-1: var(--m-fekete); --hej-2: var(--m-fekete); --hej-lap: var(--m-sotet-doboz);
  --hej-vonal: rgba(var(--m-feher-rgb),.08); --hej-vonal-2: rgba(var(--m-feher-rgb),.16);
  --hej-szoveg: var(--m-feher-tort); --hej-halk: var(--m-szurke-halk); --hej-halk-2: var(--m-szurke-kozep);
  --fej-bg: var(--m-fekete); --fej-bg-hover: var(--m-szurke-hover);
}

/* ── SÖTÉT ── */
:root[data-theme="dark"]{
  --bg: var(--m-fekete); --bg-card: var(--m-sotet-doboz); --bg-card-hover: var(--m-szurke-felulet);
  --bg-sunken: var(--m-sotet-sav); --bg-elevated: #1b1e21; --bg-blur: rgba(var(--m-fekete-rgb),.88);
  --border: #1f242d; --border-strong: var(--m-sotet-vonal); --field-border: var(--m-sotet-vonal); --card-ring: transparent;
  --text: var(--m-feher-tort); --text-muted: var(--m-szurke-csendes); --text-dim: var(--m-szurke-halk);
  --accent-ink: var(--m-lime); --accent-line: var(--m-lime);
  --accent-soft: rgba(var(--m-lime-rgb),.10); --accent-edge: rgba(var(--m-lime-rgb),.35);
  --doboz-keret: var(--m-sotet-aktiv);
}

/* ── VILÁGOS: papír alap, fekete tinta ── */
:root[data-theme="light"]{
  --bg: var(--m-feher-tort); --bg-card: var(--m-feher); --bg-card-hover: #fafaf7;
  --bg-sunken: var(--m-vilagos-sav); --bg-elevated: #f7f7f3; --bg-blur: rgba(242,242,238,.9);
  --border: #e0e0d8; --border-strong: #cfcfc7; --field-border: #cfcfc7; --card-ring: transparent;
  --text: var(--m-fekete-mely); --text-muted: #55565c; --text-dim: #66676d;
  --accent-ink: var(--m-fekete-mely); --accent-line: var(--m-fekete-mely);
  --accent-soft: var(--m-vilagos-sav); --accent-edge: var(--m-fekete-mely);
  --doboz-keret: var(--m-vilagos-vonal);
}
/* a lap sarkaiban lévő halvány fény: világosban kivesszük, a papír tiszta */
:root[data-theme="light"] body::before{ background: none; }

/* ── Címek: Anton, csupa nagybetű (a logó betűje) ── */
:root :is(h1, .head h1, .lapcim, .md-lap > h2, .dont-cim){
  font-family: 'Anton', 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important; text-transform: uppercase; letter-spacing: .01em;
}

/* ── A BAL SÁV ── */
:root .wh-menu .sav-pont{ color: var(--m-szurke-halk); border-radius: var(--r-lg); }
:root .wh-menu .sav-pont .lep-ikon{ color: var(--m-szurke-halk); }
:root .wh-menu .sav-pont:hover{ background: var(--m-szurke-hover); color: var(--m-feher); }
:root .wh-menu .sav-pont:hover .lep-ikon{ color: var(--m-feher); }
:root .wh-menu .sav-pont.itt{
  background: var(--m-lime); border-color: var(--m-lime); color: var(--m-fekete); font-weight: 700; border-radius: var(--r-lg);
}
:root .wh-menu .sav-pont.itt .lep-ikon, :root .wh-menu .sav-pont.itt .lep-jel{ color: var(--m-fekete); }

/* ── A JOBB SÁV ── */
:root .jobbsav .wh-sav-gomb, :root .jobbsav .rb-gomb{ border-radius: var(--r-lg); }

/* ── GOMBOK ── */
:root .btn{ border-radius: var(--r-lg); }
:root[data-theme="light"] .btn--lime{ box-shadow: inset 0 0 0 2px var(--m-fekete-mely); }

/* ── KIJELÖLÉS: sötétben lime tömb, világosban fekete tömb lime felirattal ── */
:root :is(.md-lepesek button.itt, .md-blokk.itt, .mf-valaszt.itt, .nz-pont.itt){
  background: var(--m-lime) !important; color: var(--m-fekete) !important;
  border-color: var(--m-lime) !important; box-shadow: none !important;
}
:root :is(.md-lepesek button.itt, .md-blokk.itt, .mf-valaszt.itt, .nz-pont.itt) :is(small, span, b, .i, .esz-abra){
  color: var(--m-fekete) !important; stroke: currentColor;
}
:root[data-theme="light"] :is(.md-lepesek button.itt, .md-blokk.itt, .mf-valaszt.itt, .nz-pont.itt){
  background: var(--m-fekete-mely) !important; color: var(--m-lime) !important; border-color: var(--m-fekete-mely) !important;
}
:root[data-theme="light"] :is(.md-lepesek button.itt, .md-blokk.itt, .mf-valaszt.itt, .nz-pont.itt) :is(small, span, b, .i, .esz-abra){
  color: var(--m-lime) !important;
}

/* A lépés ikon-köre a kijelölt lépésen: a tömb ellentéte (különben lime ikon lime körön). */
:root .md-lepesek button.itt .jel{ background: var(--m-fekete) !important; }
:root .md-lepesek button.itt .jel, :root .md-lepesek button.itt .jel .i{ color: var(--m-lime) !important; }
:root[data-theme="light"] .md-lepesek button.itt .jel{ background: var(--m-lime) !important; }
:root[data-theme="light"] .md-lepesek button.itt .jel, :root[data-theme="light"] .md-lepesek button.itt .jel .i{ color: var(--m-fekete-mely) !important; }

/* A „most itt tartasz” doboz: világosban fekete keret, lime-os címke fekete alapon. */
:root[data-theme="light"] .md-most-cimke{ display: inline-block; justify-self: start; background: var(--m-fekete-mely); color: var(--m-lime); padding: 2px 8px; border-radius: 6px; }

/* ── DOBOZOK és KÁRTYÁK: Higgsfield-sarok ── */
:root :is(.sec, .md-lap, .um-snitt, .um-lepes, .mf-blokk, .md-blokk, .md-most, .um-prompt, .mf-prompt > div){
  border-radius: var(--doboz-sarok);
}
:root :is(.um-lepes, .um-prompt, .mf-prompt > div){ border-radius: var(--r-lg); }

/* ══ 2. KÖR (2026-09-29, a user: „ékezet, üres tér, faltól falig, szellősebb”) ══ */

/* ── 1. ÉKEZETEK: az Anton alap-latin készletében nincs ő és ű → a latin-ext
      készlet is saját szerverről. A böngésző a unicode-range alapján csak
      akkor tölti le, ha a lapon van ilyen betű. ── */
@font-face{
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  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;
}

/* ── 3. SZELLŐSEBB: kisebb szövegek nagyobbak, térközök másfélszer ── */
:root{
  --fs-meta: 14.5px; --fs-label: 12.5px;
  --t-0: 12.5px; --t-1: 14px; --t-2: 15.5px; --t-3: 17px;
  --s3: 14px; --s4: 22px; --s5: 30px; --s6: 40px; --s7: 52px;
}
body{ line-height: 1.6; }
:root .md-app{ gap: 20px; }
:root .md-lepesek{ gap: 10px; }
:root .md-lepesek button{ padding: 10px 14px; min-height: 52px; }
:root .md-munka{ padding: clamp(18px, 2.2vw, 32px); }
:root .md-oldal{ gap: 16px; }
:root .md-doboz, :root .md-most{ padding: 18px 20px; gap: 12px; }
:root .md-lap > p.md-mit{ margin-bottom: var(--s5); }

/* ── 2. TELJES KÉP (d): nem a képernyő magasságához igazodik, hanem a tartalomhoz;
      „A teljes film” idővonal FELÜLRE, a lépések alá, teljes szélességben. ── */
:root .md-app[data-nezet="d"]{
  height: auto !important; min-height: 0;
  grid-template-rows: auto auto auto;
  grid-template-areas: "fej fej" "ido ido" "munka oldal";
}
:root .md-app[data-nezet="d"] :is(.md-munka, .md-oldal){ overflow: visible; }
:root .md-app[data-nezet="d"] .md-oldal{ position: sticky; top: calc(var(--fent, var(--hej-magas, 52px)) + 16px); align-self: start; }
/* 🔴 2026-10-07 (a user: „legörgetésnél megáll félúton”, majd „a jobb menü így gördülőben
      még rosszabb. Vedd kisebbre vagy húzd össze, ha nem fér el”): saját görgetés NINCS.
      Az `arculat-a.js` méri: ha nem fér el, `md-szuk` (összehúzva); ha úgy sem, a `top`
      negatív lesz, így a hasáb az oldallal gördül, és az ALJÁNÁL áll meg. */
:root .md-app[data-nezet="d"] .md-oldal.md-szuk{ gap: 10px; }
:root .md-app[data-nezet="d"] .md-oldal.md-szuk :is(.md-doboz, .md-most){ padding: 12px 14px; gap: 6px; }
:root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-most h3{ font-size: var(--b-xl, 1.125rem); line-height: 1.2; }
:root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-most p{ line-height: 1.4; }
:root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-szamlalo{ gap: 2px 10px; }
:root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-szamlalo i{ margin-bottom: 2px; }
:root .md-app[data-nezet="d"] .md-oldal.md-szuk .mf-mikell summary{ padding: 8px 14px; }
:root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-claude-link{ display: none; }
/* az idővonal laposabb, kevesebb légüres rész a kockákban */
:root .md-ido{ padding: 16px 20px 18px; }
:root .md-blokk{ height: 48px; padding: 3px 4px 10px; border-radius: var(--r); }
:root .md-savok{ gap: 8px 12px; }
@media (max-width: 1023px){
  :root .md-app[data-nezet="d"]{ grid-template-areas: "fej" "ido" "munka" "oldal"; }
  :root .md-app[data-nezet="d"] .md-oldal{ position: static; }
}

/* ══ SNITT-LAP: 3 ELRENDEZÉS-MINTA (2026-09-29) ═════════════════════════
   A user: „ez így szar” (a teljes hosszú prompt + nagy margó). Három
   formájában eltérő elrendezés, a lap sarkában lévő kapcsolóval váltva
   (`html[data-snitt-minta="1|2|3"]`, az `arculat-a.js` állítja).
   Mindháromban közös: normál betűs snitt-cím, faltól falig érő idővonal. */

/* közös: a snitt címe nem csupa nagybetűs Anton, hanem félkövér Inter */
:root .um-snitt-fej h3{
  font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: -0.01em !important; font-size: var(--b-2xl, 1.375rem) !important;
}
/* közös: „A teljes film” faltól falig (kilóg a lap belső margójába), keret nélkül */

:root .md-blokk{ height: 52px; }

/* a kapcsoló a lap bal alsó sarkában (csak ahol snitt van) */
.am-minta{ position: fixed; right: calc(var(--jsav-w, 56px) + 16px); bottom: 80px; z-index: 60; display: flex; gap: 6px; align-items: center;
  padding: 6px; border-radius: 14px; background: var(--m-fekete); box-shadow: 0 8px 24px rgba(var(--m-fekete-tiszta-rgb),.35); font: 600 14px 'Inter', sans-serif; color: var(--m-szurke-halk); }
.am-minta span{ padding: 0 8px; }
.am-minta button{ min-width: 44px; min-height: 44px; border-radius: var(--r); border: 0; background: var(--m-szurke-hover); color: var(--m-feher-tort); font: 700 15px 'Inter', sans-serif; cursor: pointer; }
.am-minta button[aria-pressed="true"]{ background: var(--m-lime); color: var(--m-fekete); }
@media (max-width: 1023px){ .am-minta{ right: 12px; bottom: 80px; } }

/* a „Teljes prompt” lenyitó (1 és 2) */
.am-teljes{ display: none; align-self: flex-start; margin-top: -4px; min-height: 44px; padding: 0 4px; border: 0; background: none;
  font: 700 14px 'Inter', sans-serif; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.am-fulek{ display: none; }

/* ── 1 · EGYMÁS ALATT: teljes szélesség, 6 sornyi prompt, gombok egy sorban ── */
html[data-snitt-minta="1"] .md-app .um-ket-lepes{ grid-template-columns: minmax(0, 1fr) !important; gap: 18px; align-items: start; }
html[data-snitt-minta="1"] .md-app .um-nyil{ display: none; }
html[data-snitt-minta="1"] .md-app .um-lepes{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 12px; padding: 20px 22px; }
html[data-snitt-minta="1"] .md-app .um-lepes > :is(.um-lepes-fej, .um-prompt, .um-beall, .ft-ref-hint, .um-miert, .um-halk, .ft-lipsync, .am-teljes){ flex: 1 1 100%; }
html[data-snitt-minta="1"] .md-app .um-lepes > .um-lepes-lab{ display: contents; }
html[data-snitt-minta="1"] .md-app .md-lap.um-snitt .um-prompt:not(.am-nyitva){ max-height: 9.9em; overflow: hidden; }
html[data-snitt-minta="1"] .md-app .am-teljes.kell{ display: inline-block; flex: 0 0 auto; }
/* a fő gomb külön sorban, alatta a kisebbek együtt (különben a „Kép feltöltése” egyedül marad) */
html[data-snitt-minta="1"] .md-app .um-lepes > .um-nyit,
html[data-snitt-minta="3"] .md-app .um-lepes > .um-nyit{ flex: 0 0 auto; max-width: 100%; margin-right: 100%; }

/* ── 2 · KÉT OSZLOP, EGYFORMA: a hosszú prompt elhalványul, a gombok alul egy vonalban ── */
html[data-snitt-minta="2"] .md-app .um-ket-lepes{ align-items: stretch; }
html[data-snitt-minta="2"] .md-app .um-lepes{ padding: 20px 22px; gap: 12px; }
html[data-snitt-minta="2"] .md-app .md-lap.um-snitt .um-prompt:not(.am-nyitva){ max-height: 14em; overflow: hidden;
  -webkit-mask-image: linear-gradient(var(--m-fekete-tiszta) 70%, transparent); mask-image: linear-gradient(var(--m-fekete-tiszta) 70%, transparent); }
/* a „Kép feltöltése” teljes szélességű, szaggatott „ide húzhatod” sáv (így nem marad egyedül egy sorban) */
html[data-snitt-minta="2"] .md-app .um-lepes > .um-feltolt{ align-self: stretch; justify-content: center; min-height: 52px; }
html[data-snitt-minta="2"] .md-app .am-teljes.kell{ display: inline-block; }

/* ── 3 · FÜLEK: egyszerre egy lépés, teljes szélességben ── */
html[data-snitt-minta="3"] .md-app .um-ket-lepes{ grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
html[data-snitt-minta="3"] .md-app .um-nyil{ display: none; }
html[data-snitt-minta="3"] .md-app .am-fulek{ display: flex; gap: 6px; margin-bottom: 14px; }
html[data-snitt-minta="3"] .md-app .am-fulek button{ min-height: 48px; padding: 0 20px; border-radius: var(--r-lg); border: 1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text); font: 700 15px 'Inter', sans-serif; cursor: pointer; }
html[data-snitt-minta="3"] .md-app .am-fulek button[aria-selected="true"]{ background: var(--m-fekete); color: var(--m-lime); border-color: var(--m-fekete); }
:root[data-theme="dark"][data-snitt-minta="3"] .md-app .am-fulek button[aria-selected="true"]{ background: var(--m-lime); color: var(--m-fekete); border-color: var(--m-lime); }
html[data-snitt-minta="3"] .md-app .um-lepes.am-rejt{ display: none; }
html[data-snitt-minta="3"] .md-app .um-lepes{ padding: 22px 24px; gap: 14px; }
html[data-snitt-minta="3"] .md-app .md-lap.um-snitt .um-prompt{ max-height: none; overflow: visible; font-size: var(--b-m, .875rem); line-height: 1.7; }
html[data-snitt-minta="3"] .md-app .um-lepes{ flex-direction: row; flex-wrap: wrap; align-items: center; }
html[data-snitt-minta="3"] .md-app .um-lepes > :is(.um-lepes-fej, .um-prompt, .um-beall, .ft-ref-hint, .um-miert, .um-halk, .ft-lipsync){ flex: 1 1 100%; }
html[data-snitt-minta="3"] .md-app .um-lepes > .um-lepes-lab{ display: contents; }

/* ══ 4. KÖR (2026-09-29, a user a 3-as mintát választotta, és 4 hibát jelzett) ══ */
/* a kisebb címek normál félkövér betűvel; a címben lévő szürke kiegészítő szöveg sosem Anton */
:root :is(h2, h3, h4) :is(span, small, em){ font-family: 'Inter', system-ui, sans-serif !important; text-transform: none !important;
  letter-spacing: 0 !important; font-weight: 600 !important; }
:root :is(h2, h3, h4):not(.md-lap > h2){ font-family: 'Inter', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: -0.01em !important; font-weight: 700 !important; }
/* a Hollywood Box dobozcímei (10-04): a `--font-fo` itt Anton, ami kicsiben, kisbetűvel, műfélkövérrel olvashatatlan */
:root .hb-doboz-fej b{ font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; }
/* a snitt-fejléc: a cím széles helyet kap, a kártya teteje levegőt */
:root .md-lap.um-snitt, :root .um-snitt{ padding: 24px 26px; }
:root .um-snitt-fej{ gap: 10px 16px; align-items: center; }
:root .um-snitt-fej h3{ flex: 1 1 22rem !important; min-width: 0; line-height: 1.3; }
/* „A teljes film”: rendes, lekerekített doboz, kompakt */
:root .md-ido{ border: 1px solid var(--border-strong); border-radius: var(--doboz-sarok) !important; padding: 14px 18px 16px !important; background: var(--bg-card); }
:root .md-blokk{ height: 46px; }
/* alul kevesebb üres tér */
:root .mf-lap{ padding-bottom: 24px !important; }
:root .app-jogi{ margin-top: 24px !important; }
:root :is(.nz-lapoz, .md-lab){ margin-top: var(--s4) !important; padding-top: var(--s3) !important; }
/* a plán-ikon és felirata egyforma széles helyet kap → a snittcímek egy vonalban kezdődnek */
:root .um-snitt-fej .um-plan small{ display: block; line-height: 1.2; }
/* A SNITT-FEJLÉC RÁCSBAN: minden snittnél ugyanott a sorszám, a plán, a cím és jobbra az idő + haladás.
   (Laza sortöréssel hol a cím, hol az idő csúszott új sorba, és a címek nem egy vonalban kezdődtek.) */
:root .um-snitt-fej{ display: grid !important; grid-template-columns: 2.25rem 6rem minmax(0, 1fr) auto;
  grid-template-areas: "szam plan cim cim" "szam plan mp halad"; align-items: center; column-gap: 16px; row-gap: 2px; }
:root .um-snitt-fej > .um-szam{ grid-area: szam; justify-self: center; }
:root .um-snitt-fej > .um-plan{ grid-area: plan; justify-self: center; text-align: center; }
:root .um-snitt-fej > h3{ grid-area: cim; flex: none !important; align-self: end; }
:root .um-snitt-fej > .um-cimke:not(.um-halad){ grid-area: mp; align-self: start; justify-self: start; white-space: nowrap; }
:root .um-snitt-fej > .um-halad{ grid-area: halad; align-self: start; white-space: nowrap; }
@media (max-width: 599px){ :root .um-snitt-fej{ grid-template-columns: 2.25rem 4.5rem minmax(0, 1fr) auto; column-gap: 10px; } }

/* ══ 5. KÖR: a rendszeres átnézés hibái (mérő: árva elem, kontraszt, érintési méret) ══ */
/* „A teljes film” sávnevei: a színes felirat fehéren olvashatatlan volt (2,0–3,5) → a szöveg a lap színe, csak az ikon színes */
:root .md-savnev{ color: var(--text) !important; }
/* a legördülők legalább 44 px (érinthető) */
:root .md-app select{ min-height: 44px; }
/* „Milyen hosszú lett…” sor: a gomb ne maradjon egyedül → a szöveg kitölti a sort, a gomb mellette */
:root .ft-igazit > .ft-igazit-mezo{ flex: 1 1 100%; }
:root .ft-igazit > span{ flex: 1 1 10rem; }
:root .ft-igazit > .btn{ flex: 0 0 auto; }
/* a mentési sáv „Forrás” sora szándékosan saját sort kap */
:root .mf-spec > .mf-ell{ flex: 1 1 100%; margin: 0; }
/* telefonon a kis adatsávok (beállítás, mentési adatok) két oszlopos rácsban; páratlan számnál az utolsó teljes széles */
@media (max-width: 599px){
  /* 🔴 2026-09-30: `:not([hidden])` nélkül a `display: grid !important` a REJTETT adatlapokat is
     megjelenítette: telefonon az Ötlet lapon mind a 9 platform adatlapja egyszerre látszott. */
  :root :is(.mf-beall, .mf-spec):not([hidden]){ display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
  :root :is(.mf-beall, .mf-spec) > :last-child:nth-child(odd){ grid-column: 1 / -1; }
  :root .mf-spec > .mf-ell{ grid-column: 1 / -1; }
}
/* telefonon: ne maradjon egyedül elem a sorokban (mérve 375 px, Teljes kép nézet) */
@media (max-width: 599px){
  :root .mf-meglista li > a{ flex: 1 1 100%; }
  :root .mf-sor:has(> :nth-child(3):last-child){ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .mf-fogomb > *{ flex: 1 1 100%; justify-content: center; }
  :root .md-ido-fej .md-jelmagy{ flex: 1 1 100%; margin-left: 0; }
}
:root .um-miert{ overflow-wrap: anywhere; min-width: 0; }
/* a kis adatsávok 600 px fölött: az elemek kitöltik a sorukat */
@media (min-width: 600px){
  /* tördelődhet, de minden elem kitölti a sora maradékát → a hosszú érték saját sort kap, a rövid nem marad árván */
  :root .mf-beall > *{ flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
}
/* telefonon a snitt-fejléc ideje törhet (különben kilóg) */
@media (max-width: 599px){ :root .um-snitt-fej > .um-cimke{ white-space: normal !important; } }

/* ══ 6. KÖR: A TÖBBI LAP (Műhely-eszközök, Fiók, Superadmin), 2026-09-30 ══
   Ugyanazzal a mérővel: kontraszt, árva elem, tört rácssor, kilógás, 44 px,
   5 szélesség × világos/sötét. 10-24 óta a Hollywood Box is. */

/* ── Szakaszfejléc a kártyán belül: a fekete sávra szabott fehér eszközök
      (kereső, „mind ki”, darabszám) világosban a lap színeit kapják ── */
:root[data-theme="light"] .sec > .sec-label :is(.sec-mini, .sec-keres){
  background: var(--bg-sunken); color: var(--text); border-color: var(--border-strong);
}
:root[data-theme="light"] .sec > .sec-label .sec-mini:hover{ background: var(--m-fekete-mely); color: var(--m-lime); border-color: var(--m-fekete-mely); }
:root[data-theme="light"] .sec > .sec-label .sec-keres::placeholder{ color: var(--text-dim); }
:root[data-theme="light"] .sec > .sec-label :is(.sec-count, .sec-osszegzes){ color: var(--text-dim); }

/* ── A kimeneti doboz (kész prompt): világosban a címke fekete, a felső csík fekete ── */
:root[data-theme="light"] .out-head b{ color: var(--text) !important; }
:root[data-theme="light"] .out::before{ background: var(--m-fekete-mely); }

/* ── Magenta: szövegként világosban mélyebb árnyalat (fehéren olvasható),
      gombon mélyebb alap, hogy a fehér felirat olvasható legyen. A sávok
      (logó „ai”, felső Hollywood Box gomb) a <main>-en kívül vannak, azok maradnak. ── */
:root[data-theme="light"] main{ --accent2: var(--m-magenta-gomb); }
:root main .btn--magenta{ background: var(--m-magenta-mely); border-color: var(--m-magenta-mely); }

/* ── Kész jelvény: lime tömb fekete felirattal mindkét módban ── */
:root .badge--kesz{ background: var(--m-lime) !important; border-color: var(--m-lime) !important; color: var(--m-fekete) !important; }

/* ── Kis gombok és választók legalább 44 px (érinthető) ── */
:root :is(.mh-mod-gomb, .auk-form select, .fiok-sor input, .mh-plafon input, .mh-kod, .mh-link, .wh-al-elem){ height: auto; min-height: 44px; }
/* ── „A teljes film” idővonal (a user, 09-30: „egymáson van minden”):
      a sávnév 78 px-es oszlopa kicsi volt („NARRÁCIÓ” belelógott a sávba),
      a kockák közt 2 px, a sorok közt 4 px volt a rés. ── */
:root .md-savok{ grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 16px; row-gap: 12px; }
:root .md-savnev{ text-transform: none; letter-spacing: 0; font-size: var(--b-m, .875rem); font-weight: 600; gap: 8px; white-space: nowrap; }
:root .md-savnev .i{ width: 16px; height: 16px; flex: none; }
:root .md-sor{ gap: 6px; }
:root .md-blokk{ border-radius: 8px; }
:root .md-hsav{ border-radius: 4px; }
@media (max-width: 760px){
  :root .md-savok{ grid-template-columns: 6.5rem auto; column-gap: 10px; }
  :root .md-sor{ width: calc(var(--db) * 54px); }
}
/* ── Snitt-kártya (a user, 09-30: „a cím fel van ragasztva, minden oldalon”):
      a nézetek `.md-lap + .md-lap { padding-top: 0 }` szabálya (0,4,0) elvette
      a kártya felső térközét → a pontosabb szabály visszaadja. A sorszám a rácsban
      keskeny csíkká szűkült → fix méretű, a kijelölés színeivel. ── */
:root .md-app[data-nezet] .md-lap.um-snitt{ padding-top: 24px; }
:root .um-snitt-fej > .um-szam{ width: 2.25rem; height: 2.25rem; flex: none; align-self: center; border-radius: var(--r);
  background: var(--m-fekete); color: var(--m-lime); font-size: var(--b-l, 1rem); }
:root[data-theme="dark"] .um-snitt-fej > .um-szam{ background: var(--m-lime); color: var(--m-fekete); }
/* ── A logó a bal sávban (a user, 09-30: „a logó és a szöveg el van csúszva”): a csapó
      a név + verziószám blokkjának KÖZEPÉHEZ igazodott, így lejjebb ült a feliratnál.
      Most a név sorához igazodik. ── */
:root .wh-fej .sav-brand{ align-items: flex-start; }
:root .wh-fej .sav-brand::before{ margin-top: 0.02em; }
:root .wh-fej .wh-logo-nev{ line-height: 1.05; }
/* telefonon a konnektor-sor: a szöveg teljes szélességben, a „Bontás” gomb alatta (148 px-re szorult) */
@media (max-width: 599px){
  :root .pkap-sor.lk-kapcs{ grid-template-columns: minmax(0, 1fr); }
  :root .pkap-sor.lk-kapcs form{ grid-row: auto; grid-column: auto; }
}
/* a Meta-szabálykönyv táblázata szűk helyen egymás alá tördel (768 px-en 175 px-es oszlop lett) */
@media (max-width: 900px){
  :root .ms-doc .md-tabla :is(table, tbody, tr, td){ display: block; width: auto; }
  :root .ms-doc .md-tabla thead{ display: none; }
  :root .ms-doc .md-tabla tr{ padding: 10px 0; border-bottom: 1px solid var(--border); }
}

/* ── Tördelő sorok: az utolsó elem kitölti a sora maradékát, így nem marad
      egyedül, félszélesen (szövegfelhő-jellegű szűrőcímkéknél nem kell) ── */
:root :is(.auk-muveletek, .adm-szuro, .mh-mod-gombok, .mh-plafon, .mh-tetel-fo, .lv-valtok, .bgk-gombok, .stp-masol, .ut-szakaszok) > :last-child{ flex-grow: 1; }
:root :is(.mh-mod-gombok, .bgk-gombok, .stp-masol) > :is(button, a){ justify-content: center; text-align: center; }
:root .adm-szuro > .adm-szuro-db{ text-align: right; }
/* a projektsor: a dátum a sor végére, kitölti a helyét */
:root .proj-sor > .proj-meta:last-child{ flex-grow: 1; text-align: right; }

/* ── TELI SOROK a számkártyákban és adatrácsokban: az oszlopszám az elemszámból ──
   Telefonon 2 oszlop (páratlannál az utolsó széles), közepes szélességen
   3-as egység (a maradék elemek szélesebbek), nagy kijelzőn egy sor. */
:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs) > *{ grid-column: span 2 !important; }
:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs):has(> :nth-child(4):last-child) > *{ grid-column: span 3 !important; }
:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs):has(> :nth-child(3n+2):last-child) > :nth-last-child(-n+2){ grid-column: span 3 !important; }
:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs):has(> :nth-child(3n+4):last-child):not(:has(> :nth-child(4):last-child)) > :last-child,
:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs) > :only-child{ grid-column: span 6 !important; }
@media (min-width: 1024px){
  :root .adm-szamok:has(> :nth-child(3):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  :root .adm-szamok:has(> :nth-child(4):last-child){ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  :root .adm-szamok:has(> :nth-child(5):last-child){ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  :root .adm-szamok:has(> :nth-child(6):last-child){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  :root:root:root .adm-szamok.adm-szamok:not(:has(> :nth-child(7))) > *{ grid-column: auto !important; }
}
@media (max-width: 599px){
  :root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs){ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* (a :root ismétlése a fenti :has()-os szabályok pontosságát üti) */
  :root:root:root:root:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs) > *{ grid-column: auto !important; }
  :root:root:root:root:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs) > :last-child:nth-child(odd){ grid-column: 1 / -1 !important; }
}

/* ══ 7. KÖR (2026-09-30): a teljes átnézés telefonos és tabletes hibái ══ */

/* ── A lépés-sáv. A 3. kör szellősebb térköze (10 px rés, 14 px párna) telefonon
      felülírta a lap saját szűk szabályát → az öt gomb nem fért el, a lap 375 px-en
      12 px-szel oldalra csúszott, és a menüben a pipák, az avatar, a bezáró X is
      levágódott. Telefonon vissza a szűk méret. ── */
/* Az ötödik felirat („5. Összevágás”) a leghosszabb: az az oszlop szélesebb, különben
   kilógott a gombjából (mérve: 375 px-en 6, 320-on 17 px). */
@media (max-width: 1100px){ :root .md-lepesek{ grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); } }
@media (max-width: 760px){
  :root .md-lepesek{ gap: 4px; }
  :root .md-lepesek button{ padding: 8px 2px; }
  :root .md-lepesek .nev{ line-height: 1.25; text-align: center; }
}
@media (max-width: 420px){ :root .md-lepesek .nev{ font-size: var(--b-xs, .6875rem); letter-spacing: -0.01em; } }
/* Tableten (mérve 768 px) a felirat és az állapot egymásra csúszott („3. Hang” és
   „most ez”), az ötödik gomb felirata kilógott: az állapot a név ALÁ kerül. */
@media (min-width: 761px) and (max-width: 1100px){
  :root .md-lepesek{ gap: 6px; }
  :root .md-lepesek button{ grid-template-columns: 26px minmax(0, 1fr); padding: 8px 10px; row-gap: 1px; }
  :root .md-lepesek button .jel{ grid-row: span 2; }
  :root .md-lepesek button small{ grid-column: 2; justify-self: start; }
}

/* ── „Prompt másolása és megnyitás” gomb: a gombok sormagassága 1, ezért a több
      sorba törő felirat egymásra és a keretre tapadt. Telefonon a gomb teljes
      szélességű (a `margin-right: 100%` fogás ott a legszűkebb szélességre
      nyomta össze, abból lett a három sor). ── */
:root .um-nyit:is(.btn, .wg){ height: auto; line-height: 1.3; padding-top: 9px; padding-bottom: 9px; overflow-wrap: anywhere; }
@media (max-width: 599px){
  html[data-snitt-minta] .md-app .um-lepes > .um-nyit{ flex: 1 1 100%; margin-right: 0; justify-content: flex-start; }
}

/* ── 8. KÖR (2026-09-30, a teljes újramérés után) ──
   A snitt-fejléc keskeny telefonon (mérve 320 px): a cím 97 px-es oszlopba szorult
   (5 sorba tört), az idő és a haladás egymásra csúszott. 480 px alatt a cím saját,
   teljes sort kap; fölötte a sorszám, a plán és a haladás, alatta az idő. */
@media (max-width: 480px){
  :root .md-lap.um-snitt, :root .um-snitt{ padding: 20px 16px; }
  :root .um-snitt-fej{ grid-template-columns: 2.25rem auto minmax(0, 1fr);
    grid-template-areas: "szam plan halad" "cim cim cim" "mp mp mp"; row-gap: 8px; }
  :root .um-snitt-fej > .um-halad{ justify-self: end; align-self: center; }
  :root .um-snitt-fej > h3{ align-self: start; }
}

/* ══ FEHÉR BETŰ MINDEN GOMBON (2026-10-05, a user: „gombokon mindig fehér betűk legyenek
   az egész projektben”) ══════════════════════════════════════════════════════════════
   Ugyanaz, mint a nyilvános lapokon (`plakat.css`): a lime gomb fekete lett lime kerettel,
   mert fehér a lime-on nem olvasható (1,1:1). Világos témában a fehér hátterű gomb is
   fekete, különben a fehér felirat eltűnne. A törlés gomb sötét magenta (fehérrel 5,9:1),
   a figyelmeztető gomb sötét borostyán. A lap saját <style>-ja ezután jön, ezért
   `!important`. 10-24 óta a Hollywood Box is betölti. */
:root :is(.btn--lime, .btn--primary, .copy-btn, .auth-btn, .ai-btn, .ment-btn, .lept-btn.fo, .tool-btn){
  background: var(--m-fekete) !important; color: var(--m-feher) !important; border: 1px solid rgba(var(--m-feher-rgb),.22) !important; box-shadow: none !important;
}
/* 2026-10-06 (gombrend): a régi fekete gomb kerete = a `.wg--fekete` kerete, hogy a még át nem
   állított gombok is ugyanúgy nézzenek ki; a lime keret a fő lépésé (`.wg--fo`) lett. */
:root[data-theme="light"] :is(.btn--lime, .btn--primary, .copy-btn, .auth-btn, .ai-btn, .ment-btn, .lept-btn.fo, .tool-btn){ border-color: var(--m-fekete) !important; }
:root .btn--danger{ background: var(--m-magenta-gomb) !important; color: var(--m-feher) !important; border-color: var(--m-magenta-gomb) !important; }
:root .btn--danger:hover{ background: var(--m-magenta-sotet) !important; border-color: var(--m-magenta-sotet) !important; }
:root :is(.btn--lime, .btn--primary, .copy-btn, .auth-btn, .ai-btn, .ment-btn, .lept-btn.fo, .tool-btn):hover{
  background: var(--m-szurke-felulet) !important; color: var(--m-feher) !important;
}
/* Az AI-gomb a projektlap fő lépése: lime, mint a `.wg--fo`. */
:root .ai-btn.ai-btn{ background: var(--m-lime) !important; color: var(--m-fekete) !important; border-color: var(--m-lime) !important; }
:root .ai-btn.ai-btn:hover{ background: var(--m-lime-vilagos) !important; color: var(--m-fekete) !important; }
:root :is(.btn--secondary, .btn--ghost, .sec-mini, .mh-mod-gomb, .kedv-btn, .tbl-torol, button.btn:not([class*="btn--"])){ color: var(--m-feher) !important; }
:root :is(.ms-ai-gomb, button.btn:not([class*="btn--"])){ background: var(--m-fekete) !important; color: var(--m-feher) !important; border-color: var(--m-fekete) !important; }
:root .mh-mod-gombok > .mh-mod-gomb.aktiv.aktiv{
  /* Kapcsoló, nem gomb: a kiválasztott állás lime tömb fekete tintával (a user, 10-05:
     „a gombok nem színeződnek át lime-ra, ami aktív”). Fehér a lime-on 1,1:1, fekete 16:1. */
  background: var(--m-lime) !important; color: var(--m-fekete) !important; border: 1px solid var(--m-lime) !important; font-weight: 700;
}
:root[data-theme="light"] :is(.btn--secondary, .btn--ghost, .sec-mini, .mh-mod-gomb:not(.aktiv), .kedv-btn, .tbl-torol){
  background: var(--m-fekete-mely) !important; border-color: var(--m-fekete-mely) !important;
}
:root[data-theme="light"] :is(.btn--secondary, .btn--ghost, .sec-mini, .mh-mod-gomb:not(.aktiv), .kedv-btn, .tbl-torol):hover{
  background: var(--m-sotet-aktiv) !important;
}
:root :is(.proj-torol-btn){ background: var(--m-magenta-gomb) !important; color: var(--m-feher) !important; border-color: var(--m-magenta-gomb) !important; }
:root :is(.proj-torol-btn):hover{ background: var(--m-magenta-sotet) !important; }
:root :is(.btn--warm){ background: var(--m-borostyan-sotet) !important; color: var(--m-feher) !important; border-color: var(--m-borostyan-sotet) !important; }

/* ══ GOMBREND A BELSŐ LAPOKON (2026-10-06, a user által jóváhagyott közös változat) ══
   Négy szint, hogy ránézésre látsszon, mi a fő lépés:
   `.wg--fo` lime tömb sötét tintával, képernyőnként EGY (a következő lépés) ·
   `.wg--fekete` második szint · `.wg--korvonal` harmadik · `.wg--szoveg` aláhúzott, mellékes.
   `.wg--magenta`: „figyelj vagy fizess” (fogyó keret, pótcsomag, lejáró licenc).
   Önálló osztály, nem `.btn`: a fenti „fehér betű minden gombon” szabály így nem írja felül.
   Lime-on fekete 16:1, magentán (#b0107f) fehér 5,9:1. */
.wg{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 1.125rem; box-sizing: border-box;
  font: 700 .9375rem/1.2 'Inter', system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; border-radius: 8px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wg .i{ width: 1.05rem; height: 1.05rem; flex: none; }
.wg:focus-visible{ outline: 2px solid var(--m-lime); outline-offset: 3px; }
.wg--fo, .wg--fo:visited{ background: var(--m-lime); color: var(--m-fekete); border-color: var(--m-lime); }
.wg--fo:hover{ background: var(--m-lime-vilagos); border-color: var(--m-lime-vilagos); color: var(--m-fekete); }
:root[data-theme="light"] .wg--fo{ border-color: var(--m-fekete); }
.wg--fekete, .wg--fekete:visited{ background: var(--m-fekete); color: var(--m-feher); border-color: rgba(var(--m-feher-rgb),.22); }
.wg--fekete:hover{ background: var(--m-szurke-felulet); color: var(--m-feher); }
:root[data-theme="light"] .wg--fekete{ border-color: var(--m-fekete); }
.wg--korvonal, .wg--korvonal:visited{ background: transparent; color: var(--text); border-color: currentColor; }
.wg--korvonal:hover{ background: color-mix(in srgb, var(--text) 8%, transparent); }
.wg--szoveg, .wg--szoveg:visited{
  min-height: 2.75rem; padding: 0 .375rem; background: none; border: 0; color: var(--text);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.wg--szoveg:hover{ color: var(--m-lime); }
:root[data-theme="light"] .wg--szoveg:hover{ color: var(--m-fekete); text-decoration-thickness: 2px; }
.wg--magenta, .wg--magenta:visited{ background: var(--m-magenta-gomb); color: var(--m-feher); border-color: var(--m-magenta-gomb); }
.wg--magenta:hover{ background: var(--m-magenta-sotet); border-color: var(--m-magenta-sotet); color: var(--m-feher); }
.wg[hidden]{ display: none; }
.wg:disabled{ opacity: .45; cursor: not-allowed; pointer-events: none; }
.fiok-sor > .wg{ flex: none; }
.auk-form .wg{ white-space: normal; max-width: 100%; text-align: left; }
.wg-sor{ display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
@media (max-width: 480px){
  .wg-sor > .wg:not(.wg--szoveg){ flex: 1 1 100%; }
  /* Hosszú felirat (pl. „Kész, jöhet az 5. lépés: Összevágás”) telefonon ne lógjon ki: törhet. */
  .wg{ max-width: 100%; white-space: normal; text-align: center; padding-block: .5rem; }
}
@media (prefers-reduced-motion: reduce){ .wg{ transition: none; } }

/* ══ CSAK LIME ÉS MAGENTA GOMB (2026-10-06 23:40, a user: „sehol nem akarok látni csak és
   kizárólag lime és magenta gombokat. Tele van fehér és szürke gombokkal.”) ═════════════
   Felülírja a fenti „fehér betű minden gombon” és a gombrend fekete/szürke szintjeit, a
   Superadminban is. A user választása: a fő lépés TELI lime (fekete tinta, 16:1), minden más
   lime KÖRVONAL lime betűvel (sötét háttéren 15:1), egér alatt teli lime. Magenta (#b0107f,
   fehér 5,9:1): lemondás, törlés, fizetés, figyelmeztetés. Világos témában a lime betű
   olvashatatlan (1,2:1), ott a körvonal lime, a betű fekete. 10-24 óta a Hollywood Box is betölti.
   A lap saját <style>-ja ezután jön: ezért `:root:root` és `!important`. */
:root:root :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo, .mh-mod-gomb.aktiv){
  background: var(--m-lime) !important; color: var(--m-fekete) !important; border: 1px solid var(--m-lime) !important; box-shadow: none !important;
}
:root:root :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo):hover{
  background: var(--m-lime-vilagos) !important; border-color: var(--m-lime-vilagos) !important; color: var(--m-fekete) !important;
}
:root:root :is(.wg--fekete, .wg--korvonal, .copy-btn, .tool-btn, .btn--secondary, .btn--ghost, .sec-mini, .kedv-btn,
  .mh-mod-gomb:not(.aktiv), .lept-btn:not(.fo), button.btn:not([class*="btn--"]), a.btn:not([class*="btn--"])){
  background: transparent !important; color: var(--m-lime) !important; border: 1px solid var(--m-lime) !important; box-shadow: none !important;
}
:root:root :is(.wg--fekete, .wg--korvonal, .copy-btn, .tool-btn, .btn--secondary, .btn--ghost, .sec-mini, .kedv-btn,
  .mh-mod-gomb:not(.aktiv), .lept-btn:not(.fo), button.btn:not([class*="btn--"]), a.btn:not([class*="btn--"])):hover{
  background: var(--m-lime) !important; color: var(--m-fekete) !important;
}
:root:root .wg--szoveg, :root:root .wg--szoveg:visited{ color: var(--m-lime) !important; }
:root:root :is(.wg--magenta, .btn--magenta, .btn--warm){
  background: var(--m-magenta-gomb) !important; color: var(--m-feher) !important; border: 1px solid var(--m-magenta-gomb) !important; box-shadow: none !important;
}
:root:root :is(.wg--magenta, .btn--magenta, .btn--warm):hover{
  background: var(--m-magenta-sotet) !important; border-color: var(--m-magenta-sotet) !important; color: var(--m-feher) !important;
}
:root:root[data-theme="light"] :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo, .mh-mod-gomb.aktiv){ border-color: var(--m-fekete) !important; }
:root:root[data-theme="light"] :is(.wg--fekete, .wg--korvonal, .copy-btn, .tool-btn:not(.aik-torol):not(.mf-torol), .btn--secondary, .btn--ghost, .sec-mini, .kedv-btn,
  .mh-mod-gomb:not(.aktiv), .lept-btn:not(.fo), button.btn:not([class*="btn--"]), a.btn:not([class*="btn--"])){
  color: var(--m-fekete) !important; border: 2px solid var(--m-lime) !important;
}
:root:root[data-theme="light"] .wg--szoveg{ color: var(--m-fekete) !important; text-decoration-color: var(--m-lime) !important; }
/* A héj két eleme (2026-10-06): a Nézet választója lime körvonal, a Kijelentkezés a logó magentája
   a piros helyett. Itt, nem a `hej.css`-ben, mert az a Hollywood Boxon is él. */
:root:root .bar-uj.bar-nezet, :root:root .bar-uj.bar-nezet:visited{
  background: transparent !important; color: var(--m-lime) !important; border: 1px solid var(--m-lime) !important;
}
:root:root .bar-uj.bar-nezet:hover{ background: var(--m-lime) !important; color: var(--m-fekete) !important; }
:root:root .bar-uj.bar-nezet:hover b{ color: var(--m-fekete) !important; }
:root:root .wh-kilep{ color: var(--m-magenta) !important; }
:root:root .wh-kilep:hover{ background: rgba(var(--m-magenta-rgb),.14) !important; color: var(--m-magenta-vilagos) !important; }
:root:root .wh-sor--veszely, :root:root .wh-sor--veszely .i{ color: var(--m-magenta) !important; }
:root:root .wh-sor--veszely:hover{ background: rgba(var(--m-magenta-rgb),.14) !important; }
:root:root .wh-sor--veszely:hover, :root:root .wh-sor--veszely:hover .i{ color: var(--m-magenta-vilagos) !important; }
/* A Superadmin szűrőcímkéi (Mind, Fizetős, Új…): az aktív teli lime, a többi keret nélküli,
   halvány alapú címke (2026-10-09, a user: a keretes gomb csak mellékgomb lehet). */
:root:root .adm-szuro-elem{ background: rgba(var(--m-feher-rgb),.08) !important; color: var(--m-feher) !important; border: 1px solid transparent !important; height: auto !important; min-height: var(--gomb-mag); white-space: nowrap; }
:root:root .adm-szuro-elem:hover{ background: rgba(var(--m-feher-rgb),.16) !important; color: var(--m-feher) !important; }
:root:root .adm-szuro-elem.aktiv{ background: var(--m-lime) !important; color: var(--m-fekete) !important; border-color: var(--m-lime) !important; }
:root:root[data-theme="light"] .adm-szuro-elem:not(.aktiv){ background: rgba(var(--m-fekete-rgb),.07) !important; color: var(--m-fekete) !important; }
:root:root[data-theme="light"] .adm-szuro-elem:not(.aktiv):hover{ background: rgba(var(--m-fekete-rgb),.14) !important; }
:root:root[data-theme="light"] .adm-szuro-elem.aktiv{ border-color: var(--m-fekete) !important; }
/* Törlés gomb (2026-10-09): magenta keret, magenta betű. Veszélyt jelez, de nem tolakodik.
   Sötét alapon a világos magenta (#fb23c2, 5,6:1), világoson a sötét (#b0107f, 5,9:1). */
.wg--torol, .wg--torol:visited{ background: transparent; color: var(--m-magenta); border-color: var(--m-magenta); }
:root:root :is(.wg--torol, .wg--torol:visited, .btn--danger, .tbl-torol, .proj-torol-btn, .tool-btn.aik-torol, .tool-btn.mf-torol){ background: transparent !important; color: var(--m-magenta) !important; border: 1px solid var(--m-magenta) !important; box-shadow: none !important; }
:root:root :is(.wg--torol, .btn--danger, .tbl-torol, .proj-torol-btn, .tool-btn.aik-torol, .tool-btn.mf-torol):hover{ background: var(--m-magenta-gomb) !important; border-color: var(--m-magenta-gomb) !important; color: var(--m-feher) !important; }
:root:root[data-theme="light"] :is(.wg--torol, .btn--danger, .tbl-torol, .proj-torol-btn, .tool-btn.aik-torol, .tool-btn.mf-torol):not(:hover){ color: var(--m-magenta-gomb) !important; border: 2px solid var(--m-magenta-gomb) !important; }
/* A Levelek lap szegmentált váltói (nyelv, szélesség, alak): lime keret, a kiválasztott teli lime. */
:root:root .lv-valto{ border-color: var(--m-lime) !important; }
:root:root .lv-valto a{ background: transparent !important; color: var(--m-lime) !important; }
:root:root .lv-valto a + a{ border-left-color: var(--m-lime) !important; }
:root:root .lv-valto a:hover, :root:root .lv-valto a.aktiv{ background: var(--m-lime) !important; color: var(--m-fekete) !important; }
:root:root[data-theme="light"] .lv-valto{ border-width: 2px !important; }
:root:root[data-theme="light"] .lv-valto a:not(.aktiv):not(:hover){ color: var(--m-fekete) !important; }

/* 2026-11-09: egységes méretek tokenből (eddig az egyseges.css 10. része írta felül) */
.lv-valto a{ font-size: var(--gomb-betu-meret) !important; }

/* ── kulso-fejlec.css ── */
/* GÉPPEL KÉSZÜLT a `_eszkozok/kulso-fejlec-css.py`-val, kézzel NE írd át.
   A külső fejléc szabályai (landing.css, arculat.css, uj-arculat.css, plakat.css, profil.css) a belső lapokra. */
/* ── landing.css ── */
.lp-fej{--lp-bg:        var(--m-fekete);   
  --lp-bg-2:      var(--m-sotet-sav);
  --lp-bg-3:      var(--m-sotet-doboz);
  --lp-kartya:    #10151f;
  --lp-kartya-2:  #161d2a;
  --lp-keret:     rgba(150,180,220,0.13);
  --lp-keret-2:   rgba(150,180,220,0.26);

  --lp-szoveg:    #f2f6fb;
  --lp-halvany:   #9db0c6;
  --lp-dim:       #6c7f96;

  --lime:         var(--m-lime);
  --lime-halk:    rgba(var(--m-lime-rgb),0.13);
  --lime-el:      rgba(var(--m-lime-rgb),0.42);
  --lime-sotet:   #06111d;
  --magenta:      var(--m-magenta);
  --magenta-halk: rgba(var(--m-magenta-rgb),0.13);
  --cyan:         #35e0ff;

  --lp-r:    4px;
  --lp-r-lg: 8px;
  --lp-r-xl: 14px;

  --lp-margo: clamp(18px, 5vw, 64px);
  
  --lp-max:   100%;
  --lp-fej:   64px;}
.lp-fej{position: sticky; top: 0; z-index: 50;
  background: var(--m-fekete-tiszta); /* 2026-10-07, a user: „a menü legyen teljesen fekete” */
  border-bottom: 1px solid var(--lp-keret);}
.lp-sav{height: var(--lp-fej); max-width: var(--lp-max); margin: 0 auto;
  padding: 0 var(--lp-margo); display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);}
.lp-logo{font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: var(--t-5);
  letter-spacing: -0.03em; color: var(--lime); text-decoration: none; white-space: nowrap;
  text-shadow: 0 0 26px rgba(var(--m-lime-rgb),0.35);}
.lp-logo b{color: var(--magenta); font-weight: 800; text-shadow: 0 0 26px rgba(var(--m-magenta-rgb),0.4);}
.lp-logo-kicsi{font-size: var(--t-4);}
.lp-nav{display: flex; gap: clamp(10px, 2vw, 26px); margin-right: auto;}
.lp-nav a{color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500;
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;}
.lp-nav a:hover{color: var(--lp-szoveg); border-bottom-color: var(--lime);}
.lp-fej-jobb{display: flex; align-items: center; gap: 10px;}
/* 2026-10-24, a user: „ezt tedd fel a nyelvválasztó mellé, így ez a fekete sáv meg tud szűnni.” Belépve az Élő, az AI-keret és a Platform. */
.lp-fej-eszk{display: flex; align-items: center; gap: 8px; flex: 0 0 auto;}
.lp-zaszlok{display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);}
.lp-zaszlok > a, .lp-zaszlok > span{display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 34px; border-radius: var(--lp-r);}
.lp-zaszlok > a{opacity: .5; transition: opacity .15s ease, background .15s ease;}
.lp-zaszlok > a:hover, .lp-zaszlok > a:focus-visible{opacity: 1; background: rgba(var(--m-feher-rgb),0.06);}
.lp-zaszlok > a:focus-visible{outline: 2px solid var(--cyan); outline-offset: 1px;}
.lp-zaszlok > span[aria-current]{background: var(--lime-halk); box-shadow: inset 0 0 0 1px var(--lime-el);}
.lp-zaszlok .zaszlo{width: 24px; height: 16px; border-radius: 2px; display: block;}
.lp-mob-zaszlok{align-self: flex-start; margin: 2px 4px 8px;}
.lp-mob-lap .lp-mob-zaszlok > a{padding: 0; min-height: 44px; min-width: 48px;}
.lp-mob-lap .lp-mob-zaszlok > span{min-height: 44px; min-width: 48px;}
@media (max-width: 860px){
.lp-fej-zaszlok{display: none;}
}
.lp-link{color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500; padding: 6px 4px;}
.lp-link:hover{color: var(--lp-szoveg);}
@media (max-width: 860px){
.lp-nav, .lp-link{display: none;}
.lp-sav{justify-content: space-between;}
.lp-logo{margin-right: auto;}
}
.lp-btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2); font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: 11px 20px; border-radius: var(--lp-r-lg);
  transition: transform .14s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease;}
.lp-btn{background: var(--lime); color: var(--lime-sotet); border: 1px solid var(--lime);
  box-shadow: 0 0 0 rgba(var(--m-lime-rgb),0), 0 8px 26px -12px rgba(var(--m-lime-rgb),0.7);}
.lp-btn:hover{background: var(--m-lime-vilagos); transform: translateY(-2px);
  box-shadow: 0 0 34px -6px rgba(var(--m-lime-rgb),0.55), 0 10px 30px -12px rgba(var(--m-lime-rgb),0.8);}
.lp-btn-nagy{font-size: var(--t-3); padding: 15px 28px;}
@media (prefers-reduced-motion: reduce){
.lp-btn:hover{transform: none;}
}
.lp-hero .lp-alcim + :is(.lp-btn, .lp-btn2, .vl-kesz, .lt-gombok, form){margin-top: 26px;}
.lp-auth-doboz .lp-btn{width: 100%; margin-top: 6px;}
.lp-link-urlap{margin-bottom: 20px;}
.lp-mob{display: none; position: relative;}
.lp-mob > summary{list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r);}
.lp-mob > summary::-webkit-details-marker{display: none;}
.lp-mob > summary span{display: block; width: 17px; height: 2px; background: var(--lp-szoveg);
  transition: transform .18s ease, opacity .18s ease;}
.lp-mob[open] > summary span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.lp-mob[open] > summary span:nth-child(2){opacity: 0;}
.lp-mob[open] > summary span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
@media (prefers-reduced-motion: reduce){
.lp-mob > summary span{transition: none;}
}
.lp-mob-lap{position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 232px; display: flex; flex-direction: column;
  background: var(--m-fekete-tiszta); border: 1px solid var(--lp-keret-2);
  border-radius: var(--lp-r-lg); padding: 8px;
  box-shadow: 0 26px 60px -26px rgba(var(--m-fekete-tiszta-rgb),0.95);}
.lp-mob-lap a{color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500;
  padding: 11px 13px; border-radius: var(--lp-r);}
.lp-mob-lap a:hover, .lp-mob-lap a[aria-current]{background: var(--lime-halk); color: var(--lime);}
@media (max-width: 860px){
.lp-mob{display: block;}
.lp-nav, .lp-link{display: none;}
}
@media (max-width: 460px){
.lp-fej-jobb .lp-btn{padding: 10px 13px; font-size: var(--t-2);}
}
.ar-kartya .lp-btn{width: 100%;}
@media (pointer: coarse){
.lp-btn{min-height: 44px;}
.lp-mob-lap a{min-height: 44px; display: flex; align-items: center;}
}
.vl-doboz .lp-btn{width: 100%;}
@media (max-width: 420px){
.lp-sav{gap: 8px;}
.lp-fej-jobb{gap: 6px;}
.lp-logo{font-size: 24px;}
.lp-fej .lp-btn{padding: 11px 13px;}
}
@media (max-width: 345px){
.lp-sav{gap: 6px;}
.lp-fej-jobb{gap: 4px;}
.lp-logo{font-size: 19px;}
.lp-fej .lp-btn{padding: 11px 8px;}
}
.vs-doboz .lp-btn{width: 100%;}
.vs-rejtett{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.vs-csomag .lp-btn{width: 100%; white-space: normal; text-align: center;}
.ar-doboz .lp-btn{width: 100%;}
.lp-btn.lt-magenta{background: var(--magenta); border-color: var(--magenta); color: var(--lime-sotet);
  box-shadow: 0 8px 26px -12px rgba(var(--m-magenta-rgb),0.7);}
.lp-btn.lt-magenta:hover{background: var(--m-magenta-vilagos);
  box-shadow: 0 0 34px -6px rgba(var(--m-magenta-rgb),0.55), 0 10px 30px -12px rgba(var(--m-magenta-rgb),0.8);}
.lp-btn.lt-magenta:focus-visible{outline: 2px solid var(--cyan); outline-offset: 2px;}
@media (max-width: 520px){
.lt-gombok .lp-btn{width: 100%; white-space: normal;}
}
/* ── arculat.css ── */
.lp-fej{--t-0: 11.5px;   
  --t-1: 13px;     
  --t-2: 15px;     
  --t-3: 16.5px;   
  --t-4: 19px;     
  --t-5: 24px;     
  --t-6: 32px;}
.lp-fej{--lp-r:    10px;
  --lp-r-lg: 14px;
  --lp-r-xl: 18px;
  
  --r:       4px;
  --r-lg:    8px;
  --r-xl:    10px;

  
  --lp-dim: #aebfd2;

  
  --magenta-ink: var(--m-fekete);}
.lp-fej{--fs-body: 16px;          
  --fs-lapcim: clamp(26px, 1.2rem + 0.9vw, 34px);   
  --fs-h2: clamp(19px, 1rem + 0.3vw, 22px);         
  --fs-h3: 17.5px;}
.lp-fej{--font-fo:  'Plus Jakarta Sans', 'Bricolage Grotesque', system-ui, sans-serif;
  --font-szo: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;}
.lp-btn, .lp-link{font-family: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;}
.lp-fej{--text-muted: var(--m-szurke-sotet);   
  --text-dim:   #46536a;}
.lp-logo, .lp-logo b{font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;}
.lp-logo{letter-spacing: 0.005em;}
.lp-logo{display: inline-flex; align-items: center;}
.lp-logo::before{content: ''; flex-shrink: 0;
  width: 1.05em; height: 1.05em; margin-right: 0.3em;
  background: url('/assets/logo-jel.svg') center / contain no-repeat;}
/* ── uj-arculat.css ── */
.lp-fej{--lp-r-lg: 4px;
  --lp-r-xl: 4px;
  --u-cim: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --u-mono: 'JetBrains Mono', ui-monospace, monospace;}
.lp-btn{min-height: 48px; padding: 0 22px; border-radius: 4px; font-weight: 700;}
.lp-btn{box-shadow: none;}
.lp-btn:hover{box-shadow: none;}
.lp-btn-nagy{min-height: 52px; padding: 0 26px; font-size: 1rem;}
.lp-btn:focus-visible{outline: 2px solid var(--lime); outline-offset: 3px;}
/* ── plakat.css ── */
.lp-btn{border-radius: 12px;}
.lp-fej{--lp-bg: var(--m-fekete); --lp-bg-2: var(--m-sotet-sav); --lp-kartya: var(--m-sotet-doboz); --lp-kartya-2: var(--m-szurke-felulet);
  --lp-keret: #1f242d; --lp-keret-2: var(--m-sotet-vonal); --lp-szoveg: var(--m-feher-tort); --lp-halvany: var(--m-szurke-csendes); --lp-dim: var(--m-szurke-halk);}
.lp-zaro .lp-btn{background: var(--m-fekete); color: var(--m-lime);}
.lp-zaro .lp-link, .lp-zaro .lp-link:hover{color: var(--m-fekete); text-decoration-color: var(--m-fekete);}
.lp-zaro .lp-link:hover{text-decoration: underline;}
.lp-zaro .lp-btn:focus-visible{outline-color: var(--m-fekete);}
.lp-fej{--u-cim: 'Inter', system-ui, sans-serif;}
.lp-nav a:hover{border-bottom-color: var(--m-magenta);}
.lp-btn, .lp-zaro .lp-btn{background: var(--m-fekete); color: var(--m-feher); border: 1px solid var(--m-lime); box-shadow: none;}
.lp-btn:hover, .lp-zaro .lp-btn:hover{background: var(--m-szurke-felulet); color: var(--m-feher);}
.lp-btn.lt-magenta{background: var(--m-magenta); color: var(--m-feher); border-color: var(--m-magenta); font-size: 1.1875rem;}
.lp-btn.lt-magenta:hover{background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete);}
.vs-csomag .lp-btn{background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem;}
.vs-csomag .lp-btn:hover{background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta);}
form[action="/api/fizetes.php"] .lp-btn{background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem;}
form[action="/api/fizetes.php"] .lp-btn:hover{background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta);}
.lp-fej .lp-btn.lp-fej-vasar{background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem;}
.lp-fej .lp-btn.lp-fej-vasar:hover{background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta);}
@media (min-width: 1024px) and (max-width: 1199px){
.lp-fej .lp-btn.lp-fej-vasar{padding-inline: 12px;}
}
.lp-nav a, .lp-fej .lp-link, .lp-mob-lap a{font-size: 1.1875rem; white-space: nowrap;}
@media (max-width: 1151px){
.lp-mob{display: block;}
.lp-nav, .lp-fej .lp-link, .lp-fej-zaszlok{display: none;}
.lp-sav{justify-content: space-between;}
.lp-logo{margin-right: auto;}
}
@media (max-width: 359px){
.lp-sav{gap: 8px;}
.lp-fej-jobb{gap: 6px;}
.lp-fej .lp-btn{padding: 0 12px; font-size: .86rem;}
}
.lp-fej .lp-logo{min-height: 44px;}
@media (min-width: 1152px){
.lp-nav a, .lp-fej .lp-link{display: inline-flex; align-items: center; min-height: 44px;}
.lp-fej-zaszlok > a, .lp-fej-zaszlok > span{height: 44px;}
.lp-nav a, .lp-fej .lp-link, .lp-fej-zaszlok > a, .lp-fej-zaszlok > span{min-width: 44px; justify-content: center;}
}
@media (max-width: 1199px){
.lp-fej--zart .lp-mob{display: block;}
.lp-fej--zart .lp-nav, .lp-fej--zart .lp-link, .lp-fej--zart .lp-fej-zaszlok{display: none;}
.lp-fej--zart .lp-sav{justify-content: space-between;}
.lp-fej--zart .lp-logo{margin-right: auto;}
}
@media (max-width: 479px){
.lp-fej--zart .lp-fej-jobb .lp-btn{white-space: normal; line-height: 1.1; text-align: center; max-width: 8.5rem; min-height: 44px; height: auto; padding: 4px 10px;}
}
/* ── profil.css ── */
.lp-profil{display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 15rem;
  padding: 4px 14px 4px 4px; border: 1px solid var(--m-lime); border-radius: 12px;
  background: var(--m-fekete); color: var(--m-feher); text-decoration: none;}
.lp-profil:hover{background: var(--m-szurke-felulet); color: var(--m-feher);}
.lp-profil:focus-visible{outline: 2px solid var(--m-lime); outline-offset: 3px;}
.lp-szorny{display: block; flex: none; width: 36px; height: 36px;}
.lp-profil-szoveg{display: flex; flex-direction: column; min-width: 0; line-height: 1.15;}
.lp-profil-szoveg small{display: flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; color: var(--m-lime);}
.lp-profil-szoveg small::before{content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--m-lime);}
.lp-profil-szoveg b{max-width: 9rem; overflow: hidden; font-size: .95rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap;}
@media (max-width: 479px){
.lp-profil{gap: 8px; padding-right: 10px;}
.lp-szorny{width: 32px; height: 32px;}
.lp-profil-szoveg b{max-width: 5.5rem;}
}
@media (max-width: 359px){
.lp-profil-szoveg b{max-width: 4.25rem;}
}
.ko-tovabb .lp-btn{width: 100%; white-space: normal; text-align: center;}
.ko-tovabb .lp-btn.lt-magenta:hover{background: var(--m-lime); color: var(--m-fekete); border-color: var(--m-lime);}
@media (max-width: 1279px){
.lp-fej--belepve .lp-mob{display: block;}
.lp-fej--belepve .lp-nav, .lp-fej--belepve .lp-link, .lp-fej--belepve .lp-fej-zaszlok{display: none;}
.lp-fej--belepve .lp-sav{justify-content: space-between;}
.lp-fej--belepve .lp-logo{margin-right: auto;}
}
.lp-fej{ font-family: 'Inter', system-ui, sans-serif; font-size: clamp(15px, 0.95rem + 0.15vw, 17px); line-height: 1.7; color: var(--lp-szoveg); -webkit-font-smoothing: antialiased; }
body:has(> .lp-fej) > .lp-fej{ z-index: 130; }
body:has(> .lp-fej) .site-bar{ top: 65px; }
body:has(> .lp-fej) .oldalsav, body:has(> .lp-fej) .jobbsav{ top: 65px; }
body:has(> .lp-fej) .oldalsav .sav-brand{ display: none; }
body:has(> .lp-fej) .wh-fej{ justify-content: flex-end; }
html[data-sav="zart"] body:has(> .lp-fej) .wh-fej{ justify-content: center; }
/* 2026-10-07, a user: „a logó és az áttekintés között van egy üres sáv … a ki-be csukó gombot meg kellene oldani,
   hogy látszódjon, mi ez.” A logó a felső sávba költözött, a fejben csak a 32 px-es szürke nyíl maradt 71 px magasan.
   A fej most nulla magas, a gomb a sáv jobb szélének vonalán ül, az első menüsor magasságában.
   A gomb kerek és magenta, fehér nyíllal: ez a user saját kérése (09:40), a lime négyzetet elutasította.
   A sáv `overflow: clip`, ezért a gomb `fixed`: így a vonalon túl is látszik. A `hej.css` (stable) érintetlen. */
@media (min-width: 1280px){
body:has(> .lp-fej) .wh-fej{ min-height: 0; padding: 0; border-bottom: 0; }
body:has(> .lp-fej) .wh-csuk{
  position: fixed; top: 85px; left: var(--sav-w); z-index: 125; transform: translateX(-50%);
  width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%;
  background: var(--m-magenta); color: var(--m-feher);
}
body:has(> .lp-fej) .wh-csuk::after{ inset: -8px; }
body:has(> .lp-fej) .wh-csuk:hover{ background: var(--m-magenta); color: var(--m-feher); filter: brightness(1.1); }
}
/* 2026-10-07, a user: „a jobb oldali profil menü szépen kicsúszik. Ilyenre kérem a bal shellt is.”
   A bal sáv csukása és nyitása ugyanazzal a mozgással megy, mint a profilpanel (`hej.css`: 280 ms, cubic-bezier(.4,0,.2,1)).
   A lap törzse, a jogi sor és a csukó gomb vele együtt csúszik, így semmi nem ugrik. A `hej.css` (stable) érintetlen. */
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference){
.oldalsav{ transition: width 280ms cubic-bezier(.4, 0, .2, 1); }
.app-torzs{ transition: padding-left 280ms cubic-bezier(.4, 0, .2, 1); }
body:has(.app-torzs) .app-jogi{ transition: padding-left 280ms cubic-bezier(.4, 0, .2, 1); }
body:has(> .lp-fej) .wh-csuk{ transition: left 280ms cubic-bezier(.4, 0, .2, 1), filter .15s ease; }
}
/* 2026-10-07, a user: „tudják-e használni a felületet? Nem sok-e az információ, nem túl kusza-e?”
   Telefonon eddig három sáv állt egymás alatt (külső fejléc, Műhely-sáv, ikonsor), két menügombbal.
   1023 px alatt egy menügomb marad: a külső fejléc ☰-je nyitja a Műhely menüjét (szkript: `wlai_sav_js()`),
   a nyilvános linkek a menü aljára kerülnek (`.sav-kulso`). A Műhely-sáv csak akkor látszik, ha van benne gomb.
   620 px alatt a téma- és a profilgomb a külső fejléc sorába ül, a „Belépve” lapka helyett a profilgomb áll.
   A Hollywood Box lapjain nincs külső fejléc, ezért ez ott nem hat. A `hej.css` (stable) érintetlen. */
.sav-kulso{display: none;}
@media (max-width: 1023px){
body:has(> .lp-fej) .menu-btn{display: none;}
/* 2026-10-24: az „Élő” gomb (superadmin) is tartsa láthatóan a sávot, mióta a Hollywood Box, a Napi hírek és a Meta gomb a bal menüben él. */
body:has(> .lp-fej) .site-bar:not(:has(.bar-uj, .bar-kereso, .bar-keret, .wl-elo)){display: none;}
body:has(> .lp-fej) .oldalsav{position: fixed; top: 65px; left: 0; right: 0; z-index: 129;
  box-shadow: 0 26px 60px -26px rgba(var(--m-fekete-tiszta-rgb),.95);}
body:has(> .lp-fej) .oldalsav.nyitva{max-height: calc(100dvh - 65px);}
body:has(> .lp-fej) .sav-kulso{display: flex; flex-direction: column; gap: 2px;
  margin: 4px 12px 16px; padding-top: 12px; border-top: 1px solid rgba(var(--m-feher-rgb),.1);}
.sav-kulso > a{display: flex; align-items: center; min-height: 44px; padding: 8px 11px;
  border-radius: 4px; color: var(--m-pala); font-size: .9375rem; font-weight: 500; text-decoration: none;}
.sav-kulso > a:hover, .sav-kulso > a[aria-current]{background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher);}
.sav-kulso .lp-zaszlok{align-self: flex-start; margin: 0 0 6px;}
.sav-kulso .lp-zaszlok > a, .sav-kulso .lp-zaszlok > span{min-width: 48px; min-height: 44px;}
.lp-mob.sav-nyitva > summary span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.lp-mob.sav-nyitva > summary span:nth-child(2){opacity: 0;}
.lp-mob.sav-nyitva > summary span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
}
@media (max-width: 760px){
body:has(> .lp-fej) .site-bar:not(:has(.bar-uj, .bar-kereso, .wl-elo)){display: none;}
}
@media (max-width: 620px){
body:has(> .lp-fej) .lp-fej .lp-profil{display: none;}
body:has(> .lp-fej) .jobbsav{position: fixed; top: 0; right: calc(clamp(18px, 5vw, 64px) + 50px); left: auto;
  z-index: 131; height: 64px; padding: 0; gap: 4px; align-items: center;
  border: 0; background: transparent;}
}
@media (max-width: 400px){
body:has(> .lp-fej) .jobbsav .rb-elo{display: none;}
}
/* 2026-10-24: a fejléc gombjai (Élő, AI-keret, Platform) a fekete Műhely-sáv helyett. 1280–1599 px között a teljes menü mellett
   csak rövid alakjuk fér el. 620 px alatt a téma- és profilgomb mellé ülnek (azok is ide vannak tűzve, lásd fent);
   560 px alatt a Platform a ☰ menüből nyílik, mert a fejlécben már nincs helye. */
.sav-pont--platform{display: none !important;}
@media (min-width: 1280px) and (max-width: 1599px){
.lp-fej-eszk .wl-elo-cimke, .lp-fej-eszk .wl-elo-szo, .lp-fej-eszk .bar-keret--korlatlan span{display: none;}
.lp-fej-eszk .wl-elo{padding: 0 9px;}
.lp-fej:has(.lp-fej-eszk) .lp-nav{gap: 16px;}
}
@media (max-width: 620px){
body:has(> .lp-fej) .lp-fej-eszk{position: fixed; top: 0; height: 64px; z-index: 131; gap: 6px;
  right: calc(clamp(18px, 5vw, 64px) + 50px + 122px + 8px);}
.lp-fej-eszk .wl-elo{padding: 0 7px;}
}
@media (max-width: 559px){
.lp-fej-eszk .tb-aipay{display: none;}
body:has(> .lp-fej) .sav-pont--platform{display: flex !important;}
}
@media (max-width: 400px){
body:has(> .lp-fej) .lp-fej-eszk{right: calc(clamp(18px, 5vw, 64px) + 50px + 78px + 6px);}
}
/* 2026-11-10, a user: „ezek be tudnak kerülni a jobb shellbe?” Az Élő, az AI-keret és a Platform a fejlécből a jobb sávba
   költözött (`wlai_jobbsav()`), a frissítés-jel alá, ikon-alakban: a felirat a buborékban (title) marad.
   Telefonon (620 px alatt) a jobb sáv a fejléc sorában áll, ott egymás mellé kerülnek; 560 px alatt a Platform a ☰ menüből nyílik. */
.rb-fej-gombok{display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0 0; padding: 8px 0 0;
  border-top: 1px solid var(--hej-vonal);}
:root:root:root:root body .jobbsav .rb-fej-gombok :is(.wl-elo, .bar-keret, .tb-aipay){
  position: relative; box-sizing: border-box; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  width: var(--gomb-mag) !important; height: var(--gomb-mag) !important; min-height: 0 !important;
  padding: 0 !important; gap: 3px !important; border-radius: var(--gomb-sarok) !important;}
:root:root:root:root body .jobbsav .rb-fej-gombok :is(.wl-elo-cimke, .wl-elo-szo, .tb-aipay-pont, .tb-aipay-szo, .bar-keret span){display: none !important;}
:root:root:root:root body .jobbsav .rb-fej-gombok .wl-elo b{font-size: .78rem; line-height: 1;}
:root:root:root:root body .jobbsav .rb-fej-gombok .wl-elo-pont{width: .45rem; height: .45rem;}
:root:root:root:root body .jobbsav .rb-fej-gombok .bar-keret .i{width: 16px; height: 16px; align-self: center;}
:root:root:root:root body .jobbsav .rb-fej-gombok .bar-keret b{font-size: .7rem; line-height: 1;}
:root:root:root:root body .jobbsav .rb-fej-gombok .bar-keret--korlatlan{opacity: 1;}
:root:root:root:root body .jobbsav .rb-fej-gombok .tb-aipay > .i{display: block; width: 18px; height: 18px;}
@media (max-width: 620px){
.rb-fej-gombok{flex-direction: row; margin: 0; padding: 0; border-top: 0;}
:root:root:root:root body .jobbsav .rb-fej-gombok :is(.wl-elo, .bar-keret, .tb-aipay){width: var(--gomb-mag) !important; height: var(--gomb-mag) !important;}
:root:root:root:root body .jobbsav .rb-fej-gombok .wl-elo-pont{display: none;}
}
@media (max-width: 559px){
:root:root:root:root body .jobbsav .rb-fej-gombok .tb-aipay{display: none !important;}
}
@media (max-width: 400px){
:root:root:root:root body .jobbsav .rb-fej-gombok .bar-keret{display: none !important;}
}

/* ── landing.css ── */
/* ============================================================
   weblockai — NYILVÁNOS FELÜLET (főoldal + belépés).

   A DESIGN GONDOLATA — 2026-08-02, a három referencia (higgsfield.ai,
   openart.ai, magnific.com) átnézése után:

   Mindhárom AI-t mutat: generált képet, videót, galériát. Mi ezt NEM
   tudjuk megmutatni, mert nem generálunk — tervet és promptot adunk.
   Ezért a vizuális nyelvünk nem az AI, hanem a MOZI: vetítőgép-fénykúp,
   film-szemcse, perforált filmszalag, klaptábla. Ez egyszerre igaz a
   termékre, és megkülönböztet mindenkitől a piacon.

   MOZGÁS: halk és folyamatos, interakció NÉLKÜL. A látogatónak nem kell
   csinálnia semmit — a lap lélegzik. Minden mozgás kikapcsol
   `prefers-reduced-motion` esetén, és MINDEN tartalom látható marad
   animáció nélkül is (a keresőnek és JS nélkül).
   ============================================================ */

:root {
  --lp-bg:        var(--m-fekete);   /* majdnem fekete — vetítőterem */
  --lp-bg-2:      var(--m-sotet-sav);
  --lp-bg-3:      var(--m-sotet-doboz);
  --lp-kartya:    #10151f;
  --lp-kartya-2:  #161d2a;
  --lp-keret:     rgba(150,180,220,0.13);
  --lp-keret-2:   rgba(150,180,220,0.26);

  --lp-szoveg:    #f2f6fb;
  --lp-halvany:   #9db0c6;
  --lp-dim:       #6c7f96;

  --lime:         var(--m-lime);
  --lime-halk:    rgba(var(--m-lime-rgb),0.13);
  --lime-el:      rgba(var(--m-lime-rgb),0.42);
  --lime-sotet:   #06111d;
  --magenta:      var(--m-magenta);
  --magenta-halk: rgba(var(--m-magenta-rgb),0.13);
  --cyan:         #35e0ff;

  --lp-r:    4px;
  --lp-r-lg: 8px;
  --lp-r-xl: 14px;

  --lp-margo: clamp(18px, 5vw, 64px);
  /* 2026-09-29, a user: „mindenhol, minden legyen teljes szélességben” (volt: 1200px).
     A szövegek saját `ch`-korlátja marad; nagy kijelzőn a lap alján lévő zoom arányosít. */
  --lp-max:   100%;
  --lp-fej:   64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lp {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-szoveg);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 0.95rem + 0.15vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ── FILM-SZEMCSE az egész lapon ──────────────────────────────
   SVG-zaj data URI-ként: nulla hálózati kérés. Nagyon halkan
   kavarog, ettől lesz „filmes" a felület a lapos digitális helyett. */
body.lp::before {
  content: ""; position: fixed; inset: -120px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.052;
  animation: szemcse 900ms steps(4) infinite;
}
@keyframes szemcse {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-14px, 9px); }
  50%  { transform: translate(11px, -12px); }
  75%  { transform: translate(-8px, -7px); }
  100% { transform: translate(0, 0); }
}

/* Vignetta: a szélek felé sötétedik, mint a vetítővásznon. */
body.lp::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(var(--m-fekete-tiszta-rgb),0.55) 100%);
}
@media (prefers-reduced-motion: reduce) {
  body.lp::before { animation: none; }
}

main, header, footer { position: relative; z-index: 3; }

img, svg { max-width: 100%; }

/* 🔴 2026-09-30: a közös ikonkészlet (`wlai_ikon()`, `<svg class="i">`) VONALAS.
   A szabálya eddig csak a belső `design.css`-ben volt, ezért a nyilvános lapokon
   22 ikon fekete foltként jelent meg (főoldal, Rólunk, Biztonság, Kapcsolat).
   A méretet szándékosan nem adjuk meg: azt a befoglaló doboz szabálya adja. */
.i {
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lime); color: var(--lime-sotet);
  padding: 10px 16px; font-weight: 600;
}
.lp-skip:focus { left: 0; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 3px; border-radius: var(--lp-r);
}

.lp-belso { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-margo); }
.lp-keskeny { max-width: 820px; }
.lp-kozep   { text-align: center; }

/* ── FEJLÉC ──────────────────────────────────────────────── */
.lp-fej {
  position: sticky; top: 0; z-index: 50;
  background: var(--m-fekete-tiszta); /* 2026-10-07, a user: „a menü legyen teljesen fekete” */
  border-bottom: 1px solid var(--lp-keret);
}
.lp-sav {
  height: var(--lp-fej); max-width: var(--lp-max); margin: 0 auto;
  padding: 0 var(--lp-margo); display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
}
.lp-logo {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: var(--t-5);
  letter-spacing: -0.03em; color: var(--lime); text-decoration: none; white-space: nowrap;
  text-shadow: 0 0 26px rgba(var(--m-lime-rgb),0.35);
}
.lp-logo b { color: var(--magenta); font-weight: 800; text-shadow: 0 0 26px rgba(var(--m-magenta-rgb),0.4); }
.lp-logo-kicsi { font-size: var(--t-4); }

.lp-nav { display: flex; gap: clamp(10px, 2vw, 26px); margin-right: auto; }
.lp-nav a {
  color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500;
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.lp-nav a:hover { color: var(--lp-szoveg); border-bottom-color: var(--lime); }

.lp-fej-jobb { display: flex; align-items: center; gap: 10px; }
/* Nyelvválasztó zászlókkal (2026-09-28): a mostani kiemelve, a másik halkabb. */
.lp-zaszlok {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
}
.lp-zaszlok > a, .lp-zaszlok > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 34px; border-radius: var(--lp-r);
}
.lp-zaszlok > a { opacity: .5; transition: opacity .15s ease, background .15s ease; }
.lp-zaszlok > a:hover, .lp-zaszlok > a:focus-visible { opacity: 1; background: rgba(var(--m-feher-rgb),0.06); }
.lp-zaszlok > a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.lp-zaszlok > span[aria-current] { background: var(--lime-halk); box-shadow: inset 0 0 0 1px var(--lime-el); }
.lp-zaszlok .zaszlo { width: 24px; height: 16px; border-radius: 2px; display: block; }
/* Telefonon a zászlók a menübe költöznek: a fejlécben nincs rá hely. */
.lp-mob-zaszlok { align-self: flex-start; margin: 2px 4px 8px; }
.lp-mob-lap .lp-mob-zaszlok > a { padding: 0; min-height: 44px; min-width: 48px; }
.lp-mob-lap .lp-mob-zaszlok > span { min-height: 44px; min-width: 48px; }
@media (max-width: 860px) {
  .lp-fej-zaszlok { display: none; }
}
.lp-link { color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500; padding: 6px 4px; }
.lp-link:hover { color: var(--lp-szoveg); }

@media (max-width: 860px) {
  .lp-nav, .lp-link { display: none; }
  .lp-sav { justify-content: space-between; }
  .lp-logo { margin-right: auto; }
}

/* ── GOMBOK ──────────────────────────────────────────────── */
.lp-btn, .lp-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2); font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: 11px 20px; border-radius: var(--lp-r-lg);
  transition: transform .14s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease;
}
.lp-btn {
  background: var(--lime); color: var(--lime-sotet); border: 1px solid var(--lime);
  box-shadow: 0 0 0 rgba(var(--m-lime-rgb),0), 0 8px 26px -12px rgba(var(--m-lime-rgb),0.7);
}
.lp-btn:hover {
  background: var(--m-lime-vilagos); transform: translateY(-2px);
  box-shadow: 0 0 34px -6px rgba(var(--m-lime-rgb),0.55), 0 10px 30px -12px rgba(var(--m-lime-rgb),0.8);
}
.lp-btn2 { background: rgba(var(--m-feher-rgb),0.03); color: var(--lp-szoveg); border: 1px solid var(--lp-keret-2); }
.lp-btn2:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
.lp-btn-nagy { font-size: var(--t-3); padding: 15px 28px; }
@media (prefers-reduced-motion: reduce) { .lp-btn:hover, .lp-btn2:hover { transform: none; } }

/* ── CÍMEK ───────────────────────────────────────────────── */
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(31px, 1.7rem + 3.1vw, 76px); font-weight: 800; margin: 0 0 22px; max-width: 15ch; }
h2 { font-size: clamp(27px, 1.5rem + 1.7vw, 44px); font-weight: 700; margin: 0 0 14px; max-width: 22ch; }
.lp-kozep h2 { max-width: none; margin-left: auto; margin-right: auto; }
h3 { font-size: var(--t-4); font-weight: 700; margin: 0 0 8px; }

/* A címben kiemelt szó: alá halk neon-vonás.
   🔴 A `nowrap` CSAK ott, ahol tényleg elfér: 480 px alatt az angol
   „Then the machine." kilógott a képernyőből, és mivel a lapon
   `overflow-x: hidden` van, nem görgött — LEVÁGÓDOTT. */
.lp-kiemel { position: relative; color: var(--lime); }
@media (min-width: 480px) { .lp-kiemel { white-space: nowrap; } }
.lp-kiemel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.09em;
  background: var(--lime); opacity: .32; filter: blur(1px);
}

/* ── HERO — vetítőgép-fénykúp ─────────────────────────────── */
.lp-hero { position: relative; padding: clamp(52px, 8vw, 104px) 0 clamp(46px, 6vw, 84px); overflow: hidden; }

/* A kúp: fentről-oldalról érkező fény, ami lassan lélegzik. */
.lp-hero::before {
  content: ""; position: absolute; top: -42%; left: 50%; width: 155%; height: 150%;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 42% at 18% 6%, rgba(var(--m-lime-rgb),0.15), transparent 62%),
    radial-gradient(42% 40% at 84% 14%, rgba(var(--m-magenta-rgb),0.13), transparent 60%),
    radial-gradient(55% 46% at 50% 0%, rgba(53,224,255,0.07), transparent 66%);
  filter: blur(24px);
  animation: legzes 13s ease-in-out infinite;
  pointer-events: none;
}
@keyframes legzes {
  0%, 100% { opacity: .78; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .lp-hero::before { animation: none; } }

.lp-hero-racs {
  display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 54px); align-items: start;
}
@media (min-width: 1024px) { .lp-hero-racs { grid-template-columns: 1.08fr 0.92fr; } }

.lp-kis {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .14em;
  text-transform: uppercase; color: var(--magenta); margin: 0 0 18px;
  border: 1px solid var(--magenta-halk); border-radius: var(--lp-r); padding: 6px 12px;
  background: rgba(var(--m-magenta-rgb),0.06);
}
.lp-kis::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--magenta);
  box-shadow: 0 0 10px var(--magenta); animation: pislog 2.4s ease-in-out infinite;
}
@keyframes pislog { 0%,100% { opacity: 1 } 50% { opacity: .28 } }

.lp-alcim { font-size: clamp(16px, 1rem + 0.3vw, 19px); color: var(--lp-halvany); max-width: 56ch; margin: 0 0 30px; }
/* 🔴 2026-09-30, mérve: az `arculat.css` a nyitó alcím alsó térközét nullára húzza
   (`.lp-hero .lp-alcim { margin-bottom: 0 !important }`), ezért ahol közvetlenül gomb vagy
   doboz követi, az RÁTAPADT a szövegre (404, letöltés, köszönő lap, leiratkozás: 0 px rés).
   A következő elem kapja a térközt, így a felülírás nem számít. */
.lp-hero .lp-alcim + :is(.lp-btn, .lp-btn2, .vl-kesz, .lt-gombok, form) { margin-top: 26px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.lp-apro { font-size: var(--t-2); color: var(--lp-dim); margin: 0; }

/* ── A PROMPT-KÁRTYA — a „termékfotónk" ───────────────────── */
.pr {
  position: relative; border-radius: var(--lp-r-xl); overflow: hidden;
  background: linear-gradient(168deg, var(--lp-kartya-2), var(--lp-kartya));
  border: 1px solid var(--lp-keret-2);
  box-shadow: 0 34px 80px -34px rgba(var(--m-fekete-tiszta-rgb),0.95), 0 0 70px -30px rgba(var(--m-lime-rgb),0.30);
}
@keyframes gepel {
  0%   { width: 0; }
  7%   { width: 100%; }
  92%  { width: 100%; }
  96%  { width: 0; }
  100% { width: 0; }
}

/* ══════════════════════════════════════════════════════════
   A FILM ÉPÜL — a főoldal gerince.
   Bal oldalon a lépések görögnek, jobb oldalon a kártya RAGAD,
   és minden lépésnél egy réteggel gazdagabb lesz.
   ══════════════════════════════════════════════════════════ */
.lp-hero-cim { max-width: none; margin-left: auto; margin-right: auto; }
@keyframes le {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; }
  50%      { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
}

.film-szek { padding: clamp(30px, 4vw, 60px) 0 clamp(56px, 8vw, 104px); }
.film { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3vw, 48px); align-items: start; }
@media (min-width: 1000px) { .film { grid-template-columns: 0.92fr 1.08fr; } }

.film-bal { display: grid; gap: clamp(20px, 3vw, 34px); }
@media (min-width: 1000px) {
  /* Asztalon a lépések „szellősek", hogy legyen mit görgetni a kártya mellé. */
  .film-bal { gap: clamp(120px, 26vh, 300px); padding: 22vh 0; }
}
.lepes { max-width: 46ch; }
.lepes-jel {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-0); letter-spacing: .12em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 14px;
  border-left: 2px solid var(--magenta); padding-left: 10px;
}
.lepes h2 { font-size: clamp(24px, 1.3rem + 1.4vw, 36px); margin-bottom: 12px; max-width: none; }
.lepes p  { color: var(--lp-halvany); font-size: clamp(15px, 0.9rem + 0.3vw, 17px); margin: 0; }

@media (min-width: 1000px) {
  .film-jobb { position: sticky; top: calc(var(--lp-fej) + 28px); }
}

@media (min-width: 1000px) {
  @keyframes erkezik {
    0%   { background: var(--lime-halk); }
    100% { background: transparent; }
  }
}
@keyframes gordul { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SZÁMOK — a mi „10M+ creators" helyünk ────────────────── */
.lp-szamok {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden;
}
@media (min-width: 720px)  { .lp-szamok { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .lp-szamok { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.lp-szam-cella { background: var(--lp-bg-2); padding: clamp(18px, 2.4vw, 26px); text-align: center; }
.lp-szam-ertek {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(30px, 1.6rem + 1.6vw, 44px); color: var(--lime); letter-spacing: -0.03em;
  text-shadow: 0 0 34px rgba(var(--m-lime-rgb),0.28);
}
.lp-szam-nev { font-size: var(--t-1); color: var(--lp-halvany); margin-top: 4px; }

/* ── SZAKASZOK ───────────────────────────────────────────── */
.lp-szek { padding: clamp(56px, 8vw, 108px) 0; position: relative; }
.lp-szek-sotet { background: var(--lp-bg-2); border-top: 1px solid var(--lp-keret); border-bottom: 1px solid var(--lp-keret); }
.lp-vezeto { font-size: clamp(15.5px, 0.95rem + 0.25vw, 18px); color: var(--lp-halvany); max-width: 66ch; margin: 0 0 clamp(28px, 4vw, 46px); }
.lp-kozep .lp-vezeto { margin-left: auto; margin-right: auto; }
/* 2026-09-30: a folyószövegben álló linknek nem volt színe, ezért a böngésző
   alapkékje jött (a Biztonság lap e-mail-címe: 2,2:1 a sötét háttéren). */
.lp-vezeto a { color: var(--lime); text-underline-offset: 3px; }

.lp-racs-3 { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .lp-racs-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) {
  .lp-racs-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Kártya: fent halk fény-vonal, ami rátéten felgyullad. */
.lp-kartya {
  position: relative; background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(19px, 2.2vw, 28px); overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .22s ease;
}
.lp-kartya::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime-el), transparent);
  opacity: .38; transition: opacity .22s ease;
}
.lp-kartya:hover {
  border-color: var(--lp-keret-2); transform: translateY(-3px);
  box-shadow: 0 24px 50px -30px rgba(var(--m-fekete-tiszta-rgb),0.9), 0 0 50px -26px rgba(var(--m-lime-rgb),0.3);
}
.lp-kartya:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lp-kartya:hover { transform: none; } }
.lp-kartya p { color: var(--lp-halvany); margin: 0; font-size: var(--t-2); }

.lp-szam-jel {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
  letter-spacing: .1em; color: var(--magenta); margin-bottom: 13px;
}
.lp-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 15px;
  background: var(--lime-halk); border: 1px solid var(--lime-el);
  border-radius: var(--lp-r-lg); color: var(--lime);
  box-shadow: 0 0 24px -10px rgba(var(--m-lime-rgb),0.7);
}
.lp-ikon svg { width: 20px; height: 20px; }

.lp-valasz {
  margin: clamp(26px, 4vw, 40px) 0 0; padding: clamp(19px, 2.4vw, 28px);
  background: linear-gradient(100deg, var(--lime-halk), transparent 70%);
  border-left: 3px solid var(--lime); border-radius: 0 var(--lp-r-lg) var(--lp-r-lg) 0;
  color: var(--lp-halvany); font-size: var(--t-3);
}
.lp-valasz b { color: var(--lp-szoveg); }

/* ── AZ ÖT SZAKASZ ───────────────────────────────────────── */
.lp-fazisok { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-fazis {
  display: flex; gap: clamp(14px, 2vw, 24px); align-items: flex-start;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-left: 3px solid var(--lime); border-radius: var(--lp-r-lg);
  padding: clamp(16px, 2vw, 22px); transition: transform .18s ease, border-color .18s ease;
}
.lp-fazis:hover { transform: translateX(4px); border-color: var(--lp-keret-2); border-left-color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .lp-fazis:hover { transform: none; } }
.lp-fazis-szam { font-family: 'JetBrains Mono', monospace; font-size: var(--t-2); color: var(--lime); flex: 0 0 auto; padding-top: 2px; }
.lp-fazis p { margin: 0; color: var(--lp-halvany); font-size: var(--t-2); }

/* ── CHIPEK ──────────────────────────────────────────────── */
.lp-chipek { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lp-chipek li {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); color: var(--lp-halvany);
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r); padding: 8px 15px;
  background: var(--lp-kartya); transition: border-color .16s, color .16s;
}
.lp-chipek li:hover { border-color: var(--lime-el); color: var(--lime); }

/* ── GYIK ────────────────────────────────────────────────── */
.lp-gyik { border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); background: var(--lp-kartya); margin-bottom: 10px; overflow: hidden; transition: border-color .16s; }
.lp-gyik:hover { border-color: var(--lp-keret-2); }
.lp-gyik summary { cursor: pointer; list-style: none; padding: 17px 48px 17px 19px; font-weight: 600; font-size: var(--t-3); position: relative; }
.lp-gyik summary::-webkit-details-marker { display: none; }
.lp-gyik summary::after {
  content: ""; position: absolute; right: 21px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(45deg); transition: transform .2s ease;
}
.lp-gyik[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp-gyik[open] summary { color: var(--lime); }
.lp-gyik p { margin: 0; padding: 0 19px 19px; color: var(--lp-halvany); font-size: var(--t-3); }

/* ── ZÁRÓ ────────────────────────────────────────────────── */
.lp-zaro { padding: clamp(60px, 9vw, 116px) 0; position: relative; overflow: hidden; background: var(--lp-bg-2); border-top: 1px solid var(--lp-keret); }
.lp-zaro::before {
  content: ""; position: absolute; inset: -50% 0 auto; height: 200%;
  background: radial-gradient(46% 40% at 50% 22%, rgba(var(--m-lime-rgb),0.13), transparent 64%),
              radial-gradient(40% 34% at 50% 30%, rgba(var(--m-magenta-rgb),0.10), transparent 62%);
  filter: blur(18px); animation: legzes 15s ease-in-out infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .lp-zaro::before { animation: none; } }
.lp-zaro .lp-belso { position: relative; z-index: 1; }
.lp-zaro h2 { margin-bottom: 12px; }

/* ── LÁBLÉC ──────────────────────────────────────────────── */
.lp-lab { padding: 32px 0; border-top: 1px solid var(--lp-keret); background: var(--lp-bg); }
.lp-lab nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lp-lab a { color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); }
.lp-lab a:hover { color: var(--lime); }
.lp-copy { color: var(--lp-dim); font-size: var(--t-1); }

/* ── BEÚSZÁS ─────────────────────────────────────────────────
   Az alapállapot LÁTHATÓ; a rejtést a JS teszi rá, és csak a hajtás
   alatti elemekre. JS nélkül és a keresőnek minden ott van. */
.reveal { transition: opacity .55s ease, transform .55s ease; }
.reveal.rejtve { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.rejtve { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════
   BELÉPÉS / REGISZTRÁCIÓ — ugyanaz a vetítőterem, két hasábban.
   ══════════════════════════════════════════════════════════ */
.lp-auth { min-height: calc(100vh / var(--z, 1) - var(--lp-fej)); display: flex; align-items: center; padding: clamp(28px, 5vw, 64px) 0; }
.lp-auth-racs { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; width: 100%; }
@media (min-width: 1000px) { .lp-auth-racs { grid-template-columns: 1.05fr 0.95fr; } }
@media (max-width: 999px)  { .lp-auth-bal { display: none; } }   /* telefonon az űrlap a fontos */

/* Nem h1, de úgy néz ki: a lap főcíme az űrlapé. */
.lp-auth-cim {
  font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.025em; line-height: 1.08;
  font-size: clamp(30px, 1.6rem + 1.9vw, 50px); font-weight: 800;
  margin: 0 0 18px; max-width: 14ch;
}
.lp-auth-lista { list-style: none; margin: 26px 0 0; padding: 0; }
.lp-auth-lista li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--lp-halvany); font-size: var(--t-3); }
.lp-auth-lista li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 9px;
  border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}

.lp-auth-doboz {
  background: linear-gradient(168deg, var(--lp-kartya-2), var(--lp-kartya));
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-xl);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 34px 80px -34px rgba(var(--m-fekete-tiszta-rgb),0.95), 0 0 80px -40px rgba(var(--m-lime-rgb),0.28);
}
.lp-auth-doboz h1 { font-size: clamp(24px, 1.3rem + 0.9vw, 32px); margin-bottom: 8px; max-width: none; }
.lp-auth-doboz .lp-alcim { font-size: var(--t-2); margin-bottom: 24px; }

.lp-mezo { margin-bottom: 17px; }
.lp-mezo label { display: block; font-size: var(--t-2); font-weight: 600; color: var(--lp-szoveg); margin-bottom: 7px; }
.lp-mezo label span { color: var(--lp-dim); font-weight: 400; }
.lp-mezo input {
  width: 100%; height: 46px; padding: 0 14px;
  background: rgba(var(--m-fekete-tiszta-rgb),0.32); color: var(--lp-szoveg);
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2);
  transition: border-color .15s ease, box-shadow .18s ease;
}
.lp-mezo input::placeholder { color: var(--lp-dim); }
.lp-mezo input:focus {
  outline: none; border-color: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-halk);
}
.lp-mezo small { display: block; margin-top: 6px; font-size: var(--t-1); color: var(--lp-dim); }
.lp-auth-doboz .lp-btn { width: 100%; margin-top: 6px; }
/* Robot-szűrő: a widget fix méretű, ezért csak helyet adunk neki. */
.lp-turnstile { margin: 4px 0 18px; min-height: 65px; }
/* Csapdamező (2026-11-10, a BusinessPont mintája): ember nem látja, robot kitölti. */
.lp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-auth-alt { margin: 20px 0 0; font-size: var(--t-2); color: var(--lp-halvany); text-align: center; }
.lp-auth-alt a { color: var(--lime); text-decoration: none; font-weight: 600; }
.lp-auth-alt a:hover { text-decoration: underline; }
.lp-auth-hiba {
  background: rgba(255,95,87,0.12); border: 1px solid rgba(255,95,87,0.45);
  color: var(--m-piros-halvany); border-radius: var(--lp-r-lg); padding: 12px 14px; margin-bottom: 18px; font-size: var(--t-2);
}

/* ── JELSZÓ-ERŐSSÉG MÉRŐ a belépő/regisztrációs képernyőn ──
   2026-08-02. Ugyanaz a komponens, mint a Műhelyben (`wlai_jelszo_ero()`),
   de ez a képernyő a NYILVÁNOS design-nyelvet használja (sötét vetítőterem),
   ezért a színek itt a saját változóiból jönnek. A szerkezet betűre azonos —
   a JS mindkét helyen ugyanaz. */
.jero { margin-top: 9px; }
.jero-sav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.jero-sav i {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(150,180,220,0.16); transition: background .2s ease;
}
.jero-alsó { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.jero-alsó b { font-size: var(--t-1); font-weight: 700; }
.jero-alsó span { font-size: var(--t-1); line-height: 1.45; color: var(--lp-dim); }

.jero.p0 .jero-sav i:nth-child(1)     { background: var(--m-piros); }
.jero.p0 .jero-alsó b                 { color: var(--m-piros-vilagos); }
.jero.p1 .jero-sav i:nth-child(-n+2)  { background: var(--m-borostyan); }
.jero.p1 .jero-alsó b                 { color: var(--m-borostyan); }
.jero.p2 .jero-sav i:nth-child(-n+3)  { background: var(--m-lime-sotet); }
.jero.p2 .jero-alsó b                 { color: var(--m-lime-sotet); }
.jero.p3 .jero-sav i                  { background: var(--lime, var(--m-lime)); }
.jero.p3 .jero-alsó b                 { color: var(--lime, var(--m-lime)); }

/* ── JELSZÓ-VISSZAÁLLÍTÁS képernyők (`_jelszo.php`) ── */
/* Itt nincs bal hasáb (nincs mit „eladni"), ezért a doboz középen áll. */
.lp-auth-racs.lp-auth-egy { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }

/* Sikeres művelet visszajelzése — a hiba-doboz párja. */
.lp-auth-ok {
  margin-bottom: 16px; padding: 11px 14px;
  background: rgba(var(--m-lime-rgb),0.10); border: 1px solid rgba(var(--m-lime-rgb),0.34);
  border-radius: var(--lp-r-lg); color: var(--lime);
  font-size: var(--t-2); line-height: 1.5;
}
/* Az „Elfelejtetted a jelszavad?" a jelszó-mező alatt, halkan. */
.lp-elfelejtett { display: block; margin-top: 7px; }
.lp-elfelejtett a { color: var(--lp-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.lp-elfelejtett a:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* ── MEGHÍVÓ-KÓD a regisztrációnál ───────────────────────────
   Csukott sor annak, akinek nincs kódja; magától nyitva annak, aki
   meghívó-linkről érkezett. Így senkit nem zavar, és senki nem keresi. */
.lp-meghivo { margin: -4px 0 16px; }
.lp-meghivo summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-2); font-weight: 600; color: var(--lp-halvany);
}
.lp-meghivo summary::-webkit-details-marker { display: none; }
.lp-meghivo summary::before {
  content: ""; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.lp-meghivo[open] summary::before { transform: rotate(45deg); margin-top: -4px; }
.lp-meghivo summary:hover { color: var(--lp-szoveg); }
.lp-meghivo .lp-mezo input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* ── EGY BELÉPŐ LAP (2026-09-29) ──────────────────────────────
   Felül az e-mailes belépő link, alatta csukva a jelszó. A lenyíló sora
   ugyanúgy néz ki, mint a meghívó-kódé, csak elválasztóval és 44 px-es
   érintési felülettel. */
.lp-link-urlap { margin-bottom: 20px; }
.lp-jelszo { margin: 0 0 8px; padding-top: 12px; border-top: 1px solid var(--lp-vonal, rgba(var(--m-feher-rgb),0.10)); }
.lp-jelszo > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: var(--t-2); font-weight: 600; color: var(--lp-halvany);
}
.lp-jelszo > summary::-webkit-details-marker { display: none; }
.lp-jelszo > summary::before {
  content: ""; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.lp-jelszo[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.lp-jelszo > summary:hover { color: var(--lp-szoveg); }
.lp-jelszo[open] > summary { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════
   JOGI LAPOK (2026-08-04) — ÁSZF, adatvédelem, elállás, impresszum.

   🔑 A jogi szöveg attól még olvasható lehet, hogy kötelező. Három dolog
   dönti el: mérhető sorhossz (a `.lp-keskeny` 820 px-e ~75 karakter),
   levegő a szakaszok között, és egy tartalomjegyzék, amivel a 11. pont
   is megtalálható. Enélkül a lap egyetlen szövegfal.

   🔑 Minden szín a meglévő `--lp-*` változókból jön. Nem találunk ki újat:
   egy nem létező változó NÉMÁN megöli az egész deklarációt.
   ══════════════════════════════════════════════════════════════ */

/* ── Tartalomjegyzék ── */
.jogi-tj {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); padding: clamp(18px, 2.4vw, 26px);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.jogi-tj > b {
  display: block; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--lp-dim); margin-bottom: 12px;
}
/* 🔴 NINCS CSS-SZÁMOZÁS. A szakasz-címek MAGUK tartalmazzák a sorszámot
   („5. Csomagok, árak, fizetés"), és egy `counter()` mellette „5. 5. Csomagok"-at
   adott — mérve. Egy szám elég. */
.jogi-tj ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
}
@media (min-width: 720px) { .jogi-tj ol { grid-template-columns: 1fr 1fr; column-gap: 26px; } }
@media (min-width: 720px) { .jogi-tj ol > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.jogi-tj a {
  display: flex; gap: 9px; align-items: baseline;
  color: var(--lp-halvany); text-decoration: none;
  font-size: var(--t-2); line-height: 1.5;
  /* 44 px tap-cél telefonon: a link maga alacsony, a függőleges térköz adja. */
  padding: 5px 0; min-height: 32px;
}
.jogi-tj a::before {
  content: ""; width: 5px; height: 5px; margin-top: 0.55em;
  border-radius: 50%; background: var(--lime); flex: none; opacity: 0.75;
}
.jogi-tj a:hover { color: var(--lp-szoveg); }

/* ── A szöveg ── */
.jogi-szakasz { margin-bottom: clamp(34px, 4.5vw, 56px); scroll-margin-top: calc(var(--lp-fej) + 20px); }
.jogi-szakasz > h2 {
  font-size: clamp(19px, 1.05rem + 0.35vw, 23px); line-height: 1.3;
  font-weight: 700; color: var(--lp-szoveg);
  margin: 0 0 14px; padding-bottom: 11px;
  border-bottom: 1px solid var(--lp-keret);
}
.jogi-szoveg p {
  font-size: clamp(15px, 0.94rem + 0.12vw, 16.5px); line-height: 1.72;
  color: var(--lp-halvany); margin: 0 0 15px;
  /* Hosszú szó (URL, cégjegyzékszám) ne lógjon ki 375 px-en. */
  overflow-wrap: anywhere;
}
.jogi-szoveg a { color: var(--lime); text-decoration: none; border-bottom: 1px solid var(--lime-el); }
.jogi-szoveg a:hover { border-bottom-color: var(--lime); }

.jogi-kiemelt {
  background: var(--lp-kartya); border-left: 3px solid var(--lime);
  border-radius: 0 var(--lp-r) var(--lp-r) 0;
  padding: 15px 18px; color: var(--lp-szoveg) !important;
  margin: 0 0 18px !important;
}

.jogi-lista { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.jogi-lista li {
  position: relative; padding-left: 20px;
  font-size: clamp(15px, 0.94rem + 0.12vw, 16.5px); line-height: 1.68;
  color: var(--lp-halvany);
}
.jogi-lista li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
}

/* ── Címke → érték rács ──
   🔑 SZÁNDÉKOSAN NEM `<table>`: telefonon a kétoszlopos táblázat vagy
   vízszintesen görget, vagy betűnként töri a szavakat. Ez 640 px alatt
   magától egymás alá rendeződik. */
.jogi-tabla {
  margin: 0 0 18px; display: grid; gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); overflow: hidden;
}
.jogi-tabla dt, .jogi-tabla dd {
  background: var(--lp-bg-2); margin: 0; padding: 13px 16px;
  font-size: var(--t-2); line-height: 1.62; overflow-wrap: anywhere;
}
.jogi-tabla dt { font-weight: 600; color: var(--lp-szoveg); padding-bottom: 4px; }
.jogi-tabla dd { color: var(--lp-halvany); padding-top: 0; }
@media (min-width: 640px) {
  /* 🔑 `minmax(0, …)`: enélkül a rács-cella a leghosszabb szótól szélesedne,
     és a doboz kilógna a konténerből. */
  .jogi-tabla { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
  .jogi-tabla dt { padding-bottom: 13px; }
  .jogi-tabla dd { padding-top: 13px; }
}

/* ── Tovább a többi jogi lapra ── */
.jogi-tovabb {
  margin-top: clamp(38px, 5vw, 62px); padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--lp-keret);
  display: grid; gap: 10px;
}
@media (min-width: 720px) { .jogi-tovabb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 2026-09-30: négy kártyánál a három oszlop 3+1-et adott (a jogi lapok alján). Négynél 2+2. */
@media (min-width: 720px) { .jogi-tovabb:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jogi-tovabb a {
  display: block; padding: 15px 17px; text-decoration: none;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); transition: border-color .16s ease, background .16s ease;
}
.jogi-tovabb a:hover { border-color: var(--lp-keret-2); background: var(--lp-kartya-2); }
.jogi-tovabb b { display: block; font-size: var(--t-2); font-weight: 600; color: var(--lp-szoveg); margin-bottom: 4px; }
.jogi-tovabb span { display: block; font-size: var(--t-1); line-height: 1.55; color: var(--lp-dim); }
.lp-lab-ceg { font-size: var(--t-1); line-height: 1.6; color: var(--lp-dim); margin: 10px 0 0; }

/* A regisztrációs gomb alatti jogi sor (2026-08-04). */
.lp-auth-jogi {
  font-size: var(--t-1); line-height: 1.6; color: var(--lp-dim);
  margin: 14px 0 0; text-align: center;
}
.lp-auth-jogi a { color: var(--lp-halvany); text-decoration: none; border-bottom: 1px solid var(--lp-keret-2); }
.lp-auth-jogi a:hover { color: var(--lime); border-bottom-color: var(--lime-el); }

/* A jogi lap feje SZŰKEBB, mint a nyitóoldalé.
   🔑 Mérve 2026-08-04: a `lp-hero-sz` + `lp-szek` együtt ~200 px üres teret
   hagyott a cím és a tartalomjegyzék között. A nyitóoldalon az levegő,
   itt viszont csak görgetés — a jogi lapra azért jön valaki, hogy ELOLVASSA. */
.jogi-fej { padding: clamp(38px, 5vw, 64px) 0 clamp(6px, 1vw, 14px); }
.jogi-fej .lp-hero-cim { margin-bottom: 12px; }
.jogi-fej .lp-alcim { margin-bottom: 10px; }
.jogi-torzs { padding: clamp(20px, 2.4vw, 32px) 0 clamp(56px, 7vw, 96px); }

/* Külső hivatkozás a jogi lapon — nyíl jelzi, hogy elvisz. */
.jogi-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.jogi-link::after { content: "↗"; font-size: 0.9em; opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════
   2026-08-05 — A NYILVÁNOS OLDAL ALOLDALAKAT KAPOTT
   Mobil menü · morzsa · oszlopos lábléc · árlap.
   Minden mozgás kikapcsol `prefers-reduced-motion` mellett, és
   MINDEN tartalom látszik JS nélkül is.
   ══════════════════════════════════════════════════════════════ */

/* Vizuálisan rejtett, de felolvasható (táblázat-felirat, segédszöveg). */
.lp-rejtett {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── MOBIL MENÜ ────────────────────────────────────────────────
   🔴 TELEFONON EDDIG NEM VOLT MENÜ: a `.lp-nav` 860 px alatt eltűnt,
   és a látogató a főoldalról sehova nem jutott. `<details>`, tehát
   JS NÉLKÜL nyílik, és a kereső a linkeket így is olvassa. */
.lp-mob { display: none; position: relative; }
.lp-mob > summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r);
}
.lp-mob > summary::-webkit-details-marker { display: none; }
.lp-mob > summary span {
  display: block; width: 17px; height: 2px; background: var(--lp-szoveg);
  transition: transform .18s ease, opacity .18s ease;
}
.lp-mob[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-mob[open] > summary span:nth-child(2) { opacity: 0; }
.lp-mob[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .lp-mob > summary span { transition: none; } }

.lp-mob-lap {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 232px; display: flex; flex-direction: column;
  background: var(--m-fekete-tiszta); border: 1px solid var(--lp-keret-2);
  border-radius: var(--lp-r-lg); padding: 8px;
  box-shadow: 0 26px 60px -26px rgba(var(--m-fekete-tiszta-rgb),0.95);
}
.lp-mob-lap a {
  color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500;
  padding: 11px 13px; border-radius: var(--lp-r);
}
.lp-mob-lap a:hover, .lp-mob-lap a[aria-current] { background: var(--lime-halk); color: var(--lime); }

@media (max-width: 860px) {
  .lp-mob { display: block; }
  /* A „Kezdd el ingyen" marad — az a lap célja. A többi a menübe költözik. */
  .lp-nav, .lp-link { display: none; }
}
@media (max-width: 460px) {
  .lp-fej-jobb .lp-btn { padding: 10px 13px; font-size: var(--t-2); }
}

/* ── MORZSA ───────────────────────────────────────────────────── */
.lp-morzsa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--t-1); color: var(--lp-dim); margin: 0 0 22px;
}
.lp-morzsa a { color: var(--lp-halvany); text-decoration: none; border-bottom: 1px solid transparent; }
.lp-morzsa a:hover { color: var(--lime); border-bottom-color: var(--lime-el); }
.lp-morzsa b { color: var(--lp-szoveg); font-weight: 600; }
.lp-morzsa span { color: var(--lp-dim); }

/* ── LÁBLÉC OSZLOPOKBAN ───────────────────────────────────────── */
.lp-lab-racs {
  display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 48px);
  padding-bottom: 30px;
}
/* 🔴 ÁRVA SOR (mérve 768 px-en): a négy blokk három oszlopban azt jelenti,
   hogy a negyedik egyedül áll a második sorban. A user szabálya szerint ez
   nem ízlés kérdése — soha nincs árva sor. Ezért 620 px felett KETTŐ oszlop
   (két teli sor), és csak 940 px felett négy (egy teli sor). */
@media (min-width: 620px)  { .lp-lab-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .lp-lab-racs { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
/* 🔴 2026-09-30, mérve: a láblécben ma HÁROM blokk van (a márka + két oszlop), nem négy.
   768 px-en ezért 2+1 lett (árva sor), asztalon pedig egy üres negyedik oszlop maradt.
   Az elemszámból döntünk: három blokknál a márka saját sort kap, alatta a két oszlop. */
@media (min-width: 620px) and (max-width: 939.98px) {
  .lp-lab-racs > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 940px) {
  .lp-lab-racs:has(> :nth-child(3):last-child) { grid-template-columns: 1.5fr 1fr 1fr; }
}

.lp-lab-fo p { color: var(--lp-halvany); font-size: var(--t-2); margin: 12px 0 18px; max-width: 40ch; }
.lp-lab-fo .lp-btn2 { font-size: var(--t-2); padding: 9px 16px; }

.lp-lab-oszlop b {
  display: block; font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--lp-dim); font-family: 'JetBrains Mono', monospace; margin-bottom: 14px;
}
.lp-lab-oszlop nav { display: flex; flex-direction: column; gap: 0; }
/* 2026-10-06: 44 px-es célterület (26 px volt); a régi 9 px-es rés a magasságba ment. */
.lp-lab-oszlop nav > a, .lp-lab-suti button { min-height: 44px; display: flex; align-items: center; }

.lp-lab-alja {
  border-top: 1px solid var(--lp-keret); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between;
}
.lp-lab-alja .lp-lab-ceg { margin: 0; max-width: 62ch; }

/* ══════════════════════════════════════════════════════════════
   ÁRLAP
   ══════════════════════════════════════════════════════════════ */

.ar-fej { padding: clamp(30px, 4vw, 52px) 0 clamp(14px, 2vw, 26px); }
.ar-fej .lp-hero-cim { max-width: 18ch; margin-left: 0; }
.ar-fej .lp-alcim { max-width: 62ch; margin-bottom: 26px; }

/* A próbaidő-sáv: a lap legfontosabb mondata, a hajtás fölött. */
.ar-proba {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap;
  padding: clamp(15px, 2vw, 20px) clamp(16px, 2.4vw, 26px);
  border: 1px solid var(--lime-el); border-radius: var(--lp-r-lg);
  background: linear-gradient(100deg, var(--lime-halk), transparent 62%);
  max-width: 760px; position: relative; overflow: hidden;
}
/* Halk fény, ami balról jobbra átvonul — nyugodt, nem villog. */
.ar-proba::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--m-lime-rgb),0.14) 46%, transparent 72%);
  transform: translateX(-60%);
  animation: ar-fenypaszta 7.5s ease-in-out infinite;
}
@keyframes ar-fenypaszta {
  0%, 100% { transform: translateX(-60%); }
  50%      { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) { .ar-proba::after { animation: none; opacity: .5; } }

/* 🔴 A SZÜLŐ-SZELEKTOR LECSAPOTT A GYEREKRE (mérve 2026-08-05):
   a lenti `.ar-proba span` szabály (halvány kék, 14,5 px) ERŐSEBB, mint a
   `.ar-proba-jel` egyetlen osztálya — így a lime jelvényen halványkék
   szöveg állt, 1,9:1 kontraszttal. Olvashatatlan volt, és a screenshoton
   „elmosódásnak" látszott, nem hibának.
   🔑 A javítás a SPECIFIKUSSÁG emelése, nem `!important`: a `!important`
   a következő ilyen ütközésnél már nem hagyna hova menekülni. */
.ar-proba .ar-proba-jel {
  flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: var(--t-1); letter-spacing: .08em; color: var(--lime-sotet);
  background: var(--lime); border-radius: var(--lp-r); padding: 8px 12px;
  position: relative; z-index: 1;
}
.ar-proba div { position: relative; z-index: 1; }
.ar-proba b    { display: block; font-size: var(--t-3); color: var(--lp-szoveg); margin-bottom: 3px; }
.ar-proba span { font-size: var(--t-2); color: var(--lp-halvany); }

/* ── SZŰRŐK ──────────────────────────────────────────────────────
   A rádiógombok a szakasz elején állnak, a rács utánuk — így a CSS
   `~` szelektorával minden szűrhető, JS nélkül.
   🔑 A gombok nem `display:none`-nal tűnnek el, hanem a képernyőn
   kívülre tolva: így billentyűzettel is elérhetők maradnak. */
.ar-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.ar-szurok {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 30px);
  align-items: flex-start; margin-bottom: clamp(26px, 3.4vw, 40px);
}
/* A „mire használod" a leghosszabb és a legfontosabb — saját sorba kerül,
   a fizetési ütem és a pénznem pedig alatta, egymás mellett. Mérésből:
   a három szűrő egy sorban 1280 px-en sem fért el. */
.ar-szuro-szeles { flex: 1 0 100%; }
.ar-szuro { display: flex; flex-direction: column; gap: 9px; }
.ar-szuro-cim {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-dim);
}
.ar-szuro small { font-size: var(--t-1); color: var(--lp-dim); max-width: 30ch; }

.ar-kapcsolo {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-2);
}
.ar-vlg {
  cursor: pointer; user-select: none; white-space: nowrap;
  font-size: var(--t-2); font-weight: 600; color: var(--lp-halvany);
  padding: 9px 15px; border-radius: var(--lp-r);
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;                      /* érintő-célpont, lásd a lap alján */
}
.ar-vlg:hover { color: var(--lp-szoveg); background: rgba(var(--m-feher-rgb),0.04); }
.ar-vlg i {
  font-style: normal; font-size: var(--t-0); font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em; color: var(--magenta);
  border: 1px solid var(--magenta-halk); border-radius: var(--lp-r); padding: 2px 6px;
}
@media (prefers-reduced-motion: reduce) { .ar-vlg { transition: none; } }

/* Az AKTÍV választás — tömör lime, ahogy a Műhelyben is: „ezt te választottad". */
#utem-havi:checked  ~ .ar-szurok .ar-vlg-havi,
#utem-eves:checked  ~ .ar-szurok .ar-vlg-eves,
#kinek-mind:checked ~ .ar-szurok .ar-vlg-mind,
#kinek-egyedul:checked    ~ .ar-szurok .ar-vlg-egyedul,
#kinek-rendszeres:checked ~ .ar-szurok .ar-vlg-rendszeres,
#kinek-csapat:checked     ~ .ar-szurok .ar-vlg-csapat {
  background: var(--lime); color: var(--lime-sotet); border-color: var(--lime);
}
#utem-eves:checked ~ .ar-szurok .ar-vlg-eves i { color: var(--lime-sotet); border-color: rgba(6,17,29,0.3); background: rgba(6,17,29,0.12); }

/* A billentyűzetes használó lássa, hol jár. */
.ar-radio:focus-visible ~ .ar-szurok .ar-vlg { outline: none; }
#utem-havi:focus-visible  ~ .ar-szurok .ar-vlg-havi,
#utem-eves:focus-visible  ~ .ar-szurok .ar-vlg-eves,
#kinek-mind:focus-visible ~ .ar-szurok .ar-vlg-mind,
#kinek-egyedul:focus-visible    ~ .ar-szurok .ar-vlg-egyedul,
#kinek-rendszeres:focus-visible ~ .ar-szurok .ar-vlg-rendszeres,
#kinek-csapat:focus-visible     ~ .ar-szurok .ar-vlg-csapat {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

/* Pénznem — szerveroldali linkek, tehát JS nélkül is működnek. */
.ar-penzek { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); background: var(--lp-bg-2); }
.ar-penz {
  text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
  color: var(--lp-halvany); padding: 10px 13px; border-radius: var(--lp-r);
  border: 1px solid transparent; min-height: 44px; display: inline-flex; align-items: center;
}
.ar-penz:hover { color: var(--lp-szoveg); background: rgba(var(--m-feher-rgb),0.04); }
.ar-penz.ez { background: var(--lime); color: var(--lime-sotet); border-color: var(--lime); font-weight: 500; }

/* ── A HÁROM KÁRTYA ───────────────────────────────────────────── */
.ar-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); align-items: stretch; }
/* 🔑 A HÁROM HASÁB CSAK 880 PX FELETT. Mérve: 768 px-es tableten a
   kártyák 220 px szélesre nyomódtak, és egy „8 900 Ft" ára alig fért ki.
   Álló tableten inkább egymás alatt, teljes szélességben — ott a
   görgetés olcsóbb, mint az összenyomott szöveg. */
@media (min-width: 880px)  { .ar-racs { grid-template-columns: repeat(3, 1fr); } }

.ar-kartya {
  position: relative; display: flex; flex-direction: column;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.6vw, 30px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .2s ease, opacity .2s ease;
}
.ar-kartya:hover { transform: translateY(-3px); border-color: var(--lp-keret-2); }
@media (prefers-reduced-motion: reduce) { .ar-kartya, .ar-kartya:hover { transition: none; transform: none; } }

/* A kiemelt csomag: magenta felső fénycsík + halk aurora a háttérben. */
.ar-ki { border-color: var(--magenta-halk); box-shadow: 0 26px 64px -34px rgba(var(--m-magenta-rgb),0.55); }
.ar-ki::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--magenta), transparent);
  border-radius: var(--lp-r-xl) var(--lp-r-xl) 0 0;
}
/* 🔴 KONTRASZT (mérve): fehér szöveg magentán csak 3,4:1 — a WCAG AA
   4,5:1-et kér, és ez egy 11,5 px-es felirat, tehát nem számít „nagy
   szövegnek". Sötét betűvel 5,5:1, és a magenta „ide nézz" szerepe megmarad. */
.ar-jelvny {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: var(--t-0); font-weight: 700; letter-spacing: .02em;
  background: var(--magenta); color: var(--lime-sotet); padding: 4px 12px; border-radius: var(--lp-r);
}

.ar-kartya-fej { margin-bottom: 16px; }
.ar-kartya h2 { font-size: var(--t-5); margin: 0 0 6px; max-width: none; }
.ar-kinek { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); min-height: 2.9em; }

.ar-osszeg { margin-bottom: 20px; min-height: 78px; }
.ar-osszeg b {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(34px, 2rem + 1.1vw, 44px);
  font-weight: 800; letter-spacing: -0.03em; color: var(--lp-szoveg); line-height: 1.05;
}
.ar-osszeg > span > span { font-size: var(--t-2); color: var(--lp-dim); font-weight: 400; }
.ar-osszeg i {
  display: block; font-style: normal; font-size: var(--t-1); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; margin-top: 6px;
}
.ar-cs-ingyen .ar-osszeg > span:first-child { display: block; }
.ar-cs-ingyen .ar-osszeg span:last-child { font-size: var(--t-2); color: var(--lp-dim); }

/* HAVI ↔ ÉVES — mindkét ár a HTML-ben van, a CSS az egyiket rejti. */
.ar-eves { display: none; }
#utem-eves:checked ~ .ar-racs .ar-eves { display: inline-block; }
#utem-eves:checked ~ .ar-racs .ar-havi { display: none; }

.ar-mit { list-style: none; margin: 0 0 22px; padding: 0; flex: 1 1 auto; }
.ar-mit li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  color: var(--lp-halvany); font-size: var(--t-2); line-height: 1.55;
}
.ar-mit li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px;
  border-radius: 2px; background: var(--lime);
}
.ar-mit li.nem { color: var(--lp-dim); }
.ar-mit li.nem::before { background: transparent; border: 1px solid var(--lp-keret-2); }
.ar-mit li b { color: var(--lp-szoveg); font-weight: 600; }
.ar-mit li em {
  display: block; font-style: normal; font-size: var(--t-1); color: var(--lp-dim);
  font-family: 'JetBrains Mono', monospace; margin-top: 2px;
}

.ar-kartya .lp-btn, .ar-kartya .lp-btn2 { width: 100%; }
.ar-apro { display: block; text-align: center; font-size: var(--t-1); color: var(--lp-dim); margin-top: 9px; }

/* MIRE HASZNÁLOD — a nem illő csomagok halkulnak, az illő emelkedik.
   🔑 Nem REJTJÜK el őket: aki a Stúdióra kíváncsi, attól még lássa. */
#kinek-egyedul:checked ~ .ar-racs .ar-cs-pro,
#kinek-egyedul:checked ~ .ar-racs .ar-cs-studio,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-ingyen,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-studio,
#kinek-csapat:checked ~ .ar-racs .ar-cs-ingyen,
#kinek-csapat:checked ~ .ar-racs .ar-cs-pro {
  opacity: .52;
}
#kinek-egyedul:checked    ~ .ar-racs .ar-cs-ingyen,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-pro,
#kinek-csapat:checked     ~ .ar-racs .ar-cs-studio {
  border-color: var(--lime-el);
  box-shadow: 0 26px 64px -34px rgba(var(--m-lime-rgb),0.5);
}
/* A „legtöbbeknek ez elég" jelvény csak akkor igaz, ha nem szűrtél másra. */
#kinek-egyedul:checked ~ .ar-racs .ar-jelvny,
#kinek-csapat:checked  ~ .ar-racs .ar-jelvny { opacity: 0; }

.ar-labjegyzet { margin: clamp(22px, 3vw, 32px) 0 0; font-size: var(--t-1); color: var(--lp-dim); max-width: 76ch; }

/* ── MI AZ AZ AI-HÍVÁS ────────────────────────────────────────── */
.ar-hivas { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; margin-bottom: clamp(24px, 3vw, 36px); }
@media (min-width: 620px)  { .ar-hivas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ar-hivas { grid-template-columns: repeat(4, 1fr); } }
.ar-hivas-elem { background: var(--lp-bg-3); padding: clamp(18px, 2.2vw, 24px); }
.ar-hivas-szam {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--lp-r);
  background: var(--lime-halk); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); margin-bottom: 11px;
}
.ar-hivas-elem b { display: block; font-size: var(--t-3); margin-bottom: 5px; }
.ar-hivas-elem > span:last-child { font-size: var(--t-2); color: var(--lp-halvany); }

.ar-szamlalo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; }
@media (min-width: 760px) { .ar-szamlalo { grid-template-columns: repeat(4, 1fr); } }
.ar-szamlalo-elem { background: var(--lp-bg); padding: clamp(18px, 2.4vw, 28px); text-align: center; }
.ar-szamlalo-elem b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(30px, 1.8rem + 1.2vw, 44px); letter-spacing: -0.03em;
  color: var(--lp-szoveg); line-height: 1;
}
.ar-szamlalo-elem.ki b { color: var(--lime); }
.ar-szamlalo-elem span { display: block; font-size: var(--t-1); color: var(--lp-halvany); margin-top: 7px; }

/* ── ÖSSZEHASONLÍTÓ TÁBLÁZAT ──────────────────────────────────────
   🔑 SAJÁT görgetődobozban, nem a lapban: telefonon így nem tolja
   szét az egész oldalt. Ez a hiba egyszer már végigment a Műhelyen. */
.ar-tabla-doboz { overflow-x: auto; border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); background: var(--lp-kartya); }
.ar-tabla { width: 100%; border-collapse: collapse; min-width: 620px; font-size: var(--t-2); }
.ar-tabla th, .ar-tabla td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--lp-keret); }
.ar-tabla thead th { position: sticky; top: 0; background: var(--lp-bg-3); font-size: var(--t-1); letter-spacing: .04em; z-index: 1; }
.ar-tabla th[scope="row"] { text-align: left; font-weight: 500; color: var(--lp-halvany); min-width: 240px; }
.ar-tabla tbody tr:last-child th, .ar-tabla tbody tr:last-child td { border-bottom: 0; }
.ar-tabla tbody tr:hover { background: rgba(var(--m-feher-rgb),0.02); }
.ar-tabla .ki { background: rgba(var(--m-magenta-rgb),0.05); }
.ar-tabla thead .ki { color: var(--magenta); }
.ar-van   { color: var(--lime); font-size: var(--t-3); }
.ar-nincs { color: var(--lp-dim); }


/* ── HORGONY ÉS TÉRKÖZ ────────────────────────────────────────────
   🔴 A sticky fejléc RÁTAKARTA a szakasz tetejét, ha valaki horgonyra
   ugrott (`#csomagok`, `#gyik`). A jogi lapoknál ez már meg volt oldva —
   most minden azonosítóval ellátott nyilvános szakasz megkapja. */
.lp-szek[id], .lp-hero[id], .ar-lap section[id] {
  scroll-margin-top: calc(var(--lp-fej) + 18px);
}

/* A lap feje után a csomag-szakasz KÖZELEBB kezdődik: a hero alsó és a
   szekció felső paddingja együtt 190 px üres sávot adott a próbaidő-doboz
   és a szűrők között. Az levegő helyett görgetés volt. */
.ar-lap .ar-csomagok { padding-top: clamp(26px, 3vw, 42px); }

/* ── ÉRINTŐ-CÉLPONTOK ─────────────────────────────────────────────
   🔴 Mérve 2026-08-05, 375 px-en: a gombok 40–43 px magasak voltak, a
   követelmény 44×44. Egérrel a 42 px kényelmes, ujjal viszont mellé lehet
   nyúlni — ezért az EGÉRNÉL nem változtatunk, csak ott, ahol tényleg
   ujjal nyúlnak hozzá. Ugyanez a megoldás a Műhelyben már bevált. */
@media (pointer: coarse) {
  .lp-btn, .lp-btn2 { min-height: 44px; }
  .lp-mob-lap a     { min-height: 44px; display: flex; align-items: center; }
  .lp-gyik summary  { min-height: 44px; display: flex; align-items: center; }
}

/* ── MOZGÁS-CSÖKKENTÉS: A VÉGSŐ HÁLÓ ─────────────────────────────
   🔴 Mérve 2026-08-05: négy animáció (`pislog`, `gordul`, `erkezik`,
   `ar-fenypaszta`) egyenként volt kikapcsolva vagy sem — a `pislog` és a
   `gordul` NEM volt. Az egyenkénti kikapcsolás elfelejthető: minden új
   animációnál újra meg kell csinálni, és a hiba NÉMA (aki mozgás-érzékeny,
   nem ír nekünk, csak elmegy).

   Ez a blokk MINDENT lefog, ami eddig kimaradt vagy ezután születik.
   🔑 Nem `animation: none` — az a KEZDŐ állapotban fagyasztana. A
   „0,01 ms + egy ismétlés" a VÉGállapotba viszi, ami minden itteni
   animációnál a nyugalmi kép (a szalag féltolása duplikált tartalomnál
   ugyanaz a látvány, a pislogás vége teljes fedés, a beúszásé az alapszín).
   🔑 A gépelés-animáció szándékosan `no-preference` blokkban él, tehát itt
   el sem indul — a hat sor egyszerűen ott áll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FUNKCIÓK LAP
   ══════════════════════════════════════════════════════════════ */

.fn-elso { padding-top: clamp(26px, 3vw, 42px); }

/* ── A három réteg ────────────────────────────────────────────── */
.fn-harom { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 820px) { .fn-harom { grid-template-columns: repeat(3, 1fr); } }
.fn-reteg {
  position: relative; background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(22px, 2.6vw, 30px);
  overflow: hidden;
}
/* Halk fény a kártya bal felső sarkából — nem villog, csak van. */
.fn-reteg::before {
  content: ""; position: absolute; top: -60%; left: -20%; width: 90%; height: 140%;
  background: radial-gradient(50% 40% at 50% 50%, var(--lime-halk), transparent 70%);
  pointer-events: none;
}
.fn-reteg-szam {
  position: relative; display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-1); letter-spacing: .1em; color: var(--lime); margin-bottom: 14px;
}
.fn-reteg h2 { position: relative; font-size: var(--t-5); margin: 0 0 10px; max-width: none; }
.fn-reteg p  { position: relative; margin: 0; color: var(--lp-halvany); font-size: var(--t-2); }

/* ── Jelmagyarázat ────────────────────────────────────────────── */
.fn-jelmagy {
  list-style: none; margin: 0 0 clamp(20px, 2.6vw, 30px); padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.fn-jelmagy li { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-2); color: var(--lp-halvany); }
.fn-pont { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.fn-p-eszkoz  { background: var(--lime); }
.fn-p-ai      { background: var(--magenta); }
.fn-p-szamolt { background: var(--cyan); }
.fn-p-mezos   { background: var(--lp-dim); }

/* ── A 15 lépés térképe ───────────────────────────────────────── */
.fn-terkep { display: grid; gap: clamp(14px, 2vw, 20px); }
.fn-szakasz {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  background: var(--lp-bg-3); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 900px) { .fn-szakasz { grid-template-columns: 250px 1fr; gap: clamp(20px, 2.4vw, 34px); } }

.fn-szakasz-fej { display: flex; flex-direction: column; gap: 5px; }
.fn-rom {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: var(--t-5);
  color: var(--lime); letter-spacing: -0.02em; line-height: 1;
}
.fn-szakasz-fej b { font-size: var(--t-4); font-family: 'Bricolage Grotesque', sans-serif; }
.fn-szakasz-fej > span:last-child { font-size: var(--t-2); color: var(--lp-halvany); }

.fn-lepesek { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); overflow: hidden; }
.fn-lepes {
  display: grid; grid-template-columns: 30px 26px 1fr auto; align-items: center; gap: 10px;
  background: var(--lp-kartya); padding: 12px 14px; position: relative;
}
/* A bal élen a fajta színe — ez köti össze a jelmagyarázattal.
   🔴 A FAJTA-OSZTÁLYOK KÜLÖN ELŐTAGOT KAPNAK (`fn-f-`). Először `fn-eszkoz`
   volt a nevük — ugyanaz, mint az eszköz-KÁRTYÁÉ lentebb —, és a két
   szabálykészlet ráragadt egymásra: a kártyákra rákerült ez a színes él, a
   lépésekre pedig a kártya kerete és rátét-emelkedése. A mérés fogta meg:
   15 „eszközt" számolt ott, ahol 8 van. */
.fn-lepes::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.fn-f-eszkoz::before  { background: var(--lime); }
.fn-f-ai::before      { background: var(--magenta); }
.fn-f-szamolt::before { background: var(--cyan); }
.fn-f-mezos::before   { background: var(--lp-dim); }

.fn-sorszam { font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); color: var(--lp-dim); text-align: right; }
.fn-ikon svg { width: 17px; height: 17px; color: var(--lp-halvany); }
.fn-lepes b { font-size: var(--t-2); }
.fn-mit { grid-column: 3; font-size: var(--t-1); color: var(--lp-dim); }
.fn-fajta {
  grid-row: 1 / span 2; grid-column: 4; align-self: center;
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .05em;
  color: var(--lp-halvany); border: 1px solid var(--lp-keret); border-radius: var(--lp-r);
  padding: 3px 8px; white-space: nowrap;
}
@media (max-width: 620px) {
  .fn-lepes { grid-template-columns: 26px 22px 1fr; row-gap: 4px; }
  .fn-fajta { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
  .fn-mit   { grid-column: 1 / -1; }
}

/* ── Az eszközök ──────────────────────────────────────────────── */
.fn-eszkozok { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 640px)  { .fn-eszkozok { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .fn-eszkozok { grid-template-columns: repeat(4, 1fr); } }
.fn-eszkoz {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(18px, 2.2vw, 24px);
  transition: transform .16s ease, border-color .16s ease;
}
.fn-eszkoz:hover { transform: translateY(-3px); border-color: var(--lime-el); }
@media (prefers-reduced-motion: reduce) { .fn-eszkoz:hover { transform: none; } }
.fn-eszkoz-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--lp-r-lg);
  background: var(--lime-halk); color: var(--lime); margin-bottom: 13px;
}
.fn-eszkoz-ikon svg { width: 19px; height: 19px; }
.fn-eszkoz h3 { font-size: var(--t-3); margin: 0 0 7px; }
.fn-eszkoz p  { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.55; }

/* ── A három nyelv — inline SVG ───────────────────────────────────
   🔑 A feliratok VALÓDI <text> elemek, tehát a Google olvassa őket, és
   a színek CSS-ből jönnek — így az ábra a lap témájával együtt él, és
   JS nélkül is teljesen látszik. */
.fn-abra { margin: 0; }
.fn-svg  { width: 100%; height: auto; display: block; }
.fn-sav rect { fill: var(--lp-kartya); stroke: var(--lp-keret); stroke-width: 1; }
.fn-sav-lime    rect { stroke: var(--lime-el); }
.fn-sav-magenta rect { stroke: rgba(var(--m-magenta-rgb),0.42); }
.fn-sav-cyan    rect { stroke: rgba(53,224,255,0.42); }
.fn-sav-cim {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); letter-spacing: .1em;
  fill: var(--lp-szoveg);
}
.fn-sav-lime    .fn-sav-cim { fill: var(--lime); }
.fn-sav-magenta .fn-sav-cim { fill: var(--magenta); }
.fn-sav-cyan    .fn-sav-cim { fill: var(--cyan); }
.fn-sav-mit   { font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2); fill: var(--lp-halvany); }
.fn-sav-kinek { font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2); font-weight: 600; fill: var(--lp-szoveg); }
.fn-abra figcaption { margin-top: 14px; font-size: var(--t-1); color: var(--lp-dim); }
/* Kis képernyőn az SVG szövege olvashatatlanul összemenne, ezért ott
   nagyobb betűvel rajzoljuk (a viewBox arányát a böngésző kezeli). */
@media (max-width: 640px) {
  .fn-sav-cim   { font-size: var(--t-3); }
  .fn-sav-mit   { font-size: var(--t-4); }
  .fn-sav-kinek { font-size: var(--t-4); }
}

/* ── Amit a végén kapsz ───────────────────────────────────────── */
.fn-eredmeny { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; }
@media (min-width: 760px) { .fn-eredmeny { grid-template-columns: repeat(2, 1fr); } }
.fn-er { display: flex; gap: 14px; background: var(--lp-kartya); padding: clamp(16px, 2vw, 22px); }
.fn-er-ikon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--lp-r-lg);
  background: rgba(var(--m-feher-rgb),0.04); color: var(--lime);
}
.fn-er-ikon svg { width: 17px; height: 17px; }
.fn-er b    { display: block; font-size: var(--t-3); margin-bottom: 4px; }
.fn-er span { font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.55; }

/* ── Amit NEM csinálunk ───────────────────────────────────────── */
.fn-nem { display: grid; gap: 12px; margin-bottom: 18px; }
.fn-nem-elem {
  border-left: 3px solid var(--magenta); padding: 14px 0 14px 18px;
  background: linear-gradient(90deg, var(--magenta-halk), transparent 40%);
}
.fn-nem-elem b { display: block; font-size: var(--t-3); margin-bottom: 5px; }
.fn-nem-elem p { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); }

.fn-zaro-gombok { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   HOGYAN MŰKÖDIK — IDŐVONAL
   🔑 Nem kártyarács: itt a SORREND a mondanivaló. Minden állomás
   abból él, amit az előző hagyott hátra, ezért fut végig egy vonal.
   ══════════════════════════════════════════════════════════════ */

.hg-elso { padding-top: clamp(26px, 3vw, 42px); }

.hg-cedula {
  margin-top: 26px; max-width: 620px;
  border: 1px dashed var(--lp-keret-2); border-radius: var(--lp-r-lg);
  padding: 16px 20px; background: rgba(var(--m-feher-rgb),0.02);
}
.hg-cedula-jel {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0);
  letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); margin-bottom: 7px;
}
.hg-cedula p { margin: 0; font-size: var(--t-3); color: var(--lp-szoveg); font-style: italic; }

.hg-vonal { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.hg-allomas { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: clamp(26px, 3.4vw, 44px); }
@media (min-width: 820px) { .hg-allomas { grid-template-columns: 56px 1fr; gap: 26px; } }

/* A jelzés-oszlop: korong + a lefelé futó vonal. */
.hg-jel { position: relative; display: flex; flex-direction: column; align-items: center; }
.hg-jel::after {
  content: ""; position: absolute; top: 46px; bottom: -22px; width: 2px;
  background: linear-gradient(var(--lime-el), var(--lp-keret));
}
.hg-allomas:last-child .hg-jel::after { display: none; }

.hg-korong {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--lp-r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lp-kartya); border: 1px solid var(--lime-el); color: var(--lime);
  box-shadow: 0 0 26px -10px rgba(var(--m-lime-rgb),0.55);
}
.hg-korong svg { width: 20px; height: 20px; }
.hg-szam {
  margin-top: 9px; font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
  color: var(--lp-dim); background: var(--lp-bg); padding: 2px 0; position: relative; z-index: 1;
}

.hg-torzs { min-width: 0; }
.hg-fej { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 8px; }
.hg-fej h2 { font-size: clamp(21px, 1.2rem + 0.7vw, 28px); margin: 0; max-width: none; }
.hg-perc {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); color: var(--lp-halvany);
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r); padding: 3px 9px; white-space: nowrap;
}
.hg-mit { margin: 0 0 16px; color: var(--lp-halvany); font-size: var(--t-3); max-width: 68ch; }

/* A „mit írsz be / mi van meg" doboz: ez a termék maga, ezért gépbetűs. */
.hg-doboz {
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-3); padding: 15px 17px; max-width: 640px;
}
.hg-doboz-cim {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0);
  letter-spacing: .12em; text-transform: uppercase; color: var(--lp-dim); margin-bottom: 9px;
}
.hg-doboz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hg-doboz li {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); color: var(--lp-halvany);
  padding-left: 16px; position: relative; overflow-wrap: anywhere;
}
.hg-doboz li::before { content: "›"; position: absolute; left: 0; color: var(--lime); }

.hg-ki { margin: 14px 0 0; font-size: var(--t-2); color: var(--lp-dim); max-width: 68ch; }

/* ── Ami a háttérben történik ─────────────────────────────────── */
.hg-hatter { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 820px) { .hg-hatter { grid-template-columns: repeat(3, 1fr); } }
.hg-h-elem {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.4vw, 26px);
}
.hg-h-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--lp-r-lg);
  background: var(--magenta-halk); color: var(--magenta); margin-bottom: 13px;
}
.hg-h-ikon svg { width: 18px; height: 18px; }
.hg-h-elem b { display: block; font-size: var(--t-3); margin-bottom: 7px; font-family: 'Bricolage Grotesque', sans-serif; }
.hg-h-elem p { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   KINEK VALÓ
   ══════════════════════════════════════════════════════════════ */

.kv-elso { padding-top: clamp(26px, 3vw, 42px); }

.kv-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 720px)  { .kv-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .kv-racs { grid-template-columns: repeat(3, 1fr); } }

.kv-kartya {
  display: flex; flex-direction: column;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.4vw, 28px);
  transition: border-color .16s ease, transform .16s ease;
}
.kv-kartya:hover { border-color: var(--lime-el); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .kv-kartya:hover { transform: none; } }

.kv-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--lp-r-lg);
  background: var(--lime-halk); color: var(--lime); margin-bottom: 14px;
}
.kv-ikon svg { width: 20px; height: 20px; }
.kv-kartya h2 { font-size: var(--t-4); margin: 0 0 16px; max-width: none; line-height: 1.25; }

.kv-blokk { margin-bottom: 14px; }
.kv-cimke {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px;
}
.kv-baj .kv-cimke { color: var(--magenta); }
.kv-mit .kv-cimke { color: var(--lime); }
.kv-blokk p { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.6; }
.kv-mit     { flex: 1 1 auto; }

/* A kártya lába: a példa és a hozzá elég csomag. */
.kv-lab {
  margin-top: 4px; padding-top: 15px; border-top: 1px solid var(--lp-keret);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
}
.kv-pelda { font-size: var(--t-1); color: var(--lp-dim); font-style: italic; max-width: 24ch; }
.kv-csomag {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .04em;
  color: var(--lime); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--lime-el); border-radius: var(--lp-r); padding: 5px 10px;
}
.kv-csomag:hover { background: var(--lime-halk); }

/* ── Ami mindegyikben közös ───────────────────────────────────── */
.kv-kozos { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.2vw, 26px); }
@media (min-width: 860px) { .kv-kozos { grid-template-columns: repeat(3, 1fr); } }
.kv-k-elem { border-top: 2px solid var(--lime); padding-top: 18px; }
.kv-k-szam {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
  color: var(--lime); letter-spacing: .1em; margin-bottom: 9px;
}
.kv-k-elem b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--t-4); margin-bottom: 8px; }
.kv-k-elem p { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.62; }

/* ══════════════════════════════════════════════════════════════
   GYIK LAP
   ══════════════════════════════════════════════════════════════ */

/* Ugró-sáv a csoportokhoz — horgony-linkek, JS nélkül is működnek. */
.gy-ugro { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.gy-ugro a {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); padding: 10px 14px; min-height: 44px;
  color: var(--lp-halvany); font-size: var(--t-2); font-weight: 500;
  transition: border-color .15s, color .15s;
}
.gy-ugro a:hover { border-color: var(--lime-el); color: var(--lp-szoveg); }
.gy-ugro svg { width: 17px; height: 17px; color: var(--lime); }
.gy-ugro b {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 500;
  color: var(--lp-dim); background: rgba(var(--m-feher-rgb),0.04);
  border-radius: var(--lp-r); padding: 2px 7px;
}

.gy-csoport { padding-top: clamp(34px, 4vw, 56px); padding-bottom: clamp(34px, 4vw, 56px); }
.gy-fej { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.gy-fej h2 { margin: 0; font-size: clamp(23px, 1.3rem + 0.8vw, 30px); max-width: none; }
.gy-fej-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--lp-r-lg); flex: 0 0 auto;
  background: var(--lime-halk); color: var(--lime);
}
.gy-fej-ikon svg { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════
   KAPCSOLAT
   ══════════════════════════════════════════════════════════════ */

/* „Lehet, hogy már megvan a válasz" */
.kp-elobb {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl);
  background: var(--lp-bg-3); padding: clamp(20px, 2.6vw, 30px);
}
@media (min-width: 900px) { .kp-elobb { grid-template-columns: 1fr auto; gap: 34px; } }
.kp-elobb h2 { font-size: var(--t-5); margin: 0 0 8px; max-width: none; }
.kp-elobb p  { margin: 0; color: var(--lp-halvany); font-size: var(--t-2); max-width: 56ch; }
.kp-elobb-gombok { display: flex; flex-wrap: wrap; gap: 10px; }

/* Cégadatok */
.kp-ceg {
  margin: 0 0 16px; display: grid; grid-template-columns: 1fr; gap: 2px 20px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl);
  background: var(--lp-kartya); padding: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 620px) { .kp-ceg { grid-template-columns: minmax(0, 240px) 1fr; } }
.kp-ceg dt { font-size: var(--t-1); color: var(--lp-dim); padding: 7px 0; }
.kp-ceg dd { margin: 0; font-size: var(--t-2); color: var(--lp-szoveg); padding: 7px 0; }
.kp-ceg dd a { color: var(--lime); text-decoration: none; }
.kp-ceg dd a:hover { text-decoration: underline; }
@media (min-width: 620px) {
  .kp-ceg dt, .kp-ceg dd { border-top: 1px solid var(--lp-keret); }
  .kp-ceg dt:first-of-type, .kp-ceg dd:first-of-type { border-top: 0; }
}

/* ══════════════════════════════════════════════════════════════
   TUDÁSBÁZIS — lista és cikk
   ══════════════════════════════════════════════════════════════ */

.tb-elso { padding-top: clamp(26px, 3vw, 42px); }

.tb-temak { list-style: none; margin: 0 0 clamp(20px, 2.6vw, 30px); padding: 0; display: flex; flex-wrap: wrap; gap: 9px 20px; }
.tb-temak li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-2); color: var(--lp-halvany); }
.tb-tema-pont { width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.tb-temak b {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 500; color: var(--lp-dim);
  background: rgba(var(--m-feher-rgb),0.04); border-radius: var(--lp-r); padding: 1px 7px;
}

.tb-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 720px)  { .tb-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .tb-racs { grid-template-columns: repeat(3, 1fr); } }
/* 2026-10-06: nincs tört sor. Melyik kártya széles, azt a szerver számolja a cikkszámból (`_tb-lap.php`). */
@media (min-width: 720px) and (max-width: 1159.98px) { .tb-racs > .tb-kartya--teljes2 { grid-column: 1 / -1; } }
@media (min-width: 1160px) { .tb-racs { grid-auto-flow: dense; } .tb-racs > .tb-kartya--dupla3 { grid-column: span 2; } }

.tb-kartya {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.tb-kartya:hover { border-color: var(--lime-el); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .tb-kartya:hover { transform: none; } }
.tb-link { display: flex; flex-direction: column; height: 100%; padding: clamp(20px, 2.4vw, 26px); text-decoration: none; }

.tb-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.tb-tema {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime);
}
.tb-perc { font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); color: var(--lp-dim); }
.tb-kartya h2 { font-size: var(--t-4); line-height: 1.28; margin: 0 0 10px; max-width: none; color: var(--lp-szoveg); }
.tb-kartya p  { margin: 0 0 16px; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.6; flex: 1 1 auto; }
.tb-tovabb { font-size: var(--t-2); font-weight: 600; color: var(--lime); }

/* ── A cikk ───────────────────────────────────────────────────── */
.tb-cikk-fej { padding: clamp(30px, 4vw, 52px) 0 clamp(8px, 1.4vw, 18px); }
.tb-cikk-fej .lp-hero-cim { font-size: clamp(28px, 1.5rem + 2.2vw, 50px); max-width: none; }
.tb-meta { margin: 6px 0 0; font-size: var(--t-1); color: var(--lp-dim); display: flex; gap: 9px; flex-wrap: wrap; }
.tb-torzs { padding: clamp(18px, 2.2vw, 30px) 0 clamp(50px, 6vw, 84px); }

.tb-szoveg p {
  font-size: clamp(16px, 0.98rem + 0.22vw, 18px); line-height: 1.72;
  color: var(--lp-halvany); margin: 0 0 20px; max-width: 68ch;
}
.tb-szoveg h2 {
  font-size: clamp(24px, 1.3rem + 1vw, 33px); margin: clamp(36px, 4vw, 54px) 0 16px;
  max-width: none; scroll-margin-top: calc(var(--lp-fej) + 18px);
}
.tb-szoveg h3 { font-size: var(--t-4); margin: 30px 0 12px; }

.tb-lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.tb-lista li {
  position: relative; padding-left: 24px; font-size: var(--t-3);
  color: var(--lp-halvany); line-height: 1.62;
}
.tb-lista li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--lime);
}

.tb-lepesek { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: lep; display: grid; gap: 14px; }
.tb-lepesek li { counter-increment: lep; position: relative; padding-left: 48px; }
.tb-lepesek li::before {
  content: counter(lep); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--lp-r);
  display: flex; align-items: center; justify-content: center;
  background: var(--lime-halk); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
}
.tb-lepesek b    { display: block; font-size: var(--t-3); margin-bottom: 5px; }
.tb-lepesek span { display: block; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.62; }

.tb-kiemelt {
  margin: 0 0 24px; padding: 18px 22px;
  border-left: 3px solid var(--lime);
  background: linear-gradient(90deg, var(--lime-halk), transparent 60%);
  font-size: var(--t-3); color: var(--lp-szoveg); line-height: 1.6;
}

.tb-idezet {
  margin: clamp(28px, 3.4vw, 40px) 0; padding: 0 0 0 26px;
  border-left: 2px solid var(--magenta);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500;
  font-size: clamp(19px, 1.05rem + 0.6vw, 24px); line-height: 1.45;
  color: var(--lp-szoveg); letter-spacing: -0.015em;
}

.tb-szamok {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); overflow: hidden; margin: 0 0 24px;
}
.tb-szamok > div { background: var(--lp-bg-3); padding: clamp(16px, 2vw, 22px); text-align: center; }
.tb-szamok b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(22px, 1.2rem + 1vw, 32px); color: var(--lime); line-height: 1.1; letter-spacing: -0.02em;
}
.tb-szamok span { display: block; margin-top: 6px; font-size: var(--t-1); color: var(--lp-halvany); line-height: 1.4; }

/* A másolható prompt-részlet: pont úgy néz ki, ahogy a generátorba kerül. */
.tb-prompt {
  margin: 0 0 24px; border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-3); overflow: hidden;
}
.tb-prompt figcaption {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-dim);
  padding: 9px 16px; border-bottom: 1px solid var(--lp-keret); background: rgba(var(--m-fekete-tiszta-rgb),0.24);
}
.tb-prompt code {
  display: block; padding: 16px; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-2); line-height: 1.75; color: var(--cyan);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ══ SZEMLÉLTETŐ ÁBRÁK A CIKKEKBEN (2026-09-29, `_tb-abrak.php`) ══
   Vonalrajz a szöveg színével, kiemelés lime-mal és magentával.
   JS nélkül teljes; keskenyen minden egymás alá kerül. */
.tb-abra { margin: clamp(22px, 3vw, 34px) 0; padding: clamp(16px, 2.2vw, 24px); border: 1px solid var(--lp-keret); border-radius: var(--lp-r); background: var(--lp-bg-3); }
.tb-abra figcaption { margin: 14px 0 0; font-size: var(--t-1); color: var(--lp-halvany); line-height: 1.5; }
.tb-abra svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-abra svg .t { fill: currentColor; fill-opacity: .16; }
.tb-abra code { font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); color: var(--cyan); overflow-wrap: anywhere; }
.tb-abra ol, .tb-abra ul { list-style: none; margin: 0; padding: 0; }
.tb-abra b span { color: var(--lp-dim); }
/* műanyag arc */
.tb-arc-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tb-arc { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px; border-radius: var(--lp-r); border: 1px solid var(--lp-keret); }
.tb-arc-rajz { width: min(120px, 60%); height: auto; }
.tb-arc--gep { color: var(--lp-dim); }
.tb-arc--gep b { color: var(--lp-halvany); }
.tb-arc--jo { color: var(--lime); border-color: var(--lime-el); background: linear-gradient(180deg, var(--lime-halk), transparent 70%); }
.tb-arc--jo b { color: var(--lp-szoveg); }
.tb-arc--jo .k { stroke: var(--magenta); }
.tb-arc--jo .h { stroke-width: 1.4; opacity: .8; }
.tb-arc--jo .p circle { fill: currentColor; stroke: none; }
.tb-arc b { margin: 10px 0 6px; font-size: var(--t-2); }
.tb-arc ul { display: grid; gap: 3px; font-size: var(--t-1); color: var(--lp-halvany); }
/* karakterlap */
.tb-sheet { display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; border: 2px solid var(--lime-el); border-radius: 3px; background: var(--lp-bg-2); }
.tb-sheet-resz { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px; color: var(--lime); }
.tb-sheet-resz + .tb-sheet-resz { border-left: 1px dashed var(--lp-keret-2); }
.tb-sheet-rajz { width: 100%; max-width: 170px; height: auto; margin-bottom: 8px; }
.tb-sheet-resz b { color: var(--lp-szoveg); font-size: var(--t-2); }
.tb-sheet-resz small { color: var(--lp-halvany); font-size: var(--t-0); }
/* ragaszkodás-skála */
.tb-skala { position: relative; height: 92px; margin: 6px 0 0; }
.tb-skala-sav { position: absolute; left: 0; right: 0; top: 10px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--lp-keret-2), var(--lp-halvany)); }
.tb-skala-jo { position: absolute; top: -4px; bottom: -4px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 0 3px var(--lime-halk); }
.tb-skala-pont { position: absolute; top: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }
.tb-skala-pont::before { content: ''; position: absolute; top: -24px; width: 2px; height: 16px; background: var(--lp-halvany); }
.tb-skala-pont b { font-family: 'JetBrains Mono', monospace; font-size: var(--t-2); color: var(--lp-szoveg); }
.tb-skala-pont small { font-size: var(--t-0); color: var(--lp-halvany); line-height: 1.35; }
.tb-skala-pont--jo b { color: var(--lime); }
/* a két szélső felirat a skála végéhez igazodik, különben kilóg a dobozból (mérve) */
.tb-skala-pont--bal { transform: none; align-items: flex-start; text-align: left; }
.tb-skala-pont--bal::before { left: 0; }
.tb-skala-pont--jobb { transform: translateX(-100%); align-items: flex-end; text-align: right; }
.tb-skala-pont--jobb::before { right: 0; }
/* kamera hat dimenziója */
.tb-hat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tb-hat li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: var(--lp-r); border: 1px solid var(--lp-keret); color: var(--lime); }
.tb-hat .esz-abra { width: 44px; height: 44px; }
.tb-hat b { color: var(--lp-szoveg); font-size: var(--t-2); }
/* tiltólista */
.tb-tilt { display: grid; grid-template-columns: minmax(0, 3fr) auto minmax(0, 1.3fr); gap: 12px; align-items: stretch; }
.tb-szoveg .tb-tilt p { margin: 0 0 10px; font-size: var(--t-0); font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.tb-tilt-alap, .tb-tilt-jelenet { padding: 14px; border-radius: var(--lp-r); }
.tb-tilt-alap { border: 1px solid var(--lime-el); }
.tb-szoveg .tb-tilt-alap p { color: var(--lime); }
.tb-tilt-jelenet { border: 1px solid var(--magenta); background: linear-gradient(180deg, var(--magenta-halk), transparent 80%); }
.tb-szoveg .tb-tilt-jelenet p { color: var(--magenta); }
.tb-tilt ol { display: grid; gap: 8px; }
.tb-tilt li { display: grid; gap: 2px; }
.tb-tilt b { font-size: var(--t-2); color: var(--lp-szoveg); }
.tb-tilt-plusz { align-self: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 28px; color: var(--lp-halvany); }
/* rövid videó íve */
.tb-iv-rajz { display: block; width: 100%; height: auto; }
.tb-iv-rajz .tb-iv-alap { stroke: var(--lp-keret-2); stroke-width: 1; }
.tb-iv-rajz .tb-iv-gorbe { stroke: var(--lime); stroke-width: 3; }
.tb-iv-sav { display: flex; gap: 3px; margin-top: 6px; }
.tb-iv-szak { flex-basis: 0; min-width: 0; padding: 8px 10px; border-radius: 3px; display: flex; flex-direction: column; gap: 1px; }
.tb-iv-szak b { font-size: var(--t-2); color: var(--lp-szoveg); }
.tb-iv-szak small { font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); color: var(--lp-halvany); }
.tb-iv--horog { background: var(--magenta-halk); box-shadow: inset 0 3px 0 var(--magenta); }
.tb-iv--eszk { background: linear-gradient(90deg, var(--lp-bg-2), var(--lime-halk)); box-shadow: inset 0 3px 0 var(--lp-keret-2); }
.tb-iv--fel { background: var(--lime-halk); box-shadow: inset 0 3px 0 var(--lime); }
/* fénypult (2026-10-04): felülnézet + kamera képe + négy választósor + kész promptsor */
.tb-pult-kepek { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(12px, 2.4vw, 24px); align-items: end; }
.tb-pult-kepek > div { display: grid; gap: 8px; justify-items: center; min-width: 0; }
.tb-pult-kepek b { justify-self: start; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-dim); }
.tb-pult-felul { display: block; width: 100%; max-width: 280px; height: auto; color: var(--lp-halvany); }
.tb-pult-arc { display: block; width: 100%; max-width: 210px; height: auto; border-radius: var(--lp-r); }
.tb-pult-felul .fov { stroke: var(--lp-keret-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.tb-pult-felul .ray { stroke: var(--lime); stroke-dasharray: 6 5; }
.tb-pult-felul .kamera { stroke: var(--magenta); }
.tb-pult-felul .alany { color: var(--lp-szoveg); }
.tb-pult-felul .arnyek { stroke: none; fill-opacity: .75; }
.tb-pult-felul .lampa { stroke: var(--lp-bg); stroke-width: 3; }
.tb-pult-arc .fej { fill: url(#tbp-arc); stroke: none; }
.tb-pult-arc .test { fill: url(#tbp-vall); stroke: none; }
.tb-pult-arc .perem { fill: none; stroke-width: 3.5; }
.tb-pult-arc .vonas { fill: none; stroke: var(--m-fekete-tiszta); stroke-opacity: .28; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb-pult-valaszto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: clamp(16px, 2.4vw, 24px) 0 0; }
.tb-pult fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.tb-pult legend { padding: 0; margin: 0 0 8px; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-halvany); }
.tb-pult fieldset > div { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-pult label { position: relative; cursor: pointer; }
.tb-pult input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tb-pult label span { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r); font-size: var(--t-1); color: var(--lp-szoveg); background: var(--lp-bg-2); }
.tb-pult label:hover span { border-color: var(--lime-el); }
.tb-pult input:checked + span { background: var(--lime); border-color: var(--lime); color: var(--lime-sotet); font-weight: 600; }
.tb-pult input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.tb-pult-ki { margin: clamp(16px, 2.4vw, 24px) 0 0; display: grid; gap: 10px; }
.tb-pult-hatas { margin: 0; font-size: var(--t-1); color: var(--lp-halvany); line-height: 1.5; }
.tb-pult-sor { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--lime-el); border-radius: var(--lp-r); background: var(--lp-bg); }
.tb-pult .tb-pult-sor code { padding: 14px 16px; font-size: var(--t-1); line-height: 1.6; }
.tb-pult-masol { min-width: 96px; min-height: 44px; border: 0; border-left: 1px solid var(--lime-el); border-radius: 0 var(--lp-r) var(--lp-r) 0; background: var(--lime-halk); color: var(--lime); font: 600 var(--t-1) 'JetBrains Mono', monospace; cursor: pointer; }
.tb-pult-masol:hover { background: var(--lime); color: var(--lime-sotet); }
.tb-pult-masol:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .tb-pult-felul .lampa, .tb-pult-felul .arnyek, .tb-pult-arc rect { transition: cx .35s ease, cy .35s ease, rx .35s ease, fill .35s ease; }
}
@media (max-width: 640px) {
  .tb-pult-valaszto { grid-template-columns: minmax(0, 1fr); }
  .tb-pult-sor { grid-template-columns: minmax(0, 1fr); }
  .tb-pult-masol { border-left: 0; border-top: 1px solid var(--lime-el); border-radius: 0 0 var(--lp-r) var(--lp-r); }
  .tb-arc-par, .tb-sheet, .tb-tilt { grid-template-columns: minmax(0, 1fr); }
  .tb-sheet-resz + .tb-sheet-resz { border-left: 0; border-top: 1px dashed var(--lp-keret-2); }
  .tb-hat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-tilt-plusz { justify-self: center; }
  .tb-skala { height: auto; margin: 6px 0 0; display: grid; gap: 10px; padding-top: 30px; }
  .tb-skala-pont { position: static; transform: none; width: auto; flex-direction: row; gap: 10px; text-align: left; }
  .tb-skala-pont::before { display: none; }
  .tb-iv-szak { padding: 6px; }
  .tb-iv-szak b { font-size: var(--t-1); }
}

.tb-tabla-doboz { margin: 0 0 26px; }
.tb-tabla { min-width: 460px; }
.tb-tabla th[scope="row"] { min-width: 160px; }
/* 2026-11-11: telefonon nincs oldalra görgetés, minden sor egy kártya (a cella előtt az oszlop neve). */
@media (max-width: 640px) {
  .tb-tabla-doboz { overflow: visible; border: 0; background: none; }
  .tb-tabla, .tb-tabla tbody, .tb-tabla tr, .tb-tabla th, .tb-tabla td { display: block; min-width: 0; width: auto; }
  .tb-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tb-tabla tr { border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); background: var(--lp-kartya); margin: 0 0 12px; }
  .tb-tabla th[scope="row"] { min-width: 0; color: var(--lp-szoveg, inherit); font-weight: 600; }
  .tb-tabla th, .tb-tabla td { text-align: left; padding: 10px 14px; }
  .tb-tabla [data-c]::before { content: attr(data-c); display: block; font-size: var(--t-1); color: var(--lp-halvany); letter-spacing: .04em; margin-bottom: 2px; }
  .tb-tabla [data-c=""]::before { display: none; }
  .tb-tabla th[scope="row"]::before { font-weight: 400; }
  .tb-tabla tbody tr:last-child td { border-bottom: 0; }
  .tb-tabla tr td:last-child { border-bottom: 0; }
}

.tb-tovabbiak { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--lp-keret); }
.tb-tovabbiak h2 { font-size: var(--t-5); margin: 0 0 18px; max-width: none; }

/* ══════════════════════════════════════════════════════════
   VÁRÓLISTA — a skill-csomag főoldala (2026-09-27).
   A doboz a belépő képernyő `lp-auth-doboz`-át használja, hogy a
   kirakat és a belépés ugyanabból a vetítőteremből álljon.
   ══════════════════════════════════════════════════════════ */
.vl-cim { font-size: clamp(26px, 1.4rem + 1.2vw, 38px); max-width: none; }
.vl-doboz .lp-btn { width: 100%; }
.lp-zaro .vl-doboz { max-width: 560px; margin: 0 auto; }
.vl-pipak { margin-top: 8px; }
#varolista { scroll-margin-top: calc(var(--lp-fej) + 16px); }

/* A hozzájárulás pipája: a doboz a teljes sort fogja, így telefonon is
   44 px fölötti a koppintási felület. */
.vl-pipa {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  margin: 2px 0 18px; padding: 10px 0; min-height: 44px;
  font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.5;
}
.vl-pipa input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--lime); cursor: pointer;
}
.vl-pipa a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

.vl-kesz {
  display: grid; gap: 6px; padding: 18px 20px;
  background: linear-gradient(100deg, var(--lime-halk), transparent 75%);
  border-left: 3px solid var(--lime); border-radius: 0 var(--lp-r-lg) var(--lp-r-lg) 0;
}
.vl-kesz[hidden] { display: none; }
.vl-kesz b { color: var(--lp-szoveg); font-size: var(--t-3); }
.vl-kesz span { color: var(--lp-halvany); font-size: var(--t-2); }

.vl-lap .lp-fazis h3 { margin-bottom: 4px; }

/* 🔴 KESKENY TELEFONON LELÓGOTT A MENÜGOMB (mérve 375 px-en: a jobb széle
   387 px-en állt, 12 px-szel a képernyőn túl). A logó, a nyelvváltó, a fő
   gomb és a menü együtt szélesebb volt, mint a sáv. Itt húzzuk össze, nem
   rejtünk el semmit: mind a négy kell. */
@media (max-width: 420px) {
  .lp-sav { gap: 8px; }
  .lp-fej-jobb { gap: 6px; }
  /* 2026-09-30, a user: „mobilon kicsi” — 19 px-en eltörpült a gombok mellett.
     24 px (mint tableten): 360 px-en is 45 px hely marad a gombokig (mérve). */
  .lp-logo { font-size: 24px; }
  .lp-fej .lp-btn { padding: 11px 13px; }
}
/* 2026-09-30, mérve: 320 px-en a 24 px-es logóval a fejléc 24 px-szel kilógott
   (a lap 344 px széles lett). A legkeskenyebb telefonon a logó 20 px, a gomb szűkebb. */
@media (max-width: 345px) {
  .lp-sav { gap: 6px; }
  .lp-fej-jobb { gap: 4px; }
  .lp-logo { font-size: 19px; }
  .lp-fej .lp-btn { padding: 11px 8px; }
}

/* „Amit érdemes tudnod előre": két kártya egymás mellett, nem három. */
@media (min-width: 640px) { .vl-ketto { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ════════════════════════════════════════════════════════════
   SÜTI-SÁV (2026-09-28)
   Alul, a tartalom fölött lebegve, de nem takarja el az egész képernyőt.
   A két gomb egyforma súlyú: a „nem” ugyanolyan könnyű, mint az „igen”
   (a hozzájárulás csak így önkéntes).
   ════════════════════════════════════════════════════════════ */
.wlai-suti {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90;
  width: min(760px, calc(100% - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 18px; background: var(--lp-kartya); color: var(--lp-szoveg);
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  box-shadow: 0 18px 50px rgba(var(--m-fekete-tiszta-rgb),.55);
}
.wlai-suti p { flex: 1 1 320px; margin: 0; font-size: var(--t-2); line-height: 1.55; color: var(--lp-halvany); }
.wlai-suti a { color: var(--lp-szoveg); }
.wlai-suti form { display: flex; flex-wrap: wrap; gap: 8px; }
.wlai-suti button {
  min-height: 44px; padding: 0 18px; font: inherit; font-weight: 600; font-size: var(--t-2);
  border-radius: var(--lp-r); cursor: pointer;
}
/* 10-05 (a user: „csináld”): a két gomb PONTOSAN egyforma, az ICO egyenlő súlyt vár. */
.wlai-suti-igen, .wlai-suti-nem { background: var(--lime); color: var(--lime-sotet); border: 1px solid var(--lime); }
.wlai-suti button:hover { filter: brightness(1.08); }
.wlai-suti button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 480px) {
  .wlai-suti form, .wlai-suti button { flex: 1 1 100%; }
}

/* A láblécben: gombként működik, linkként néz ki. */
.lp-lab-suti { margin: 0; }
.lp-lab-suti button {
  padding: 0; background: none; border: 0; font: inherit;
  cursor: pointer; text-align: left;
  /* 2026-10-06: betűméret és szín, mint a lábléc többi linkjén (eddig nagyobb és világosabb volt). */
  color: var(--lp-halvany); font-size: var(--t-2);
}
.lp-lab-suti button:hover { color: var(--lime); }

/* ════════════════════════════════════════════════════════════
   VÁSÁRLÁS — a skill-csomag megrendelése (2026-09-28).
   Ugyanaz a doboz, mint a várólistáé (`lp-auth-doboz`). A két ár
   egy-egy választókártya: JS nélkül is működik, a kiválasztottat a
   `:has(:checked)` emeli ki.
   ════════════════════════════════════════════════════════════ */
.vs-doboz .lp-btn { width: 100%; }
.vs-rejtett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-ciklusok { display: grid; gap: 10px; margin: 18px 0 12px; padding: 0; border: 0; min-width: 0; }
.vs-ciklus {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px; cursor: pointer;
  background: rgba(var(--m-fekete-tiszta-rgb),0.28); border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  transition: border-color .15s ease, background .15s ease;
}
.vs-ciklus:hover { border-color: var(--lime-el); }
.vs-ciklus:has(input:checked) { border-color: var(--lime); background: var(--lime-halk); }
.vs-ciklus input { width: 20px; height: 20px; margin: 0; accent-color: var(--lime); cursor: pointer; }
.vs-ciklus:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vs-ciklus-nev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; color: var(--lp-szoveg); font-size: var(--t-3); }
.vs-jel {
  font-style: normal; font-size: var(--t-1); font-weight: 700; color: var(--lime-sotet);
  background: var(--lime); border-radius: var(--lp-r); padding: 2px 8px; white-space: nowrap;
}
.vs-ar { color: var(--lp-halvany); font-size: var(--t-2); white-space: nowrap; text-align: right; }
.vs-ar b { color: var(--lp-szoveg); font-size: var(--t-4); font-weight: 700; }
/* 2026-10-08: nyitási akció alatt a teljes díj a mai ár alatt. */
.vs-ar-utana { display: block; font-size: var(--t-1); color: var(--lp-dim); }
.vs-penznemek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; font-size: var(--t-2); color: var(--lp-dim); }
.vs-penznemek span { margin-right: 4px; }
.vs-penznemek a, .vs-penznemek b {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 8px;
  border-radius: var(--lp-r); font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
}
.vs-penznemek a { color: var(--lp-halvany); text-decoration: none; }
.vs-penznemek a:hover { color: var(--lp-szoveg); background: rgba(var(--m-feher-rgb),0.05); }
.vs-penznemek b { color: var(--lime); background: var(--lime-halk); font-weight: 600; }
.vs-apro { margin: 16px 0 0; font-size: var(--t-1); color: var(--lp-dim); line-height: 1.55; }
.vs-apro a { color: var(--lp-halvany); text-decoration: underline; text-underline-offset: 3px; }
.vs-koszi { max-width: 560px; margin: 0 auto; text-align: left; }
/* Bizalmi sor a fizetés gomb alatt (2026-10-05). Négy elem: 2×2 vagy 1 oszlop,
   a doboz SAJÁT szélessége dönt (konténer-lekérdezés), így tört sor nincs. */
.vs-doboz { container-type: inline-size; }
.vs-bizalom { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--lp-keret-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.vs-bizalom li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.vs-bizalom .i { width: 20px; height: 20px; margin-top: 1px; color: var(--lime); }
.vs-bizalom span { display: grid; gap: 2px; min-width: 0; font-size: var(--t-1); color: var(--lp-halvany); line-height: 1.45; overflow-wrap: anywhere; }
.vs-bizalom b { color: var(--lp-szoveg); font-size: var(--t-2); font-weight: 600; }
@container (min-width: 400px) {
  .vs-bizalom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
}
/* A „Mit kapsz a pénzedért” kártyái (2026-10-05, három csomag). */
.vs-csomag { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vs-csomag--ajanlott { border-color: var(--lime); }
.vs-csomag h3 { margin: 0; }
.vs-csomag-ar { margin: 0; color: var(--lp-halvany); font-size: var(--t-2); }
.vs-csomag-ar b { color: var(--lp-szoveg); font-size: var(--t-5, 1.6rem); font-weight: 700; }
.vs-csomag-ar span { display: block; font-size: var(--t-1); color: var(--lp-dim); }
.vs-csomag-lista { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; flex: 1 1 auto; }
.vs-csomag-lista li { position: relative; padding-left: 24px; font-size: var(--t-2); color: var(--lp-szoveg); line-height: 1.45; overflow-wrap: anywhere; }
.vs-csomag-lista li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lime); font-weight: 700; }
.vs-csomag-lista li b { display: block; font-weight: 600; color: var(--lp-halvany); font-size: var(--t-1); }
.vs-csomag-lista li.vs-nincs { color: var(--lp-dim); text-decoration: line-through; text-decoration-color: var(--lp-keret-2); }
.vs-csomag-lista li.vs-nincs::before { content: "–"; color: var(--lp-dim); }
.vs-csomag .lp-btn, .vs-csomag .lp-btn2 { width: 100%; white-space: normal; text-align: center; }
/* „Hamarosan” (2026-10-06): a még nem kapható csomag lakattal, nem választható. */
.vs-jel--hamar { display: inline-flex; align-items: center; gap: 4px; color: var(--lp-szoveg); background: rgba(var(--m-feher-rgb),0.08); border: 1px solid var(--lp-keret-2); vertical-align: middle; }
.vs-jel--hamar .i { width: 14px; height: 14px; }
.vs-ciklus--zar { cursor: not-allowed; opacity: .62; }
.vs-ciklus--zar:hover { border-color: var(--lp-keret-2); }
.vs-ciklus--zar input { cursor: not-allowed; }
.vs-csomag--zar .vs-csomag-ar, .vs-csomag--zar .vs-csomag-lista { opacity: .6; }
.vs-hamar { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px dashed var(--lp-keret-2); border-radius: var(--lp-r); font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.45; }
.vs-hamar .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--lime); }
/* Nyitási akció (2026-10-08): lime sáv fekete tintával a vásárlási lap tetején. */
.vs-akcio { position: relative; z-index: 3; margin: 0; padding: 12px 16px; background: var(--lime); color: var(--lime-sotet); text-align: center; font-size: var(--t-3); line-height: 1.4; overflow-wrap: anywhere; }
.vs-akcio b { font-weight: 800; }
.vs-koszi a { color: var(--lime); }
/* Főoldal, nyitott bolt (2026-09-28): az ár-doboz a várólista helyén. */
.ar-sorok { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 10px; }
.ar-sorok li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 14px 16px; border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  color: var(--lp-szoveg); font-size: var(--t-3); font-weight: 600;
}
.ar-sorok li span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ar-sorok b { font-size: var(--t-4); white-space: nowrap; }
.ar-sorok li.ar-zar > span { opacity: .6; }
.ar-sorok .ar-akcio { font-size: var(--t-1); font-weight: 400; color: var(--lp-halvany); }
/* 2026-10-06: a három csomagkártya 2+1 helyett egy oszlopban, amíg nem fér ki egy sorba. */
@media (min-width: 640px) and (max-width: 979.98px) { .lp-racs-3.vs-csomag-racs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
.ar-doboz .lp-btn { width: 100%; }
.lp-zaro .ar-doboz { max-width: 460px; margin: 0 auto; }
/* Letöltő lap (2026-09-28): licencszám + két nyelvű letöltés. */
.lt-licenc { max-width: 560px; margin: 0 auto 22px; text-align: left; }
.lt-licenc b { overflow-wrap: anywhere; }
.lt-gombok { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lt-gombok form { margin: 0; }
/* A két nyelv egyenrangú: lime + a márka másik színe, a magenta.
   Sötét szöveg: fehérrel a magenta 3,4:1 (AA alatt), sötéttel 5,5:1. */
.lp-btn.lt-magenta {
  background: var(--magenta); border-color: var(--magenta); color: var(--lime-sotet);
  box-shadow: 0 8px 26px -12px rgba(var(--m-magenta-rgb),0.7);
}
.lp-btn.lt-magenta:hover {
  background: var(--m-magenta-vilagos);
  box-shadow: 0 0 34px -6px rgba(var(--m-magenta-rgb),0.55), 0 10px 30px -12px rgba(var(--m-magenta-rgb),0.8);
}
.lp-btn.lt-magenta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 520px) {
  .lt-gombok { flex-direction: column; align-items: stretch; }
  .lt-gombok .lp-btn { width: 100%; white-space: normal; }
}
@media (max-width: 420px) {
  .vs-ciklus { grid-template-columns: auto minmax(0, 1fr); }
  .vs-ar { grid-column: 2; text-align: left; }
}

/* Claude-konnektor (2026-09-28): az engedélyező lap és a Fiókom kártyája. */
.kn-lista { margin: 0 0 16px; padding-left: 1.2em; display: grid; gap: 6px; color: var(--lp-szoveg); }
.kn-megse { width: 100%; margin-top: 10px; min-height: 44px; }
.kn-figy {
  margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--lime); border-left-width: 4px; border-radius: var(--lp-r);
  color: var(--lp-szoveg); font-size: var(--t-2); line-height: 1.5;
}
.kn-figy b { display: block; color: var(--lime); margin-bottom: 2px; }
.lp-auth-doboz .vs-apro, .lp-auth-doboz .lp-alcim { overflow-wrap: anywhere; }
.kn-masik { margin: 6px 0 0; text-align: center; }
.kn-masik button {
  background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer;
  color: var(--lp-halvany); font: inherit; font-size: var(--t-2); text-decoration: underline; text-underline-offset: 3px;
}
.kn-masik button:hover { color: var(--lime); }

/* Így készül a videó (2026-10-06, vásárlási lap): a „külön kell” lista pluszjellel, nem áthúzva. */
.vs-kulon li::before { content: "+"; color: var(--lp-halvany); }
.vs-kulon li b { color: var(--lp-szoveg); font-size: inherit; margin-bottom: 2px; }
.vs-video-racs .lp-kartya h3 { margin-bottom: 12px; }
.vs-video-alcim { margin: clamp(28px, 4vw, 44px) 0 14px; }
.kn-figy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lp-auth-lista li a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* A hőscím egy szókapcsolata nem törhet ketté (2026-09-28: a „Claude-ban”
   a kötőjelnél tört). 480 px alatt törhet, ott a képernyő a határ. */
@media (min-width: 480px) { .lp-egyben { white-space: nowrap; } }

/* ── NAGYON NAGY KIJELZŐN ARÁNYOSAN (2026-09-29, a user kérése) ──
   2200 px fölött az egész lap arányosan nő, így 2560-on is úgy néz ki,
   mint 1920-on. Ugyanez a belső lapokon: `belso-arculat.css`. */
/* 🔴 A nagyítás a `vh`-t is felszorozza (2026-10-05: a belépő lap alja kilógott):
   képernyőmagasságot mindig így írj: `calc(100vh / var(--z, 1))`. */
/* 2026-11-11, a user: nagy monitoron a nagyítás KI („mintha rossz felbontás”). A `--z` marad 1, a `calc(100vh / var(--z, 1))` alak így is jó. */

/* ══ „Így készül a videó” a tudásbázisban (2026-10-06) ══
   A listában az „Első lépések” cikk széles kártya „Kezdd itt” jellel; a cikkben a négy lépés ábrája:
   lime = ezt adja a weblockai, magenta = külön előfizetés. */
.tb-racs > .tb-kartya--kezd { grid-column: 1 / -1; border-color: var(--m-magenta); background: linear-gradient(135deg, rgba(var(--m-magenta-rgb),.10), transparent 60%), var(--lp-kartya); }
.tb-kartya--kezd h2 { font-size: var(--t-5, var(--t-4)); }
.tb-kartya--kezd .tb-fej { justify-content: flex-start; flex-wrap: wrap; }
.tb-kartya--kezd .tb-perc { margin-left: auto; }
.tb-kezd-jel { font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--m-magenta); color: var(--m-fekete); padding: 4px 9px; border-radius: 4px; }
.tb-ut { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: none; }
@media (min-width: 640px) { .tb-ut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tb-ut { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tb-ut li { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--lp-r); border: 1px solid var(--lp-keret); }
.tb-ut-szam { font-family: 'Anton', 'Inter', sans-serif; font-size: 30px; line-height: 1; color: var(--lp-dim); }
.tb-ut li b { color: var(--lp-szoveg); font-size: var(--t-2); }
.tb-ut li em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .06em; text-transform: uppercase; }
.tb-ut li small { color: var(--lp-halvany); font-size: var(--t-1); line-height: 1.45; }
.tb-ut--wl { border-color: var(--lime-el); }
.tb-ut--wl .tb-ut-szam, .tb-ut--wl em { color: var(--lime); }
.tb-ut--gen { border-color: var(--m-magenta); }
.tb-ut--gen .tb-ut-szam, .tb-ut--gen em { color: var(--m-magenta); }
.tb-ut--te em { color: var(--lp-halvany); }
.tb-szoveg .tb-ut-jel, .tb-ut-jel { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: var(--t-1); color: var(--lp-halvany); }
.tb-ut-jel span { display: inline-flex; align-items: center; gap: 8px; }
.tb-ut-jel span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.tb-ut-jel--wl::before { background: var(--lime); }
.tb-ut-jel--gen::before { background: var(--m-magenta); }
.vs-video-tovabb { margin: clamp(18px, 2.4vw, 26px) 0 0; }
.vs-video-tovabb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lime); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 2026-10-06: szövegközi link és a Források blokk a tudásbázis-cikkekben. */
.tb-szoveg p a, .tb-szoveg li a, .tb-szoveg td a, .tb-szoveg th a, .tb-kiemelt a, .tb-idezet a, .tb-lepesek span a {
  color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tb-szoveg p a:hover, .tb-szoveg li a:hover, .tb-szoveg td a:hover, .tb-kiemelt a:hover, .tb-lepesek span a:hover { text-decoration-thickness: 2px; }
.tb-forrasok { margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--lp-keret); }
.tb-szoveg .tb-forrasok h2 { font-size: var(--t-4); margin: 0 0 14px; }
.tb-forrasok ol { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: var(--t-1); color: var(--lp-halvany); }
.tb-forrasok li { overflow-wrap: anywhere; }
.tb-forrasok li a { display: inline-block; padding: 6px 0; min-height: 24px; }

/* ── arculat.css ── */
/* ══ MÁRKASZÍNEK — KÖZÖS TOKENEK (2026-10-24, a user: „Ha még nincs tokenizálva a rendszer, akkor tedd meg.”) ══
   Minden ismétlődő szín innen jön; ez a fájl minden lapon betölt (nyilvános és belső).
   Egy szín átírása itt az egész rendszeren átvezeti. A témafüggő jelentéseket (--bg, --text, --accent…)
   továbbra is a design.css / arculat-a.css adja; ezek a nyers márkaszínek, témától függetlenül. */
:root {
  --m-lime: #c9ff35;     /* a márka lime-ja */
  --m-lime-vilagos: #d8ff6b; /* lime hover */
  --m-lime-sotet: #9dcf35; /* lime árnyék / szegély */
  --m-fekete: #0f1113;   /* az A arculat fekete alapja */
  --m-fekete-mely: #0a0a0a; /* világos téma fekete tintája */
  --m-fekete-tiszta: #000; /* tiszta fekete */
  --m-tinta: #0a0f16;    /* betű lime felületen */
  --m-feher: #fff;       /* fehér */
  --m-feher-tort: #f3f5f8; /* törtfehér szöveg sötéten */
  --m-szurke-felulet: #202327; /* sötét hover-felület */
  --m-szurke-hover: #1a1d24; /* sötét sáv hover */
  --m-szurke-halk: #a3acb8; /* halk menüszöveg */
  --m-pala: #94a3b8;     /* palaszürke */
  --m-magenta: #fb23c2;  /* a márka magentája */
  --m-magenta-kozep: #d81ba6; /* magenta hover */
  --m-magenta-mely: #c4128f; /* mély magenta */
  --m-magenta-gomb: #b0107f; /* magenta gomb (fehér betűvel AA) */
  --m-magenta-sotet: #8c0c65; /* magenta gomb hover */
  --m-navy-kartya: #0d2137; /* a régi navy kártya */
  --m-piros-halvany: #fca5a5; /* hibaszöveg sötéten */
  --m-piros-halo: #fecaca; /* hiba-háttér */
  --m-borostyan: #f0a020; /* figyelmeztetés */
  --m-zold-mely: #0f7a5f; /* mély zöld (siker) */

  /* 2026-11-09, teljes tokenizálás (a user: „menjen a teljes tokenizálás”): a lapok saját stílusaiban
     beégetett színek is innen jönnek. A szinte azonos árnyalatok (szemmel megkülönböztethetetlenek) egy tokenre
     kerültek. Kivétel szándékosan: levelek, QR-kód, zászlók, a rajzolt előnézetek és a haj/szem/bőr színmintái. */
  --m-sotet-sav: #131518;      /* sötét sáv, mélyebb háttér */
  --m-sotet-doboz: #17191d;    /* sötét doboz (kártya) */
  --m-sotet-aktiv: #272a30;    /* kijelölt fül / gomb sötéten */
  --m-sotet-vonal: #2d333f;    /* vonal sötéten */
  --m-sotet-vonal-2: #3a4048;  /* erősebb vonal sötéten */
  --m-szurke-kozep: #7c8591;   /* középszürke (kikapcsolt jel, felirat) */
  --m-szurke-sotet: #55585e;   /* halk szöveg világos alapon */
  --m-szurke-csendes: #b3bcc7; /* csendes szöveg sötéten */
  --m-szurke-vilagos: #d5dbe3; /* világos szöveg sötéten */
  --m-vilagos-alap: #f4f5ef;   /* világos téma alapja */
  --m-vilagos-sav: #ebebe5;    /* világos sáv */
  --m-vilagos-vonal: #d9d9d2;  /* vonal világosban */
  --m-lime-ink: #3d5c08;       /* lime szöveg világos alapon */
  --m-lime-kozep: #8ab926;     /* középlime (sáv, gradiens) */
  --m-lime-eros: #9fe000;      /* lime gradiens vége */
  --m-lime-mely: #1d2510;      /* lime-ba hajló sötét alap */
  --m-lime-vonal: #3c4a1c;     /* lime-os vonal sötéten */
  --m-lime-vonal-2: #5b6b33;   /* lime-os vonal, rámutatás */
  --m-lime-halo: #eef8d6;      /* halvány lime alap világosban */
  --m-magenta-vilagos: #ff4fd0; /* világos magenta (hover, szöveg sötéten) */
  --m-magenta-halvany: #ff8ad8; /* halvány magenta hibaszöveg sötéten */
  --m-piros: #e5484d;          /* piros jel */
  --m-piros-vilagos: #ff6b6f;  /* piros szöveg sötéten */
  --m-piros-mely: #b3261e;     /* piros gomb, szöveg világosban */
  --m-piros-sotet: #8f1e17;    /* piros gomb hover */
  --m-borostyan-mely: #b3730a; /* borostyán szöveg világosban */
  --m-borostyan-sotet: #7d5400; /* borostyán gomb */
  --m-cian: #38bdf8;           /* cián jel */
  --m-kek: #4f8cff;            /* kék jel */
  --m-lila: #9b6bff;           /* lila jel */

  /* A gyakori átlátszó változatokhoz: rgba(var(--m-lime-rgb), .35) */
  --m-lime-rgb: 201,255,53;
  --m-magenta-rgb: 251,35,194;
  --m-feher-rgb: 255,255,255;
  --m-fekete-rgb: 15,17,19;
  --m-fekete-tiszta-rgb: 0,0,0;
}

/* ============================================================
   BETŰ-SKÁLA — A PROJEKT EGYETLEN MÉRETRENDJE (2026-09-19)

   🔬 MÉRVE, mielőtt kitaláltam volna: a két stíluslapban
   497 helyre volt BEÉGETVE a betűméret, változó nélkül —
   a műhelyben 336, a nyilvános oldalon 161. Nyolcféle méret
   szorongott 9,5 és 14 pixel között. Ezért nem volt rend, és
   ezért nem mozdult semmi, amikor a `--fs-body` tokent
   állítottam: a komponensek nem abból dolgoztak.

   Ez a hét lépcső a MOSTANI értékekből nőtt ki, sávosan és
   FELFELÉ kerekítve, mert a panasz az volt, hogy apró és
   olvashatatlan. A régi értékek sávjai:
       9,5 - 11,5  →  t-0
       12  - 13    →  t-1
       13,5 - 15   →  t-2
       15,5 - 17   →  t-3
       18  - 20    →  t-4
       21  - 26    →  t-5
       27 +        →  t-6
   ============================================================ */
:root{
  --t-0: 11.5px;   /* mono címkék, jelvények */
  --t-1: 13px;     /* meta, lábjegyzet */
  --t-2: 15px;     /* másodlagos szöveg */
  --t-3: 16.5px;   /* szövegtörzs */
  --t-4: 19px;     /* kártyacím */
  --t-5: 24px;     /* szakaszcím */
  --t-6: 32px;     /* lapcím */
}

/* ============================================================
   weblockai — ARCULAT-RÉTEG (2026-09-19)

   Mit csinál: a két meglévő stíluslap (landing.css a nyilvános
   oldalakon, design.css a műhelyben) FÖLÉ ül, és csak azt javítja,
   ami mérve hibás volt. A színvilág marad: sötét alap, lime,
   magenta, cián.

   🔴 MIÉRT KELLETT (mérve 2026-09-19, az ÉLŐ oldalon):
   1. A főcím sorköze 1,08-szoros volt (31 px betű, 33,48 px sor).
      Ekkora betűnél a sorok fizikailag összeérnek — a user szava:
      „egymáson vannak a karakterek". Itt 1,18-ra állítjuk, és a
      -0,025em betűtávolságot is lazítjuk, mert az is összetolja.
   2. A `--lp-dim` (#6c7f96) a kártyán 4,45:1 kontrasztot adott, a
      4,5-ös minimum ALATT. A user szava: „halványak". Az új érték
      (#aebfd2) ugyanaz a hideg kékesszürke, de 9,7:1 a kártyán.
   3. A sarkok 4 px-esek voltak. A user szava: „túl szögletes".
      10, 14 és 18 px-re nyitva. Pirula (999 px) továbbra sincs.

   ⚠️ Az `!important` itt SZÁNDÉKOS és ideiglenes: a két meglévő
   stíluslap együtt 500 KB, és a javításnak azok szabályai fölött
   kell nyernie. Ahogy egy lap átáll az új arculatra, az adott
   szabály innen kikerül.
   ============================================================ */

:root{
  /* ── lágyabb geometria, mindkét stíluslapnak ── */
  --lp-r:    10px;
  --lp-r-lg: 14px;
  --lp-r-xl: 18px;
  /* 🔑 2026-09-29, a user jóváhagyásával: a Műhely sarkai a szabály szerint
     (kis elem max 4 px, kártya 8, nagy panel 10). Eddig 10/14/18 volt.
     A nyilvános oldalak a `--lp-r*` változókat használják, azokat ez nem érinti. */
  --r:       4px;
  --r-lg:    8px;
  --r-xl:    10px;

  /* ── olvasható másodlagos szürke a sötét oldalon ──
     régi: #6c7f96 (4,45 a kártyán, BUKIK) · új: 9,7 a kártyán */
  --lp-dim: #aebfd2;

  /* ── a magenta szerepe: jelzés, nem felirat-háttér ──
     fehér szöveg magentán 3,43 = bukás, ezért a jelvényekre
     sötét felirat jár. */
  --magenta-ink: #0f1113;
}

/* ══ TIPOGRÁFIA — a sorok ne érjenek össze ══ */
h1, h2, h3{
  line-height: 1.18 !important;
  letter-spacing: -0.012em !important;
}
h2, h3{
  line-height: 1.28 !important;
}

/* nagyon nagy címnél még több levegő kell */
@media (min-width: 900px){
  h1{ line-height: 1.16 !important; }
}

/* ══ SZÖVEGTÖRZS — a nyilvános oldalon ══ */
body.lp, .lp-szoveg{
  line-height: 1.7;
}

/* ══ A KIEMELÉS FÉNYCSÍKJA ══
   Mérve 2026-09-19, 375 px szélességen: a csík `bottom: 0.08em`-en ült,
   ami pontosan a lelógó betűk sávja. A magyar szövegben ez folyton
   előjön („végigvezetjük", „gyorsan", „így"), és átvágja a betűt.
   Lejjebb visszük a sorköz aljára, és picit erősítjük, mert távolabbról
   halványabbnak látszana. */
.lp-kiemel::after{
  bottom: -0.14em !important;
  height: 0.075em !important;
  opacity: .5 !important;
}

/* ══ MAGENTA JELVÉNY — sötét felirattal, mérve 5,9 ══ */

/* ══ FÓKUSZ — billentyűzettel is látszódjon ══ */
:focus-visible{
  outline: 2px solid var(--lime, var(--m-lime));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ============================================================
   NYITÓLAP — LEVEGŐ ÉS REND (2026-09-19)

   A user: „nem átláthatóak az oldalak és a tartalom".
   Mérve, mi okozta: a nyitó képernyőn HAT elem áll egymás alatt
   (címke, cím, cédula, alcím, nyitva-sáv, nyíl), és mobilon a hat
   lépés közt csak 20-34 px hely van. Asztalon a lépések közti hely
   már jó volt (120-300 px), tehát csak a szűk helyeket tágítjuk.
   A TARTALOMHOZ NEM NYÚLUNK, csak a térközhöz és a súlyokhoz.
   ============================================================ */

/* ── a nyitó: több levegő, és egyetlen fő üzenet ── */
/* 2026-09-28: a user „a menü alatt sok a légrés” → a felső párna 150-ről 64 px-re */
.lp-hero{ padding: clamp(32px, 4.5vw, 64px) 0 clamp(48px, 6vw, 96px) !important; }
.lp-hero .lp-kis{ margin-bottom: 26px !important; }
.lp-hero-cim{ margin-bottom: 0 !important; }
.lp-hero .lp-alcim{ margin-bottom: 0 !important; }

/* ── a hat lépés: mobilon dupla annyi hely, és olvashatóbb szöveg ── */
@media (max-width: 999px){
  .film-bal{ gap: clamp(44px, 9vw, 72px) !important; }
}
.lepes{ max-width: 52ch !important; }
.lepes h2{ margin-bottom: 14px !important; }
.lepes p{
  font-size: clamp(16px, 0.95rem + 0.3vw, 17.5px) !important;
  line-height: 1.7 !important;
}
.lepes-jel{ margin-bottom: 16px !important; }

/* ── a szakaszok közti ritmus ── */
.film-szek{ padding: clamp(46px, 6vw, 88px) 0 clamp(64px, 9vw, 120px) !important; }

/* ============================================================
   ALOLDALAK — EGYSÉGES SZÖVEGMÉRET ÉS LEVEGŐ (2026-09-19)

   Mérve mind a 9 nyilvános lapon, 375 px-en: vízszintes kilógás
   SEHOL nincs, viszont a szövegméret lapról lapra ugrált
   (13 · 13,5 · 14 · 14,5 · 15,5 · 16,1 · 17,1 px). Ettől tűnik
   rendezetlennek a lap, pedig a szerkezet rendben van.

   🔑 Nem húzunk mindent 17-re: ezek kártyákban ülnek, és a
   szétfeszítenék. Alsó HATÁRT adunk nekik, és tisztességes sorközt.

   A cím és az utána jövő bekezdés közt MINDEN aloldalon 0 px volt
   a távolság (mérve). A nyitólap hőscíme kivétel, annak saját
   ritmusa van.
   ============================================================ */

/* másodlagos szövegek kártyákon: legalább 15,5 px */
.ar-kinek,
.hg-mit,
.hg-ki,
.tb-link p,
.hg-h-elem p{
  font-size: var(--t-3) !important;
  line-height: 1.65 !important;
}

/* lábjegyzet és apró szöveg: kicsi marad, de nem 13 px */
.ar-labjegyzet,
.lp-apro{
  font-size: var(--t-2) !important;
  line-height: 1.6 !important;
}

/* levegő a lapcím alá.
   🔴 Mérve: az ALOLDALAK címe is `lp-hero-cim` osztályt visel, ezért az
   előző, „a hőscímet kihagyjuk" szabály egyetlen lapon sem fogott. Most
   fordítva: mindenki kap levegőt, és a NYITÓLAP hőscíme (`lp-hero-sz`)
   az egyetlen kivétel, mert ott a cédula adja a ritmust. */
.lp-hero-cim{
  margin-bottom: clamp(16px, 2.6vw, 26px) !important;
}

/* a vezető bekezdés és az alcím sorköze */
.lp-vezeto,
.lp-alcim{
  line-height: 1.68 !important;
}

/* ============================================================
   MŰHELY — A BELSŐ FELÜLET (2026-09-19)

   A `design.css` színei mérve rendben vannak, ezért azokhoz nem
   nyúlunk. Két hely maradt, ahol a sorköz és a betűtávolság
   ugyanúgy összetolja a szöveget, mint a nyilvános oldalon volt:
   a lapcím (`.head h1`, 1,15) és a kártyacím (`.dont-cim`, 1,15),
   mindkettő -0,03em betűtávolsággal.

   ⚠️ A műhely belépés mögött van, ezt a két javítást KÓDBÓL
   írom, nem láttam működés közben. Ha valami elcsúszik, ez a
   két szabály törlendő először.
   ============================================================ */

.head h1,
.dont-cim{
  line-height: 1.22 !important;
  letter-spacing: -0.012em !important;
}

/* a logó egysoros, azt békén hagyjuk (`.brand`, 1,05) */

/* ============================================================
   MŰHELY — MÉRETREND (2026-09-19)

   🔬 MÉRVE az éles stíluslappal (másolaton, mert a lap belépés
   mögött van). Ezt találtam:

     lapcím        22,6 px
     szakaszcím    15 px
     súgószöveg    15 px
     szövegtörzs   15 px
     mezőfelirat   13,5 px
     mező          14 px
     prompt        12,5 px

   🔴 A BAJ: nincs méretrend. A lapcímtől a szövegtörzsig hét
   pontnyi a teljes tartomány, és a szakaszcím PONTOSAN akkora,
   mint a súgó meg a törzs. Ezért nem vezeti a szem: minden
   egyformán fontosnak látszik. Ez a „nem átlátható" mérhető oka.

   ✅ Amit csinálunk: szétnyitjuk a rendet. A cím nagyobb lesz,
   a szakaszcím kiemelkedik a törzsből, a súgó visszalép, a
   mezők kényelmesebbek.

   🔑 A user kérése: „a promptok betűtípusa maradjon ilyen, max
   lehetne picit nagyobb" → a JetBrains Mono MARAD, 12,5 → 14 px.
   ============================================================ */

:root{
  --fs-body: 16px;          /* 15 → 16 */
  --fs-lapcim: clamp(26px, 1.2rem + 0.9vw, 34px);   /* 21-28 → 26-34 */
  --fs-h2: clamp(19px, 1rem + 0.3vw, 22px);         /* 18-21 → 19-22 */
  --fs-h3: 17.5px;
}

/* a szakaszcím emelkedjen ki a törzsből */
.sec-label{
  font-size: var(--t-3) !important;
  padding: 13px var(--s4) !important;
}

/* a súgó lépjen vissza: kisebb és halkabb, mint a törzs */
.sec-hint{
  font-size: var(--t-2) !important;
  line-height: 1.65 !important;
}

/* mezők: kényelmesebb felirat és beviteli szöveg */
.field label{ font-size: var(--t-2) !important; }
.field input,
.field select,
.field textarea,
.wlai-select{
  font-size: var(--t-3) !important;
}

/* 🔑 A PROMPT — a betűtípus marad, csak nagyobb és levegősebb */
.out textarea{
  font-size: var(--t-2) !important;
  line-height: 1.75 !important;
}
.out-head b,
.out-head em{ font-size: var(--t-0) !important; }

/* ============================================================
   MŰHELY — REND ÉS OLVASHATÓSÁG (2026-09-19, elfogadva)

   A user: „nem a dobozokkal volt bajom, hanem azzal, hogy
   olvashatatlan és rendezetlen minden. A régi kék színei nagyon
   jók, a prompt lime színe szar."

   ➡️ A kék világ ÉRINTETLEN (lap #071523, kártya #0D2137,
      szöveg #EEF4FA), a dobozok maradnak. Csak a rend változik.

   ⚠️ A műhelynek VAN témaváltója (sötét/világos), ezért a
      színeket a rendszer saját változóival írjuk, nem beégetve.
      Egyetlen kivétel a prompt szövege, ami csak sötétben volt
      lime — azt csak sötét témában cseréljük.
   ============================================================ */

/* ── 1. A szakaszcím legyen valódi cím ── */
.sec-label{
  font-size: var(--t-4) !important;
  padding: 15px 20px !important;
  letter-spacing: -0.01em !important;
}
.sec-hint{
  font-size: var(--t-3) !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
}

/* ── 2. A kártyák kapjanak belső levegőt, és legyen köztük hely ── */
.sec{
  padding: 4px 20px 22px !important;
  margin-bottom: 30px !important;
}

/* ── 3. A mezőfelirat ránézésre különüljön el a tartalomtól ── */
.field{ margin-bottom: 20px !important; }
.field label{
  display: block !important;
  font-size: var(--t-1) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 8px !important;
}
.field input,
.field select,
.field textarea,
.wlai-select{
  width: 100% !important;
  font-size: var(--t-3) !important;
  padding: 13px 15px !important;
  border-radius: var(--r) !important;
  background: var(--bg-sunken) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--text) !important;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--cyan, #35e0ff) !important;
  outline: none !important;
}

/* ── 4. A prompt: a lime megy, a kék világ marad ──
   📏 Mérve a kártyán (#0D2137): lime 13,8 · lágy kékesfehér 13,1.
   Nem az olvashatóság volt a baj, hanem hogy telített zöld egy
   hosszú angol szövegen fárasztó. A lime NEM tűnik el: ott marad
   a doboz címkéjén és a másoló gombon, jelölőnek. */
.out{ border-radius: var(--r-lg) !important; margin-bottom: 44px !important; }
.out textarea{
  font-size: var(--t-2) !important;
  line-height: 1.8 !important;
  padding: 22px !important;
  min-height: 250px !important;
}
:root[data-theme="dark"] .out textarea{ color: #DCE8F5 !important; }
.out-head{ padding: 15px 20px !important; }
.out-head b{ color: var(--accent, var(--m-lime)) !important; font-size: var(--t-1) !important; letter-spacing: .14em !important; }
.out-foot{ padding: 16px 20px !important; }
.out-note{ font-size: var(--t-2) !important; line-height: 1.7 !important; }

/* ============================================================
   MŰHELY FŐOLDAL — A CSEMPÉK (2026-09-19)

   🔴 Ez az a lap, amit belépés után ELŐSZÖR látsz, és eddig
   egyetlen javításom sem érintette: más elemekből áll
   (`tile`, `dont`, `eszk-fej`), mint a szerszám-lapok
   (`sec`, `field`, `out`). Ezért nem látszott semmi.

   📏 MÉRVE az éles stíluslappal:
     csempe neve        17,5 px
     csempe leírása     13,5 px / 1,45 sorköz
     lépés-felirat      10,5 px
     szakaszcím (h2)    19 px
     alatta a mondat    13,5 px
     csempék közti hely 12 px

   🔴 A BAJ ugyanaz, mint mindenhol: a szakaszcím (19) és a
   csempe neve (17,5) között másfél pont a különbség, a leírás
   meg 13,5 px szűk sorközzel. Nincs rend, és apró a szöveg.
   ============================================================ */

/* a szakaszcím emelkedjen ki a csempék nevéből */
.eszk-fej h2{
  font-size: var(--t-5) !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}
.eszk-fej p{
  font-size: var(--t-3) !important;
  line-height: 1.65 !important;
}

/* a csempe: nagyobb név, olvasható leírás, levegő */
.tiles{ gap: 18px !important; }
.tile{ padding: 20px !important; border-radius: var(--r-lg) !important; }
.tile-name{
  font-size: var(--t-4) !important;
  line-height: 1.3 !important;
}
.tile-desc{
  font-size: var(--t-2) !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
  /* 🔴 A leírás KÉT sorra volt vágva (`-webkit-line-clamp: 2`). A nagyobb
     betűbe már nem fért bele a mondat, és félbevágva jelent meg
     („a megadot…"). Három sor: a mondat kifér, a csempe alig nő. */
  -webkit-line-clamp: 3 !important;
}
.tile-lepes{
  font-size: var(--t-0) !important;
  letter-spacing: .1em !important;
  margin-bottom: 7px !important;
}

/* a folytatás-doboz és az új videó doboz */
.dont-cim{ font-size: var(--t-5) !important; line-height: 1.25 !important; }
.dont-uj-cim{ font-size: var(--t-4) !important; }
.dont-uj-mit,
.dont-elso-mit{ font-size: var(--t-3) !important; line-height: 1.65 !important; }
.dont-cimke{ font-size: var(--t-0) !important; letter-spacing: .1em !important; }

/* ============================================================
   MŰHELY — A HALVÁNY SZÜRKÉK (2026-09-19)

   A user, sokadszor: „ugyanazok a halvány szürke betűk".
   📏 Mérve a sötét témában, a kártyán (#0d2137):
       --text        #eef4fa   14,7   rendben
       --text-muted  #a3b6cb    7,8   átmegy, DE fakó 15 px-en
       --text-dim    #8fa3ba    6,3   átmegy, DE fakó

   🔑 A szabvány nem minden: 7,8 „megfelel", és mégis fakónak
   látszik, mert alacsony telítettségű kékesszürke, kis méretben.
   A user szeme a mérvadó, nem a küszöb.
   ============================================================ */

:root[data-theme="dark"]{
  --text-muted: #cfdcea;   /* 7,8 → 11,7 a kártyán */
  --text-dim:   #b8c9dc;   /* 6,3 →  9,6 a kártyán */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --text-muted: #cfdcea;
    --text-dim:   #b8c9dc;
  }
}

/* ============================================================
   BETŰTÍPUS — A TELJES RENDSZERBEN (2026-09-19, elfogadva)

   A user: „szar betűtípussal". Négy párosítást nézett végig a
   választón, és az ajánlásomat fogadta el:

     CÍMEK   → Plus Jakarta Sans   (van jelleme, de tiszta)
     SZÖVEG  → Inter               (felületre tervezték, 13-15 px-en
                                     is éles, a magyar ő és ű
                                     kettős vesszője rendben marad)
     PROMPT  → JetBrains Mono      (VÁLTOZATLAN, a user kérése)

   ⚠️ A `landing.css` 14 helyen írja ki a 'Bricolage Grotesque'-ot
   és 6 helyen az 'IBM Plex Sans'-t közvetlenül, nem változóból.
   Ezért itt felül kell írni őket, nem elég a tokent cserélni.
   ============================================================ */

/* ── a műhely: változókon keresztül megy ── */
:root{
  --font-fo:  'Plus Jakarta Sans', 'Bricolage Grotesque', system-ui, sans-serif;
  --font-szo: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
  /* --font-gep (JetBrains Mono) SZÁNDÉKOSAN érintetlen */
}

/* ── a nyilvános oldal: közvetlen deklarációk, felül kell írni ── */
/* 🔴 A `body.lp` (két osztály-szintű szelektor) erősebb, mint a puszta
   `body`, ezért azt NÉV SZERINT is felül kell írni, különben minden
   elem, aminek nincs saját szabálya, a régi betűt örökli. Mérve. */
body, body.lp, .lp-alcim, .lp-vezeto, .lp-apro, p, li, td, th, input, select, textarea, button, .lp-btn, .lp-btn2, .lp-link, .btn, .copy-btn, .tool-btn, .ai-btn, .auth-btn, .dont-gomb, .tile-soon-tag{
  font-family: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
}
h1, h2, h3, h4, .lp-hero-cim, .jel, .logo, .brand, .tile-name, .dont-cim, .dont-uj-cim, .sec-label, .head h1{
  font-family: 'Plus Jakarta Sans', 'Bricolage Grotesque', system-ui, sans-serif;
}

/* a monospace MINDENHOL marad, ahol eddig is volt */
.out textarea, .lp-kis, .cimke, .lepes-jel, .tile-lepes, .ido,
code, pre, kbd, samp{
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* ============================================================
   MŰHELY — A VILÁGOS TÉMA HALK SZÖVEGEI (2026-09-19)

   🔴 A korábbi javításom CSAK a sötét témára vonatkozott. Ha a
   felhasználó világos témát használ (a `hgf-theme` a böngésző
   tárolójában), abból semmit nem látott.

   📏 Mérve a fehér kártyán:
       --text-muted  #56637a   6,07   fakó
       --text-dim    #626f85   5,08   fakó
   A lap szürkés hátterén (#f3f6fa) még rosszabb: 5,6 és 4,69.

   Az alábbi értékek ugyanaz a hideg kékesszürke, csak sötétebbek.
   ⚠️ Ez a bare `:root`, tehát a VILÁGOS témára hat. A sötét téma
   értékeit a fenti, nagyobb fajsúlyú szabály adja.
   ============================================================ */

:root{
  --text-muted: #3d4a60;   /* 6,07 → 8,95 a kártyán */
  --text-dim:   #46536a;   /* 5,08 → 7,76 a kártyán */
}

/* ============================================================
   A LOGÓ BETŰJE: ANTON (2026-09-28, a user választása)
   A logó (lime „weblock” + magenta „ai”) marad, csak a betű új:
   keskeny filmplakát-betű. CSAK a logóra: a lap szövegei maradnak.
   🔑 Saját szerverről (`assets/fonts/`), nem a Google-ről. Egy
      vastagsága van, ezért a `font-weight` 400, különben a böngésző
      műfélkövért rajzolna rá.
   ============================================================ */
@font-face{
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
.brand, .lp-logo, .brand .brand-fo, .brand .brand-ai, .lp-logo b, .oldalsav .sav-brand::after{
  font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;
}
.brand, .lp-logo{ letter-spacing: 0.005em; }

/* A LOGÓ JELE: csapó, aminek a teste lejátszás gomb (2026-09-28, a user: „C”).
   CSAK CSS: minden lapon megjelenik, ahol a logó van (menü, nyilvános lapok,
   belépés), a PHP-hoz nem kell nyúlni. Keskeny ikon-módban a jel marad, az
   „ai” betűk helyett. */
.brand, .lp-logo{ display: inline-flex; align-items: center; }
.brand::before, .lp-logo::before{
  content: ''; flex-shrink: 0;
  width: 1.05em; height: 1.05em; margin-right: 0.3em;
  background: url('/assets/logo-jel.svg') center / contain no-repeat;
}
/* A „STUDIO” felirat a név alatt, két vékony lime vonal között (2026-10-31, a user: „E”).
   A sor a név szélességére nyúlik (a szülő oszlop a legszélesebb gyerekéhez igazodik). */
.lp-logo-nev{ display: flex; flex-direction: column; line-height: 1; }
.lp-logo-s{
  display: flex; align-items: center; justify-content: center; gap: .5em;
  margin-top: .2em; font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400;
  font-size: max(.3em, 9px); letter-spacing: .5em; text-transform: uppercase; line-height: 1;
  color: #c9ff35; -webkit-text-fill-color: #c9ff35; text-shadow: none;
}
.lp-logo-s::before, .lp-logo-s::after{ content: ''; flex: 1; height: 2px; background: #c9ff35; opacity: .7; }
.lp-logo-s::after{ margin-left: -.5em; }
.brand .lp-logo-s{ margin-top: .15em; }
@media (min-width: 1024px) and (max-width: 1279px){
  .oldalsav .sav-brand::before{ width: 30px; height: 30px; margin-right: 0; }
  .oldalsav .sav-brand::after{ content: none; }
  .oldalsav .lp-logo-s{ display: none; }
}

/* ══ IZZÁS (neon glow) + NYOMHATÓ GOMB (2026-11-11, a user: „Javasolj hogy hova kerüljön lime és hova magenta. Elfogadom”) ══
   Magenta izzás = „figyelj, ez különleges”: csak a fizetéskérő ablak (_kirakat.php), a lime gombja is izzik.
   Lime izzás = „ezt nyomd meg”: a kiemelt csomag (vasarlas/index.php). A nyilvános lapokon magenta izzás NEM kerül.
   A fő (lime) gomb mindenhol nyomható gomb, izzás nélkül. Levétel: az `izzas` osztály kivétele, illetve ez a blokk. */
.izzas{ --izzas-rgb: var(--m-magenta-rgb); --izzas-belso: .5; }
.izzas--lime{ --izzas-rgb: var(--m-lime-rgb); --izzas-belso: .2; }
:root:root:root .izzas{
  border: 1px solid rgba(var(--izzas-rgb), .95) !important; border-top-color: rgba(var(--m-feher-rgb), .5) !important; border-radius: 4px;
  background-image: radial-gradient(120% 95% at 15% 120%, rgba(var(--izzas-rgb), var(--izzas-belso)), transparent 65%),
    radial-gradient(80% 60% at 100% 0%, rgba(var(--m-feher-rgb), .05), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .16), 0 0 0 1px rgba(var(--izzas-rgb), .35), 0 0 16px rgba(var(--izzas-rgb), .5),
    0 0 48px rgba(var(--izzas-rgb), .3), 0 0 110px rgba(var(--izzas-rgb), .15) !important;
}
:root:root:root[data-theme="light"] .izzas{
  background-image: none; border-top-color: rgba(var(--izzas-rgb), .95) !important;
  box-shadow: 0 0 0 1px rgba(var(--izzas-rgb), .35), 0 0 18px rgba(var(--izzas-rgb), .35) !important;
}
dialog.izzas::backdrop{ background: rgba(var(--m-fekete-tiszta-rgb), .72); backdrop-filter: blur(3px); }
:root:root:root :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo){
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), inset 0 -2px 0 rgba(var(--m-fekete-tiszta-rgb), .18), 0 3px 0 var(--m-lime-kozep) !important;
  transition: transform .08s ease, box-shadow .08s ease;
}
:root:root:root :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo):not(:disabled):active{
  transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .4), 0 1px 0 var(--m-lime-kozep) !important;
}
:root:root:root[data-theme="light"] :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo){
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), 0 3px 0 var(--m-fekete) !important;
}
:root:root:root:not([data-theme="light"]) .izzas .wg--fo{
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), inset 0 -2px 0 rgba(var(--m-fekete-tiszta-rgb), .18), 0 3px 0 var(--m-lime-kozep),
    0 0 22px rgba(var(--m-lime-rgb), .55) !important;
}
@media (prefers-reduced-motion: reduce){ :root:root:root :is(.wg--fo, .btn--lime, .btn--primary){ transition: none; } }

/* ── uj-arculat.css ── */
/* ============================================================
   weblockai — AZ ÚJ ARCULAT A TÖBBI NYILVÁNOS LAPRA (2026-09-28)

   A jóváhagyott új főoldal (fooldal-uj.css) nyelve, a közös elemekre:
   lapfej, címek, címke, gombok, kártyák, szakaszok. A `landing.css` és az
   `arculat.css` UTÁN töltődik; ahol azok `!important`-tal döntenek, ott
   ez is azzal, különben a régi nyerne (pontosság-csapda).
   🔑 Csak meglévő tokenek, új szín nincs.
   🔑 Lekerekítés legfeljebb 4 px (a user szabálya): a két nagy token
      itt 4 px-re áll, ez 59 helyen hat egyszerre.
   ============================================================ */

:root {
  --lp-r-lg: 4px;
  --lp-r-xl: 4px;
  --u-cim: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --u-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Címek: a főoldal címbetűje ── */
body.lp h1, body.lp h2, body.lp .lp-hero-cim {
  font-family: var(--u-cim);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body.lp h3 { font-family: var(--u-cim); font-weight: 700; letter-spacing: -0.01em; }
body.lp .lp-hero-cim {
  font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.6rem);
  line-height: 1.04;
}
body.lp .lp-szek h2, body.lp .lp-zaro h2 {
  font-size: clamp(1.8rem, 1.1rem + 2vw, 3rem);
  line-height: 1.06;
}

/* ── Lapfej: a főoldal fénye ── */
body.lp .lp-hero {
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(251,35,194,.08), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgba(201,255,53,.06), transparent 70%);
}

/* ── Címke: keret nélküli, mono, magenta pont ── */
body.lp .lp-kis {
  border: 0; background: none; padding: 0;
  font-family: var(--u-mono); font-size: 0.78rem;
}
body.lp .lp-kis::before { width: 9px; height: 9px; box-shadow: 0 0 0 4px var(--magenta-halk); }

/* ── Gombok ── */
body.lp .lp-btn, body.lp .lp-btn2 {
  min-height: 48px; padding: 0 22px; border-radius: 4px; font-weight: 700;
}
body.lp .lp-btn { box-shadow: none; }
body.lp .lp-btn:hover { box-shadow: none; }
body.lp .lp-btn-nagy { min-height: 52px; padding: 0 26px; font-size: 1rem; }
body.lp .lp-btn:focus-visible, body.lp .lp-btn2:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ── Kártyák: tiszta keret, a fény-vonal marad ── */
body.lp .lp-kartya:hover, body.lp .tb-kartya:hover {
  box-shadow: none; transform: translateY(-2px);
}

/* ── Szakaszok ── */
/* 2026-10-07, a user: „nagyon nagy térközöket hagy … ekkora nem kell sehol.” Mérve 1280 px-en: két szakasz
   között 200–250 px üres sáv volt. A lapfej alsó párnája az `arculat.css` !important szabálya miatt 96 px volt,
   a keskeny `.ar-fej` saját értéke sosem érvényesült. */
body.lp .lp-szek { padding: clamp(36px, 4vw, 56px) 0; }
body.lp .lp-hero { padding-bottom: clamp(28px, 3.5vw, 52px) !important; }
body.lp .lp-hero.ar-fej { padding-bottom: clamp(8px, 1.2vw, 16px) !important; }
body.lp .lp-hero + .lp-szek { padding-top: clamp(16px, 2vw, 32px); }
body.lp .lp-zaro {
  padding: clamp(44px, 5vw, 72px) 0;
  background: radial-gradient(60% 70% at 50% 100%, rgba(201,255,53,.08), transparent 70%), var(--lp-bg-2);
}
body.lp .lp-zaro::before { display: none; }

/* ── Jogi lapok: a kiemelés a főoldal „havonta” dobozának nyelvén ── */
body.lp .jogi-kiemelt { border-radius: 0 4px 4px 0; }

@media (prefers-reduced-motion: reduce) {
  body.lp .lp-kartya:hover, body.lp .tb-kartya:hover { transform: none; }
}

/* ── szerzok.css ── */
/* weblockai — szerzők: a cikkek szerző-sora, a szerzők listája és lapja (2026-10-27).
   Portré nincs: betű-monogram. Minden szín a márka-tokenekből jön (arculat.css). */

.szerzo-sor { display: flex; align-items: center; gap: .75rem; margin: .9rem 0 0; font-size: var(--t-1, 1rem); }
.szerzo-szoveg { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; min-width: 0; }
.szerzo-by { opacity: .75; }
.szerzo-sor a { font-weight: 700; display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
.szerzo-mezo { flex-basis: 100%; font-size: .875em; opacity: .75; }

.szerzo-mon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  font-family: 'Anton', 'Inter', sans-serif; font-size: 1.05rem; letter-spacing: .04em; line-height: 1;
}
.szerzo-mon--nagy { inline-size: 4.5rem; block-size: 4.5rem; font-size: 1.7rem; margin-block-end: 1rem; }
.szerzo-mon--lime    { background: var(--m-lime);          color: var(--m-tinta); }
.szerzo-mon--magenta { background: var(--m-magenta-gomb);  color: var(--m-feher); }
.szerzo-mon--navy    { background: var(--m-navy-kartya);   color: var(--m-feher); box-shadow: inset 0 0 0 2px var(--m-lime); }

.szerzo-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 640px)  { .szerzo-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .szerzo-racs { grid-template-columns: repeat(3, 1fr); } }

.szerzo-kartya { border: 1px solid var(--m-szurke-felulet); border-radius: var(--doboz-sarok, 4px); background: var(--m-szurke-hover); }
.szerzo-link { display: flex; flex-direction: column; align-items: flex-start; block-size: 100%; padding: clamp(20px, 2.4vw, 28px); color: inherit; text-decoration: none; min-block-size: 44px; }
.szerzo-link h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
.szerzo-link p { margin: 0 0 .6rem; }
.szerzo-mezo-kartya { font-size: .875rem; color: var(--m-lime); }
.szerzo-db { margin-top: auto; font-size: .875rem; color: var(--m-szurke-halk); }
.szerzo-link:hover .szerzo-db, .szerzo-link:focus-visible .szerzo-db { color: var(--m-lime); }
.szerzo-link:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 2px; }

.szerzo-temak { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.25rem 0 2rem; }
.szerzo-temak li { padding: .3rem .75rem; border: 1px solid var(--m-szurke-felulet); border-radius: var(--doboz-sarok, 4px); font-size: .875rem; }

.szerzo-cikkek { list-style: none; padding: 0; margin: 0 0 2rem; }
.szerzo-cikkek li { display: flex; flex-direction: column; gap: .15rem; padding: .75rem 0; border-bottom: 1px solid var(--m-szurke-felulet); }
.szerzo-cikkek li span { font-size: .8125rem; color: var(--m-szurke-halk); }
@media (min-width: 640px) { .szerzo-cikkek li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; } }

@media (prefers-reduced-motion: no-preference) {
  .szerzo-kartya { transition: border-color .15s ease; }
  .szerzo-kartya:hover { border-color: var(--m-lime); }
}

/* ── gyik.css ── */
/* weblockai — GYIK a cikkek végén (2026-10-31). Minden szín a márka-tokenekből jön (arculat.css). */

.gyik { margin: 2.5rem 0 0; }
.gyik h2 { margin-block-end: 1rem; }

.gyik-elem { border: 1px solid var(--m-szurke-felulet); border-radius: var(--doboz-sarok, 4px); background: var(--m-szurke-hover); }
.gyik-elem + .gyik-elem { margin-top: .5rem; }

.gyik-elem summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-block-size: 44px; padding: .75rem 1rem; cursor: pointer; font-weight: 700; list-style: none;
}
.gyik-elem summary::-webkit-details-marker { display: none; }
.gyik-elem summary::after { content: '+'; flex: none; font-family: 'JetBrains Mono', monospace; color: var(--m-lime); font-size: 1.25rem; line-height: 1; }
.gyik-elem[open] summary::after { content: '\2212'; }
.gyik-elem summary:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 2px; }

.gyik-elem p { margin: 0; padding: 0 1rem 1rem; }

/* ── plakat.css ── */
/* 🔒 CLAUDE_STABLE - 2026-09-30 - Plakát arculat: 24 lap × 7 szélességen mérve, túlcsordulás és kontraszthiba nincs */
/* ══════════════════════════════════════════════════════════════
   weblockai — „PLAKÁT”: a nyilvános lapok arculata (2026-09-30, a user választása
   három minta közül). Minden nyilvános lapon betöltődik, a lap saját stíluslapja UTÁN.
   A belépő lap Plakátja: a főoldal nyitó szakasza és minden lap záró szakasza lime tömb
   fekete tintával, közte fekete lap. Anton nagybetűs címek. A magenta 10-05 óta a második
   szín (a lap végén, „TÖBB MAGENTA”); az alábbi lime-szabályok egy részét az írja felül.
   ══════════════════════════════════════════════════════════════ */

/* ── KÖZÖS AZ A ARCULATBAN: Anton nagybetűs címek, kerekebb sarkok, a magenta csak a logóban marad ── */
body.lp .u-h1, body.lp .u-h2, body.lp h1, body.lp h2, body.lp .lp-hero-cim {
  font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .006em !important; line-height: 1.13 !important; text-wrap: balance;
}
body.lp .u-h1 { font-size: clamp(2.7rem, 1.1rem + 5.4vw, 6.8rem); }
body.lp .u-h2 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.8rem); }
body.lp h3, body.lp .u-lap h3, body.lp .u-gyik summary { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em !important; }
body.lp .u-szam b, body.lp .u-futo-sor li, body.lp .u-lepes-szam {
  font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400; letter-spacing: .01em; text-transform: uppercase;
}
body.lp .u-lepes-szam { font-size: 1.9rem; line-height: 1; }
body.lp .u-gomb, body.lp .u-gomb2, body.lp .lp-btn, body.lp .lp-btn2 { border-radius: 12px; }
body.lp .u-kartya, body.lp .u-demo, body.lp .u-film, body.lp .ar-doboz { border-radius: 16px; }
body.lp .u-snitt, body.lp .u-ikon, body.lp .u-film-play, body.lp .u-filmsav-gomb { border-radius: 10px; }
body.lp .u-gep { border-radius: 8px; }
body.lp .u-kiemelt { border-radius: 0 12px 12px 0; }
body.lp .u-hero, body.lp .u-zaro { background-image: none; }
body.lp .u-futo-sor li::after { color: var(--lime); }
body.lp .u-pottyok i:first-child { background: var(--lime); }
body.lp .u-gep { color: var(--lime); border-color: rgba(var(--m-lime-rgb),.35); }

:root { --lp-bg: var(--m-fekete); --lp-bg-2: var(--m-sotet-sav); --lp-kartya: var(--m-sotet-doboz); --lp-kartya-2: var(--m-szurke-felulet);
  --lp-keret: #1f242d; --lp-keret-2: var(--m-sotet-vonal); --lp-szoveg: var(--m-feher-tort); --lp-halvany: var(--m-szurke-csendes); --lp-dim: var(--m-szurke-halk); }
body.lp::after { display: none; }

/* a nyitó: lime tömb, fekete tinta */
body.lp .u-hero { background-color: var(--m-lime); color: var(--m-fekete); }
body.lp .u-hero .u-h1, body.lp .u-hero .u-h1 em { color: var(--m-fekete); }
body.lp .u-hero .u-alcim { color: var(--m-fekete); font-weight: 500; }
body.lp .u-hero .u-cimke { background: var(--m-fekete); color: var(--m-lime); padding: 10px 14px; border-radius: 8px; }
body.lp .u-hero .u-rec { background: var(--m-lime); box-shadow: none; }
body.lp .u-hero .u-gomb { background: var(--m-fekete); color: var(--m-lime); }
body.lp .u-hero .u-gomb-ar { border-left-color: rgba(var(--m-lime-rgb),.35); }
body.lp .u-hero .u-gomb2 { color: var(--m-fekete); border: 2px solid var(--m-fekete); }
body.lp .u-hero .u-gomb2:hover { background: var(--m-fekete); color: var(--m-lime); border-color: var(--m-fekete); }
body.lp .u-hero .u-gomb:focus-visible, body.lp .u-hero .u-gomb2:focus-visible { outline-color: var(--m-fekete); }
body.lp .u-hero .u-pipak { color: var(--m-fekete); font-weight: 500; }
body.lp .u-hero .u-pipak li::before { color: var(--m-fekete); }
body.lp .u-demo { background: var(--m-fekete); border-color: var(--m-fekete); color: var(--m-feher-tort); box-shadow: 0 30px 60px -30px rgba(var(--m-fekete-tiszta-rgb),.6); }

body.lp .u-cimke, body.lp .u-szek-cimke { color: var(--m-lime); }
body.lp .u-szek-cimke { font-family: 'Anton', sans-serif; font-size: 1.5rem; letter-spacing: .04em; }
body.lp .u-gepsav { background: var(--m-fekete); }

/* a záró: megint lime tömb (keretbe fogja a lapot) */
body.lp .u-zaro { background-color: var(--m-lime); color: var(--m-fekete); border-top: 0; }
body.lp .u-zaro .u-h2, body.lp .u-zaro .u-vezeto { color: var(--m-fekete); }
body.lp .u-zaro .u-vezeto { font-weight: 500; }
body.lp .u-zaro .ar-doboz { background: var(--m-fekete); border: 0; color: var(--m-feher-tort); box-shadow: 0 30px 60px -30px rgba(var(--m-fekete-tiszta-rgb),.55); }

/* ══ A TÖBBI NYILVÁNOS LAP (2026-09-30, a user a Plakátot választotta) ══ */

/* Az Anton alap-latin készletében nincs ő és ű: a bővített készlet is kell, különben
   a magyar címekben ez a két betű más betűtípusból jön. */
@font-face {
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  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;
}

/* lapfej: fekete, a magenta fény nélkül; a címke és a pontja lime */
body.lp .lp-hero { background: none; }
body.lp .lp-hero::before { display: none; }
body.lp .lp-kis { color: var(--m-lime); }
body.lp .lp-kis::before { background: var(--m-lime); color: var(--m-lime); box-shadow: 0 0 0 4px rgba(var(--m-lime-rgb),.16); }
body.lp .lp-szam-jel { color: var(--m-lime); }
body.lp .tb-idezet { border-left-color: var(--m-lime); }
body.lp .bt-ut-mi { border-color: var(--m-lime) !important; }

/* a záró szakasz itt is lime tömb, fekete tintával (mint a főoldalon) */
body.lp .lp-zaro { background: var(--m-lime); color: var(--m-fekete); border-top: 0; }
body.lp .lp-zaro h2, body.lp .lp-zaro h2 em, body.lp .lp-zaro .lp-vezeto { color: var(--m-fekete); }
body.lp .lp-zaro .lp-vezeto { font-weight: 500; }
body.lp .lp-zaro .lp-btn { background: var(--m-fekete); color: var(--m-lime); }
body.lp .lp-zaro .lp-btn2 { background: transparent; color: var(--m-fekete); border: 2px solid var(--m-fekete); }
body.lp .lp-zaro .lp-btn2:hover { background: var(--m-fekete); color: var(--m-lime); }
body.lp .lp-zaro .lp-link, body.lp .lp-zaro .lp-link:hover { color: var(--m-fekete); text-decoration-color: var(--m-fekete); }
body.lp .lp-zaro .lp-link:hover { text-decoration: underline; }
body.lp .lp-zaro .lp-btn:focus-visible, body.lp .lp-zaro .lp-btn2:focus-visible { outline-color: var(--m-fekete); }
body.lp .lp-zaro .ar-doboz, body.lp .lp-zaro .vl-doboz { background: var(--m-fekete); border: 0; color: var(--m-feher-tort); }

/* HÁROM BETŰ A NYILVÁNOS LAPOKON (2026-09-30): Anton (címek, nagy számok), Inter (szöveg),
   JetBrains Mono (adat). A Bricolage Grotesque hat elemfajtán maradt meg, és miattuk 107 KB
   betűfájl töltődött le. Ezek itt átkerülnek a három közül valamelyikre, így a Bricolage
   a nyilvános lapokon már nem töltődik le. (A belső lapok betűit ez nem érinti.) */
:root { --u-cim: 'Inter', system-ui, sans-serif; }
body.lp .u-film-cim, body.lp .tb-idezet, body.lp .tb-tilt-plusz, body.lp .kp-cim {
  font-family: 'Inter', system-ui, sans-serif;
}
body.lp .lp-szam-ertek, body.lp .tb-szamok b {
  font-family: 'Anton', 'Inter', system-ui, sans-serif; font-weight: 400; letter-spacing: .01em;
}
body.lp .tb-szamok b { white-space: nowrap; }   /* a „70–90%” telefonon a gondolatjelnél tört */

/* ══ TÖBB MAGENTA (2026-10-05, a user: „tegyél bele a public designba több magentát,
   mert az most nagyon kevés van”) ══════════════════════════════════════════════
   A lime marad a fő szín (nyitó és záró tömb, a vásárló gomb), a magenta a második:
   címkék, jelölők, a másodlagos gomb, a gépnevek, a lejátszó gomb.
   🔑 Kontraszt: magenta (#fb23c2) a fekete lapon 5,8:1, fekete tinta a magentán 5,8:1,
      mindkettő AA. Fehér szöveg magentán NEM (3,4:1), ezért a magenta gomb tintája fekete. */
body.lp .u-hero .u-cimke { color: var(--m-magenta); }
body.lp .u-hero .u-rec { background: var(--m-magenta); }
body.lp .u-hero .u-gomb2 { background: var(--m-magenta); color: var(--m-fekete); border-color: var(--m-magenta); }
body.lp .u-hero .u-gomb2:hover { background: var(--m-fekete); color: var(--m-magenta); border-color: var(--m-fekete); }
body.lp .u-pottyok i:first-child { background: var(--m-magenta); }
body.lp .u-keres-jel, body.lp .u-jatszik .u-gepel::after { color: var(--m-magenta); }
body.lp .u-gep { color: var(--m-magenta); border-color: rgba(var(--m-magenta-rgb),.45); }
body.lp .u-szek-cimke, body.lp .u-lepes-szam { color: var(--m-magenta); }
body.lp .u-futo-sor li::after { color: var(--m-magenta); }
body.lp .u-kartya:hover, body.lp .u-film:hover, body.lp .u-film:focus-visible { border-color: var(--m-magenta); }
body.lp .u-kartya:nth-child(even) .u-ikon { color: var(--m-magenta); background: rgba(var(--m-magenta-rgb),.12); }
body.lp .u-film-play { background: var(--m-magenta); color: var(--m-fekete); }
body.lp .u-kiemelt { border-left-color: var(--m-magenta); background: rgba(var(--m-magenta-rgb),.08); }
body.lp .lp-nav a:hover { border-bottom-color: var(--m-magenta); }
body.lp .lp-kis { color: var(--m-magenta); }
body.lp .lp-kis::before { background: var(--m-magenta); color: var(--m-magenta); box-shadow: 0 0 0 4px rgba(var(--m-magenta-rgb),.18); }
body.lp .lp-szam-jel { color: var(--m-magenta); }
body.lp .tb-idezet { border-left-color: var(--m-magenta); }
body.lp .u-lepes { border-top-color: var(--m-magenta); }
body.lp .u-szam:nth-child(even) b { color: var(--m-magenta); }
body.lp .u-gyik summary::after { color: var(--m-magenta); }
body.lp .tb-tema { color: var(--m-magenta); }

/* ══ FEHÉR BETŰ MINDEN GOMBON (2026-10-05, a user: „gombokon mindig fehér betűk legyenek
   az egész projektben”) ══════════════════════════════════════════════════════════════
   Lime gombon a fehér nem olvasható (1,1:1), ezért a lime gomb fekete lett, lime kerettel
   (a user választása). Fehér a magentán 3,4:1, ami csak a nagy, vastag betűre AA
   (18,66 px fölött): a magenta gomb felirata ezért 19 px. A lime tömbön az áttetsző
   gomb is fekete, különben a fehér felirat a lime-on állna. */
body.lp .lp-btn, body.lp .lp-skip, body.lp .u-gomb, body.lp .u-hero .u-gomb, body.lp .lp-zaro .lp-btn {
  background: var(--m-fekete); color: var(--m-feher); border: 1px solid var(--m-lime); box-shadow: none;
}
body.lp .lp-btn:hover, body.lp .u-gomb:hover, body.lp .lp-zaro .lp-btn:hover { background: var(--m-szurke-felulet); color: var(--m-feher); }
body.lp .u-gomb-ar, body.lp .u-hero .u-gomb-ar { border-left-color: rgba(var(--m-feher-rgb),.3); }
body.lp .lp-btn2, body.lp .lp-btn2:hover, body.lp .u-gomb2, body.lp .u-gomb2:hover { color: var(--m-feher); }
body.lp .lp-zaro .lp-btn2, body.lp .lp-zaro .lp-btn2:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete); }
body.lp .u-hero .u-gomb2, body.lp .lp-btn.lt-magenta {
  background: var(--m-magenta); color: var(--m-feher); border-color: var(--m-magenta); font-size: 1.1875rem;
}
body.lp .u-hero .u-gomb2:hover, body.lp .lp-btn.lt-magenta:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete); }

/* ══ A NYITÓ TÖMB GOMBJAI CSERÉLVE (2026-10-05, a user: „a gombok színét meg kellene cserélni”) ══
   A vásárló gomb magenta (fehér betű, 19 px a 3,4:1 miatt), az „Így dolgozik” fekete. */
body.lp .u-hero .u-gomb { background: var(--m-magenta); color: var(--m-feher); border-color: var(--m-magenta); font-size: 1.1875rem; }
body.lp .u-hero .u-gomb .u-gomb-ar { font-size: 1.1875rem; }
body.lp .u-hero .u-gomb:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete); }
/* 2026-10-06: 375 px alatt a 19 px-es ár félbetört („from £19 /” és „month” külön sorban): ott két tiszta sor, felül a felirat, alatta egészben az ár. */
@media (max-width: 374px) {
  body.lp .u-hero .u-gomb { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 20px; }
  body.lp .u-hero .u-gomb .u-gomb-ar { border-left: 0; padding-left: 0; white-space: nowrap; }
}
body.lp .u-hero .u-gomb2 { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete); }
body.lp .u-hero .u-gomb2:hover { background: var(--m-szurke-felulet); color: var(--m-feher); border-color: var(--m-szurke-felulet); }

/* ══ CSOMAGGOMBOK A VÁSÁRLÓ LAPON (2026-10-05, a user: „nem figyelemfelhívóak, lime vagy magenta”) ══
   A Pro magenta (fehér, 19 px), az Alap és a Stúdió teli lime. Lime-on fehér betű 1,1:1,
   ezért ott fekete tinta jár (a user jóváhagyta a dobozban). */
body.lp .vs-csomag .lp-btn { background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem; }
body.lp .vs-csomag .lp-btn:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta); }
body.lp .vs-csomag .lp-btn2 { background: var(--m-lime); color: var(--m-fekete); border: 1px solid var(--m-lime); font-size: 1.1875rem; }
body.lp .vs-csomag .lp-btn2:hover { background: var(--m-fekete); color: var(--m-lime); border-color: var(--m-lime); }
/* „Tovább a fizetéshez”: tömör magenta (2026-10-05, a user kérése). */
body.lp form[action="/api/fizetes.php"] .lp-btn { background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem; }
body.lp form[action="/api/fizetes.php"] .lp-btn:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta); }

/* A fejléc „Megveszem” gombja: tömör magenta (2026-10-06, a user kérése). Fehér betű 19 px a 3,4:1 miatt. */
body.lp .lp-fej .lp-btn.lp-fej-vasar { background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem; }
body.lp .lp-fej .lp-btn.lp-fej-vasar:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta); }
/* 1024 px-en a nagyobb felirattal a fejléc 7 px-lel kilógott: ott szűkebb a gomb. */
@media (min-width: 1024px) and (max-width: 1199px) { body.lp .lp-fej .lp-btn.lp-fej-vasar { padding-inline: 12px; } }

/* ══ NAGYOBB MENÜPONTOK (2026-10-05, a user: „menüpontok lehetnek nagyobbak”) ══
   15 helyett 17 px, a mobilmenüben is. A „Gyakori kérdések” eddig is két sorba tört
   1024 px alatt, és 860–900 px között a fejléc kilógott: ott már a mobilmenü-gomb jön. */
/* 2026-10-07, a user: „a menü betűmérete mindenhol legyen azonos a Megveszem gombon lévő mérettel” → 19 px (1.1875rem). */
body.lp .lp-nav a, body.lp .lp-fej .lp-link, body.lp .lp-mob-lap a { font-size: 1.1875rem; white-space: nowrap; }
/* 2026-10-07: 19 px-es menüvel a négy pont magyarul 1140 px-től fér ki (mérve), ezért 1152 alatt jön a menügomb. */
@media (max-width: 1151px) {
  body.lp .lp-mob { display: block; }
  body.lp .lp-nav, body.lp .lp-fej .lp-link, body.lp .lp-fej-zaszlok { display: none; }
  body.lp .lp-sav { justify-content: space-between; }
  body.lp .lp-logo { margin-right: auto; }
}

/* 320 px-en a fejléc 11 px-lel kilógott (a minta előtt is): szűkebb gomb és térköz */
@media (max-width: 359px) {
  body.lp .lp-sav { gap: 8px; }
  body.lp .lp-fej-jobb { gap: 6px; }
  body.lp .lp-fej .lp-btn { padding: 0 12px; font-size: .86rem; }
}

/* 2026-10-06: a fejléc minden linkje legalább 44 px magas célterület (a menüpontok 43, a logó és a Belépés 41, a zászló 34 px volt).
   A display csak 1024 px felett: alatta a Belépés rejtve van, és az inline-flex újra megjelenítené (375 px-en 29 px kilógás). */
body.lp .lp-fej .lp-logo { min-height: 44px; }
@media (min-width: 1152px) {
  body.lp .lp-nav a, body.lp .lp-fej .lp-link { display: inline-flex; align-items: center; min-height: 44px; }
  body.lp .lp-fej-zaszlok > a, body.lp .lp-fej-zaszlok > span { height: 44px; }
  /* 2026-10-06 este: szélességben is 44 (a zászló 40, a .hu „Árak” 42 px volt). */
  body.lp .lp-nav a, body.lp .lp-fej .lp-link, body.lp .lp-fej-zaszlok > a, body.lp .lp-fej-zaszlok > span { min-width: 44px; justify-content: center; }
}

/* 2026-10-06: zárt boltnál az angol „Tell me when it launches” gomb 1024 px-en 87, 1100 px-en 25 px-lel kitolta a fejlécet:
   ott 1200 px alatt már a menügomb jön. */
@media (max-width: 1199px) {
  body.lp .lp-fej--zart .lp-mob { display: block; }
  body.lp .lp-fej--zart .lp-nav, body.lp .lp-fej--zart .lp-link, body.lp .lp-fej--zart .lp-fej-zaszlok { display: none; }
  body.lp .lp-fej--zart .lp-sav { justify-content: space-between; }
  body.lp .lp-fej--zart .lp-logo { margin-right: auto; }
}
/* Telefonon ugyanez a gomb 375 px-en 60, 320 px-en 52 px-lel lógott ki: ott két sorba törhet. */
@media (max-width: 479px) {
  body.lp .lp-fej--zart .lp-fej-jobb .lp-btn { white-space: normal; line-height: 1.1; text-align: center; max-width: 8.5rem; min-height: 44px; height: auto; padding: 4px 10px; }
}

/* 2026-11-11, a user: „NEM LEHET TÖRT SOR. SEHOL!” A lábléc linkjei és a szövegbe ágyazott rövid linkek egyben maradnak:
   ha nem férnek a sor végére, egészben ugranak a következő sorba. */
body.lp .lp-lab-oszlop nav a, body.lp :is(.u-pipak, .u-higgs) a{ white-space: nowrap; }

/* ── Egysoros felirat minden nyilvános lapon (2026-11-11, a user „mehet”-je a címjavításra) ──
   A `.cf` span-t a `wlai_cf()` / `wlai_cf_szuro()` (`_publikus.php`) teszi a címekre: a betű a doboz szélességéhez kicsinyedik,
   legfeljebb a saját méretéig, legalább 15 px (`--cmin`); ha így sem fér: „…”, a teljes szöveg a `title`-ben.
   `--cn` = karakterszám, `--ck` = egy betű átlagos szélessége em-ben, a 64 lapon mérve (2026-11-11): a nagybetűs Space Grotesk
   címek .54–.59, az Inter .50–.57, a nagybetűs JetBrains Mono .66. Az alap .6: inkább kicsit kisebb, mint „…”. */
:has(> .cf){ container-type: inline-size; }
.cf{ display: inline-block; vertical-align: top; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: max(min(1em, var(--cmin, .9375rem)), min(1em, calc(100cqi / (var(--cn) * var(--ck, .6))))); }
body.lp summary > .cf{ --ck: .58; }
body.lp .ar-alcim2 > .cf{ --ck: .67; }
body.lp .jogi-tj a:has(> .cf){ display: block; }
body.lp .jogi-tj a > .cf{ --ck: .56; }

/* Flex-gyerek konténernél a szélesség tartalomfüggő lenne (összeesik): kifeszítjük. */
body.lp .szerzo-link h2:has(> .cf){ align-self: stretch; }
body.lp .ar-doboz-fej .ar-nev:has(> .cf){ flex: 1 1 auto; min-width: 0; }
/* Táblafej és jogi link-gomb egy sorban; a tábla doboza úgyis görgethető. */
body.lp table th{ white-space: nowrap; }
body.lp .jogi-link{ white-space: nowrap; font-size: min(1em, 4.1vw); }
/* Szerzői lap cikklistája: a cikkcím-link egy sorban, ha nem fér, „…” (a teljes cím a cikk lapján). */
body.lp .szerzo-cikkek li a{ display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── profil.css ── */
/* weblockai — belépett profil a fejlécben + a köszönő lap „Így tovább” doboza (2026-10-06).
   Külön fájl, mert a plakat.css STABLE; a plakat.css UTÁN töltődik. */
/* ══ BELÉPVE: SZÖRNYECSKE + NÉV A FEJLÉCBEN (2026-10-06, a user: „egyértelmű legyen, hogy be vagyok lépve,
   olyan szörnyecskékkel, mint a podomedicnél”). A „Fiókom” gomb helyén áll, ugyanabba a Műhelybe visz. ══ */
body.lp .lp-profil {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 15rem;
  padding: 4px 14px 4px 4px; border: 1px solid var(--m-lime); border-radius: 12px;
  background: var(--m-fekete); color: var(--m-feher); text-decoration: none;
}
body.lp .lp-profil:hover { background: var(--m-szurke-felulet); color: var(--m-feher); }
body.lp .lp-profil:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 3px; }
body.lp .lp-szorny { display: block; flex: none; width: 36px; height: 36px; }
body.lp .lp-profil-szoveg { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
body.lp .lp-profil-szoveg small { display: flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; color: var(--m-lime); }
body.lp .lp-profil-szoveg small::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--m-lime); }
body.lp .lp-profil-szoveg b { max-width: 9rem; overflow: hidden; font-size: .95rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) {
  body.lp .lp-profil { gap: 8px; padding-right: 10px; }
  body.lp .lp-szorny { width: 32px; height: 32px; }
  body.lp .lp-profil-szoveg b { max-width: 5.5rem; }
}
@media (max-width: 359px) { body.lp .lp-profil-szoveg b { max-width: 4.25rem; } }

/* ══ KÖSZÖNŐ LAP: „ÍGY TOVÁBB” (2026-10-06, a user: „nem egyértelmű, mire kell kattintanom”) ══
   Három számozott lépés és egy fő gomb az ügyfélkapuba. */
body.lp .ko-tovabb {
  max-width: 560px; margin: 0 auto 22px; padding: clamp(18px, 4vw, 26px);
  text-align: left; background: var(--m-sotet-sav); border: 1px solid var(--m-lime); border-radius: 12px;
}
body.lp .ko-tovabb h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 4vw, 2rem); }
body.lp .ko-tovabb ol { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
body.lp .ko-tovabb li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
body.lp .ko-szam {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 4px; background: var(--m-lime); color: var(--m-fekete); font-weight: 800;
}
body.lp .ko-tovabb li > span:last-child { display: grid; gap: 2px; min-width: 0; color: var(--lp-halvany); font-size: var(--t-2); line-height: 1.5; overflow-wrap: anywhere; }
body.lp .ko-tovabb li b { color: var(--m-feher); font-size: var(--t-3); }
body.lp .ko-tovabb .lp-btn { width: 100%; white-space: normal; text-align: center; }
/* 2026-10-07, a user: „a teli lime vagy magenta gomb egér alatt vagy kattintáskor csak keret lett, az is legyen teli”.
   A plakat.css (STABLE) fekete hovere helyett: teli marad, egy árnyalattal sötétebb. */
body.lp :is(.u-hero .u-gomb, .lp-btn.lt-magenta, .vs-csomag .lp-btn, form[action="/api/fizetes.php"] .lp-btn, .lp-fej .lp-btn.lp-fej-vasar):is(:hover, :active) {
  background: var(--m-magenta-kozep); color: var(--m-feher); border-color: var(--m-magenta-kozep);
}
body.lp .vs-csomag .lp-btn2:is(:hover, :active) { background: var(--m-lime-vilagos); color: var(--m-fekete); border-color: var(--m-lime-vilagos); }
/* 2026-10-06, a user: „ha ráhúzom az egeret, a gomb legyen lime” (a plakat.css fekete hovere helyett). */
body.lp .ko-tovabb .lp-btn.lt-magenta:hover { background: var(--m-lime); color: var(--m-fekete); border-color: var(--m-lime); }
/* 2026-10-07: a letöltés a fő gomb, az ügyfélkapu alatta körvonalas második. */
body.lp .ko-tovabb .lp-btn.ko-masod { margin-top: 18px; background: transparent; color: var(--m-lime); border: 1px solid var(--m-lime); }
body.lp .ko-tovabb .lp-btn.ko-masod:hover { background: var(--m-lime); color: var(--m-fekete); }
body.lp .ko-apro { margin: 12px 0 0; color: var(--lp-dim); font-size: var(--t-1); line-height: 1.5; }
/* Belépve a profil szélesebb a „Fiókom” gombnál: mérve 1280 px alatt kitolta a fejlécet, ezért 1360 alatt a menügomb jön. */
/* 2026-10-07, a user: „a logó mellé kérem a menüt”: 19 px-es menüvel mérve 1140 px-től fér ki, a leghosszabb névvel (9rem) 1256-tól. */
/* 2026-10-07, hibakereső kör, mérve: 360–374 px között a fejléc 8 px-lel kilógott (a 19 px-es „Megveszem” óta);
   a plakat.css szűkítése csak 359 px-ig tart. A betűméret marad (kontraszt), a térköz és a belső margó szűkül. */
@media (min-width: 360px) and (max-width: 374px) {
  body.lp .lp-sav { gap: 6px; }
  body.lp .lp-fej-jobb { gap: 4px; }
  body.lp .lp-fej .lp-btn.lp-fej-vasar { padding-inline: 9px; }
}
/* 2026-10-07, mérve: a morzsa „Főoldal” linkje 23 px magas volt; érintőképernyőn legalább 44 px. */
@media (max-width: 1023px) {
  body.lp .lp-morzsa a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}
/* 2026-10-07, mérve: a cikk végi Források linkjei 34 px magasak voltak. */
body.lp .tb-forrasok ol { gap: 0; }
body.lp .tb-forrasok li a { padding: 11px 0; min-height: 44px; }
/* 2026-10-07, mérve: a tartalomjegyzék sorai (ÁSZF, adatvédelem, cikkek) 33 px magasak voltak, a csomaglink a vásárlás lapon 16 px.
   A sorköz a linkbe kerül át, így a lista alig nyúlik. */
body.lp .jogi-tj ol { gap: 0; }
body.lp .jogi-tj a { min-height: 44px; padding: 10px 0; }
body.lp .vs-apro a[href="#mit-kapsz"] { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1279px) {
  body.lp .lp-fej--belepve .lp-mob { display: block; }
  body.lp .lp-fej--belepve .lp-nav, body.lp .lp-fej--belepve .lp-link, body.lp .lp-fej--belepve .lp-fej-zaszlok { display: none; }
  body.lp .lp-fej--belepve .lp-sav { justify-content: space-between; }
  body.lp .lp-fej--belepve .lp-logo { margin-right: auto; }
}

/* ── egyseges.css ── */
/* ══ EGYSÉGES FELÜLET (2026-11-09, a user: „ennek a mintájára az összes oldalt építsd át … nem vész el semmi,
   csak kicsit megszépül”). Minta: ~/Claude/_elonezet/belso-minta/ (jóváhagyva: „csodás”).
   Csak kinézet: a lapok működése, szövege és sorrendje nem változik. Minden lap UTOLSÓ stíluslapja
   (belső: `wlai_head()`, nyilvános: `_publikus.php`), a Hollywood Box lapjain NEM töltődik be.
   Sok régi szabály `:root:root … !important`, ezért itt `:root:root:root` + `!important`.

   GOMB = a fejléc Platform gombja (`_platform_fulek.php` pf_bar_gomb): 32 px magas, 0 12px, sarok 10,
   Inter 700 / 12,5 px, 1 px keret. A tapintható terület a láthatatlan ::after-rel 44 px (mint ott).
   DOBOZ: külső 16, benne ülő elem 12 (a Higgsfield-kártyák aránya, saját színekkel). */

:root{
  --gomb-mag: 32px; --gomb-sarok: 10px; --gomb-pad: 0 12px; --gomb-keret: 1px;
  --gomb-betu-meret: .8125rem; --gomb-betu-suly: 700; /* 2026-11-10: 12,5 → 13 px, a betűskála „s” lépcsője */
  --doboz-sarok: 16px; --belso-sarok: 12px;
  --egy-doboz-bg: var(--m-sotet-doboz); --egy-belso-bg: var(--m-szurke-felulet); --egy-belso-hover: var(--m-sotet-aktiv);
  --egy-vonal: rgba(var(--m-feher-rgb),.07); --egy-vonal-2: rgba(var(--m-feher-rgb),.12);
  --egy-szoveg: var(--m-feher-tort); --egy-halk: var(--m-szurke-halk); --egy-halk-2: var(--m-szurke-kozep);
  --egy-masod-bg: rgba(var(--m-feher-rgb),.06); --egy-masod-hover: rgba(var(--m-feher-rgb),.11);
  --egy-veszely: var(--m-piros-halvany); --egy-veszely-bg: rgba(252,165,165,.1); --egy-veszely-hover: rgba(252,165,165,.18);
  --egy-szel: clamp(16px, 2.5vw, 40px);
}

/* ── 1. GOMBOK: egy forma mindenhol ── */
:root:root:root :is(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn,
  .proj-torol-btn, .sec-mini, .mh-mod-gomb, .ms-ai-gomb, .tbl-torol, .elof-gomb, .kl-gomb, .dont-gomb, .kp-tag-gomb,
  .lp-btn, .lp-btn2, .lp-btn-nagy, .u-gomb, .u-gomb2, .tb-aipay, .bar-uj, .rb-gomb, .wh-csuk, .menu-btn,
  .kedv-x, .btn--icon, .wlai-suti-igen, .wlai-suti-nem):not(.um-nyit){
  box-sizing: border-box !important;
  height: var(--gomb-mag) !important; min-height: var(--gomb-mag) !important;
  padding: var(--gomb-pad) !important;
  border-width: var(--gomb-keret) !important; border-radius: var(--gomb-sarok) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: var(--gomb-betu-meret) !important; font-weight: var(--gomb-betu-suly) !important;
  line-height: 1 !important; letter-spacing: .01em !important;
  gap: .45em !important; white-space: nowrap; box-shadow: none !important;
}
/* A nyitó gomb ára (főoldal: „Megveszem | 4 900 Ft-tól / hó”) a gomb betűjével, külön elválasztva. */
:root:root:root .u-gomb .u-gomb-ar{ font-size: inherit !important; line-height: 1 !important; padding: 0 0 0 .55em !important; margin: 0 !important; }
/* A nyilvános fejléc telefonos menügombja: 32 px, mint a többi ikongomb. */
:root:root:root .lp-mob > summary{ width: var(--gomb-mag) !important; height: var(--gomb-mag) !important; border-radius: var(--gomb-sarok) !important; }
/* A piacajánló sáv („Go to weblockaistudio.com”, `_publikus.php`) gombja és bezárója. */
:root:root:root .lp-piacsav a{
  min-height: var(--gomb-mag) !important; height: var(--gomb-mag); padding: 0 12px !important;
  border-radius: var(--gomb-sarok) !important; font: 700 var(--gomb-betu-meret)/1 'Inter', system-ui, sans-serif !important;
  white-space: nowrap;
}
:root:root:root .lp-piacsav button{ width: var(--gomb-mag) !important; height: var(--gomb-mag) !important; border-radius: var(--gomb-sarok) !important; }
/* Csak ikon: négyzet. */
/* 2026-11-10: a `:not(.um-nyit)` kell, különben az 1. rész (0,5,0) nyer, a négyzet 12-12 px belső margót kap, és az ikonnak 6 px marad
   (a jobb sáv téma-kapcsolója ezért volt „miniatűr”). */
:root:root:root :is(.rb-gomb, .wh-csuk, .menu-btn, .kedv-x, .btn--icon, .proj-torol-btn):not(.um-nyit){
  width: var(--gomb-mag) !important; min-width: var(--gomb-mag) !important; padding: 0 !important;
}
:root:root:root :is(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn,
  .proj-torol-btn, .sec-mini, .mh-mod-gomb, .ms-ai-gomb, .rb-gomb, .wh-csuk, .menu-btn, .lp-btn, .lp-btn2, .u-gomb, .u-gomb2) .i{
  width: 1rem !important; height: 1rem !important;
}
/* 44 px-es tapintható terület (a pozíciót a lap saját szabálya felülírhatja, ezért :where). */
:where(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn, .sec-mini, .mh-mod-gomb,
  .ms-ai-gomb, .lp-btn, .lp-btn2, .u-gomb, .u-gomb2, .rb-gomb, .menu-btn, .btn--icon):not(.um-nyit){ position: relative; }
:where(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn, .sec-mini, .mh-mod-gomb,
  .ms-ai-gomb, .lp-btn, .lp-btn2, .u-gomb, .u-gomb2, .rb-gomb, .menu-btn, .btn--icon):not(.um-nyit)::after{
  content: ""; position: absolute; inset: -6px -2px;
}

/* Színek a sötét felületen (a minta szerint): fő = lime, második szint = semleges, figyelj/fizess = magenta,
   törlés = halvány piros. A világos téma a régi szabályaival marad. */
:root:root:root:not([data-theme="light"]) :is(.wg--fekete, .wg--korvonal, .copy-btn, .tool-btn:not(.aik-torol):not(.mf-torol),
  .btn--secondary, .btn--ghost, .btn--dark, .sec-mini, .kedv-btn, .mh-mod-gomb:not(.aktiv), .lept-btn:not(.fo),
  button.btn:not([class*="btn--"]), a.btn:not([class*="btn--"]), .rb-gomb, .wh-csuk, .menu-btn, .kedv-x){
  background: var(--egy-masod-bg) !important; color: var(--egy-szoveg) !important; border-color: transparent !important;
}
:root:root:root:not([data-theme="light"]) :is(.wg--fekete, .wg--korvonal, .copy-btn, .tool-btn:not(.aik-torol):not(.mf-torol),
  .btn--secondary, .btn--ghost, .btn--dark, .sec-mini, .kedv-btn, .mh-mod-gomb:not(.aktiv), .lept-btn:not(.fo),
  button.btn:not([class*="btn--"]), a.btn:not([class*="btn--"]), .rb-gomb, .wh-csuk, .menu-btn, .kedv-x):hover{
  background: var(--egy-masod-hover) !important; color: var(--egy-szoveg) !important;
}
:root:root:root:not([data-theme="light"]) :is(.rb-gomb, .wh-csuk, .menu-btn, .kedv-x) .i{ color: inherit !important; }
:root:root:root:not([data-theme="light"]) :is(.wg--torol, .btn--danger, .tbl-torol, .proj-torol-btn, .tool-btn.aik-torol, .tool-btn.mf-torol){
  background: var(--egy-veszely-bg) !important; color: var(--egy-veszely) !important; border-color: transparent !important;
}
:root:root:root:not([data-theme="light"]) :is(.wg--torol, .btn--danger, .tbl-torol, .proj-torol-btn, .tool-btn.aik-torol, .tool-btn.mf-torol):hover{
  background: var(--egy-veszely-hover) !important; color: var(--egy-veszely) !important;
}
:root:root:root :is(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn, .sec-mini,
  .mh-mod-gomb, .ms-ai-gomb, .rb-gomb, .wh-csuk, .menu-btn, .lp-btn, .lp-btn2, .u-gomb, .u-gomb2):focus-visible{
  outline: 2px solid var(--m-lime) !important; outline-offset: 2px !important;
}

/* ── 2. DOBOZOK ── */
:root:root:root :is(.doboz, .kartya){ border-radius: var(--doboz-sarok) !important; }
:root:root:root :is(.doboz, .kartya) :is(.doboz, .kartya){ border-radius: var(--belso-sarok) !important; }
:root:root:root:not([data-theme="light"]) body:not(.lp) :is(.doboz, .kartya):not([class*="doboz--"]):not([class*="kartya--"]){
  background: var(--egy-doboz-bg) !important; border: 1px solid var(--egy-vonal) !important;
}
:root:root:root:not([data-theme="light"]) body:not(.lp) :is(.doboz, .kartya) :is(.doboz, .kartya):not([class*="doboz--"]):not([class*="kartya--"]){
  background: var(--egy-belso-bg) !important; border-color: transparent !important;
}

/* ── 3. MEZŐK (belső lapokon): a gombbal egy sorban, egy magasság ── */
:root:root:root body:not(.lp) :is(input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="url"],
  [type="search"], [type="tel"], [type="date"], [type="time"], :not([type])), select):not(.jszem-mezo){
  height: var(--gomb-mag) !important; min-height: var(--gomb-mag) !important;
  padding-top: 0 !important; padding-bottom: 0 !important; font-size: .8125rem !important;
  border-radius: var(--gomb-sarok) !important;
}
:root:root:root body:not(.lp) textarea{ border-radius: var(--belso-sarok) !important; }

/* ── 4. FEJLÉC: teljes szélesség, Inter menü ── */
:root:root:root .lp-fej{ font-family: 'Inter', system-ui, sans-serif; }
:root:root:root .lp-sav{ max-width: none !important; padding: 0 var(--egy-szel) !important; }
:root:root:root .lp-nav{ gap: 2px !important; }
/* 2026-11-09, a user: „felső menüt tedd középre úgy, ahogy hely van.” A logó és a jobb oldali eszközök közti szabad sáv közepére. */
@media (min-width: 1152px){
  :root:root:root .lp-nav{ flex: 1 1 auto; justify-content: center; margin-right: 0 !important; }
}
:root:root:root .lp-nav a{
  font-family: 'Inter', system-ui, sans-serif !important; font-size: .875rem !important; font-weight: 500 !important;
  letter-spacing: 0 !important; color: var(--m-szurke-halk) !important;
  display: inline-flex !important; align-items: center !important; min-height: 34px !important; height: 34px;
  padding: 0 12px !important; border: 0 !important; border-radius: 8px !important;
}
:root:root:root .lp-nav a:hover{ color: var(--egy-szoveg) !important; background: rgba(var(--m-feher-rgb),.05); }
:root:root:root .lp-nav a[aria-current]{ color: var(--m-lime) !important; }
:root:root:root .lp-fej .lp-btn{ font-size: var(--gomb-betu-meret) !important; }
:root:root:root .lp-mob-lap a{ font-family: 'Inter', system-ui, sans-serif !important; font-size: 1rem !important; font-weight: 500 !important; }

/* ── 5. BAL SÁV ── */
:root:root:root .oldalsav{ font-family: 'Inter', system-ui, sans-serif; }
:root:root:root .oldalsav :is(.sav-pont, .sav-lepes, .wh-al-elem){
  font-family: 'Inter', system-ui, sans-serif !important; font-size: .875rem !important; font-weight: 500 !important;
  letter-spacing: 0 !important; border-radius: var(--belso-sarok) !important;
}
:root:root:root .wh-menu .sav-pont{ min-height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* 2026-11-11, a user („valami a menüvel nem stimmel”): a fakó szürke helyett világosabb szöveg és ikon (sötét témán). */
:root:root:root:not([data-theme="light"]) .wh-menu .sav-pont:not(.itt), :root:root:root:not([data-theme="light"]) .wh-menu .sav-pont:not(.itt) .lep-ikon{ color: #c9d1da !important; }
/* 2026-11-11, a user: „nagyon szét van húzva … igazítsd el normálisan”. Egérrel 32 px-es sor, szűkebb csoportcím;
   érintőképernyőn marad a 38 px (ujjnyi hely). */
@media (pointer: fine){
  :root:root:root .oldalsav .wh-menu{ gap: 1px !important; }
  :root:root:root .wh-menu .sav-pont{ min-height: 32px !important; }
  :root:root:root .wh-menu .sav-pont--elval{ margin-top: .25rem !important; padding-top: 0 !important; }
  :root:root:root .oldalsav .wh-menu-cim{ margin: .625rem 0 .125rem !important; }
}
:root:root:root .oldalsav .wh-menu-cim{
  font-family: 'Inter', system-ui, sans-serif !important; font-size: .6875rem !important; font-weight: 600 !important;
  letter-spacing: .08em !important;
}

/* ── 6. PLATFORM FÜLSOR (`_platform_fulek.php`, a lap saját <style>-ja után) ── */
:root:root:root .pf-sor{ flex-wrap: wrap !important; overflow: visible !important; }
:root:root:root .pf-sor-cs{
  width: fit-content; max-width: 100%; gap: 6px !important; padding: 4px !important;
  background: var(--egy-doboz-bg); border: 1px solid var(--egy-vonal); border-radius: var(--doboz-sarok);
}
:root:root:root[data-theme="light"] .pf-sor-cs{ background: var(--m-vilagos-sav); border-color: var(--m-vilagos-vonal); }
:root:root:root .pf-fulsor :is(.pf-cs, .pf-lap, .pf-al){
  box-sizing: border-box; height: var(--gomb-mag) !important; min-height: var(--gomb-mag) !important;
  font-family: 'Inter', system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
:root:root:root .pf-fulsor .pf-cs{
  padding: 0 14px !important; border: 0 !important; border-radius: var(--belso-sarok) !important;
  background: transparent !important; color: var(--pf-ink3) !important; font-size: .875rem !important;
}
:root:root:root .pf-fulsor .pf-cs:hover{ color: var(--pf-ink) !important; }
:root:root:root .pf-fulsor .pf-cs.on{ background: var(--egy-belso-hover) !important; color: var(--egy-szoveg) !important; }
:root:root:root[data-theme="light"] .pf-fulsor .pf-cs.on{ background: var(--m-feher) !important; color: var(--m-fekete-mely) !important; }
:root:root:root .pf-sor-lap{ background: none !important; border: 0 !important; padding: 0 !important; gap: 4px !important; }
:root:root:root .pf-fulsor :is(.pf-lap, .pf-al){
  padding: 0 12px !important; border: 0 !important; border-radius: var(--gomb-sarok) !important;
  background: transparent !important; color: var(--pf-ink3) !important; font-size: .8125rem !important;
}
:root:root:root .pf-fulsor :is(.pf-lap, .pf-al):hover{ background: rgba(var(--m-feher-rgb),.05) !important; color: var(--pf-ink) !important; }
:root:root:root .pf-fulsor :is(.pf-lap, .pf-al).on{ background: rgba(var(--m-lime-rgb),.12) !important; color: var(--m-lime) !important; }
:root:root:root[data-theme="light"] .pf-fulsor :is(.pf-lap, .pf-al).on{ background: var(--m-lime) !important; color: var(--m-fekete) !important; }

/* ── 7. JOBB SÁV ── */
:root:root:root .jobbsav{ gap: 6px; }

/* ── 8. JOGI SOR a Profil panel alján (2026-11-09: a belső lapokon nincs lábléc) ── */
.wh-jogi{ display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px 4px; border-top: 1px solid var(--egy-vonal, rgba(var(--m-feher-rgb),.07)); margin-top: 8px; }
.wh-jogi a{ font: 500 .75rem/1.6 'Inter', system-ui, sans-serif; color: var(--text-muted, #7c8591); text-decoration: none; }
.wh-jogi a:hover{ color: var(--text, #fff); text-decoration: underline; }

/* ── 9. FILMTERVEZŐ: 2026-11-09 óta a film.php saját .fx-tömbje adja a méreteket (tokenekkel), itt nincs felülírás. ── */

/* ── 10. A LAPOK SAJÁT ELEMEI: 2026-11-09 óta a lapok saját szabályai adják a méreteket (tokenekkel), itt nincs felülírás. ── */

/* ── 11. ALCÍMEK BETŰJE: Space Grotesk (2026-11-09, a user a Higgsfield-feliratot mutatta: „ezt a betűtípust használhatod
   mindenhol, ahol indokolt”). A belső lapok al-, doboz- és szakaszcímei eddig Inter 700 (arculat-a.css) és Plus Jakarta
   Sans 800 (.sec-label) voltak. A nagy, nagybetűs Anton főcím, a folyószöveg (Inter) és a gombok maradnak.
   A betű a saját szerverről jön (OFL licenc), a latin-ext a magyar ő és ű miatt kell. */
@font-face{ font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin.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; }
:root{ --font-alcim: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
:root:root:root body:not(.lp) :is(h2, h3, h4):not(.md-lap > h2),
:root:root:root body:not(.lp) :is(.sec-label, .hb-doboz-fej b),
/* 2026-11-10, a user („volt egy utasításom a rendszerben lévő összes ilyen betűtípussal kapcsolatban”): a nagy, vastag
   számok és nevek is ugyanezt kapják, és mind a Higgsfield-cím mintája: csupa nagybetű, szoros betűköz, a saját színével. */
:root:root:root body:not(.lp) :is(.aik-ossz-szam b, .aik-szam b, .akt-mai b, .auk-nev b, .vv-csomag b, .adm-szam b){ font-family: var(--font-alcim) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; text-transform: uppercase !important; }

/* ── 12. NINCS TÖRT FELIRAT (2026-11-10, a user: „nem akarok ilyen tört sorokat látni sehol a rendszerben”).
   Mérve: 631 tört felirat, ebből 349 a választócsempéken. Cím, címke, csempe-felirat egy sorban; ami így sem fér ki,
   annak a vége „…” (a teljes szöveg a title-ben, _kozos.php). A folyó szöveg (bekezdés, lista, táblázatcella) tördelődhet.
   A 40 karakternél hosszabb mondat (Hook-ötlet, hosszú mezőcímke, dokumentáció alcíme) is folyó szöveg: a _kozos.php
   `data-folyo`-val jelöli, az tördelődik, nem vágjuk le (mérve 11-10: a levágás tartalmat vitt el). ── */
:root:root:root body:not(.lp) :is(h2, h3, h4, .sec-label, label, th, summary, .adm-szam > :is(em, span)):not(.md-lap > h2):not(:has(input, select, textarea, img)):not([data-folyo]){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* A választócsempék a szövegükhöz igazodnak és kitöltik a sort: nincs tört felirat, nincs magányos vagy teljes szélességű csempe. */
:root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb)){ display: flex !important; flex-wrap: wrap; }
:root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb)) > .opt{ flex: 1 1 auto; min-width: 0; max-width: 100%; }
:root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb)) > :not(.opt){ flex: 1 1 100%; }
/* Az utolsó sor csempéi ne nyúljanak ki a teljes szélességre: egy láthatatlan töltelék nyeli el a maradék helyet. */
:root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb))::after{ content: ""; flex: 999 1 0; min-width: 0; }
@media (max-width: 560px){ :root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb))::after{ display: none; } :root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb)) > .opt{ flex-basis: 100%; } }
/* Képes csempe: kötött rács marad, de olyan széles oszlopokkal, hogy a felirata elférjen. */
:root:root:root body:not(.lp) .opts:is(.media, .elonezetes, :has(.elonez, .opt-thumb)){ grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)) !important; }
:root:root:root body:not(.lp) .opt > :is(strong, b, span, em):not(.opt-jel):not([data-folyo]){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* A Filmtervező csempéjében a leírás a cím alá igazodik (a design.css 13 px-es behúzása nem kell). */
:root:root:root body:not(.lp) .fx .opt > span{ padding: 0 !important; }
/* 2026-11-10, a user: „miért van több helyen félboxban a szabad karakteres mező? teljes szélességben kérem mindenhol”.
   Ok: a Filmtervező a mező címkéjét is `.mezok` rácsnak kapta (film.php mezo()), így a felirat és a szövegdoboz egymás mellé került.
   Szabály: a szövegdoboz (textarea) mindig a teljes szélességet kapja, a felirata fölötte áll, és rácsban is végigér a soron. */
:root:root:root body:not(.lp) :is(label, .field, .mezo, .mezok, .kp-mezo, .lp-mezo):has(> textarea){ grid-template-columns: minmax(0, 1fr) !important; grid-column: 1 / -1 !important; flex-basis: 100% !important; width: 100%; }
:root:root:root body:not(.lp) :is(label, .field, .mezo, .mezok, .kp-mezo, .lp-mezo) > textarea{ width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

/* ── 13. A BELSŐ FEJLÉC KISEBB (2026-11-10, a user: „a menü magasságot vegyük kisebbre … ez a két elem indokolatlanul nagy,
   és ennek nagy része bemehetne a jobb oldali shellbe”). 1024 px felett a fej 64 → 52 px. A belső lapokon a nyelvváltó
   és a „Belépve” lapka kikerül a fejlécből: a két zászló a jobb sávban áll egymás alatt (`_kozos.php` wlai_jobbsav()),
   a fiókot a jobb sáv profilgombja nyitja. Telefonon (620 px alatt) marad a régi rend: a zászlók a ☰ menüben. */
@media (min-width: 1024px){
:root:root:root body:not(.lp):has(> .lp-fej) > .lp-fej{ --lp-fej: 52px !important; }
:root:root:root body:not(.lp):has(> .lp-fej) .lp-sav{ height: 52px !important; }
:root:root:root body:not(.lp):has(> .lp-fej) .site-bar{ top: 53px !important; }
:root:root:root body:not(.lp):has(> .lp-fej) :is(.oldalsav, .jobbsav){ top: 53px !important; }
}
@media (min-width: 621px){
:root:root:root body:not(.lp):has(.jobbsav .rb-nyelvek) .lp-fej :is(.lp-fej-zaszlok, .lp-profil){ display: none !important; }
:root:root:root body:not(.lp) .jobbsav .rb-nyelvek{ display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; }
:root:root:root body:not(.lp) .jobbsav .rb-nyelvek > :is(a, span){ display: grid; place-items: center; width: var(--gomb-mag); height: var(--gomb-mag); min-width: 0; min-height: 0; padding: 0; border-radius: var(--gomb-sarok); }
:root:root:root body:not(.lp) .jobbsav .rb-nyelvek .zaszlo{ width: 20px; height: 14px; }
}
@media (max-width: 620px){
:root:root:root body:not(.lp) .jobbsav .rb-nyelvek{ display: none; }
}
/* A bal sáv csukó gombja: kerek és magenta, fehér nyíllal (a user kérése, 2026-10-07; kulso-fejlec.css).
   Az 1. rész semleges ikongomb-szabálya 11-09-én véletlenül felülírta (a `:is()` a legerősebb tagja, a `.tool-btn:not():not()`
   súlyát kapja, ezért kell a hármas osztály): itt visszakapja a saját színét. */
@media (min-width: 1280px){
:root:root:root:not([data-theme="light"]) body:has(> .lp-fej) .wh-csuk.wh-csuk.wh-csuk{ background: var(--m-magenta) !important; color: var(--m-feher) !important; border-radius: 50% !important; }
:root:root:root:not([data-theme="light"]) body:has(> .lp-fej) .wh-csuk.wh-csuk.wh-csuk:hover{ background: var(--m-magenta) !important; color: var(--m-feher) !important; filter: brightness(1.1); }
:root:root:root body:not(.lp):has(> .lp-fej) .wh-csuk{ top: 73px !important; }
}

/* ── 14. BELÉPVE NINCS FELSŐ MENÜ (2026-11-10, a user elfogadott terve: „belépve nincs felső menü, a logó a bal sáv tetején”).
   1024 px felett a külső fejléc eltűnik, a két sáv a lap tetejéig ér, a bal sáv feje újra a logót mutatja.
   2026-11-11, a user: „pont úgy kuka, mint a belső oldalon”: belépés nélkül is, a bal sávos lapokon (`.lp-fej--savos`).
   A nyilvános linkek a ☰ menüben és a láblécben maradnak. 1023 px alatt minden marad: ott a fejléc ☰-je nyitja a bal sávot. */
@media (min-width: 1024px){
:root:root:root body:is(:not(.lp), .lp--hej) > :is(.lp-fej--belepve, .lp-fej--savos){ display: none !important; }
:root:root:root body:is(:not(.lp), .lp--hej):has(> :is(.lp-fej--belepve, .lp-fej--savos)) :is(.oldalsav, .jobbsav, .site-bar){ top: 0 !important; }
:root:root:root:not([data-sav="zart"]) body:is(:not(.lp), .lp--hej):has(> :is(.lp-fej--belepve, .lp-fej--savos)) .oldalsav .sav-brand{ display: flex !important; }
}
@media (min-width: 1280px){
:root:root:root body:is(:not(.lp), .lp--hej):has(> :is(.lp-fej--belepve, .lp-fej--savos)) .wh-fej{ min-height: 4.4375rem !important; padding: 1rem .875rem !important; border-bottom: 1px solid var(--border) !important; justify-content: flex-start !important; }
:root:root:root body:is(:not(.lp), .lp--hej):has(> :is(.lp-fej--belepve, .lp-fej--savos)) .wh-csuk{ top: 21px !important; }
}

/* ── tipo.css ── */
/* ============================================================
   BETŰREND a nyilvános lapokon (2026-11-10, a user: „a betűtípusok teljes káoszba fulladnak, méretben is …
   használhatjuk a Higi betűtípusait és annak méretét”). A Higgsfield mért rendje: cím Space Grotesk 700,
   nagybetűs, −0,04em; menü Inter 500; gomb Inter 600. Az Anton csak a logóban marad (a user „C” változata).
   Mindig utolsóként töltődik (`_publikus.php`), ezért itt a szabály nyer.
   ============================================================ */
:root{ --t-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); --t-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
       --t-h3: 1.125rem; --t-menu: .9375rem; --t-gomb: .875rem; }
:root:root:root body.lp :is(h1, h2, .lp-hero-cim, .u-h1, .u-h2){
  font-family: var(--font-alcim) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: -.04em !important; }
:root:root:root body.lp :is(h1, .lp-hero-cim, .u-h1){ font-size: var(--t-h1) !important; line-height: 1.02 !important; }
:root:root:root body.lp :is(h2, .u-h2){ font-size: var(--t-h2) !important; line-height: 1.08 !important; }
:root:root:root body.lp main h3{ font-family: var(--font-alcim) !important; font-weight: 700 !important; font-size: var(--t-h3) !important;
  text-transform: uppercase; letter-spacing: -.02em !important; line-height: 1.2 !important; }
/* menü: minden pont egyforma, a „Belépés” is */
:root:root:root body.lp :is(.lp-nav a, .lp-fej .lp-link, .lp-mob-lap a){ font: 500 var(--t-menu)/1.2 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; }
:root:root:root body.lp .lp-fej .lp-btn{ font-size: var(--t-gomb) !important; font-weight: 600 !important; }
/* A régi 22ch-s cím-szélesség az Antonhoz készült; a Space Grotesk szélesebb, ezért a cím a teljes sort kapja. */
:root:root:root body.lp main :is(h2, .u-h2){ max-width: none !important; }
/* Kártyacím: telefonon kisebb, hogy ne törjön két sorba. */
:root:root:root body.lp main h3{ font-size: clamp(.875rem, .72rem + .7vw, var(--t-h3)) !important; }
/* Cikk-kártya címe hosszú mondat: nem nagybetűs, kártyacím-méret (a Higgsfield is így írja a kártyán). */
:root:root:root body.lp .tb-kartya h2{ text-transform: none; letter-spacing: -.01em !important; font-weight: 600 !important;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem) !important; line-height: 1.25 !important; }
/* ── „Stúdiók ▾” lenyíló (2026-11-10) — JS nélkül is nyílik (<details>) ── */
:root:root:root body.lp .lp-le{ position: relative; }
:root:root:root body.lp .lp-le > summary{ list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 4px; white-space: nowrap;
  font: 500 var(--t-menu)/1.2 Inter, system-ui, sans-serif; color: var(--m-szurke-halk); }
:root:root:root body.lp .lp-le > summary::-webkit-details-marker{ display: none; }
:root:root:root body.lp .lp-le > summary::after{ content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
:root:root:root body.lp .lp-le[open] > summary::after{ transform: rotate(-135deg); margin-top: 3px; }
:root:root:root body.lp .lp-le > summary:hover, :root:root:root body.lp .lp-le[open] > summary{ color: var(--m-feher-tort); background: rgba(var(--m-feher-rgb), .05); }
:root:root:root body.lp .lp-le-lap{ position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 21rem; padding: 6px;
  display: grid; gap: 2px; background: #121417; border: 1px solid #2a2e33; border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
:root:root:root:root body.lp :is(.lp-le-lap, .lp-mob-studiok) .lp-le-elem{ display: grid !important; gap: 2px; height: auto !important; min-height: 44px !important;
  padding: 10px 12px !important; border-radius: 4px !important; text-decoration: none; align-items: start !important; }
:root:root:root:root body.lp .lp-le-elem b{ font: 600 .9375rem/1.25 Inter, system-ui, sans-serif; color: var(--m-feher-tort); white-space: nowrap; }
:root:root:root:root body.lp .lp-le-elem small{ font: 400 .8125rem/1.35 Inter, system-ui, sans-serif; color: var(--m-szurke-halk); }
:root:root:root:root body.lp .lp-le-elem em{ font: 600 .6875rem/1 Inter, system-ui, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .04em;
  margin-left: 6px; padding: 3px 6px; border-radius: 4px; color: var(--m-tinta); background: var(--m-lime); vertical-align: 2px; }
:root:root:root:root body.lp a.lp-le-elem:hover{ background: rgba(var(--m-feher-rgb), .06) !important; }
:root:root:root:root body.lp .lp-le-elem--hamar b{ color: var(--m-szurke-halk); }
/* telefonon a ☰ menüben: kis címke, alatta a stúdiók */
:root:root:root body.lp .lp-mob-cimke{ margin: 6px 12px 2px; font: 600 .6875rem/1 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--m-szurke-halk); }
:root:root:root body.lp .lp-mob-studiok{ display: grid; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #2a2e33; }
:root:root:root:root body.lp :is(.lp-le-lap, .lp-mob-studiok) .lp-le-elem{ justify-content: start !important; justify-items: start !important; text-align: left !important; }

/* ============================================================
   SZÖVEG-SZEREPEK (2026-11-10 éjjel, a user: „van vagy 6 féle méret és stilus”). Mérve élesben: 58 betűkép
   9 lapon (szöveg 15 és 17 px vegyesen, Anton a számokban, mono 9–16 px). Innentől szerepenként EGY betűkép,
   a skála lépcsői: 11 · 13 · 14 · 16 · 18 · 22 · 28 · 36 (+ h1).
     szöveg Inter 400 16 · bevezető Inter 400 18 · apró Inter 400 14 · gomb Inter 600 16 (fejlécben 14)
     címke JetBrains Mono 600 13 nagybetűs · adat JetBrains Mono 500 14 · szám Space Grotesk 700 22/28/36
   Az Anton csak a logóban marad.
   ============================================================ */
:root{ --t-szoveg: 1rem; --t-vezeto: 1.125rem; --t-apro: .875rem; --t-cimke: .8125rem; --t-adat: .875rem;
       --t-szam-s: 1.375rem; --t-szam-m: 1.75rem; --t-szam-l: 2.25rem; }
/* alap: minden bekezdés, listaelem és mezőfelirat */
:root:root:root body.lp :is(main, .lp-lab) :is(p, li, label, dd, dt){ font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-szoveg) !important; font-weight: 400 !important; }
:root:root:root body.lp main :is(p, li, label) :is(b, strong){ font-size: inherit !important; font-weight: 600 !important; }
/* bevezető */
:root:root:root:root body.lp :is(.u-vezeto, .lp-vezeto, .lp-alcim, .u-alcim, .kp-bal > p){ font: 400 var(--t-vezeto)/1.5 Inter, system-ui, sans-serif !important; }
/* apró: jogi sor, lábléc, morzsa, ár melletti „/ hó” */
:root:root:root:root body.lp :is(main small, .lp-apro, .vs-apro, .kp-apro, .kp-sugo, .partner-jel, .lp-copy, .lp-lab-ceg, .rl-megj, .u-hang,
  .kn-figy, .vs-bizalom span, .ar-ar span, .vs-csomag-ar span, .u-szam span, .lp-morzsa a, .lp-morzsa b, .lp-lab-fo p, .lp-lab-oszlop a,
  .rl-modell small, .rl-szerep, .pk-mire, .u-gomb-ar, .vl-pipa, .vl-pipa span, .vl-pipa a){
  font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-apro) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }
:root:root:root:root body.lp :is(.lp-morzsa b, .rl-szerep--alap){ font-weight: 600 !important; }
/* gomb */
:root:root:root:root body.lp :is(.lp-btn, .lp-btn2, .u-gomb, .u-gomb2, .pk-gomb, .kp-kuld, .kp-tag-gomb, .u-film-ujra, .rl-ful, .partner-gomb span){
  font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-szoveg) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
:root:root:root:root:root body.lp .lp-fej .lp-btn{ font-size: var(--t-gomb) !important; }
:root:root:root:root:root body.lp .ar-doboz .ar-gomb{ font-size: var(--t-szoveg) !important; }
:root:root:root:root body.lp :is(.vs-ar, .lp-lab-suti button){ font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-apro) !important; }
/* szöveges tovább-link */
:root:root:root:root body.lp :is(.tb-tovabb, .hir-tovabb, .vs-video-tovabb a){ font: 600 var(--t-apro)/1.3 Inter, system-ui, sans-serif !important; }
/* kártya- és sorcím szövegben: félkövér, szövegméret */
/* filmkártya címe: apró félkövér (a jóváhagyott „A” irány: a kártyán kisebb, hogy ne törjön) */
:root:root:root:root body.lp .u-film-cim{ font: 600 var(--t-apro)/1.3 Inter, system-ui, sans-serif !important; }
:root:root:root:root body.lp :is(.kp-ido, .rl-modell b, .u-tb-racs b, .rl-pontok b, .kp-tag b, .rl-kor b, .u-kiemelt b, .ar-sorok span, .vs-ciklus-nev){
  font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-szoveg) !important; font-weight: 600 !important; }
/* címke (kicker, mezőfelirat, lábléc-oszlop címe) */
:root:root:root:root body.lp :is(.u-cimke, .lp-kis, .u-gepsav-cim, .tb-tema, .bt-ut-honnan, .hir-cimke, .tb-kezd-jel, .rl-fej, .kp-mezo label,
  .kp-gyors-cim, .lp-lab-oszlop b, .ar-alcim2){
  font: 600 var(--t-cimke)/1.3 'JetBrains Mono', monospace !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
:root:root:root:root body.lp .vs-jel{ font: 600 .6875rem/1 Inter, system-ui, sans-serif !important; text-transform: uppercase; letter-spacing: .04em !important; }
/* adat */
:root:root:root:root body.lp :is(.rl-szam, .rl-mert, .tb-perc, .u-snitt2 b, .u-snitt2 em, .u-snitt2 span){
  font-family: 'JetBrains Mono', monospace !important; font-size: var(--t-adat) !important; font-weight: 500 !important; }
/* számok: Space Grotesk, az Anton helyett */
:root:root:root:root body.lp :is(.u-szam b, .ar-ar b, .vs-csomag-ar b, .vs-ar b, .ar-sorok b, .u-kredit, .u-lepes-szam, .u-szek-cimke,
  .rl-hely, .rl-osszeg b, .pk-nev, .lp-fazis-szam, .lp-szam-jel, .u-futo-sor li){
  font-family: var(--font-alcim) !important; font-weight: 700 !important; letter-spacing: -.03em !important; line-height: 1 !important; }
:root:root:root:root body.lp .ar-ar b{ font-size: var(--t-szam-l) !important; }
/* a főoldal számsora a lap kirakata: h1-méret, nem új lépcső */
:root:root:root:root body.lp .u-szam b{ font-size: var(--t-h1) !important; }
:root:root:root:root body.lp :is(.vs-csomag-ar b, .u-kredit, .u-lepes-szam, .u-szek-cimke, .rl-hely, .rl-osszeg b, .pk-nev, .lp-fazis-szam, .lp-szam-jel){ font-size: var(--t-szam-m) !important; }
:root:root:root:root body.lp :is(.vs-ar b, .ar-sorok b, .u-futo-sor li){ font-size: var(--t-szam-s) !important; }
/* a főoldali termék-bemutató (rajzolt Műhely-ablak): egy mono méret, a legapróbb címkék sem kisebbek 11 px-nél */
:root:root:root:root body.lp :is(.u-demo-nev, .u-demo-ido, .u-tc, .u-gep, .u-bub, .u-chip, .u-gepnev, .u-gepel2, .u-kredit-mit, .u-jovahagy,
  .u-sor b, .u-sor span, .u-chat-fej span, .u-ablak){
  font-family: 'JetBrains Mono', monospace !important; font-size: .75rem !important; font-weight: 500 !important; }
:root:root:root:root body.lp :is(.u-csomag, .u-csomo, .u-sn b, .u-sn span){ font-family: 'JetBrains Mono', monospace !important; font-size: .6875rem !important; font-weight: 500 !important; }