/* ============================================================================
   Csodás Fogyás - app.css
   A /fiok és az /admin KÖZÖS dizájn-rendszere. Egy fájl, két bőr.

   MIÉRT LÉTEZIK EZ A FÁJL
   A rendszer eddig papíron volt (mockup + 17/18-as spec + brand-config), kódban
   nem: minden oldal kézzel vezette le ugyanazt a saját <style> blokkjába, és a
   másolatok elcsúsztak (kártya-sugár 22 vs 20 vs 14, gomb 40 vs 46 px, --muted
   #9c9286 vs #8a7f63, hibapiros #8c3b1b vs #a3392e). Ez a fájl a szerződés.

   MI A KÁNON ÉS MI NEM
   - A SZÍNPALETTA kánon: az index.html :root blokkjából jön, változtatás nélkül,
     és a brand-config.md köti (--gold CSAK dekoráció, --gold-deep szöveghez és
     elsődleges gomb háttérnek - a --gold fehérrel csak 3,41:1 lenne).
   - A KOMPONENS-RÉTEG nem volt sehol kánon (a főoldalon egyetlen .btn sincs,
     a CTA hétféle paddinggel van bemásolva inline). Itt definiáljuk, a főoldal
     leggyakoribb értékeihez horgonyozva: kártya 14px (ott 49x), pirula 999px.

   KÉT BŐR EGY RENDSZERBŐL
   - alap (vendég, /fiok): meleg krém, üveg-fejléc, arany akcentus - szalon-érzet
   - [data-skin="tool"] (/admin): ugyanaz a paletta, de csendes munkaeszközzé
     hangolva. A keret monokróm, a szín a STÁTUSZNAK van fenntartva. Sűrűbb
     sorok, tabuláris számok, kevesebb dekoráció. Anikó napi eszköze, nem kirakat.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENEK
   ------------------------------------------------------------------------ */
