/* Huni terméktöltő — 9. kör: OLDALSÁV a fejléc helyett.

   Roland (2026-08-27): „bal oldalt jelenik meg egy ilyen sávban, egy erős kék
   elkülönítéssel, és lényegében úgy, hogy ilyen lecsukható lehet. Mert ez nekem
   nem tetszik most, hogy van ez a fejléc."

   A felső üvegsáv MEGSZŰNIK. A négy állapot átkerül az oldalsávba — így a
   képernyő tetején nem marad se fejléc, se fülsor, és a tartalom feljebb kezd.
   A fotózás-lépés NEM kerül bele (Roland: „az nem kell egyáltalán ide").
   A négyből kettő HALK: a Feldolgozás alatt és a Feltöltve. A munka a két
   középső: Átnézésre kész és Félretett.

   Három verzió, egyetlen közös vázzal:
     O1  Tömör kék sáv        — az egész sáv sötétkék, fehér szöveggel
     O2  Kék gerinc + lista   — keskeny kék rúd + világos panel a lépésekkel
     O3  Világos sáv, kék jel — fehér sáv, kék éllel és tömör kék aktív sorral

   Mindhárom LECSUKHATÓ: a sáv jobb szélén ülő kerek gomb csukja/nyitja.
   Csukott állapotban csak az ikonok maradnak, a számok kis jelvényként.       */

/* ══ közös váz ══════════════════════════════════════════════════════ */
body.oldalsavos{
  display:grid;
  grid-template-columns:var(--savszel) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) 40px;
}
body.oldalsavos .oldalsav{grid-row:1 / span 2;grid-column:1}
body.oldalsavos #kozep{grid-column:2;grid-row:1}
body.oldalsavos .alja{grid-column:2;grid-row:2}

.oldalsav{position:relative;display:flex;flex-direction:column;min-width:0;
  transition:none}
.oldalsav *{min-width:0}

/* márka */
.osmarka{display:flex;align-items:center;gap:10px;flex:none}
.osmarka i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:14px;font-weight:700;font-style:normal;flex:none}
.osmarka .nev{display:flex;flex-direction:column;min-width:0}
.osmarka b{font-size:14px;letter-spacing:-.2px;line-height:1.2;white-space:nowrap}
.osmarka span{font-size:11px;line-height:1.2;white-space:nowrap}

/* a lépések */
.osnav{display:flex;flex-direction:column;gap:2px;min-width:0}
.oscim{font-size:10px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;
  padding:0 12px;margin-bottom:7px;white-space:nowrap;overflow:hidden}
.ossor{display:flex;align-items:center;gap:11px;padding:9px 12px;border:0;border-radius:10px;
  background:transparent;font-size:13px;font-weight:500;text-align:left;width:100%;
  position:relative;white-space:nowrap;transition:background .13s,color .13s}
.ossor .ik{width:18px;height:18px;flex:none;display:grid;place-items:center}
.ossor .ik svg{width:17px;height:17px}
.ossor .cimke{flex:1;overflow:hidden;text-overflow:ellipsis}
/* ── A SZÁM ────────────────────────────────────────────────────────────
   MINDEN sorban ugyanaz a doboz — enélkül a halk sorok száma vízszintesen
   elcsúszik a normálokéhoz képest (mérve: 20 px-es doboz 6 px paddinggel
   szemben 0/0). Csak a HÁTTÉR és a SZÍN tér el, és azt a SOR állítja be
   változóval, nem a jelvényen egy külön szabály. Így nincs specificitás-
   verseny: az állapot (halk / hover / aktív) EGY helyen dől el.          */
.ossor .db{min-width:20px;height:19px;padding:0 6px;border-radius:10px;font-size:11px;
  font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums;flex:none;
  background:var(--db-hatter,transparent);color:var(--db-szin,currentColor)}

/* HALK menüpont — Roland: „a feldolgozás alatti rész nem egy fontos menüpont,
   és ilyen halvány legyen a feltöltve rész is; a kettő között lévő átnézésre
   kész és félretett legyen normális menüpont."
   Vagyis: bejövő (halk) → A MUNKA (normál) → kimenő (halk). */
