/* =========================================================================
   Omni — design-rendszer (v2.1, második változat: 2026-10-04)

   A megrendelő 13 képernyőképe alapján (élő márvány háttér, üveghatású
   kártyák, alsó menüsáv, arany / kék naptárszínek). A struktúra és a
   funkciók a docs/design/DESIGN.md szerintiek maradtak; ez a fájl a
   megjelenést adja.

   Ez a fájl az index.html beágyazott stíluslapja UTÁN töltődik, tehát
   ugyanazon a specificitáson nyer. Két dolgot csinál:

     1. a régi szemantikus változókat (--bg, --surface, --text-primary, ...)
        az új palettára köti -- így a még régi jelölésű részletek (pl. a
        naptár belső rétegei) is az új színekben jelennek meg;
     2. az új komponenseket adja (képernyő-fejléc, kártya, gombok három
        szinten, csempék, pirulák, szegmentált kapcsoló, lista-sor, alsó
        menüsáv, ...).

   Csak SÖTÉT téma van (a megrendelő döntése, 2026-10).

   Betűk: Plus Jakarta Sans (cím, szöveg, számok) és IBM Plex Mono (kis,
   csupa nagybetűs feliratok). Mindkettő SIL Open Font License -- a saját
   szerverünkről töltjük (public/fonts/), nem a Google-tól, a licencszöveg a
   fájlok mellett van.

   Teljesítmény (a használat 90%-a telefon):
   - A háttér egy 18 KB-os, előre kirajzolt textúra (public/bg/marble.webp)
     két rétegben, lassú transform-animációval -- ezt a GPU kompozitálja,
     nincs képkockánkénti újrarajzolás. Csökkentett mozgás beállításnál áll.
   - A kártyák NEM használnak backdrop-filter elmosást: mozgó háttér fölött
     az minden képkockán minden kártyára újraszámolódna, ami gyengébb
     telefonon akadást és merülést okoz. Áttetsző színátmenetet kapnak; a
     textúra amúgy is lágy. Elmosást csak az alsó menüsáv kap (egy elem).
   ========================================================================= */