:root{
  color-scheme:light;

  /* --- Paletta: az index.html :root-jából, szó szerint (KÁNON) --- */
  --gold:#c9a227;          /* DEKORÁCIÓ: vonal, pötty, ikon. Szöveg-háttérként TILOS. */
  --gold-deep:#7f611a;     /* Arany SZÖVEG krémen (5,77:1) + elsődleges gomb háttere. */
  --gold-band:#e3c878;     /* Arany SZÖVEG a --band sávon (6,8:1). */
  --espresso:#241d14;
  --espresso-soft:#7a6b4a; /* AA-biztos másodlagos szöveg (4,9:1 krémen). */
  --cream:#fbf8f1;         /* oldal-háttér */
  --cream-2:#f3e9d4;       /* halvány alternatív felület */
  --line:rgba(51,40,19,.14);
  /* Erősebb vonal oda, ahol az .14 alfa eltűnne (kiválasztott fül kerete). */
  --line-strong:rgba(122,107,74,.45);
  --white:#ffffff;         /* KÁRTYA-felület (nem "fehér": sötét módban sötét) */
  --band:#332813;          /* sötét sáv - MINDIG sötét, mindkét módban */
  --on-band:#f5efe3;
  --on-band-soft:rgba(245,239,227,.62);
  --on-band-line:rgba(245,239,227,.14);
  --acc-rgb:201,162,39;
  --gold-deep-rgb:127,97,26;

  /* --- Ami eddig hiányzott: egyetlen másodlagos szürke ---
     Volt --muted #9c9286 (admin) és #8a7f63 (fiók). Az előbbi a lábléc
     hátterén 2,58:1 volt, vagyis megbukott az AA-n. Egy maradt, az AA-biztos. */
  --muted:#7a6b4a;

  /* --- Felületek. A --white a kártya, ahogy a főoldalon. --- */
  --surface:var(--white);
  --surface-2:#faf7f0;     /* mező-háttér, beágyazott doboz */
  --surface-3:#f3efe4;     /* csík, fejléc-sor, kiemelt sáv */

  /* --- Sugár: a főoldal leggyakoribb értékeihez horgonyozva --- */
  --r-pill:999px;
  --r-card:14px;
  --r-tile:12px;
  --r-field:12px;
  --r-sm:8px;

  /* --- Gomb: egy skála, három méret. 44px érintés-cél mindenhol. --- */
  --btn-h:44px;
  --btn-h-sm:38px;
  --btn-h-lg:52px;
  --btn-px:1.15rem;
  --btn-px-sm:.85rem;
  --btn-px-lg:1.6rem;

  /* --- Térköz-skála (4px alap) --- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem;

  /* --- Árnyék --- */
  --shadow-sm:0 1px 2px rgba(36,29,20,.05),0 1px 3px rgba(36,29,20,.06);
  --shadow-md:0 6px 22px -12px rgba(36,29,20,.22),0 2px 6px rgba(36,29,20,.05);
  --shadow-lg:0 24px 60px -28px rgba(36,29,20,.4);

  /* --- Betöltés-csík (a .skel gradiense) --- */
  --skel-a:#f0ebdf; --skel-b:#e4dccb;

  /* --- Státusz. EZ AZ EGYETLEN HELY, ahol szín jelentést hordoz. --- */
  --ok:#3c5e2b;   --ok-line:rgba(60,94,43,.32);   --ok-bg:rgba(60,94,43,.09);
  --warn:#8a5a12; --warn-line:rgba(138,90,18,.32); --warn-bg:rgba(138,90,18,.09);
  --bad:#a3392e;  --bad-line:rgba(163,57,46,.32);  --bad-bg:rgba(163,57,46,.08);

  /* --- Tipográfia --- */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,sans-serif;

  --ring:0 0 0 3px rgba(var(--gold-deep-rgb),.18);
  --dur:.18s;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --gold:#d9ae4c;
  --gold-deep:#e3c878;     /* sötétben az arany a VILÁGOS oldalra fordul */
  --gold-band:#e3c878;
  --espresso:#f5efe3;
  --espresso-soft:#c4b79c;
  --cream:#15110a;
  --cream-2:#1f1810;
  --line:rgba(245,239,227,.16);
  --line-strong:rgba(245,239,227,.3);
  --white:#1f1c13;
  --band:#2b2011;
  --acc-rgb:217,174,76;
  --gold-deep-rgb:227,200,120;
  --muted:#c4b79c;
  --surface:var(--white);
  --surface-2:#241f15;
  --surface-3:#2a2419;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 26px -14px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 24px 60px -28px rgba(0,0,0,.7);
  --skel-a:#262015; --skel-b:#3a3122;
  --ok:#a9d18c;   --ok-line:rgba(169,209,140,.34);  --ok-bg:rgba(169,209,140,.12);
  --warn:#e0b467; --warn-line:rgba(224,180,103,.34); --warn-bg:rgba(224,180,103,.12);
  --bad:#eaa79f;  --bad-line:rgba(234,167,159,.34);  --bad-bg:rgba(234,167,159,.11);
}

/* --- A "tool" bőr: /admin. Ugyanaz a paletta, csendesebbre húzva. ---
   A keretből kivesszük az aranyat (marad monokróm espresso/vonal), és a szín
   ott marad meg, ahol JELENTÉSE van: státusz-címke, hiba, figyelmeztetés. */