/* A halk sor CSAK SZÍNBEN halk: azonos betűméret, azonos ikonméret, azonos
   számdoboz. Korábban kisebb betű + kisebb ikon + más padding volt rajta —
   ettől tűnt úgy, hogy „el vannak csúszva a számok".
   Roland: „ne legyen ennyire kiemelve a szám, hogy buborékban van, hanem csak
   simán a szám legyen" → a buborékot a `--db-hatter:transparent` veszi le,
   MINDEN állapotban (alap, hover, aktív). */
.ossor.halk{font-weight:400;--db-hatter:transparent}

/* elválasztó a csoportok közt */
.osvalaszto{height:1px;margin:9px 12px}

/* lábazat */
.oslab{margin-top:auto;display:flex;flex-direction:column;gap:2px;flex:none}
.osuser{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  white-space:nowrap}
.osuser i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;font-style:normal;flex:none}
.osuser .nev{flex:1;min-width:0;overflow:hidden}
.osuser b{display:block;font-size:12.5px;font-weight:600;line-height:1.25}
/* ⚠️ 2026-09-17: a PIN-csere kulcsa (.ospin) UGYANÍGY néz ki, de KÜLÖN osztály — ha az
   `oskilep` osztályt kapná, a `.osuser .oskilep` (a kilépés) rá mutatna: a próba a kilépés
   helyett a kulcsra kattintott (mérve). */