/* ---------- Betűk ---------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-ext-700-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-ext-800-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokenek ---------- */
html[data-theme]{
  color-scheme:dark;
  --o-bg:#040B08;
  /* Üveg: áttetsző, a háttér átdereng rajta. A "solid" változat ott kell,
     ahol a mögötte lévő tartalom zavarna (lenyíló lapok, legördülők). */
  --o-glass:rgba(7,17,14,.56); --o-glass-hi:rgba(255,255,255,.07); --o-solid:#0A1612;
  --o-panel:var(--o-glass); --o-panel-2:rgba(255,255,255,.065); --o-input:rgba(0,0,0,.30);
  --o-line:rgba(255,255,255,.11); --o-line-2:rgba(255,255,255,.18); --o-hair:rgba(255,255,255,.07);
  --o-ink:#F1F5F3; --o-ink-2:#A9B8B1; --o-ink-3:#7C8C85;
  --o-red:#E5574A; --o-red-t:#F2897D;
  --o-ok:#53E0A1; --o-ok-ink:#03150C; --o-ok-rgb:83,224,161;

  /* Területszínek: szín · a rajta álló szöveg · RGB az áttetsző változatokhoz.
     Naptár / személyi = arany, vendégek / csoportos = kék (a képek szerint). */
  --c-cal:#E6B23E;    --c-cal-ink:#1B1203;    --c-cal-rgb:230,178,62;
  --c-guest:#58A6E8;  --c-guest-ink:#03121F;  --c-guest-rgb:88,166,232;
  --c-plan:#E0663F;   --c-plan-ink:#170600;   --c-plan-rgb:224,102,63;
  --c-chat:#9D6DF2;   --c-chat-ink:#12082A;   --c-chat-rgb:157,109,242;
  --c-rep:#7EBE43;    --c-rep-ink:#0E1804;    --c-rep-rgb:126,190,67;
  --c-price:#EE9534;  --c-price-ink:#170C00;  --c-price-rgb:238,149,52;
  --c-news:#E2513F;   --c-news-ink:#1A0402;   --c-news-rgb:226,81,63;
  --c-gray:#9AABA4;   --c-gray-ink:#0A1210;   --c-gray-rgb:154,171,164;
  --o-accent:var(--c-cal); --o-accent-rgb:var(--c-cal-rgb);

  /* Fő gomb: világos, menta árnyalatú (a képeken minden döntés-gomb ilyen). */
  --o-cta:linear-gradient(180deg,#F7FCFA 0%,#D2ECE1 100%); --o-cta-ink:#0B3528;

  --f-disp:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* A régi szemantikus változók az új palettára kötve (lásd a fájl fejét). */
  --bg:var(--o-bg); --surface:var(--o-solid); --surface-alt:var(--o-solid);
  --border:var(--o-line); --text-primary:var(--o-ink); --text-secondary:var(--o-ink-2);
  --muted:var(--o-ink-3);
  --blue:var(--c-guest); --blue-dark:var(--c-guest); --blue-bg:rgba(88,166,232,.14);
  --good:var(--o-ok); --good-bg:rgba(83,224,161,.12);
  --warn:var(--c-cal); --warn-bg:rgba(230,178,62,.14);
  --gold:var(--c-cal); --gold-bg:rgba(230,178,62,.14);
  --critical:var(--o-red-t); --critical-bg:rgba(229,87,74,.14);
  --purple:var(--c-chat); --purple-bg:rgba(157,109,242,.14);
  --teal:var(--o-ok); --teal-bg:rgba(83,224,161,.12);
  --rose:var(--c-plan); --rose-bg:rgba(224,102,63,.14);
  --color-accent:var(--c-cal); --brand-grad:var(--c-cal);
  --color-accent-2-100:rgba(83,224,161,.12); --color-accent-2-400:var(--o-ok);
  --color-accent-2-600:var(--o-ok); --color-accent-2-800:rgba(83,224,161,.14);
  --color-accent-2-900:var(--o-ok-ink);
  --font-head:var(--f-disp); --font-body:var(--f-sans); --font-num:var(--f-disp);
  --radius:24px;
  --shadow-sm:none; --shadow-md:0 10px 28px rgba(0,0,0,.4); --shadow-lg:0 22px 56px rgba(0,0,0,.55);

  /* Elrendezés */
  --o-gutter:16px;
  --o-max:560px;           /* telefonos oszlopszélesség, iPaden középre zárva */
  --o-side:264px;          /* laptopon a bal oldali menüsáv */
  --o-tabbar-h:72px;       /* alsó menüsáv (telefon, iPad) */
  --o-tabbar-gap:calc(var(--o-tabbar-h) + 28px + env(safe-area-inset-bottom));
}

/* Terület-osztályok: a komponensek --a / --a-ink / --a-rgb változón át
   veszik fel a terület színét, így egy kártya vagy gomb bármely területen
   ugyanaz a jelölés. Az .a-ok a "rendben / kész" zöld -- korábban a naptár
   zöldje volt ugyanez, de a naptár most arany. */
.a-cal{--a:var(--c-cal);--a-ink:var(--c-cal-ink);--a-rgb:var(--c-cal-rgb)}
.a-guest{--a:var(--c-guest);--a-ink:var(--c-guest-ink);--a-rgb:var(--c-guest-rgb)}
.a-plan{--a:var(--c-plan);--a-ink:var(--c-plan-ink);--a-rgb:var(--c-plan-rgb)}
.a-chat{--a:var(--c-chat);--a-ink:var(--c-chat-ink);--a-rgb:var(--c-chat-rgb)}
.a-rep{--a:var(--c-rep);--a-ink:var(--c-rep-ink);--a-rgb:var(--c-rep-rgb)}
.a-price{--a:var(--c-price);--a-ink:var(--c-price-ink);--a-rgb:var(--c-price-rgb)}
.a-news{--a:var(--c-news);--a-ink:var(--c-news-ink);--a-rgb:var(--c-news-rgb)}
.a-gray{--a:var(--c-gray);--a-ink:var(--c-gray-ink);--a-rgb:var(--c-gray-rgb)}
.a-ok{--a:var(--o-ok);--a-ink:var(--o-ok-ink);--a-rgb:var(--o-ok-rgb)}
.a-red{--a:var(--o-red);--a-ink:#1A0405;--a-rgb:229,87,74}

/* ---------- Alap ---------- */
html[data-theme]{ background:var(--o-bg); }
html[data-theme] body{ background:transparent; overflow-x:clip; }
body{ font-family:var(--f-sans); color:var(--o-ink); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,h3,h4{ font-family:var(--f-disp); letter-spacing:-.01em; }
input, select, textarea, button{ font-family:var(--f-sans); }
::selection{ background:rgba(230,178,62,.35); }
:focus-visible{ outline:2px solid var(--c-cal); outline-offset:2px; }
.ic{ width:24px; height:24px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.lbl{ font-family:var(--f-mono); font-weight:600; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--o-ink-2); margin:0; }
.disp{ font-family:var(--f-disp); font-weight:800; letter-spacing:-.015em; margin:0; line-height:1.08; }
.num{ font-family:var(--f-disp); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.t2{ color:var(--o-ink-2); }
.neg-t{ color:var(--o-red-t) !important; }
/* Az első változat rácsmintája; a második változatban nincs, a háttér a márvány. */
.grid-bg{ background-image:none; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Élő háttér ----------
   Egy rögzített réteg az #app előtt (index.html), két egymáson csúszó
   textúra-példánnyal: az egymáshoz képesti lassú elmozdulástól tűnik
   folyónak. Alul sötétebb, hogy az alsó menüsáv és a szöveg olvasható
   maradjon. */
.o-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--o-bg); }
.o-bg::before, .o-bg::after{ content:""; position:absolute; inset:-18%; background:url(/bg/marble.webp) center/cover no-repeat;
  will-change:transform; }
.o-bg::before{ animation:o-drift-a 46s ease-in-out infinite alternate; }
.o-bg::after{ opacity:.42; transform:scaleX(-1); animation:o-drift-b 63s ease-in-out infinite alternate; }
.o-bg-shade{ position:absolute; inset:0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(4,11,8,0) 0%, rgba(4,11,8,.25) 70%),
    linear-gradient(180deg, rgba(4,11,8,.10) 0%, rgba(4,11,8,.35) 55%, rgba(3,8,6,.78) 100%); }
@keyframes o-drift-a{
  0%  { transform:translate3d(-3%,-2%,0) scale(1.04) rotate(-1.5deg); }
  50% { transform:translate3d(2%,1.5%,0) scale(1.10) rotate(1deg); }
  100%{ transform:translate3d(-1%,3%,0) scale(1.06) rotate(2deg); } }
@keyframes o-drift-b{
  0%  { transform:scaleX(-1) translate3d(3%,2%,0) scale(1.12) rotate(2deg); }
  100%{ transform:scaleX(-1) translate3d(-3%,-2.5%,0) scale(1.05) rotate(-2deg); } }
@media (prefers-reduced-motion:reduce){ .o-bg::before, .o-bg::after{ animation:none; } }
/* Teljes képernyős lap (alkalom, csoportos óra) alatt az app maga nem
   látszik -- így a lap mögött a mozgó háttér van, nem a lefedett kezdőlap. */
body.has-full #app > .o-shell, body.has-full .o-tabbar{ visibility:hidden; }

/* ---------- Elrendezés: képernyő, oszlop, menüsáv ---------- */
.o-shell{ min-height:100vh; min-height:100dvh; }
.scr{ width:100%; max-width:var(--o-max); margin:0 auto; box-sizing:border-box;
  padding:max(18px, env(safe-area-inset-top)) var(--o-gutter) calc(32px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:16px; }
.has-tabs .scr{ padding-bottom:var(--o-tabbar-gap); }
.scr.wide{ max-width:none; }
.scr-fill{ flex:1; }
.o-side{ display:none; }

/* Képernyő-fejléc: vissza-gomb, felirat (területszínben) + cím, jobb oldalon
   a profil-kör (a képek szerint minden képernyőn). */
.scr-head{ display:flex; align-items:center; gap:14px; min-height:52px; }
.scr-head .scr-titles{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.scr-head .scr-eyebrow{ font-family:var(--f-mono); font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--a, var(--o-ink-2)); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scr-head .scr-title{ font-family:var(--f-disp); font-weight:800; font-size:23px; letter-spacing:-.015em;
  margin:0; line-height:1.12; overflow-wrap:anywhere; }
.scr-head .scr-right{ display:flex; gap:10px; flex:0 0 auto; align-items:center; }
/* Profil-kör: monogram vagy fotó, arany gyűrű. */
.me-av{ width:48px; height:48px; border-radius:50%; flex:0 0 auto; box-sizing:border-box; position:relative; padding:0; cursor:pointer;
  border:2px solid var(--c-cal); background:radial-gradient(circle at 35% 30%, #1F5A45, #0B2A20);
  color:#fff; font-family:var(--f-disp); font-weight:800; font-size:19px; display:inline-flex; align-items:center; justify-content:center; }
.me-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.me-av.lg{ width:58px; height:58px; font-size:23px; }
.me-av .dot{ position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%; background:var(--o-ok); border:2.5px solid var(--o-bg); }

/* ---------- Gombok: döntés / alternatíva / extra ---------- */
.ob{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box;
  min-height:60px; padding:0 20px; border-radius:20px; border:0; cursor:pointer; text-decoration:none;
  font-family:var(--f-disp); font-weight:700; font-size:17.5px; letter-spacing:-.005em;
  background:var(--o-cta); color:var(--o-cta-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px rgba(0,0,0,.28);
  transition:transform .08s ease, filter .15s ease; -webkit-user-select:none; user-select:none; }
.ob:active{ transform:scale(.985); filter:brightness(.96); }
.ob:disabled{ opacity:.45; cursor:default; transform:none; }
.ob .ic{ width:22px; height:22px; }
.ob.xl{ min-height:68px; font-size:19px; border-radius:22px; }
.ob.sec{ background:rgba(255,255,255,.06); color:var(--o-ink); border:1px solid var(--o-line-2); min-height:54px; font-size:16px;
  box-shadow:none; }
.ob.sec.tint{ color:var(--a); }
.ob.ghost{ background:transparent; color:var(--o-ink-2); border:1px solid var(--o-line); min-height:48px;
  font-size:15px; font-weight:600; box-shadow:none; }
.ob.ghost.danger, .ob.sec.danger{ color:var(--o-red-t); border-color:rgba(229,87,74,.45); background:rgba(229,87,74,.07); }
.ob.outline{ background:rgba(var(--a-rgb),.08); color:var(--a); border:1.5px solid rgba(var(--a-rgb),.6); min-height:54px; font-size:16px; box-shadow:none; }
.ob.sm{ min-height:46px; font-size:15px; padding:0 14px; border-radius:15px; gap:8px; }
.ob.inline{ width:auto; }
.ob-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ob-row.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ob-stack{ display:flex; flex-direction:column; gap:12px; }
.extras{ display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:18px; }
.extras > .lbl{ text-align:center; font-size:10.5px; }

/* Ikongomb (52×52): vissza, csengő, menü */
.ib{ width:52px; height:52px; border-radius:17px; background:rgba(255,255,255,.06); border:1px solid var(--o-line);
  display:inline-flex; align-items:center; justify-content:center; color:var(--o-ink); padding:0; cursor:pointer;
  position:relative; box-sizing:border-box; flex:0 0 auto; text-decoration:none; }
.ib:active{ transform:scale(.97); }
.ib:disabled{ opacity:.4; cursor:default; }
.ib.lg{ width:64px; height:64px; border-radius:20px; }
.ib.lg .ic{ width:28px; height:28px; }
.ib.tint{ color:var(--a); }
.ib.text{ width:auto; padding:0 18px; font-family:var(--f-disp); font-weight:700; font-size:15px; }
.ib .ib-badge, .o-badge{ position:absolute; top:-7px; right:-7px; min-width:24px; height:24px; padding:0 6px; box-sizing:border-box;
  border-radius:999px; background:var(--c-cal); color:var(--c-cal-ink);
  font-family:var(--f-disp); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;
  border:2.5px solid var(--o-bg); line-height:1; }
.ib .ib-dot{ position:absolute; top:11px; right:12px; width:9px; height:9px; border-radius:50%; background:var(--c-cal);
  box-shadow:0 0 0 2.5px var(--o-bg); }

/* ---------- Kártyák (üveg) ---------- */
.oc{ background:linear-gradient(155deg, var(--o-glass-hi), rgba(255,255,255,.012) 58%), var(--o-glass);
  border:1px solid var(--o-line); border-radius:24px; position:relative;
  overflow:hidden; box-sizing:border-box; padding:20px; display:flex; flex-direction:column; gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 32px rgba(0,0,0,.22); }
.oc.area{ border-color:rgba(var(--a-rgb),.5);
  background:linear-gradient(155deg, rgba(var(--a-rgb),.30), rgba(var(--a-rgb),.09) 55%, rgba(var(--a-rgb),.03)), var(--o-glass); }
.oc.area.soft{ border-color:rgba(var(--a-rgb),.32);
  background:linear-gradient(155deg, rgba(var(--a-rgb),.15), rgba(var(--a-rgb),.04) 55%, rgba(255,255,255,.01)), var(--o-glass); }
.oc.tight{ padding:16px 18px; gap:10px; }
.oc.flat{ padding:0; gap:0; }
.oc.done{ border-color:rgba(var(--a-rgb),.35);
  background:linear-gradient(155deg, rgba(var(--a-rgb),.12), rgba(var(--a-rgb),.03)), var(--o-glass); }
.oc.warn{ border-color:rgba(230,178,62,.55); }
.oc.dashed{ border-style:dashed; border-color:var(--o-line-2); }
.oc > .lbl:first-child{ display:flex; align-items:center; gap:8px; }
a.oc, button.oc{ color:var(--o-ink); text-align:left; cursor:pointer; font:inherit; width:100%; }
button.oc:active, a.oc:active{ transform:scale(.995); }

/* Modulcsempe (kezdőlap): színes színátmenet, ikon-négyzet, nagy szám,
   alatta a modul neve és egy mono alcím. */
.mtiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mtiles > :last-child:nth-child(odd){ grid-column:1 / -1; }
.mtile{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:148px;
  padding:16px 16px 15px; box-sizing:border-box; border-radius:24px; cursor:pointer; text-align:left; color:#fff; font:inherit;
  border:1px solid rgba(var(--a-rgb),.62);
  background:linear-gradient(150deg, rgba(var(--a-rgb),.58) 0%, rgba(var(--a-rgb),.24) 48%, rgba(var(--a-rgb),.08) 100%), rgba(6,15,12,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.25); }
.mtile:active{ transform:scale(.985); }
.mtile-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.mtile-ico{ width:46px; height:46px; border-radius:14px; background:var(--a); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25); flex:0 0 auto; }
.mtile-ico .ic{ width:24px; height:24px; stroke-width:2; }
.mtile.a-gray .mtile-ico{ background:rgba(255,255,255,.16); }
.mtile-num{ font-family:var(--f-disp); font-weight:800; font-size:34px; line-height:1; letter-spacing:-.03em; color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.mtile-num.long{ font-size:26px; }
.mtile-name{ font-family:var(--f-disp); font-weight:700; font-size:19px; letter-spacing:-.01em; line-height:1.15; }
.mtile-sub{ font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-top:4px; overflow:hidden; text-overflow:ellipsis; }
.mtile-sub.neg{ color:#FFB4A9; }
.mtile .o-badge{ top:10px; right:10px; border:0; }

/* Kis csempe (kimutatás, vendégkártya, vendég kezdőlap) */
.tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tile{ background:linear-gradient(155deg, var(--o-glass-hi), rgba(255,255,255,.012) 60%), var(--o-glass);
  border:1px solid var(--o-line); border-radius:22px; padding:18px;
  display:flex; flex-direction:column; gap:12px; color:var(--o-ink); text-align:left; cursor:pointer;
  font:inherit; position:relative; box-sizing:border-box; min-height:96px; text-decoration:none; }
.tile.area{ border-color:rgba(var(--a-rgb),.45);
  background:linear-gradient(155deg, rgba(var(--a-rgb),.24), rgba(var(--a-rgb),.06) 60%), var(--o-glass); }
.tile:active{ transform:scale(.99); }
.tile-ico{ width:46px; height:46px; border-radius:14px; background:rgba(var(--a-rgb, 154,171,164),.16);
  display:flex; align-items:center; justify-content:center; color:var(--a, var(--o-ink-2)); }
.tile-ico .ic{ width:24px; height:24px; }
.tile .num{ font-size:26px; color:var(--a); line-height:1; }
.tile-name{ font-family:var(--f-disp); font-weight:700; font-size:17px; }
.tile.plain{ min-height:0; gap:14px; padding:18px 16px; }
.tile.plain .tile-name{ font-weight:700; font-size:17px; }
.tile.plain.area .tile-ico{ background:var(--a); color:#fff; }
.tile .o-badge{ top:10px; right:10px; border:0; }

/* ---------- Pirula (címke) ---------- */
.pl{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px; box-sizing:border-box;
  font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(var(--a-rgb, 154,171,164),.16); color:var(--a, var(--o-ink-2)); white-space:nowrap;
  border:1px solid rgba(var(--a-rgb, 154,171,164),.22); }
.pl.mute{ background:rgba(255,255,255,.06); color:var(--o-ink-2); border-color:rgba(255,255,255,.06); }
.pl.sm{ height:24px; font-size:10px; padding:0 9px; }
.pl.solid{ background:var(--a); color:#fff; border-color:transparent; }
.pl .ic{ width:14px; height:14px; }
.pl-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- Szegmentált kapcsoló (a kiválasztott mindig arany keretes) ---------- */
.seg{ display:flex; gap:6px; padding:5px; border:1px solid var(--o-line); border-radius:20px; background:rgba(0,0,0,.22); }
.seg > button{ flex:1; min-height:50px; border:1px solid transparent; border-radius:15px; background:transparent; color:var(--o-ink-2);
  font-family:var(--f-disp); font-weight:700; font-size:15.5px;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; padding:0 8px; }
.seg > button.on{ background:linear-gradient(180deg, rgba(var(--o-accent-rgb),.22), rgba(var(--o-accent-rgb),.10)); color:#F3D58E;
  border-color:rgba(var(--o-accent-rgb),.75); }
.seg > button:disabled{ opacity:.4; cursor:default; }
.seg > button .ic{ width:20px; height:20px; }
.seg.sm > button{ min-height:46px; font-size:14.5px; }

/* ---------- Beviteli mezők ---------- */
.fld{ display:flex; flex-direction:column; gap:8px; }
.fld > label, .fld > .lbl{ font-family:var(--f-mono); font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--o-ink-2); }
.oi, .fld input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
.fld select, .fld textarea{
  width:100%; box-sizing:border-box; min-height:56px; padding:0 18px; border-radius:17px; border:1px solid var(--o-line-2);
  background:var(--o-input); color:var(--o-ink); font-family:var(--f-sans); font-weight:500; font-size:17px; -webkit-appearance:none; appearance:none; }
.fld textarea{ padding:14px 18px; min-height:110px; resize:vertical; line-height:1.45; }
.fld select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D5CF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:20px; padding-right:48px; }
.oi:focus, .fld input:focus, .fld select:focus, .fld textarea:focus{ outline:none; border-color:rgba(var(--o-accent-rgb),.8); box-shadow:0 0 0 3px rgba(var(--o-accent-rgb),.16); }
input:-webkit-autofill, input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px #08130F inset !important; -webkit-text-fill-color:var(--o-ink) !important; caret-color:var(--o-ink); }
.fld .hint{ font-size:13px; color:var(--o-ink-2); }
.fld-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.search{ position:relative; }
.search .ic{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--o-ink-2); pointer-events:none; }
.search input{ padding-left:52px !important; }
html[data-theme] select option{ background:var(--o-solid); color:var(--o-ink); }

/* Kétállású kapcsoló (értesítések stb.) */
.sw{ position:relative; width:56px; height:34px; flex:0 0 auto; }
.sw input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.sw span{ position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--o-line-2); transition:background .15s; }
.sw span::after{ content:""; position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:var(--o-ink-2); transition:transform .15s, background .15s; }
.sw input:checked + span{ background:var(--o-ok); border-color:var(--o-ok); }
.sw input:checked + span::after{ transform:translateX(22px); background:var(--o-ok-ink); }

/* Jelölőnégyzet-sor (pl. „Maradjak bejelentkezve”) */
.chk{ display:flex; align-items:center; gap:14px; min-height:48px; cursor:pointer; font-size:16px; font-weight:600; }
.chk input{ width:26px; height:26px; accent-color:var(--o-ok); margin:0; flex:0 0 auto; }

/* ---------- Lista-sor ---------- */
.rows{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:14px; min-height:60px; padding:10px 0; border-bottom:1px solid var(--o-hair);
  color:var(--o-ink); text-decoration:none; background:none; border-left:0; border-right:0; border-top:0; width:100%;
  text-align:left; font:inherit; box-sizing:border-box; }
.rows > .row:last-child{ border-bottom:0; }
button.row, a.row{ cursor:pointer; }
.row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.row-name{ font-size:17px; font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.row-sub{ font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--o-ink-2); }
.row-val{ font-family:var(--f-disp); font-weight:800; font-size:18px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.row-val.pos{ color:var(--o-ok); } .row-val.neg{ color:var(--o-red-t); }
.row > .ic:last-child{ color:var(--o-ink-3); }
.row-ico{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:rgba(var(--a-rgb, 154,171,164),.16); color:var(--a, var(--o-ink-2)); }
.row-ico .ic{ width:24px; height:24px; }
/* Monogram-kör: a terület színéből kitöltve, mint a képeken (NP kék, SZ arany...). */
.av{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-disp); font-weight:800; font-size:18px;
  background:radial-gradient(circle at 35% 30%, rgba(var(--a-rgb, 88,166,232),.75), rgba(var(--a-rgb, 88,166,232),.35));
  color:#fff; position:relative; overflow:visible; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.av.lg{ width:76px; height:76px; font-size:26px; border:2px solid var(--a, var(--c-guest)); }
.av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.av .dot{ position:absolute; right:0; bottom:0; width:14px; height:14px; border-radius:50%; border:3px solid var(--o-bg); background:var(--o-ink-3); }
.av .dot.online{ background:var(--o-ok); } .av .dot.recent{ background:var(--c-cal); }
.av.ok{ background:var(--o-ok); color:var(--o-ok-ink); box-shadow:none; }
.av.no{ background:rgba(229,87,74,.18); color:var(--o-red-t); box-shadow:none; }

/* Figyelmeztetés / tájékoztató doboz (a gomb ELŐTT) */
.note{ display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-radius:16px; font-size:15px; line-height:1.4;
  background:rgba(var(--a-rgb, 154,171,164),.12); border:1px solid rgba(var(--a-rgb, 154,171,164),.32); color:var(--a, var(--o-ink-2)); }
.note .ic{ width:22px; height:22px; margin-top:1px; }
.note.warn{ --a:#F0C567; --a-rgb:var(--c-cal-rgb); }
.note.err{ --a:var(--o-red-t); --a-rgb:229,87,74; }
.note.info{ --a:var(--o-ink-2); --a-rgb:154,171,164; }
.empty{ padding:22px 6px; text-align:center; color:var(--o-ink-2); font-size:15px; }
.sect{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 2px -4px; }

/* Nagy egyenleg-szám (vendégkártya, vendég kezdőlap) */
.big-num{ margin:0; font-family:var(--f-disp); font-weight:800; font-size:clamp(44px, 14vw, 62px); letter-spacing:-.03em; line-height:1;
  color:var(--o-ink); font-variant-numeric:tabular-nums; }
.big-num small{ font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--o-ink-2); margin-left:10px; text-transform:uppercase; }
.bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar > span{ display:block; height:100%; background:var(--a); border-radius:999px; }
.seg-bar{ display:flex; gap:5px; }
.seg-bar span{ flex:1; height:7px; border-radius:999px; background:rgba(255,255,255,.10); }
.seg-bar span.on{ background:var(--a); }
.seg-bar span.over{ background:var(--o-red); }

/* ---------- Lap (modál) ---------- */
html[data-theme] .overlay{ background:rgba(2,7,5,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
html[data-theme] .modal{ background:linear-gradient(180deg, #0D1C17, #07110D); border:1px solid var(--o-line); border-bottom:0; border-radius:28px 28px 0 0;
  padding:22px var(--o-gutter) calc(24px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg); color:var(--o-ink); }
html[data-theme] .modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
html[data-theme] .modal-head h3{ flex:1; margin:0; font-family:var(--f-disp); font-weight:800; font-size:21px;
  letter-spacing:-.01em; display:flex; align-items:center; gap:10px; line-height:1.2; }
html[data-theme] .close-x{ width:48px; height:48px; border-radius:15px; background:rgba(255,255,255,.06); border:1px solid var(--o-line);
  color:var(--o-ink); font-size:26px; line-height:1; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
/* Teljes képernyős lap: az alkalom- és a csoportos óra elszámolása telefonon
   saját képernyő, nem alulról felcsúszó lap. A háttere átlátszó: mögötte a
   mozgó háttér van (lásd body.has-full). */
.overlay.full{ align-items:stretch; padding:0; }
html[data-theme] .overlay.full{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-theme] .overlay.full .modal{ max-width:none; width:100%; min-height:100%; height:100%; border-radius:0; border:0;
  padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch; background:transparent; box-shadow:none; }
.overlay.full .modal > .scr{ min-height:100%; }

/* ---------- Toast ---------- */
html[data-theme] .toast{ background:#10221B; color:var(--o-ink); border:1px solid var(--o-line-2); border-radius:18px;
  font-family:var(--f-sans); font-weight:700; font-size:15px; box-shadow:var(--shadow-md); }
body:has(.o-tabbar) .toast{ bottom:calc(var(--o-tabbar-h) + 26px + env(safe-area-inset-bottom)); }

/* ---------- Alsó menüsáv (telefon, iPad) ----------
   A képek szerint: lebegő, lekerekített üvegsáv négy elemmel. Az aktív elem
   arany keretet kap. Laptopon (≥ 1024 px) a bal oldali menüsáv veszi át. */
.o-tabbar{ position:fixed; z-index:50; left:50%; transform:translateX(-50%);
  bottom:calc(10px + env(safe-area-inset-bottom)); width:calc(100% - 2 * var(--o-gutter)); max-width:calc(var(--o-max) - 2 * var(--o-gutter));
  height:var(--o-tabbar-h); box-sizing:border-box; padding:7px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
  border-radius:26px; border:1px solid var(--o-line);
  background:rgba(6,15,12,.74); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 14px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.o-tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0;
  border-radius:19px; border:1px solid transparent; background:none; color:var(--o-ink-2); cursor:pointer; font:inherit;
  font-family:var(--f-disp); font-weight:600; font-size:12.5px; padding:0 2px; }
.o-tab .ic{ width:23px; height:23px; }
.o-tab span.t{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.o-tab.on{ color:#F3D58E; border-color:rgba(var(--o-accent-rgb),.75);
  background:linear-gradient(180deg, rgba(var(--o-accent-rgb),.22), rgba(var(--o-accent-rgb),.08)); }
.o-tab .o-badge{ top:2px; right:calc(50% - 26px); }
@media (min-width:1024px){ .o-tabbar{ display:none; } .has-tabs .scr{ padding-bottom:calc(32px + env(safe-area-inset-bottom)); } }

/* ---------- Menüsáv laptopon (≥ 1024 px) ---------- */
.o-nav{ display:flex; flex-direction:column; gap:6px; }
.o-nav-item{ display:flex; align-items:center; gap:14px; min-height:52px; padding:0 14px; border-radius:16px; border:1px solid transparent;
  background:none; color:var(--o-ink-2); font-family:var(--f-disp); font-weight:700; font-size:15.5px;
  cursor:pointer; text-align:left; width:100%; position:relative; }
.o-nav-item .ic{ color:var(--a, var(--o-ink-2)); }
.o-nav-item:hover{ background:rgba(255,255,255,.05); }
.o-nav-item.on{ background:linear-gradient(180deg, rgba(var(--o-accent-rgb),.18), rgba(var(--o-accent-rgb),.06)); border-color:rgba(var(--o-accent-rgb),.6); color:var(--o-ink); }
.o-nav-item .o-badge{ position:static; margin-left:auto; border:0; }

@media (min-width:700px){
  :root{ --o-gutter:24px; }
  html[data-theme]{ --o-max:720px; }
  .mtiles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mtiles > :last-child:nth-child(odd){ grid-column:auto; }
  .tiles.four{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  html[data-theme] .overlay:not(.full){ align-items:center; padding:24px; }
  html[data-theme] .overlay:not(.full) .modal{ border-radius:28px; border-bottom:1px solid var(--o-line); max-width:560px; }
}
@media (min-width:1024px){
  html[data-theme]{ --o-max:1080px; }
  .o-shell.has-side{ display:grid; grid-template-columns:var(--o-side) minmax(0,1fr); }
  .o-side{ display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; height:100dvh; box-sizing:border-box;
    padding:22px 16px; border-right:1px solid var(--o-line); background:rgba(4,11,8,.62); overflow-y:auto; }
  .o-side-brand{ display:flex; align-items:center; gap:12px; padding:0 4px 6px; }
  .o-side-brand .ib{ width:48px; height:48px; }
  .o-side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:6px; }
  /* A menüsáv mellett a vissza-gomb fölösleges: a sáv mindig ott van. */
  .has-side .scr-head .ib.back{ display:none; }
  .mtiles{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  /* Laptopon az elszámolás és a csoportos óra középre zárt lap, nem teljes
     képernyő -- a képernyő szélessége itt nem kényszer. */
  html[data-theme] .overlay.full{ align-items:center; padding:24px; background:rgba(2,7,5,.62); }
  html[data-theme] .overlay.full .modal{ max-width:640px; height:auto; min-height:0; max-height:calc(100vh - 48px);
    border-radius:28px; border:1px solid var(--o-line); background:linear-gradient(180deg, #0D1C17, #07110D); }
  body.has-full #app > .o-shell{ visibility:visible; }
  /* Vendéglista és vendégkártya egymás mellett */
  .split{ display:grid; grid-template-columns:minmax(320px,400px) minmax(0,1fr); gap:24px; align-items:start; }
  .split > .split-side{ position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto; }
}
@media (max-width:1023px){
  .split > .split-side.hide-narrow{ display:none; }
}
@media (max-width:370px){
  :root{ --o-gutter:13px; }
  .mtile-num{ font-size:28px; }
  .mtile-name{ font-size:17px; }
  .ob{ font-size:16px; }
  .o-tab{ font-size:11.5px; }
}

/* =========================================================================
   Híd a régi jelölésekhez.

   Sok kisebb lap (új vendég, jegytípus, feltöltési csomag, PDF, meghívó,
   chat-menük, ...) a régi osztálynevekkel dolgozik: .btn-primary, .field,
   .info-note. Ezek kapják meg az új megjelenést, ugyanazzal a hierarchiával:
     .btn-primary  -> döntés   (világos, menta)
     .btn-outline  -> alternatíva (üveg, keretes)
     .btn-ghost    -> extra    (visszafogott)
   ========================================================================= */
html[data-theme] .btn{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.005em;
  border-radius:18px; min-height:54px; padding:0 20px; font-size:16px; gap:10px; box-shadow:none; }
html[data-theme] .btn-primary{ background:var(--o-cta); color:var(--o-cta-ink); min-height:60px; font-size:17px; border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px rgba(0,0,0,.28); }
html[data-theme] .btn-primary:hover, html[data-theme] .btn-primary:active{ background:var(--o-cta); filter:brightness(.97); }
html[data-theme] .btn-outline{ background:rgba(255,255,255,.06); border:1px solid var(--o-line-2); color:var(--o-ink); }
html[data-theme] .btn-outline:hover{ background:rgba(255,255,255,.09); }
html[data-theme] .btn-ghost{ background:transparent; border:1px solid var(--o-line); color:var(--o-ink-2); min-height:48px;
  border-radius:15px; font-family:var(--f-disp); font-weight:600; font-size:15px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; }
html[data-theme] .btn-danger{ background:rgba(229,87,74,.07); border:1px solid rgba(229,87,74,.45); color:var(--o-red-t); }
html[data-theme] .btn-sm{ min-height:46px; font-size:14.5px; padding:0 14px; border-radius:15px; }
html[data-theme] .btn .icon-badge, html[data-theme] .btn .icon-flat{ background:none !important; }
html[data-theme] .icon-badge{ background:none !important; color:inherit !important; }

html[data-theme] .field{ margin-bottom:16px; display:flex; flex-direction:column; gap:8px; }
html[data-theme] .field > label{ font-family:var(--f-mono); font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--o-ink-2); }
html[data-theme] input[type=text], html[data-theme] input[type=email], html[data-theme] input[type=password],
html[data-theme] input[type=number], html[data-theme] input[type=tel], html[data-theme] input[type=time],
html[data-theme] input[type=url], html[data-theme] input[type=date], html[data-theme] input[type=search],
html[data-theme] select, html[data-theme] textarea{
  background:var(--o-input); color:var(--o-ink); border:1px solid var(--o-line-2); border-radius:17px; min-height:56px;
  padding:0 16px; font-size:17px; font-weight:500; box-sizing:border-box; width:100%; }
html[data-theme] textarea{ padding:14px 16px; }
html[data-theme] input[type=file]{ background:var(--o-input); color:var(--o-ink-2); border:1px dashed var(--o-line-2); border-radius:17px; padding:14px; width:100%; box-sizing:border-box; }
html[data-theme] input:hover, html[data-theme] select:hover, html[data-theme] textarea:hover{ border-color:var(--o-line-2); }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus{ outline:none; border-color:rgba(var(--o-accent-rgb),.8); box-shadow:0 0 0 3px rgba(var(--o-accent-rgb),.16); }
html[data-theme] .info-note{ background:rgba(255,255,255,.05); border:1px solid var(--o-line); border-radius:16px; padding:14px 16px;
  font-size:15px; line-height:1.4; color:var(--o-ink-2); }
html[data-theme] .muted, html[data-theme] .secondary-text{ color:var(--o-ink-2); font-size:14px; }
html[data-theme] .empty-hint{ color:var(--o-ink-2); font-size:15px; }
html[data-theme] .card{ background:var(--o-glass); border:1px solid var(--o-line); border-radius:24px; box-shadow:none; }
html[data-theme] .card-head h3{ font-family:var(--f-mono); font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--o-ink-2); }
html[data-theme] .badge{ font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; height:26px; padding:0 10px; }
html[data-theme] .lang-toggle{ border-radius:18px; border-color:var(--o-line); background:rgba(0,0,0,.22); padding:4px; gap:4px; }
html[data-theme] .lang-btn{ border-radius:13px; min-height:46px; font-family:var(--f-disp); font-weight:700; font-size:15px; color:var(--o-ink-2); border:1px solid transparent; }
html[data-theme] .lang-btn.active{ background:rgba(var(--o-accent-rgb),.16); color:#F3D58E; border-color:rgba(var(--o-accent-rgb),.75); }
html[data-theme] .remember-row{ min-height:48px; font-size:16px; color:var(--o-ink); }
html[data-theme] .remember-row input{ width:24px; height:24px; accent-color:var(--o-ok); }
html[data-theme] .pw-eye{ color:var(--o-ink-2); }
html[data-theme] .history-delta.pos{ color:var(--o-ok); } html[data-theme] .history-delta.neg{ color:var(--o-red-t); }

/* ---------- Edzői kezdőlap ---------- */
.hello-head{ display:flex; align-items:center; gap:14px; min-height:60px; }
.hello-head .scr-titles{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.hello-head .scr-eyebrow{ font-family:var(--f-mono); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--o-ink-2); margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hello-head .scr-title{ font-family:var(--f-disp); font-weight:800; font-size:25px; letter-spacing:-.02em; margin:0; line-height:1.1; overflow-wrap:anywhere; }
.next-card .lbl{ display:flex; align-items:center; gap:8px; }
.next-card .live{ width:10px; height:10px; border-radius:50%; background:var(--o-ok); box-shadow:0 0 0 3px rgba(var(--o-ok-rgb),.22), 0 0 12px var(--o-ok); flex:0 0 auto; }
.next-time{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.next-time .num{ font-size:clamp(52px, 17vw, 66px); line-height:.95; }
.next-time .end{ font-size:20px; color:var(--o-ink-2); font-weight:500; }
.next-who{ margin:0; font-size:21px; font-weight:700; overflow-wrap:anywhere; letter-spacing:-.01em; }
/* Gyorsgombok: négy kerek-négyzet gomb, alattuk felirat. */
.qa{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.qa-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; color:var(--o-ink); cursor:pointer; font:inherit; padding:0; position:relative; }
.qa-btn > span.qa-ico{ width:60px; height:60px; border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative;
  background:rgba(255,255,255,.07); border:1px solid var(--o-line); }
.qa-btn > span.qa-ico .ic{ width:25px; height:25px; }
.qa-btn > span.qa-t{ font-size:13px; font-weight:600; text-align:center; line-height:1.2; }
.qa-btn:active > span.qa-ico{ transform:scale(.96); }
@media (min-width:1024px){ .qa{ max-width:520px; } }

/* ---------- Naptár ---------- */
/* A naptár-kártya: a kezdőlapon és a Naptár képernyőn ugyanaz (Nap / Teljes). */
.calcard{ gap:14px; padding:16px; }
.calcard-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.calcard-top .lbl{ font-size:10.5px; line-height:1.5; }
.cal-chips{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chip-tg{ display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 12px; border-radius:14px; border:1px solid var(--o-line-2);
  background:rgba(255,255,255,.05); color:var(--o-ink); cursor:pointer; font:inherit; font-family:var(--f-disp); font-weight:700; font-size:13.5px; }
.chip-tg .ic{ width:18px; height:18px; color:var(--o-ink-2); }
.chip-tg small{ font-family:var(--f-mono); font-weight:600; font-size:9.5px; letter-spacing:.12em; color:var(--o-ink-2); }
.chip-tg.on{ border-color:rgba(var(--o-accent-rgb),.75); background:rgba(var(--o-accent-rgb),.12); color:#F3D58E; }
.chip-tg.on .ic, .chip-tg.on small{ color:#F3D58E; }
.cal-chips .legend{ display:flex; gap:6px; margin-left:auto; }
.cal-weeknav{ display:flex; align-items:center; gap:10px; }
.cal-weeknav .ob{ flex:1; min-height:52px; }
.cal-weeknav-mid{ flex:1; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
/* Napválasztó csík a Nap nézetben: pöttyök = aznapi alkalmak (arany/kék). */
.daystrip{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
.daystrip button{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 9px; border-radius:16px; border:1px solid transparent;
  background:none; color:var(--o-ink); cursor:pointer; font:inherit; min-width:0; }
.daystrip .dn{ font-family:var(--f-mono); font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--o-ink-2); }
.daystrip .dd{ font-family:var(--f-disp); font-weight:800; font-size:21px; line-height:1.1; }
.daystrip .dots{ display:flex; gap:3px; height:6px; }
.daystrip .dots i{ width:5px; height:5px; border-radius:50%; background:var(--c-cal); }
.daystrip .dots i.g{ background:var(--c-guest); }
.daystrip button.today .dd{ color:#F3D58E; }
.daystrip button.on{ border-color:rgba(var(--o-accent-rgb),.8); background:rgba(var(--o-accent-rgb),.10); }
.cal-dayrow{ flex-direction:row; align-items:center; gap:14px; padding:14px 14px 14px 16px; min-height:80px; border-radius:20px; }
.cal-dayrow > .ic{ color:rgba(255,255,255,.7); }
.cal-dayrow-time{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:62px; }
.cal-dayrow-time .num{ font-size:22px; }
.cal-dayrow-time .lbl{ font-size:10px; letter-spacing:.08em; }
.cal-dayrow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.cal-dayrow-title{ font-size:18px; font-weight:700; overflow-wrap:anywhere; line-height:1.2; letter-spacing:-.01em; }
.cal-dayrow.is-past{ opacity:.55; }
.cal-dayrow:disabled{ cursor:default; }
.cal-dayrow .pl{ background:rgba(0,0,0,.25); border-color:rgba(var(--a-rgb),.35); }
.cal-dayrow .pl.solid{ background:var(--a); }
.cal-dayrow .pl.a-red{ background:rgba(229,87,74,.22); color:#FF9C90; border-color:rgba(229,87,74,.5); }
.cal-hint{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--o-ink-2); line-height:1.45; }
.cal-hint .ic{ width:22px; height:22px; color:var(--c-cal); margin-top:1px; }
.cal-hint b{ color:var(--o-ink); }
.cal-fab{ position:fixed; right:max(18px, env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom)); z-index:40;
  width:64px; height:64px; border-radius:22px; border:0; background:var(--o-cta); color:var(--o-cta-ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 #fff; cursor:pointer; }
.has-tabs .cal-fab{ bottom:calc(var(--o-tabbar-h) + 22px + env(safe-area-inset-bottom)); }
.cal-fab .ic{ width:30px; height:30px; stroke-width:2.2; }
@media (min-width:1024px){ .has-tabs .cal-fab{ bottom:calc(24px + env(safe-area-inset-bottom)); } }

/* A heti rács bőre. A motor (abszolút pozíció, sávok, húzás) a régi CSS. */
html[data-theme] .cal-container{ border:1px solid var(--o-line); border-radius:18px; background:rgba(0,0,0,.18); }
html[data-theme] .calcard .cal-container{ border:0; border-radius:0; background:transparent; margin:0 -4px; }
html[data-theme] .cal-scroll{ max-height:calc(100dvh - 300px); }
html[data-theme] .calcard.home .cal-scroll{ max-height:none; }
html[data-theme] .cal-header{ background:transparent; border-bottom:1px solid var(--o-line); }
html[data-theme] .cal-scroll .cal-header{ background:rgba(16,32,26,.93); }
html[data-theme] .calcard.home .cal-scroll .cal-header{ background:transparent; position:static; }
html[data-theme] .cal-daycol-head{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px 10px; color:var(--o-ink-2); }
html[data-theme] .cal-dayname{ font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
html[data-theme] .cal-daynum{ font-family:var(--f-disp); font-weight:800; font-size:19px; color:var(--o-ink); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
html[data-theme] .cal-daycol-head.is-today{ background:none; color:#F3D58E; }
html[data-theme] .cal-daycol-head.is-today .cal-daynum{ background:var(--c-cal); color:var(--c-cal-ink); }
html[data-theme] .cal-daycol{ border-left:1px solid var(--o-hair); }
html[data-theme] .cal-daycol-today{ background-color:rgba(230,178,62,.07); box-shadow:none; }
html[data-theme] .cal-hour-label{ font-family:var(--f-mono); font-weight:600; font-size:10.5px; color:var(--o-ink-3); }
.cal-now{ position:absolute; left:-1px; right:0; height:2px; background:var(--c-cal); z-index:5; pointer-events:none; }
.cal-now::before{ content:""; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--c-cal); }
html[data-theme] .cal-event{ border-radius:9px; border:1px solid transparent; box-shadow:none; padding:4px 6px; color:var(--o-ink); }
html[data-theme] .cal-event.cat-personal{ background:linear-gradient(180deg, rgba(230,178,62,.42), rgba(230,178,62,.22)); border-color:rgba(230,178,62,.8); }
html[data-theme] .cal-event.cat-group{ background:linear-gradient(180deg, rgba(88,166,232,.40), rgba(88,166,232,.20)); border-color:rgba(88,166,232,.8); }
html[data-theme] .cal-event.cal-event-needs{ box-shadow:0 0 0 1.5px rgba(242,137,125,.85); }
/* Elszámolt (rendezett) alkalom: ZÖLD, a kategóriaszín helyett -- így az edző
   egy pillantással látja, mi van már levonva (ez a 2.0.8 óta így volt, és a
   megrendelő fontos funkcióként kérte vissza, 2026-10-05). Ez a szabály a
   cat-personal / cat-group UTÁN áll, tehát felülírja azokat. */
html[data-theme] .cal-event.cal-event-done{ background:linear-gradient(180deg, rgba(83,224,161,.40), rgba(83,224,161,.20)); border-color:rgba(83,224,161,.85); }
html[data-theme] .cal-event.cal-event-done .cal-event-time{ color:#A6F2CF; }
html[data-theme] .cal-event.cal-event-past{ opacity:.5; }
html[data-theme] .cal-event-time{ font-family:var(--f-mono); font-weight:600; font-size:10px; letter-spacing:.02em; opacity:1; }
html[data-theme] .cal-event.cat-personal .cal-event-time{ color:#F6D58A; }
html[data-theme] .cal-event.cat-group .cal-event-time{ color:#A9D2F6; }
html[data-theme] .cal-event-title{ font-family:var(--f-disp); font-weight:700; font-size:12.5px; color:#fff; }
.cal-ev-count{ font-family:var(--f-mono); font-weight:600; font-size:10.5px; color:rgba(255,255,255,.85); }
.cal-ev-count.full{ color:#FFA196; }
.cal-event-sub{ font-size:12px; color:var(--o-ink-2); margin-top:2px; }
html[data-theme] .cal-event.mini .cal-event-time{ display:none; }
html[data-theme] .cal-event-badge{ background:#0E1E18; color:var(--o-ink); border:1px solid var(--o-line-2); box-shadow:none; font-family:var(--f-disp); }
html[data-theme] .cal-event-badge.zero{ background:#0B1612; color:var(--o-ink-3); }
html[data-theme] .cal-event-warn{ background:var(--c-cal); color:var(--c-cal-ink); box-shadow:none; }
html[data-theme] .cal-event.expanded{ background:#10211B; color:var(--o-ink); box-shadow:0 16px 36px rgba(0,0,0,.55), 0 0 0 1px var(--o-line-2); }
html[data-theme] .cal-event.expanded .cal-event-title{ color:var(--o-ink); }
html[data-theme] .cal-scrim{ background:rgba(2,7,5,.55); }
html[data-theme] .cal-event-ghost{ border:2px dashed var(--c-cal); }
/* Telefonon is MIND a látható nap kifér (keskeny oszlopokkal), vízszintes
   görgetés nélkül. A régi CSS 640 px-es minimumot és 84 px-es oszlopot adott. */
html[data-theme] .cal-header, html[data-theme] .cal-body{ min-width:0; }
html[data-theme] .cal-daycol-head, html[data-theme] .cal-daycol{ min-width:0; flex:1 1 0; }
html[data-theme] .cal-gutter-head, html[data-theme] .cal-gutter-times{ width:30px; flex:0 0 30px; }
html[data-theme] .cal-hour-label{ right:5px; left:0; text-align:right; z-index:1; }
html[data-theme] .cal-scroll{ overflow-x:hidden; }
html[data-theme] .cal-event{ left:2px; right:2px; padding:3px 4px; }
html[data-theme] .cal-event-title{ font-size:11.5px; line-height:1.15; }
@media (min-width:700px){
  html[data-theme] .cal-gutter-head, html[data-theme] .cal-gutter-times{ width:46px; flex-basis:46px; }
  html[data-theme] .cal-event{ padding:4px 7px; }
  html[data-theme] .cal-event-title{ font-size:13px; }
}
@media (max-width:699px){
  html[data-theme] .cal-event-time{ font-size:9px; letter-spacing:0; }
  html[data-theme] .cal-event-badge{ min-width:17px; height:17px; font-size:10px; top:-7px; right:-6px; }
}

/* ---------- Alkalom-képernyők ---------- */
.att-head{ display:flex; align-items:center; gap:14px; }
.att-name{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.att-name .row-name{ font-size:19px; }
.att-bal{ font-size:24px; color:var(--o-ink); }
.att-actions{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:10px; }
.att-actions .ob{ min-height:58px; font-size:17px; padding:0 12px; }
.att-actions .ob.sec{ font-size:15px; }
.att-remove{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 4px;
  background:none; border:0; color:var(--o-ink-3); font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.att-remove .ic{ width:17px; height:17px; }
.att-done .row-name{ font-size:17px; }
.att-done.is-absent{ opacity:.75; }
.grp-sum-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.pick{ display:flex; align-items:center; gap:14px; width:100%; min-height:68px; padding:10px 16px; box-sizing:border-box; text-align:left;
  background:var(--o-glass); border:1px solid var(--o-line); border-radius:20px; color:var(--o-ink); font:inherit; cursor:pointer; }
.pick.on{ border-color:rgba(var(--o-accent-rgb),.75); background:linear-gradient(155deg, rgba(var(--o-accent-rgb),.16), rgba(var(--o-accent-rgb),.05)), var(--o-glass); }
.pick:disabled{ opacity:.45; cursor:default; }
.pick-box{ width:30px; height:30px; border-radius:9px; border:1.5px solid var(--o-line-2); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.pick.on .pick-box{ background:var(--c-cal); border-color:var(--c-cal); color:var(--c-cal-ink); }
.pick-box .ic{ width:20px; height:20px; stroke-width:2.4; }
.pick:disabled .pick-box{ border-style:dashed; }
.sticky-cta{ position:sticky; bottom:0; padding:12px 0 calc(4px + env(safe-area-inset-bottom)); background:linear-gradient(0deg, rgba(4,11,8,.92) 70%, transparent); z-index:2; }
.ev-remind summary{ display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none; }
.ev-remind summary::-webkit-details-marker{ display:none; }
.ev-remind summary .ic{ width:20px; height:20px; }

/* ---------- Vendégek ---------- */
.guest-row.on{ background:rgba(88,166,232,.10); border-radius:14px; }
.guest-id{ display:flex; align-items:center; gap:16px; }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-row .chip{ height:40px; border:1px solid var(--o-line-2); cursor:pointer; font:inherit; font-family:var(--f-mono); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:none; }
.tile:disabled{ opacity:.45; cursor:default; }
@media (min-width:1024px){ .ib.back-guest{ display:none; } }

/* ---------- Beállítások-sorok ---------- */
.set-group{ gap:0; }
.set-row{ display:flex; align-items:center; gap:14px; min-height:68px; padding:12px 18px; box-sizing:border-box; width:100%;
  background:none; border:0; border-bottom:1px solid var(--o-hair); color:var(--o-ink); text-align:left; font:inherit; }
.set-group > .set-row:last-child, .set-group > div:last-child > .set-row:last-child{ border-bottom:0; }
button.set-row{ cursor:pointer; }
.set-row > .ic:last-child{ color:var(--o-ink-3); }
.set-sub{ font-size:13.5px; color:var(--o-ink-2); line-height:1.35; }
.set-profile{ display:flex; align-items:center; gap:18px; }
.set-photo{ position:relative; width:96px; height:96px; flex:0 0 auto; }
html[data-theme] .set-photo .avatar-photo-xl{ width:96px !important; height:96px !important; border-radius:50%; border:2px solid var(--c-cal); object-fit:cover; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%, #1F5A45, #0B2A20); color:#fff; }
.set-photo-btn{ position:absolute; right:-4px; bottom:-4px; width:40px; height:40px; border-radius:50%; background:var(--c-cal); color:var(--c-cal-ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:3px solid #0A1612; }
.set-photo-btn .ic{ width:20px; height:20px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- Üzenetek ---------- */
.chat-row{ flex-direction:column; padding:14px 16px; }
.chat-row.has-unread{ border-color:rgba(157,109,242,.5); background:linear-gradient(155deg, rgba(157,109,242,.16), rgba(157,109,242,.04)), var(--o-glass); }
.chat-row-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.chat-row-top .row-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-row-prev{ font-size:14.5px; color:var(--o-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-row-badge{ position:static; border:0; flex:0 0 auto; }
html[data-theme] .chat-membercount{ position:absolute; right:-6px; bottom:-6px; min-width:22px; height:22px; border-radius:999px; padding:0 5px;
  background:var(--c-chat); color:#fff; font-family:var(--f-disp); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #0A1612; }
html[data-theme] .chat-room-page{ max-width:var(--o-max); margin:0 auto; width:100%; box-sizing:border-box; padding:max(14px, env(safe-area-inset-top)) var(--o-gutter) 0; }
html[data-theme] .chat-head{ display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--o-hair); margin:0; }
.chat-head-name{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.chat-head-name strong{ font-size:18px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme] .chat-room-page .chat-thread{ padding:16px 4px 14px; gap:10px; }
html[data-theme] .chat-msg{ background:rgba(255,255,255,.08); border:1px solid var(--o-line); color:var(--o-ink); border-radius:20px; padding:12px 16px; font-size:16px; max-width:80%; }
html[data-theme] .chat-msg.mine{ background:linear-gradient(160deg, #A97CF6, #7E4FE0); color:#fff; border-color:transparent; }
html[data-theme] .chat-msg .when{ font-family:var(--f-mono); font-size:10.5px; opacity:.7; margin-top:6px; }
html[data-theme] .chat-msg .who{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#C5A9FA; opacity:1; }
html[data-theme] .chat-sys{ align-self:center; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--o-ink-2); background:var(--o-glass); border:1px solid var(--o-line); border-radius:999px; padding:6px 14px; }
html[data-theme] .chat-room-page .chat-composer{ gap:10px; align-items:flex-end; padding-top:10px; background:rgba(4,11,8,.88); border-top:1px solid var(--o-hair); }
html[data-theme] .chat-composer textarea{ min-height:56px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid var(--o-line-2); color:var(--o-ink); font-size:16px; padding:15px 18px; }
html[data-theme] .chat-back-arrow{ width:56px; height:56px; border-radius:18px; }
html[data-theme] .chat-send{ width:56px; height:56px; min-width:56px; border-radius:18px; border:0; background:var(--o-cta); color:var(--o-cta-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
html[data-theme] .chat-msg.liked{ box-shadow:0 0 0 1.5px var(--c-guest); }
@media (min-width:1024px){ html[data-theme] .chat-room-page{ height:100vh; } }
/* v2.4 — a szoba telefonon és iPaden a LÁTHATÓ részhez rögzül (top =
   visualViewport.offsetTop, magasság = a látható magasság): billentyűzetnél
   a beviteli mező közvetlenül fölötte ül, nem egy rés magasságában. */
@media (max-width:1023px){
  html[data-theme] .chat-room-page{ position:fixed; left:0; right:0; top:var(--app-vt, 0px); height:var(--app-vh, 100dvh); z-index:20; }
  body.kb-open .chat-room-page .chat-composer{ padding-bottom:8px; }
}
/* A szál csak függőlegesen görög: a kilógó kedvelés-jel miatt eddig oldalra
   is el lehetett húzni, és a saját buborékok a széle mögé csúsztak. */
html[data-theme] .chat-room-page .chat-thread{ overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; padding-right:14px; }
/* A beviteli sor nem kap saját (fekete) hátteret -- a márvány látsszon. */
html[data-theme] .chat-room-page .chat-composer{ background:transparent; border-top:0; }
html[data-theme] .chat-membercount.unread{ background:var(--c-cal); color:var(--c-cal-ink); }
.chat-row-members{ margin-top:1px; }

/* ---------- Kimutatás ---------- */
.rep-bars{ display:flex; align-items:flex-end; gap:8px; height:170px; padding-top:6px; }
.rep-bars.scroll{ overflow-x:auto; }
.rep-col{ flex:1 1 0; min-width:22px; height:100%; display:flex; flex-direction:column; align-items:center; gap:6px; }
.rep-pair{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.rep-bar{ width:42%; max-width:16px; border-radius:4px 4px 2px 2px; }
.rep-bar.rev{ background:var(--c-rep); }
.rep-bar.used{ background:rgba(126,190,67,.32); }
.rep-x{ font-family:var(--f-mono); font-size:10px; font-weight:600; color:var(--o-ink-3); white-space:nowrap; text-align:center; line-height:1.25; }
.split-bar{ display:flex; gap:3px; height:14px; border-radius:999px; overflow:hidden; margin:4px 0 6px; }
.split-bar span{ background:var(--a); min-width:6px; }
.split-row{ min-height:52px; }
.split-dot{ width:12px; height:12px; border-radius:4px; background:var(--a); flex:0 0 auto; }

/* ---------- Belépő oldal ---------- */
.login-scr{ max-width:480px; gap:18px; padding-top:max(26px, env(safe-area-inset-top)); }
.login-brand{ display:flex; align-items:center; justify-content:center; gap:10px; }
.login-brand .lbl{ color:#9FE3C4; }
.login-mark{ display:inline-flex; }
.login-coach{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.login-avatar{ width:104px; height:104px; border-radius:50%; border:2.5px solid var(--c-cal); background:radial-gradient(circle at 35% 30%, #1F5A45, #0B2A20); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-disp); font-weight:800; font-size:44px; overflow:hidden; }
.login-avatar img{ width:100%; height:100%; object-fit:cover; }
.login-title{ font-size:clamp(34px, 11vw, 46px); text-align:center; overflow-wrap:anywhere; letter-spacing:-.03em; }
.login-sub{ margin:0; text-align:center; font-size:16px; }
.login-lang{ width:100%; box-sizing:border-box; }
.install-tip .ob-row{ margin-top:2px; }
html[data-theme] input[type=number]{ -moz-appearance:textfield; }
html[data-theme] input[type=number]::-webkit-outer-spin-button, html[data-theme] input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- Omni jel: az eredeti forma, krém színben ---------- */
:root{ --o-brand:#F3E7D6; }
.ic.omni-mark{ fill:var(--o-brand); stroke:none; }
.brand-ib .ic.omni-mark{ width:28px; height:28px; }
.o-side-brand .brand-ib .ic.omni-mark{ width:30px; height:30px; }
.login-mark .ic.omni-mark{ width:26px; height:26px; }

/* ---------- Hírfal-bejegyzés ---------- */
.news-post{ display:flex; flex-direction:column; gap:12px; }
.news-post-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.news-post-title{ margin:0; font-size:21px; line-height:1.2; }
.news-post-body{ margin:0; white-space:pre-wrap; color:var(--o-ink-2); font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.news-post-media img{ display:block; width:100%; border-radius:14px; }
.news-post-media.video{ aspect-ratio:16/9; }
.news-post-media.video iframe{ width:100%; height:100%; border:0; border-radius:14px; }
.news-post-actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:nowrap; }
.news-post-actions .ob{ flex:1 1 auto; min-width:0; padding:0 12px; }
.news-post-actions .ib{ flex:0 0 auto; }
.chk-row{ display:flex; align-items:center; gap:10px; min-height:44px; margin-top:6px; font-size:15px; }

/* ---------- Vendég kezdőlap ---------- */
.bal-card{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.bal-card .big-num{ font-size:clamp(42px, 13vw, 56px); }
.nextclass{ display:flex; align-items:center; gap:16px; }
.nextclass-when{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:64px; }
.nextclass-when .num{ font-size:28px; }
.nextclass-title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.nextclass-title strong{ font-size:19px; font-weight:700; overflow-wrap:anywhere; letter-spacing:-.01em; }
.mod-open{ color:var(--a) !important; display:flex; align-items:center; gap:8px; }
.mod-open .ic{ width:18px; height:18px; }
.cal-dayrow.is-now{ box-shadow:0 0 0 1.5px rgba(var(--a-rgb),.9), 0 12px 30px rgba(0,0,0,.25); }
.grp-time{ font-size:clamp(24px, 8vw, 32px); white-space:nowrap; letter-spacing:-.03em; }
.rows > .set-row:last-child{ border-bottom:0; }
/* A tapadó gomb letiltva se legyen átlátszó: alatta a lista görög. */
.sticky-cta .ob:disabled{ opacity:1; background:#1A2A24; color:var(--o-ink-3); box-shadow:none; }
.nextclass > .ic{ color:var(--o-ink-3); }

/* ---------- Jegytípus-választó (v2.1.1) ----------
   A rendszer-legördülő helyett: teljes szélesség, tördelhető név, színes ár. */
.tk-pick{ display:flex; flex-direction:column; gap:8px; }
.tk-current{ display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:10px 16px; box-sizing:border-box;
  border-radius:17px; border:1px solid var(--o-line-2); background:var(--o-input); color:var(--o-ink); font:inherit; text-align:left; cursor:pointer; }
.tk-pick.open .tk-current{ border-color:rgba(var(--o-accent-rgb),.8); box-shadow:0 0 0 3px rgba(var(--o-accent-rgb),.16); }
.tk-current > .ic{ color:var(--o-ink-2); transition:transform .15s; }
.tk-pick.open .tk-current > .ic{ transform:rotate(180deg); }
.tk-name{ flex:1; min-width:0; font-size:16.5px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.tk-price{ flex:0 0 auto; font-family:var(--f-disp); font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap;
  color:#F3D58E; background:rgba(var(--c-cal-rgb),.16); border:1px solid rgba(var(--c-cal-rgb),.45); border-radius:999px; padding:4px 11px; }
.tk-list{ display:none; flex-direction:column; gap:6px; padding:6px; border-radius:18px; border:1px solid var(--o-line); background:rgba(0,0,0,.28); }
.tk-pick.open .tk-list, .tk-list.static{ display:flex; }
.tk-list.static{ padding:0; border:0; background:none; gap:8px; }
.tk-opt{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 14px; box-sizing:border-box; border-radius:14px;
  border:1px solid transparent; background:rgba(255,255,255,.04); color:var(--o-ink); font:inherit; text-align:left; cursor:pointer; }
.tk-list.static .tk-opt{ border-color:var(--o-line); background:rgba(255,255,255,.05); min-height:60px; border-radius:17px; }
.tk-opt:active{ transform:scale(.99); }
.tk-opt.on{ border-color:rgba(var(--o-accent-rgb),.7); background:rgba(var(--o-accent-rgb),.10); }
.tk-check{ width:22px; height:22px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#F3D58E; }
.tk-check .ic{ width:20px; height:20px; }
.tk-pick .tk-opt:not(.on) .tk-check{ visibility:hidden; }
.tk-list.static .tk-check{ color:var(--o-ink-2); }

/* ---------- v2.4: tagoltabb edzői kezdőlap ----------
   A kártyák eddig egyforma üvegként folytak egymásba. Most: a következő
   alkalom a foglalkozás színét kapja, a naptár sötétebb "panel", a gyors
   műveletek saját keretet és címet, a modulcsempék szakaszcímet. */
.next-card.area .lbl{ color:var(--a); }
html[data-theme] .calcard.home{ background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), rgba(3,9,7,.78);
  border-color:var(--o-line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 36px rgba(0,0,0,.35); }
html[data-theme] .calcard.home .calcard-top{ padding-bottom:12px; border-bottom:1px solid var(--o-hair); }
.qa-wrap{ gap:14px; background:linear-gradient(155deg, rgba(var(--c-chat-rgb),.10), rgba(var(--c-chat-rgb),.02) 60%), var(--o-glass); border-color:rgba(var(--c-chat-rgb),.28); }
.qa-wrap > .lbl, .home-sect{ font-size:10.5px; }
.home-sect{ margin:6px 4px -6px; }