[data-skin="tool"]{
  --r-card:12px;
  --r-tile:10px;
  --r-field:10px;
  --btn-h:40px;
  --btn-h-sm:34px;
  --surface-2:#f6f3ec;
  --shadow-sm:0 1px 2px rgba(36,29,20,.04);
  --shadow-md:0 2px 10px -4px rgba(36,29,20,.12);
  /* sűrűbb sor-ritmus: az adat legyen a hős, ne a levegő */
  --row-y:.6rem;
}
html[data-theme="dark"] [data-skin="tool"]{ --surface-2:#221d14; }

/* ---------------------------------------------------------------------------
   2. ALAP
   ------------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:1rem;
  line-height:1.6;
  color:var(--espresso);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.008em;text-wrap:balance}
h1{font-size:clamp(1.75rem,4.5vw,2.15rem)}
h2{font-size:1.3rem}
h3{font-size:1.05rem}
p{margin:0 0 .7rem;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--gold-deep);text-underline-offset:3px}
a:hover{color:var(--espresso)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img,svg{max-width:100%}
::selection{background:var(--espresso);color:#f5efe3}
html[data-theme="dark"] ::selection{background:#f5efe3;color:#15110a}

/* Egy fókusz-szabály az egész rendszerre. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* A tool-bőrben a számok tabulárisak: az oszlopok így állnak egy vonalban. */
[data-skin="tool"]{font-variant-numeric:tabular-nums}

/* --- segéd-osztályok --- */
.hidden{display:none!important}
.muted{color:var(--muted)}
.fine{font-size:.78rem;line-height:1.55;color:var(--muted)}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-sm{display:flex;flex-direction:column;gap:var(--s2)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.spread{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap}
.push{margin-left:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.kicker{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500;margin:0}
[data-skin="tool"] .kicker{color:var(--muted)} /* a keret monokróm marad */

/* ---------------------------------------------------------------------------
   3. GOMB - egy definíció, három méret, négy szerep
   ------------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:var(--btn-h);
  padding:0 var(--btn-px);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-size:.9rem;font-weight:500;line-height:1;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  background:transparent;color:var(--espresso);
  transition:background var(--dur),border-color var(--dur),color var(--dur),box-shadow var(--dur);
}
.btn:hover{color:var(--espresso)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

.btn--sm{min-height:var(--btn-h-sm);padding:0 var(--btn-px-sm);font-size:.84rem}
.btn--lg{min-height:var(--btn-h-lg);padding:0 var(--btn-px-lg);font-size:.98rem}
.btn--block{display:flex;width:100%}
.btn--icon{width:var(--btn-h);min-width:var(--btn-h);padding:0;border-radius:50%}
.btn--icon.btn--sm{width:var(--btn-h-sm);min-width:var(--btn-h-sm)}

/* elsődleges: TÖMÖR --gold-deep. A világosabb --gold fehérrel 3,41:1 lenne. */
.btn--primary{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep);
  box-shadow:0 8px 20px -14px rgba(var(--gold-deep-rgb),.9)}
.btn--primary:hover{background:#6d541a;border-color:#6d541a;color:#fff}
html[data-theme="dark"] .btn--primary{color:#241d14}
html[data-theme="dark"] .btn--primary:hover{background:#ecdba0;border-color:#ecdba0;color:#241d14}

.btn--ghost{border-color:var(--line);color:var(--espresso);background:var(--surface)}
.btn--ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep)}

.btn--quiet{border-color:transparent;color:var(--muted);background:transparent}
.btn--quiet:hover{color:var(--espresso);background:var(--surface-2)}

.btn--danger{border-color:var(--bad-line);color:var(--bad);background:transparent}
.btn--danger:hover{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}

.btn--onDark{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.26)}
.btn--onDark:hover{background:rgba(255,255,255,.22);color:#fff}

/* Az admin gombjai szögletesebbek: pirula helyett lekerekített téglalap.
   Egy munkaeszközön a pirula-sor "marketinges", és rosszabbul sorakozik. */
[data-skin="tool"] .btn{border-radius:var(--r-field)}
[data-skin="tool"] .btn--icon{border-radius:var(--r-field)}
/* A tool-bőrben az elsődleges gomb sem arany-dobozos: csendes tömör felület. */
[data-skin="tool"] .btn--primary{box-shadow:none}

/* Ujjal kezelt felületen mindig 44px, a sűrűség ellenére is. */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn--sm{min-height:40px}
  .btn--icon{width:44px;min-width:44px}
}

/* ---------------------------------------------------------------------------
   4. KÁRTYA + FELÜLETEK
   ------------------------------------------------------------------------ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s5) var(--s5);
  box-shadow:var(--shadow-sm);
}
.card--flush{padding:0;overflow:hidden}
.card--dark{background:var(--band);color:var(--on-band);border-color:var(--on-band-line)}
.card--dark h1,.card--dark h2,.card--dark h3{color:var(--on-band)}
.card--dark .kicker{color:var(--gold-band)}
.card--dark .muted{color:var(--on-band-soft)}
.card--dark a{color:var(--gold-band)}

.card-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.card-head h2{margin:0}
.card-head .hint{font-size:.82rem;color:var(--muted)}
.card-head .push{margin-left:auto}

.sep{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}

@media (max-width:560px){ .card{padding:var(--s4)} }

/* ---------------------------------------------------------------------------
   5. MEZŐK
   ------------------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field > label{font-size:.78rem;font-weight:400;color:var(--espresso-soft)}
[data-skin="tool"] .field > label{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

.input,.field input:not([type="checkbox"]):not([type="radio"]),
.field select,.field textarea{
  width:100%;min-width:0;
  /* 16px: ennél kisebbnél az iOS Safari ráközelít a mezőre fókuszkor */
  font-size:16px;font-weight:300;
  color:var(--espresso);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-field);
  padding:.62rem .8rem;min-height:var(--btn-h);
  transition:border-color var(--dur),box-shadow var(--dur);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{
  outline:none;border-color:var(--gold-deep);box-shadow:var(--ring);
}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 1rem center,right .7rem center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}