.oskilep,.ospin{flex:none;width:28px;height:28px;border-radius:9px;border:0;background:transparent;
  display:grid;place-items:center;color:inherit;opacity:.55;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.oskilep:hover,.ospin:hover{opacity:1;background:rgba(127,127,127,.14)}
body.o1 .oskilep,body.o1 .ospin{color:#fff}
body.o1 .oskilep:hover,body.o1 .ospin:hover{background:rgba(255,255,255,.16)}
body.osszecsukva .oskilep,body.osszecsukva .ospin{display:none}
.osuser span{font-size:10.5px;line-height:1.25}

/* ── a csukó gomb: a sáv jobb szélén ül, mindkét állapotban ugyanott ── */
.csukgomb{position:absolute;top:22px;right:-13px;width:26px;height:26px;border-radius:50%;
  border:0;display:grid;place-items:center;z-index:20;cursor:pointer;
  box-shadow:0 3px 10px rgba(19,26,44,.22);transition:transform .14s}
.csukgomb svg{width:13px;height:13px;transition:transform .18s}
.csukgomb:hover{transform:scale(1.08)}
body.osszecsukva .csukgomb svg{transform:rotate(180deg)}

/* csukott állapot — közös viselkedés */
body.osszecsukva .osmarka .nev,
body.osszecsukva .ossor .cimke,
body.osszecsukva .ossor .db,
body.osszecsukva .osuser .nev,
body.osszecsukva .oscim{display:none}
body.osszecsukva .osmarka{justify-content:center}
body.osszecsukva .ossor{justify-content:center;padding:10px 0}
body.osszecsukva .osuser{justify-content:center;padding:9px 0}
/* a szám csukva kis jelvény az ikon sarkán */
body.osszecsukva .ossor .pont{position:absolute;top:4px;right:9px;min-width:16px;height:16px;
  padding:0 4px;border-radius:8px;font-size:9.5px;font-weight:700;display:grid;
  place-items:center;font-variant-numeric:tabular-nums;
  background:var(--pont-hatter);color:var(--pont-szin)}
.ossor .pont{display:none}

/* ══════════════════════════════════════════════════════════════════════
   O1 — TÖMÖR KÉK SÁV
   Az egész sáv sötétkék, fehér szöveggel. A legerősebb elkülönítés: a
   munkaterület és a navigáció két külön világ.
   ══════════════════════════════════════════════════════════════════════ */
body.o1{--savszel:236px}
body.o1.osszecsukva{--savszel:68px}
body.o1 .oldalsav{
  background:linear-gradient(178deg,#4B60A2 0%,#3B4E8A 46%,#2E3D6C 100%);
  padding:18px 12px 14px;color:rgba(255,255,255,.78);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.07), 4px 0 22px rgba(19,26,44,.16)}
body.o1 .osmarka{padding:0 4px 18px}
body.o1 .osmarka i{background:rgba(255,255,255,.15);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body.o1 .osmarka b{color:#fff}
body.o1 .osmarka span{color:rgba(255,255,255,.58)}
body.o1 .oscim{color:rgba(255,255,255,.46)}
body.o1 .ossor{color:rgba(255,255,255,.8);
  --db-hatter:rgba(255,255,255,.14); --db-szin:rgba(255,255,255,.85);
  --pont-hatter:rgba(255,255,255,.92); --pont-szin:var(--kek-900)}
body.o1 .ossor.halk{color:rgba(255,255,255,.52); --db-hatter:transparent}
body.o1 .ossor:hover, body.o1 .ossor.halk:hover{
  background:rgba(255,255,255,.09); color:#fff}
/* AZ AKTÍV SOR AZ UTOLSÓ SZÓ — a hover soha nem írhatja felül.
   Ezen bukott meg az előző kör: a `.halk:hover` (0,4,1) erősebb volt az
   `.itt`-nél (0,3,1), ezért az aktív „Feltöltve" sorra ráhúzva a szöveg FEHÉR
   lett a fehér lapkán, vagyis eltűnt. Ezért van itt minden kombináció kiírva. */
body.o1 .ossor.itt, body.o1 .ossor.itt:hover,
body.o1 .ossor.halk.itt, body.o1 .ossor.halk.itt:hover{
  background:#fff; color:var(--kek-900); font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  --db-hatter:var(--kek); --db-szin:#fff;
  --pont-hatter:var(--kek); --pont-szin:#fff}
body.o1 .ossor.halk.itt, body.o1 .ossor.halk.itt:hover{
  --db-hatter:transparent; --db-szin:var(--kek-900)}
body.o1 .osvalaszto{background:rgba(255,255,255,.12)}
body.o1 .osuser i{background:rgba(255,255,255,.15);color:#fff}
body.o1 .osuser b{color:#fff}
body.o1 .osuser span{color:rgba(255,255,255,.55)}
body.o1 .csukgomb{background:#fff;color:var(--kek-900)}

/* ══════════════════════════════════════════════════════════════════════
   O2 — KÉK GERINC + VILÁGOS LISTA
   Keskeny, tömör kék rúd (márka, beállítás, felhasználó) + mellette világos
   panel a lépésekkel. Csukáskor a világos panel eltűnik, a kék gerinc MARAD —
   a kék elkülönítés soha nem tűnik el.
   ══════════════════════════════════════════════════════════════════════ */
body.o2{--savszel:290px;--gerinc:66px}
body.o2.osszecsukva{--savszel:var(--gerinc)}
body.o2 .oldalsav{background:var(--lap);
  box-shadow:inset -1px 0 0 var(--keret), 4px 0 20px rgba(19,26,44,.05)}
body.o2 .oldalsav::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--gerinc);
  background:linear-gradient(178deg,#4B60A2,#33447A);z-index:0}
body.o2 .oldalsav > *{position:relative;z-index:1}

/* a gerincen ülő elemek: márka fent, beállítás+felhasználó lent */
body.o2 .osmarka{height:64px;width:var(--gerinc);justify-content:center;flex:none}
body.o2 .osmarka .nev{position:absolute;left:calc(var(--gerinc) + 18px);top:50%;
  transform:translateY(-50%);color:var(--szoveg)}
body.o2 .osmarka i{background:rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
body.o2 .osmarka b{color:var(--szoveg)}
body.o2 .osmarka span{color:var(--halvanyabb)}

body.o2 .osnav{padding:4px 12px 0 calc(var(--gerinc) + 10px)}
body.o2 .oscim{color:var(--halvanyabb);padding:0 10px}
body.o2 .ossor{color:var(--halvany);padding:9px 10px;gap:10px;
  --db-hatter:rgba(19,26,44,.07); --db-szin:var(--halvany);
  --pont-hatter:var(--kek); --pont-szin:#fff}
body.o2 .ossor.halk{color:var(--halvanyabb); --db-hatter:transparent}
body.o2 .ossor:hover, body.o2 .ossor.halk:hover{background:var(--papir);color:var(--szoveg)}
body.o2 .ossor.itt, body.o2 .ossor.itt:hover,
body.o2 .ossor.halk.itt, body.o2 .ossor.halk.itt:hover{
  background:var(--kek-50); color:var(--kek-900); font-weight:600;
  --db-hatter:var(--kek); --db-szin:#fff}
body.o2 .ossor.halk.itt, body.o2 .ossor.halk.itt:hover{
  --db-hatter:transparent; --db-szin:var(--kek-900)}
body.o2 .ossor.itt::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;
  width:3px;border-radius:2px;background:var(--kek)}
body.o2 .osvalaszto{background:var(--keret);margin-left:10px;margin-right:10px}

body.o2 .oslab{width:var(--gerinc);padding-bottom:16px;gap:8px;align-items:center}
body.o2 .oslab::before{content:"";width:26px;height:1px;background:rgba(255,255,255,.16);
  margin-bottom:4px}
body.o2 .oslab .ossor{width:38px;height:38px;justify-content:center;padding:0;
  color:rgba(255,255,255,.72)}
body.o2 .oslab .ossor .ik svg{width:18px;height:18px}
body.o2 .oslab .ossor:hover{background:rgba(255,255,255,.12);color:#fff}
body.o2 .oslab .ossor.itt{background:#fff;color:var(--kek-900)}
body.o2 .oslab .ossor .cimke{display:none}
body.o2 .osuser{padding:0;justify-content:center}
body.o2 .osuser .nev{display:none}
body.o2 .osuser i{background:rgba(255,255,255,.16);color:#fff}
body.o2 .csukgomb{background:var(--kek);color:#fff}
/* Csukva a világos panel eltűnik, a KÉK GERINC MARAD — és vele a navigáció is,
   ikonokká zsugorodva. (Első próbán a `.osnav{display:none}` miatt csukott
   állapotban nem lehetett fület váltani: rossz csere.) */
body.o2.osszecsukva .osmarka .nev{display:none}
body.o2.osszecsukva .oldalsav{box-shadow:4px 0 20px rgba(19,26,44,.12)}
body.o2.osszecsukva .osnav{padding:4px 0 0;width:var(--gerinc);align-items:center}
body.o2.osszecsukva .ossor{width:38px;height:38px;padding:0;color:rgba(255,255,255,.78)}
body.o2.osszecsukva .ossor.halk{color:rgba(255,255,255,.55)}
body.o2.osszecsukva .ossor:hover{background:rgba(255,255,255,.12);color:#fff}
body.o2.osszecsukva .ossor.itt{background:#fff;color:var(--kek-900)}
body.o2.osszecsukva .ossor.itt::before{display:none}
body.o2.osszecsukva .ossor .pont{background:rgba(255,255,255,.92);color:var(--kek-900);
  top:-1px;right:-1px}
body.o2.osszecsukva .ossor.itt .pont{background:var(--kek);color:#fff}
body.o2.osszecsukva .osvalaszto{background:rgba(255,255,255,.18);margin:8px 16px}

/* ══════════════════════════════════════════════════════════════════════
   O3 — VILÁGOS SÁV, KÉK JELÖLÉSSEL
   Fehér sáv, a bal élén erős kék csík, az aktív sor tömör kék. A kék itt
   jelzés, nem fal — a lap egy összefüggő világos felület marad.
   ══════════════════════════════════════════════════════════════════════ */
body.o3{--savszel:236px}
body.o3.osszecsukva{--savszel:68px}
body.o3 .oldalsav{background:var(--lap);padding:18px 12px 14px 20px;
  border-right:1px solid var(--keret);
  box-shadow:inset 10px 0 0 var(--kek), inset 11px 0 0 rgba(255,255,255,.9),
             4px 0 20px rgba(19,26,44,.06)}
body.o3.osszecsukva .oldalsav{padding-left:16px}
body.o3 .osmarka{padding:0 4px 18px}
body.o3 .osmarka i{background:var(--kek);color:#fff}
body.o3 .osmarka b{color:var(--szoveg)}
body.o3 .osmarka span{color:var(--halvanyabb)}
body.o3 .oscim{color:var(--halvanyabb)}
body.o3 .ossor{color:var(--halvany);
  --db-hatter:rgba(19,26,44,.07); --db-szin:var(--halvany);
  --pont-hatter:var(--kek); --pont-szin:#fff}
body.o3 .ossor.halk{color:var(--halvanyabb); --db-hatter:transparent}
body.o3 .ossor:hover, body.o3 .ossor.halk:hover{background:var(--papir);color:var(--szoveg)}
body.o3 .ossor.itt, body.o3 .ossor.itt:hover,
body.o3 .ossor.halk.itt, body.o3 .ossor.halk.itt:hover{
  background:var(--kek); color:#fff; font-weight:600;
  box-shadow:0 5px 16px rgba(65,86,149,.32);
  --db-hatter:rgba(255,255,255,.22); --db-szin:#fff}
body.o3 .ossor.halk.itt, body.o3 .ossor.halk.itt:hover{--db-hatter:transparent}
body.o3 .osvalaszto{background:var(--keret)}
body.o3 .osuser i{background:var(--kek-50);color:var(--kek-900)}
body.o3 .osuser b{color:var(--szoveg)}
body.o3 .osuser span{color:var(--halvanyabb)}
body.o3 .csukgomb{background:var(--kek);color:#fff}

/* ══════════════════════════════════════════════════════════════════════
   AZ ELFOGADOTT SÁV (2026-08-28) — S2: KETTŐ NAGY, A TÖBBI LÁBJEGYZET
   ─────────────────────────────────────────────────────────────────────
   Ez a blokk az O1 kék sáv TETEJÉRE megy. A három látványterv és a döntés
   indoklása: `OLDALSAV-TERV.md`. Ugyanezt használja a `sav2.html` — ezért
   van itt és nem a `sav-terv.css`-ben: egy forrás, nem kettő.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   S2 — KETTŐ NAGY, A TÖBBI LÁBJEGYZET
   ─────────────────────────────────────────────────────────────────────
   Semmi nem tűnik el; a RANGSOR beszél. A Mind egy halk sor felül, a két
   munkasor nagy kártya, a másik három egyetlen apró lábjegyzet-sorban.
   ══════════════════════════════════════════════════════════════════════ */
body.sav2 .osmind{margin-bottom:10px}
body.sav2 .osmind .cimke em{font-style:normal;opacity:.55;font-size:11.5px;margin-left:5px}
/* A MIND SZÁMA CSAK SZÁM, nem jelvény. Roland (2026-08-28): „a Mind melletti
   szám ugyanúgy csak lazán legyen kiírva, mint a Fotózásra várnál."
   A buborékot a `--db-hatter` veszi le — ugyanaz a fogás, amivel a 9. körben a
   halk sorok jelvénye lekerült; a `.db` doboza megmarad, tehát a szám
   ugyanoda igazodik, mint a két kártyáé alatta.
   ⚠️ Az AKTÍV állapotot külön ki kell írni: `body.o1 .ossor.itt` beállítja a
   `--db-hatter:var(--kek)`-et, és fehér lapon egy tömör kék pötty jelenne meg
   pont ott, ahonnan az imént vettük le. (Ez a 9. kör mért hibája.) */
body.sav2 .osmind, body.sav2 .osmind:hover,
body.sav2 .osmind.itt, body.sav2 .osmind.itt:hover{--db-hatter:transparent}
/* A betűméret is a lábjegyzetéhez igazítva (11,5 px a .db alap 11 helyett):
   mérve a jobb szélük ugyanott van (212 px), tehát egy oszlopba esnek. */
body.sav2 .osmind .db{font-weight:600;font-size:11.5px;color:rgba(255,255,255,.62)}
body.sav2 .osmind.itt .db, body.sav2 .osmind.itt:hover .db{color:var(--kek-900);opacity:.6}

/* A MAGASSÁG. Roland (2026-08-28): „ne legyen ilyen brutál magas — a
   magasságából vegyél le egy tizenöt százalékot."
   Mérve: a kártya 55 px volt (15+15 padding + a 25 px-es számjelvény, ami a
   legmagasabb elem benne). A cél 55 × 0,85 = 46,8 px.
   ⚠️ A paddingot MAGÁBAN csökkenteni nem elég: a magasságot a JELVÉNY szabja
   meg, nem a szöveg — 25 px-es jelvény mellett 11 px padding alá nem lehet
   menni anélkül, hogy a jelvény kilógna. Ezért a kettő EGYÜTT megy lejjebb:
   12+12 padding + 23 px jelvény = 47 px. */
body.sav2 .ossor.nagy{padding:12px 14px;border-radius:13px;margin-bottom:6px;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  font-size:15px;font-weight:600;color:#fff;gap:13px;letter-spacing:-.2px}
body.sav2 .ossor.nagy .ik{width:21px;height:21px}
body.sav2 .ossor.nagy .ik svg{width:21px;height:21px}
/* A számok a két kártyán JELVÉNYEK maradnak. (2026-08-28: egy körre levettük
   róluk a buborékot, Roland visszakérte. A Mind sorának száma az, ami sima
   szám — az feljebb, az .osmind-nál dől el.) */
body.sav2 .ossor.nagy .db{min-width:26px;height:23px;font-size:13.5px;border-radius:12px;
  background:rgba(255,255,255,.2);color:#fff}
body.sav2 .ossor.nagy:hover{background:rgba(255,255,255,.15)}
/* AZ AKTÍV AZ UTOLSÓ SZÓ — a :hover soha nem írhatja felül (a 9. kör mért
   hibája: a `.halk:hover` erősebb volt az `.itt`-nél, és a szöveg eltűnt). */
body.sav2 .ossor.nagy.itt, body.sav2 .ossor.nagy.itt:hover{
  background:#fff;color:var(--kek-900);box-shadow:0 6px 18px rgba(0,0,0,.24)}
body.sav2 .ossor.nagy.itt .db, body.sav2 .ossor.nagy.itt:hover .db{
  background:var(--kek);color:#fff}

/* A LÁBJEGYZET. Először egy sorba tettem a hármat, ponttal elválasztva —
   mérve NEM FÉRT KI a 236 px-es sávban, és a tördelés úgy nézett ki, mint egy
   hiba („Fotózásra vár 7 ·" / új sor / „Feldolgozás alatt 2 · Feltöltve 7").
   Ezért egymás alatt vannak, de SZÁNDÉKOSAN nem menüsorként: nincs ikonjuk,
   feleakkora a betűjük, és a szám nem jelvény, csak szám. */
body.sav2 .oslabjegyzet{display:flex;flex-direction:column;gap:1px;
  padding:11px 0 0;margin-top:9px;border-top:1px solid rgba(255,255,255,.11)}
body.sav2 .oslabjegyzet button{display:flex;align-items:center;width:100%;
  border:0;background:transparent;padding:5px 12px;border-radius:8px;
  font:inherit;font-size:11.5px;font-weight:400;color:rgba(255,255,255,.46);
  cursor:pointer;text-align:left;white-space:nowrap}
body.sav2 .oslabjegyzet button b{margin-left:auto;font-weight:600;
  font-variant-numeric:tabular-nums;opacity:.85}
body.sav2 .oslabjegyzet button:hover{background:rgba(255,255,255,.1);color:#fff}
body.sav2 .oslabjegyzet button.itt, body.sav2 .oslabjegyzet button.itt:hover{
  background:rgba(255,255,255,.9);color:var(--kek-900);font-weight:600}
body.sav2 .oslabjegyzet .pont{display:none}

/* ══ a tartalom, ha nincs felső sáv ═════════════════════════════════ */
body.oldalsavos .lap{padding-top:20px}
.szemoldok{display:block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  font-weight:600;color:var(--halvanyabb);margin-bottom:3px}

/* prezenter-váltó a három verzió közt (csak a látványtervben) */
.osvalto{position:fixed;right:16px;bottom:52px;z-index:200;display:flex;align-items:center;
  gap:3px;padding:4px;border-radius:999px;background:rgba(19,26,44,.9);
  backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(19,26,44,.4)}
.osvalto b{padding:0 8px 0 10px;color:rgba(255,255,255,.45);font-size:9.5px;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase}
.osvalto a{padding:5px 12px;border-radius:999px;text-decoration:none;font-size:11.5px;
  font-weight:600;color:rgba(255,255,255,.62)}
.osvalto a:hover{color:#fff}
.osvalto a.itt{background:#fff;color:var(--szoveg)}

@media (max-height:800px){
  body.oldalsavos .lap{padding-top:14px}
  body.o1 .oldalsav, body.o3 .oldalsav{padding-top:14px}
  body.o1 .osmarka, body.o3 .osmarka{padding-bottom:13px}
  .csukgomb{top:17px}
}

/* ⭐ A MIND FÜL PRESET-SZŰRŐI (Roland, 2026-09-03). A három menüpont mellé
   ez adja a finomszűrést: fotózásra vár · feldolgozás alatt · kiküldés alatt ·
   kint a boltban. Vízszintesen görgethető, hogy szűk ablakban se csonkuljon. */
.mindpreset{display:flex;gap:6px;margin:0 0 10px;overflow-x:auto;
  padding-bottom:2px;scrollbar-width:none}
.mindpreset::-webkit-scrollbar{display:none}
.mindpreset button{flex:none;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--keret);background:var(--lap);border-radius:999px;
  padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--halvany);
  cursor:pointer;font-family:inherit;white-space:nowrap}
.mindpreset button:hover{border-color:var(--keret-2);color:var(--szoveg)}
.mindpreset button.itt{border-color:var(--kek);color:var(--kek);
  background:var(--kek-50, #eef1fa)}
.mindpreset button b{font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--halvanyabb);font-size:11.5px}
.mindpreset button.itt b{color:var(--kek)}
.mindpreset button:focus-visible{outline:2px solid var(--kek);outline-offset:1px}
/* ⭐ ELAKADT — ÉRTESÍTÉS-BUBORÉK (Roland, 2026-09-16, V3: „ez tökéletes”). Ha van benne legalább egy
   termék: piros felirat, a szám piros buborékban a gomb sarkán. ⚠️ A sáv vízszintesen görget, és a
   görgethető doboz a saját szélén VÁG — a buborék ezért a sáv felső párnázásába lóg bele.
   ⛔ MÉRVE (képen, 09-16): negatív felső margóval a sáv a `.torzs` görgethető dobozából lógott ki, és
   AZ vágta le a buborék tetejét — ezért csak párnázás van, a lista 10 px-szel lejjebb kezdődik. */
.mindpreset{padding-top:10px}
.mindpreset button.riaszt{position:relative;color:var(--piros);border-color:var(--piros-200);
  font-weight:700;padding-right:18px}
.mindpreset button.riaszt:hover{color:var(--piros);border-color:var(--piros)}
.mindpreset button.riaszt b{position:absolute;top:-9px;right:-9px;background:var(--piros);color:#fff;
  border:2px solid #fff;border-radius:999px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
  box-shadow:0 2px 6px rgba(179,38,30,.4)}
.mindpreset button.riaszt.itt{border-color:var(--piros);background:var(--piros-50)}
.mindpreset button.riaszt.itt b{color:#fff}

/* A fiók-sor NEM zsugorodik össze, amíg a név meg nem jön (~0,3 mp).
   Enélkül az üres <b> és <span> magassága 0 lenne, és az egész sáv alja
   megugrana, amikor kitöltjük — pont az a rángás, ami ellen dolgozunk. */
.osuser b:empty::before,
.osuser .nev > span:empty::before{content:"\00a0"}

/* ── „AI-SZÖVEG KÉSZ" — zöld kiemelés (Roland, 2026-09-23) ───────────────
   „az lehetne ilyen zöld gombbal kiemelve, mint az elakadt rész. Csak itt nem
   elakad lenne, hanem az, hogy kész az AI szöveg."
   Ugyanaz a forma, mint a `riaszt`, csak zölddel: a szám buborékban a sarkán. */
.mindpreset button.kesz{position:relative;color:var(--zold);border-color:var(--zold-200);
  font-weight:700;padding-right:18px}
.mindpreset button.kesz:hover{color:var(--zold);border-color:var(--zold)}
.mindpreset button.kesz b{position:absolute;top:-9px;right:-9px;background:var(--zold);color:#fff;
  border:2px solid #fff;border-radius:999px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
  box-shadow:0 2px 6px rgba(23,117,55,.4)}
.mindpreset button.kesz.itt{border-color:var(--zold);background:var(--zold-50)}
.mindpreset button.kesz.itt b{color:#fff}

/* ── „FÉLRETETT" — narancs kiemelés (Roland, 2026-09-24, képpel) ─────────
   „kis státuszként, és sárga színnel… Ne ilyen citromsárga, hanem… ilyen narancsszerű.
   Mint mondjuk ez az icon" (egy narancs mikrofon-gomb). Ugyanaz a forma, mint a zöld és
   a piros: a szám buborékban a sarkán. A felirat sötétebb narancs, hogy fehéren olvasható legyen. */
.mindpreset button.narancs{position:relative;color:#a85a09;border-color:#f7cf9f;
  font-weight:700;padding-right:18px}
.mindpreset button.narancs:hover{color:#a85a09;border-color:#ef9a3e}
.mindpreset button.narancs b{position:absolute;top:-9px;right:-9px;background:#ef9a3e;color:#fff;
  border:2px solid #fff;border-radius:999px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
  box-shadow:0 2px 6px rgba(239,154,62,.45)}
.mindpreset button.narancs.itt{border-color:#ef9a3e;background:#fff4e8}
.mindpreset button.narancs.itt b{color:#fff}