.field-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end}
.field-row > .field{flex:1 1 9rem}
.field-row > .field.is-wide{flex:2 1 14rem}
.field-row > .field.is-narrow{flex:0 1 7rem}
@media (max-width:640px){
  .field-row > .field,.field-row > .field.is-wide,.field-row > .field.is-narrow{flex:1 1 100%}
  .field-row > .btn{width:100%}
}

/* Jelölőnégyzet: a címke a kattintható felület, 44px magas. */
.check{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  padding:.4rem 0;min-height:44px;line-height:1.5;font-size:.9rem}
.check input{width:19px;height:19px;margin-top:.18rem;flex:0 0 auto;
  accent-color:var(--gold-deep);cursor:pointer}

/* Kód-mező (6 jegyű belépőkód) */
.code-in{letter-spacing:.42em;text-align:center;font-size:1.35rem;
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------------
   6. SOR (lista-elem) - a rendszer legtöbbet használt komponense
   Foglalás, mérés, bérlet-mozgás, vendég, zárolás: mind ez.
   ------------------------------------------------------------------------ */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;
  padding:var(--row-y,.85rem) 0;
  border-top:1px solid var(--line);
}
.row:first-child{border-top:0}
.row-lead{flex:0 0 auto;font-weight:500;font-size:.9rem;font-variant-numeric:tabular-nums;
  min-width:6.5rem}
.row-body{flex:1 1 11rem;min-width:0}
/* Blokk, nem inline: a cim es az alatta futo masodlagos sor kulon sorban all.
   (Span-kent egymasba folytak: "Kovacsne Anna - HIEMT+36 30 123 4567".) */
.row-title{display:block;font-weight:500}
.row-sub{display:block;font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.row-act{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.row.is-dim{opacity:.55}
.row.is-clickable{cursor:pointer}
.row.is-clickable:hover{background:var(--surface-2)}

/* Kártyás sor-lista (keretes doboz, saját görgetéssel) */
.rows--boxed{border:1px solid var(--line);border-radius:var(--r-tile);
  background:var(--surface);overflow:hidden}
.rows--boxed .row{padding-left:var(--s4);padding-right:var(--s4)}
.rows--scroll{max-height:19rem;overflow-y:auto}

@media (max-width:560px){
  .row-lead{flex:1 1 100%;min-width:0}
  .row-act{margin-left:0;width:100%}
}

/* ---------------------------------------------------------------------------
   7. CÍMKE / STÁTUSZ - az egyetlen hely, ahol a szín jelent valamit
   ------------------------------------------------------------------------ */
.tag{
  display:inline-flex;align-items:center;gap:.3rem;flex:0 0 auto;
  font-size:.66rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:.24rem .6rem;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--surface-3);color:var(--espresso-soft);border:1px solid var(--line);
}
.tag--ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.tag--warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.tag--bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.tag--accent{background:rgba(var(--acc-rgb),.12);color:var(--gold-deep);
  border-color:rgba(var(--acc-rgb),.34)}
.tag--solid{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
html[data-theme="dark"] .tag--solid{color:#241d14}

/* Halk jelölő (pl. "✓ 48h emlékeztető elment") - nem címke, csak jelzés. */
.mark{flex:0 0 auto;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}

/* ---------------------------------------------------------------------------
   8. ÜZENETEK - .hidden vezérli, nem inline display
   Eddig a msg() inline style.display-t írt, ami keverte a CSS-t és a JS-t.
   ------------------------------------------------------------------------ */
.note{
  display:flex;gap:.6rem;align-items:flex-start;
  padding:.7rem .85rem;border-radius:var(--r-field);
  font-size:.88rem;line-height:1.5;margin:var(--s3) 0 0;
  border:1px solid var(--line);background:var(--surface-2);color:var(--espresso);
}
.note--ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.note--warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.note--bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.note:empty{display:none}
.note a{color:inherit;text-decoration:underline}

/* ---------------------------------------------------------------------------
   9. ÜRES ÁLLAPOT + BETÖLTÉS
   Eddig egyik sem létezett: a kártyák üresen vagy hirtelen jelentek meg.
   ------------------------------------------------------------------------ */
.empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  padding:var(--s5) 0;color:var(--muted);font-size:.9rem;
}
.empty--center{align-items:center;text-align:center}

@keyframes cf-shimmer{100%{background-position:-200% 0}}
/* Sajat tokenek: a --surface-2/-3 par sotetben tul kozel esik egymashoz, es a
   csik beleolvadt a hatterbe (nem latszott, hogy toltodik). */
.skel{
  display:block;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--skel-a) 25%,var(--skel-b) 37%,var(--skel-a) 63%);
  background-size:200% 100%;
  animation:cf-shimmer 1.3s linear infinite;
}
.skel + .skel{margin-top:.55rem}
.skel--row{height:2.6rem}
.skel--line{height:.85rem;max-width:22rem}
.skel--tile{height:5.5rem;border-radius:var(--r-tile)}

/* ---------------------------------------------------------------------------
   10. CSEMPE (statisztika)
   ------------------------------------------------------------------------ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--s3)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-tile);
  padding:var(--s4);display:flex;flex-direction:column;gap:.1rem;box-shadow:var(--shadow-sm)}
/* NINCS tabular-nums: a tabuláris számjegy csak OSZLOPBAN hasznos (ott az
   igazítás a lényeg). Egyetlen kiemelt számnál viszont a Cormorant keskeny
   "1"-e köré akkora üres hely kerül, hogy a "12" úgy fest: "I 2". */
.tile-n{font-family:var(--serif);font-size:2rem;font-weight:600;line-height:1.05;
  color:var(--gold-deep)}
.tile-n .u{font-family:var(--sans);font-size:.95rem;font-weight:300;color:var(--espresso-soft)}
.tile-l{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:.3rem 0 0}
.tile--dark{background:var(--band);color:var(--on-band);border-color:var(--on-band-line)}
.tile--dark .tile-n{color:var(--gold-band)}
.tile--dark .tile-n .u{color:var(--on-band-soft)}
.tile--dark .tile-l{color:var(--on-band-soft)}
/* A tool-bőrben a csempe is csendes: a szám nem arany, hanem espresso - és
   SANS. A Cormorant "1"-e talp nélküli, tabuláris szélességen pedig a "12"
   úgy fest, mint "I 2". Egy adat-eszközön a szám olvashatósága előbbre való,
   mint a szerif elegancia; a vendég-oldalon a szerif marad. */
[data-skin="tool"] .tile-n{color:var(--espresso);font-size:1.7rem;
  font-family:var(--sans);font-weight:500;letter-spacing:-.01em}
[data-skin="tool"] .tile-n .u{font-size:.9rem}
[data-skin="tool"] .tile{padding:var(--s3) var(--s4)}

/* ---------------------------------------------------------------------------
   11. DELTA-CHIP - itt VAN jelentése az iránynak
   A régi fiók-kódban a .mn-badge osztályra NULLA szabály volt, ezért a +2 cm és
   a -2 cm ugyanúgy nézett ki. Egy testformáló szalonnál ez nem kozmetika.
   ------------------------------------------------------------------------ */
.delta{
  display:inline-flex;align-items:baseline;gap:.35rem;
  padding:.3rem .7rem;border-radius:var(--r-pill);font-size:.82rem;
  border:1px solid var(--line);background:var(--surface-2);color:var(--espresso-soft);
}
.delta b{font-weight:600;font-variant-numeric:tabular-nums}
/* csökkenés = a cél irányába */
.delta--down{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.delta--down b{color:var(--ok)}
/* növekedés = szemben a céllal. Nem "hiba", ezért figyelmeztetés, nem piros. */
.delta--up{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.delta--up b{color:var(--warn)}

/* ---------------------------------------------------------------------------
   12. FÜL / SZEGMENS-VÁLTÓ
   ------------------------------------------------------------------------ */
.tabs{display:flex;gap:.2rem;padding:.25rem;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line)}
.tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:40px;padding:.4rem .6rem;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--espresso-soft);cursor:pointer;
  font-size:.86rem;font-weight:500;transition:background var(--dur),color var(--dur)}
.tab:hover{color:var(--espresso)}
.tab[aria-selected="true"]{background:var(--gold-deep);color:#fff}
html[data-theme="dark"] .tab[aria-selected="true"]{color:#241d14}
[data-skin="tool"] .tabs{border-radius:var(--r-field)}
[data-skin="tool"] .tab{border-radius:calc(var(--r-field) - 3px)}
/* A tool-bőrben az aktív fül sem arany: emelt felület, csendesen.
   A sötét változatot KI KELL írni: a fenti html[data-theme="dark"] .tab[...]
   szabály (0,3,1) egyébként erősebb, mint a sima [data-skin] változat (0,2,1),
   és a #241d14 szövegszínt vinné a sötét felületre - vagyis az aktív fül
   felirata eltűnne. Azonos specificitásnál a későbbi nyer, ezért áll itt. */
[data-skin="tool"] .tab[aria-selected="true"],
html[data-theme="dark"] [data-skin="tool"] .tab[aria-selected="true"]{
  /* Keretes emelt felulet: a puszta hatter-elteres (surface vs surface-2) sotet
     modban 2 arnyalatnyi volt, es az arnyek sem latszik fekete folott - vagyis
     nem lehetett megmondani, melyik fulon all az ember. */
  background:var(--surface);color:var(--espresso);font-weight:600;
  box-shadow:0 0 0 1px var(--line-strong),var(--shadow-sm)}

.tab-ic{font-size:1.05rem;line-height:1}
.tab-tx{white-space:nowrap}

/* Mobilon alul tapadó sáv: hüvelykujj-távolság. */
@media (max-width:760px){
  .tabs--bottom{position:fixed;left:0;right:0;bottom:0;z-index:60;
    margin:0;border-radius:0;border:0;border-top:1px solid var(--line);
    background:var(--surface);padding:.25rem .3rem calc(.25rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -12px 34px -22px rgba(0,0,0,.5)}
  .tabs--bottom .tab{flex-direction:column;gap:.1rem;font-size:.64rem;min-height:52px;border-radius:var(--r-sm)}
  .tabs--bottom .tab-ic{font-size:1.2rem}
  body.has-bottom-tabs{padding-bottom:4.6rem}
}

/* ---------------------------------------------------------------------------
   13. DIALÓGUS - a natív confirm()/alert() helyett
   9 confirm() és 1 alert() volt a két oldalon, pont a legérzékenyebb pontokon
   (időpont lemondása, mérés törlése, fiók végleges törlése). Ez az egyetlen
   leghangosabb "olcsó" jel egy éles terméken.
   ------------------------------------------------------------------------ */
dialog.cf-dialog{
  width:min(30rem,calc(100vw - 2rem));
  padding:0;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);color:var(--espresso);
  box-shadow:var(--shadow-lg);
}
dialog.cf-dialog::backdrop{background:rgba(20,15,8,.5);backdrop-filter:blur(2px)}
.cf-dialog-in{padding:var(--s5)}
.cf-dialog h2{font-size:1.2rem;margin:0 0 .5rem}
.cf-dialog p{font-size:.92rem;color:var(--espresso-soft);margin:0 0 var(--s2)}
.cf-dialog-act{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
.cf-dialog-act .btn{flex:1 1 8rem}
@media (prefers-reduced-motion:no-preference){
  dialog.cf-dialog[open]{animation:cf-pop .16s ease-out}
  @keyframes cf-pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
}

/* ---------------------------------------------------------------------------
   14. TOAST - visszajelzés, ami nem a kártya alján ül képernyőn kívül
   ------------------------------------------------------------------------ */
.cf-toasts{position:fixed;z-index:80;left:50%;transform:translateX(-50%);
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:.5rem;align-items:center;
  width:min(28rem,calc(100vw - 2rem));pointer-events:none}
.cf-toast{
  pointer-events:auto;width:100%;
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.75rem .9rem;border-radius:var(--r-field);
  background:var(--band);color:var(--on-band);
  border:1px solid var(--on-band-line);box-shadow:var(--shadow-lg);
  font-size:.88rem;line-height:1.45;
}
.cf-toast--bad{background:var(--bad);color:#fff;border-color:transparent}
.cf-toast b{font-weight:500}
.cf-toast-x{margin-left:auto;flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:inherit;opacity:.7;font-size:1.1rem;line-height:1;padding:0 .2rem}
.cf-toast-x:hover{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .cf-toast{animation:cf-toast-in .2s ease-out}
  @keyframes cf-toast-in{from{opacity:0;transform:translateY(10px)}}
}
/* Ha alul tapadó fülsor van, a toast fölé csúszik. */
body.has-bottom-tabs .cf-toasts{bottom:calc(4.9rem + env(safe-area-inset-bottom,0px))}

/* ---------------------------------------------------------------------------
   15. PANEL (slide-over) - a vendég-részletező helye az adminban
   Eddig a vendég adatlapja a lista ALÁ nyílt, 300 sor hosszan, egy görgésben.
   ------------------------------------------------------------------------ */
.panel-scrim{position:fixed;inset:0;z-index:70;background:rgba(20,15,8,.45);
  backdrop-filter:blur(2px)}
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:71;
  width:min(38rem,100vw);
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
}
.panel-head{
  position:sticky;top:0;z-index:2;flex:0 0 auto;
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);
  background:var(--surface);
}
.panel-head h2{margin:0;font-size:1.35rem}
.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--s5);
  padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom,0px))}
.panel-x{margin-left:auto;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .panel{animation:cf-slide .2s ease-out}
  @keyframes cf-slide{from{transform:translateX(16px);opacity:0}}
}
@media (max-width:640px){
  .panel{width:100vw;border-left:0}
  .panel-head,.panel-body{padding-left:var(--s4);padding-right:var(--s4)}
}

/* Szakasz a panelen belül */
.panel-sec{margin:var(--s6) 0 0;padding:var(--s5) 0 0;border-top:1px solid var(--line)}
.panel-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.panel-sec > h3{margin:0 0 var(--s3)}

/* ---------------------------------------------------------------------------
   16. FEJLÉC + LÁBLÉC (közös keret)
   ------------------------------------------------------------------------ */
.app-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.app-head-in{max-width:var(--wrap,1180px);margin:0 auto;display:flex;align-items:center;
  gap:var(--s3);padding:.6rem clamp(1rem,3vw,1.6rem);min-height:60px}
.brand{display:inline-flex;flex-direction:column;line-height:1.08;text-decoration:none;
  color:var(--espresso);flex:0 0 auto;min-width:0}
.brand-name{font-family:var(--serif);font-size:1.2rem;font-weight:600;white-space:nowrap}
.brand-name i{font-style:italic;font-weight:500}
.brand-sub{font-size:.5rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin="tool"] .brand-sub{color:var(--muted)}
.head-right{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s2)}
.head-link{font-size:.85rem;color:var(--espresso-soft);text-decoration:none;white-space:nowrap}
.head-link:hover{color:var(--gold-deep)}

.avatar{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:.9rem;color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
html[data-theme="dark"] .avatar{color:#241d14}

.theme-btn{width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--espresso-soft);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--dur),border-color var(--dur)}
.theme-btn:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.ic-sun{display:none}
html[data-theme="dark"] .ic-moon{display:none}
html[data-theme="dark"] .ic-sun{display:block}
@media (pointer:coarse){.theme-btn{width:44px;height:44px}}

.wrap{max-width:var(--wrap,1180px);margin:0 auto;padding:0 clamp(1rem,3vw,1.6rem)}

.app-foot{border-top:1px solid var(--line);margin-top:var(--s10);
  padding:var(--s6) 0;font-size:.78rem;color:var(--muted)}
.app-foot a{color:var(--muted);text-decoration:none}
.app-foot a:hover{color:var(--gold-deep)}

/* ---------------------------------------------------------------------------
   17. MOZGÁS-CSÖKKENTÉS - egy helyen, a rendszer egészére
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}