/* MesterKontroll nyilvános portál - "Mesterjegy" prémium arculat: MELEG
   közel-fekete alap, réz (copper) fő-fény + lumineszcens-zöld ("lume")
   élő/ellenőrzött-jelző szín, Clash Display cím-tipográfia + General Sans
   törzsszöveg. Ugyanezek a tokenek élnek a dashboard-base.css-ben is - a két
   fájl EGYMÁSTÓL FÜGGETLENÜL, önállóan tartalmazza őket (a Portál és a
   Dashboard sosem tölti be egymás CSS-ét).

   Ez a fájl a `site-*.css` sorozat ELSŐ tagja (alap: fontok/reset/
   színtokenek/alapkomponensek) - a `site-auth.css`, `site-portal-shell.css`,
   `site-portal-features.css`, `site-misc.css` folytatja, MINDIG ugyanebben
   a sorrendben betöltve (lásd portal.html/index.html/faq.html) - a CSS-
   kaszkád sorrendje a betöltés sorrendjétől függ, az öt fájl EGYÜTT adja ki
   az eredeti, egybefüggő stíluslapot. */
@font-face { font-family: "Clash Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/ClashDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/ClashDisplay-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/ClashDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/GeneralSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/GeneralSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/GeneralSans-Semibold.woff2") format("woff2"); }

:root {
  /* a korábbi szabály MEGMARADT abban, hogy a Portál/Dashboard/email-sablonok
     színvilága egyezzen a WordPress landing tokenjeivel - csak az érték
     változott navy+arany helyett meleg közel-fekete+réz ("Mesterjegy"
     koncepció) családra. A --signal* tokenek NÉV szerint megmaradtak (sok
     helyen hivatkozik rájuk szét CSS-szabály), de az ÉRTÉKÜK továbbra is
     ugyanaz, mint a --primary* családé. */
  --bg-deep: #07080B;
  --bg: #07080B;
  --bg-elevated: #121319;
  --panel: rgba(18, 19, 25, 0.92);
  --panel-2: #121319;
  --glass: rgba(18, 19, 25, 0.6);
  --glass-border: rgba(217, 128, 61, 0.32);
  --border: rgba(217, 128, 61, 0.15);
  --text: #FFFFFF;
  --text-secondary: #A79C87;
  --text-muted: #8B7F6C;
  /* Fő fények (réz - a "Mesterjegy" design system copper-családjával
     megegyező hexák, lásd a jóváhagyott design-koncepció dokumentumot). */
  --primary: #D9803D;
  --primary-mid: #E3945A;
  --primary-bright: #F5A868;
  --primary-hover: #F5A868;
  --primary-deep: #8A4E1F;
  /* A korábbi "signal" (kiemelő/link) szín továbbra sem külön árnyalat,
     hanem ugyanaz a réz, mint a --primary* család - lásd fenti magyarázat. */
  --signal: #D9803D;
  --signal-bright: #F5A868;
  --signal-dim: #8A4E1F;
  --danger: #EF4444;
  --danger-hover: #F87171;
  --success: #4ADE80;
  --success-dim: #1F8F63;
  --warning: #EAB308;
  /* Lumineszcens-zöld - KIZÁRÓLAG élő/ellenőrzött állapot-jelzésre (pl.
     "élő" chat-jelvény, ellenőrzött szakember). Nem általános másodlagos
     szín - ha egy új komponens csak "másik akcentust" keres, azt a réz
     családból kapja, nem ebből. */
  --lume: #C9F26B;
  --lume-glow: #DFF98F;
  --font-display: "Clash Display", "General Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "General Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  /* az előző menet 256px-es "köztes" értéke NEM
     egyezett a jóváhagyott bento-mockuppal (`.shell{grid-template-columns:
     224px 1fr}`), és a felhasználó ezt ismételten, joggal kifogásolta. A
     helyes sorrend nem a méret felhígítása, hanem a TARTALOM igazítása a
     célmérethez - lásd lentebb a .sidebar-account-nál elvégzett tördelési
     finomítást. */
  --sidebar-width: 224px;
  /* A mobil (max-width:720px) fix alsó navigációs sáv TÉNYLEGES magassága.
     Egy helyen definiálva, mert több szabály is hivatkozik rá (a tartalom
     alsó térköze ÉS a megnyitott chat-panel alja) - ha ezek elcsúsznak
     egymástól, vagy tartalom kerül a menü alá, vagy fölösleges üres sáv
     marad. Mérve: 66px + a készülék alsó biztonságos zónája. */
  --mobile-nav-height: 66px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  /* Réteg-mélységű árnyék-skála (finom belső fény + kontakt-árnyék + puha
     "float" árnyék) - üveg/lakk hatás minden kártyán/gombon. Az outer-
     árnyék mértéke a brief Small/Medium/Large skálájára igazítva. */
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 32px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 80px rgba(0, 0, 0, 0.45);
  /* Arany "glow" - aktív menüpont/kiemelt kártya szegélyéhez. */
  --glow-gold: 0 0 18px 1px rgba(217, 128, 61, 0.45);
  --glow-cyan: 0 0 18px 1px rgba(217, 128, 61, 0.35);

  /* ÁTFEDŐ RÉTEGEK ÉS SÜLLYESZTETT FELÜLET.
     Ezek az értékek eddig ~15 helyen, KÉZZEL beírva szerepeltek
     (`rgba(255,255,255,0.06)`, `rgba(9,17,27,0.4)` stb.). Fehér áttetszőség
     sötét alapon működik, VILÁGOS alapon viszont láthatatlan - ezért a
     világos mód bevezetéséhez tokenné kellett tenni őket. Ha új hover/
     elválasztó felületet veszel fel, ezeket használd, ne új rgba-t. */
  --overlay-1: rgba(255, 255, 255, 0.04);
  --overlay-2: rgba(255, 255, 255, 0.06);
  --overlay-line: rgba(255, 255, 255, 0.07);
  --overlay-line-strong: rgba(255, 255, 255, 0.08);

  /* KÁRTYA-HÁTTÉR ÉS -ÁRNYÉK.
     Ezek KORÁBBAN a `.card` szabályba voltak kódba égetve, ezért világos
     módban is a sötét navy ment ki - 0,65-ös átlátszósággal a krém alapon
     SZÜRKE foltként. A témaváltás ettől "félig" nézett ki.
     Az értékek itt betű szerint a régiek: sötét módban semmi nem változik. */
  --card-bg: rgba(18, 19, 25, 0.65);
  /* Az oldalsáv és a mobil alsó sáv háttere. Ugyanaz a hiba volt bennük,
     mint a kártyákban: kódba égetett sötét navy, ami világos módban szürke
     sávvá vált. A sáv BELSŐ elemei (feliratok, ikonok, elválasztók) mind
     változókat használnak, tehát maguktól átállnak - csak a hátteret
     kellett tokenné emelni. */
  --sidebar-bg: rgba(18, 19, 25, 0.85);
  --sidebar-nav-bg: rgba(18, 19, 25, 0.82);
  /* A bejelentkező/regisztrációs keret. A BAL oldala (.auth-brandside) már
     eddig is változókból épült, ezért világos módban átállt - a keret maga
     viszont kódba égetett sötét színátmenet volt, és az látszott át a JOBB
     (űrlap) oldalon. Ettől a képernyő "félig" nézett ki. */
  --auth-frame-bg: linear-gradient(180deg, rgba(24, 18, 8, 0.55), rgba(18, 19, 25, 0.92));
  --auth-frame-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(217, 128, 61, 0.06), 0 0 80px -20px rgba(217, 128, 61, 0.18);
  --card-shadow: 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 60px rgba(0, 0, 0, 0.4);
  --surface-sunken: rgba(12, 13, 17, 0.4);

  /* A body lágy fényfoltjai - lásd `body` szabály. */
  --body-glow-top: rgba(217, 128, 61, 0.1);
  --body-glow-bottom: rgba(217, 128, 61, 0.06);

  /* A "MesterKontroll" szoveges markajel szine (landing + oldalsav).
     Sotet modban a vilagos arany a helyes; vilagos modban ugyanez 1,7:1
     kontraszttal olvashatatlan lenne, ezert ott a sotetitett aranyra valt
     (lasd :root[data-theme="light"]). */
  --wordmark: var(--primary-bright);
}

/* ============================================================================
   VILÁGOS MÓD - "Pergamen"
   ============================================================================

   A felhasználó kérése: a sötét arculat mellé legyen egy világos is, a Fiókom
   menüből kapcsolhatóan. Három javaslat közül a "Pergamen" változatot
   választotta: meleg elefántcsont alap, és a márkaszín MARAD a vezető szín -
   így a két mód ugyanannak a márkának a két arca, nem két külön termék.
   a márkaszín aranyból rézre ("Mesterjegy" design
   system) váltott, a "Pergamen" alap-logika (meleg elefántcsont, sötétített
   kitöltés a szöveg-szerepű változatoknál) változatlan.

   AMIT KI KELL MONDANI A SZÍNEKRŐL:

   A réz `#D9803D` fehér háttéren SZÖVEGSZÍNKÉNT nem használható - a
   kontrasztaránya nem éri el a WCAG AA 4,5:1-et. Ezért a világos módban a
   `--signal*` (link/kiemelt szöveg) család egy SÖTÉTEBB rézre vált
   (`#8A4E10`, ~5:1), miközben a `--primary*` (kitöltés: gombok, jelvények,
   avatar) marad a márka-réz. A kettő eddig szándékosan azonos volt (lásd a
   fenti magyarázatot) - itt válik szét, és ez a szétválás a világos mód
   MŰKÖDÉSÉNEK a feltétele, nem ízlés kérdése.

   A `#241505` (sötétbarna szöveg réz kitöltésen) SZÁNDÉKOSAN nincs
   felüldefiniálva: a réz kitöltés mindkét módban ugyanaz, tehát a rajta
   lévő szöveg is ugyanaz marad.

   A `data-theme` attribútumot a `site.js` teszi ki a `<html>` elemre, MÉG A
   CSS betöltése előtt (inline script a HTML `<head>`-jében) - különben a lap
   először sötéten villanna fel. */
:root[data-theme="light"] {
  --bg-deep: #FAF7F1;
  --bg: #FAF7F1;
  --bg-elevated: #FFFFFF;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-2: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(168, 97, 31, 0.30);
  --border: rgba(168, 97, 31, 0.20);
  --text: #1A1613;
  --text-secondary: #5C5349;
  --text-muted: #857A6D;

  /* Kitöltések: a márka-réz marad. */
  --primary: #D9803D;
  --primary-mid: #C06B2A;
  --primary-bright: #E3945A;
  --primary-hover: #C06B2A;
  --primary-deep: #8A4E10;

  /* Szöveg/link: sötétített réz - lásd a fenti kontraszt-magyarázatot. */
  --signal: #8A4E10;
  --signal-bright: #6B3C0C;
  --signal-dim: #B37A3C;

  --danger: #C0392B;
  --danger-hover: #9E2E23;
  --success: #16794F;
  --success-dim: #0F5A3A;
  --warning: #A9760B;

  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 3px rgba(60, 45, 20, 0.07);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 18px rgba(60, 45, 20, 0.09);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 46px rgba(60, 45, 20, 0.14);
  --glow-gold: 0 0 14px 1px rgba(217, 128, 61, 0.40);
  --glow-cyan: 0 0 14px 1px rgba(217, 128, 61, 0.30);

  --overlay-1: rgba(26, 22, 19, 0.035);
  --overlay-2: rgba(26, 22, 19, 0.06);
  --overlay-line: rgba(26, 22, 19, 0.09);
  --overlay-line-strong: rgba(26, 22, 19, 0.13);

  /* Világos módban a kártya majdnem fehér, MELEG (nem fekete) árnyékkal - a
     fekete árnyék krém alapon piszkosnak látszik. */
  --card-bg: rgba(255, 255, 255, 0.88);
  /* Az oldalsáv VILÁGOSABB, mint a krém lapháttér (#FAF7F1) - így a kettő
     elválik egymástól anélkül, hogy szürke lenne. */
  --sidebar-bg: rgba(255, 255, 255, 0.92);
  --sidebar-nav-bg: rgba(255, 255, 255, 0.96);
  /* Világosban az űrlap-oldal is fehér, a réz keret-fény visszafogva. */
  --auth-frame-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(250, 247, 241, 0.99));
  --auth-frame-shadow: 0 30px 70px -30px rgba(60, 45, 20, 0.28), 0 0 0 1px rgba(217, 128, 61, 0.14), 0 0 60px -25px rgba(217, 128, 61, 0.20);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 24px rgba(60, 45, 20, 0.10);
  --surface-sunken: #F1EADC;

  --body-glow-top: rgba(217, 128, 61, 0.16);
  --body-glow-bottom: rgba(217, 128, 61, 0.10);
  --wordmark: #7A4715;

  /* Lumineszcens-zöld élő/ellenőrzött jelzés világos alapon - sötétebb
     erdőzöld, mert a fényes chartreuse (lásd sötét mód) krém háttéren
     nem adna elég kontrasztot. */
  --lume: #3F7D2A;
  --lume-glow: #63A342;

  /* Az érintés-villanás (lásd `html` szabály) világos alapon erősebb kell
     legyen, hogy egyáltalán látszódjon. */
  -webkit-tap-highlight-color: rgba(154, 112, 32, 0.18);
}

/* A böngésző beépített vezérlőinek (görgetősáv, űrlapelemek, dátumválasztó)
   is tudnia kell, melyik módban vagyunk - enélkül világos módban SÖTÉT
   görgetősáv és sötét natív dátumválasztó marad. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

/* a felhasználó ismételten jelezte, hogy mobilon
   (MAUI/Android WebView) "még mindig van kék szín", miközben a korábbi
   körök (accent-color a checkboxokon, színséma-csere) SEMMILYEN kék
   CSS-értéket nem hagytak a stíluslapokban - mert nem is CSS-színről volt
   szó: az Android WebView/Chrome ALAPÉRTELMEZETT, kékes "tap highlight"
   effektust villant fel minden koppintható elemre (gomb, link) érintéskor,
   ha ezt senki nem írja felül - ez sosem látszik desktop Chrome-ban
   (asztali böngésző nem "tap"-el), csak valódi érintőképernyőn, ezért
   maradt eddig észrevétlen. Teljesen átlátszóvá tétel helyett egy finom,
   márka-arany villanást adunk (ne tűnjön "élettelennek" az érintés). */
html { -webkit-tap-highlight-color: rgba(217, 128, 61, 0.25); }

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--bg-deep);
  /* a brief kifejezetten
     kéri: "NE használjon erős rácsot" - a korábbi finom rács-vonal réteg
     (36px-es pontrács) TELJESEN eltávolítva (ugyanaz a döntés, mint a
     landing-page-nél korábban), csak a lágy fényfoltok maradtak: arany
     felül-középen, cián jobb-alul, a brief saját receptje szerint. */
  background-image:
    radial-gradient(circle at top center, var(--body-glow-top), transparent 45%),
    radial-gradient(circle at bottom right, var(--body-glow-bottom), transparent 50%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* A MAUI Android WebView `display:none` (a fenti `.hidden`) elemen NEM
   nyitja meg a natív fájlválasztót egy programozott `.click()`-re (a
   gesztus-ellenőrzés a réteg-fában "látható" elemet vár). A `type="file"`
   mezőknél, amiket egy KÜLÖN gombra kattintva, JS-ből indítunk el
   (`element.click()`), EZT a class-t kell használni a `.hidden` helyett:
   vizuálisan ugyanúgy eltűnik, de a réteg-fában "megjelenítettnek" számít. */
.file-input-hidden { position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

a { color: var(--signal); }

h1, h2, h3, .landing-logo, .sidebar-logo, .role-card .role-title, .modal-box h2, .auth-box h1, .hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- Alapkomponensek (form/gomb/tábla) - lásd dashboard.css ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 7px; }

/* a brief pontos input-
   specifikációja: 52px magasság, 14px sarok, halvány üveg-háttér (nem sötét
   tömör), finom fehér szegély - a korábbi sötétebb/kisebb mezők helyett. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="file"], select, textarea {
  width: 100%;
  height: 52px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  /* a felhasználó jelezte: "üzenet írásnál vagy OTP-kód
     kérésénél, miután elmegyek az emailre és vissza, nincs ezeknek az inputoknak
     valami színes kerete, hová kell visszakattintanom. Ha már a sötét és arany
     kerettel játszunk, ne csak belekattintáskor legyen arany keret, hanem
     állandóan."
     Igaza van: a korábbi, alig látható fehér keret (0.08 alfa) sötét háttéren
     gyakorlatilag eltűnt - a mező csak fókuszban vált láthatóvá, tehát épp
     akkor NEM lehetett megtalálni, amikor keresni kellett. Most alapból is
     arany, csak halványabban; fókuszban telít. */
  border: 1px solid rgba(217, 128, 61, 0.35);
  background: var(--overlay-1);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
/* A LEGÖRDÜLŐ LISTA ELEMEINEK SAJÁT, ÁTLÁTSZATLAN SZÍN KELL.

   A `select` háttere `--overlay-1`, ami sötét módban `rgba(255,255,255,0.04)`
   - vagyis majdnem teljesen átlátszó. Ez a MEZŐN jól néz ki (a panel sötétje
   üt át rajta), de a natív legördülő lista a böngésző saját, FEHÉR alapjára
   rajzolódik, és az `option` a `select` `color`-ját örökli: `#FFFFFF`.
   Fehér szöveg fehér alapon - a lista olvashatatlan volt, csak az egérrel
   kijelölt sor látszott.

   A `color-scheme: dark` ezen nem segít: az csak akkor színezi a listát, ha a
   szerző NEM ad meg saját hátteret a `select`-en - itt viszont adunk.

   Ezért itt ÁTLÁTSZATLAN változókat használunk (`--bg`, `--text`), amik
   mindkét témában tömör színek, és a `data-theme` váltásra maguktól
   átfordulnak. Ha valaki a `select` hátterét átírja, EZT is nézze meg. */
select option {
  background-color: var(--bg);
  color: var(--text);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  background: var(--overlay-2);
  /* A fókusz így is EGYÉRTELMŰEN elkülönül az alap állapottól - enélkül a
     "mindig arany" keret elvenné a fókusz-visszajelzést, ami akadálymentességi
     szempontból is fontos (billentyűzetes navigáció). */
  box-shadow: 0 0 0 3px rgba(217, 128, 61, 0.18);
}

/* a checkbox/radio "accent-color" korábban sosem
   volt beállítva, ezért a böngésző natív (kék) színét mutatta - ez volt a
   felhasználó által jelzett "még mindig van kék szín" fő forrása (pl. a
   Fiókom oldal "Hírlevél"-checkboxa). Az arany márkaszínre igazítva. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* pipa helyett kapcsoló-("switch") megjelenés a bento-
   mockup mintája szerint (`.switch`/`.switch.on`), de a natív checkbox-ot
   MAGÁT stílusozva (nem külön wrapper-elemmel) - így a HTML/JS oldalon
   semmi nem változik, a `:checked` állapot közvetlenül vezérli a
   megjelenést. CSAK azokon a checkboxokon, amik tényleg egy alkalmazás-
   beállítást ki/be kapcsolnak (lásd a HTML-ben a `switch-checkbox`
   osztályt) - a jóváhagyás/kijelölés-jellegű checkboxok (ÁSZF-elfogadás,
   táblázat-sorkijelölés) szándékosan MARADNAK sima pipa, mert azok nem
   "beállítás", hanem választás/hozzájárulás - egy kapcsoló vizuálisan
   tévesen sugallná, hogy egy állapotot kapcsolgatunk. */
input.switch-checkbox[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 100px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  position: relative;
  flex: none;
  margin: 0;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
input.switch-checkbox[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-faint, var(--text-muted));
  transition: left .2s, background .2s;
}
input.switch-checkbox[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
  border-color: transparent;
}
input.switch-checkbox[type="checkbox"]:checked::after {
  left: 20px;
  background: #1A1204;
}
input.switch-checkbox[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary-bright);
  outline-offset: 2px;
}
textarea { height: auto; }

textarea { resize: vertical; }

/* Egyedi, márka-stílusú város-autocomplete - a natív <datalist> dropdown
   böngészőnként/témánként eltérően (és sötét témában gyakran csúnyán)
   jelenik meg, nem stílusozható rendesen - lásd 10.1 pont. */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); max-height: 240px; overflow-y: auto;
}
.autocomplete-item { padding: 9px 13px; font-size: 14px; color: var(--text); cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--glass); color: var(--signal); }

/* nagyobb padding
   (14px/22px) és 14px sarok, a brief pontos gradiens-iránya (135deg) és
   árnyék-recept szerint. */
.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-body);
  transition: filter .15s, transform .05s;
  /* A `<button class="btn">`-nél sosem tűnt fel, de egy `<a class="btn">` link-gomb böngésző-alapértelmezésből aláhúzott lenne enélkül - élő screenshoton talált hiba, minden `.btn`-osztályú linket érint. */
  text-decoration: none;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* a gomb belső felső élén egy
   halvány fehér "fényvágás" (inset highlight) ad fémes, domború hatást a
   sima színátmenet helyett - ez volt a v0.3 design-koncepcióban is. */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
  color: var(--bg-deep);
  box-shadow: 0 10px 30px rgba(217, 128, 61, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  letter-spacing: .01em;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 36px rgba(217, 128, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn-secondary { background: var(--glass); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); transition: border-color .15s, background .15s, transform .15s; }
.btn-secondary:hover:not(:disabled) { border-color: var(--primary); background: rgba(217, 128, 61, 0.06); transform: translateY(-1px); }
.btn-danger { background: linear-gradient(180deg, var(--danger-hover), var(--danger)); color: white; box-shadow: 0 12px 26px -12px rgba(255, 95, 126, 0.55); }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 11px; font-size: 12px; }

.link-button {
  background: none; border: none; color: var(--signal); cursor: pointer;
  font-size: 13px; padding: 0; text-align: left;
}

.form-error { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 16px; }
.form-hint { color: var(--muted, #8a94a3); font-size: 13px; margin: 4px 0 12px; }
.form-message { color: var(--signal); font-size: 13px; margin-top: 8px; }

table { width: 100%; border-collapse: collapse; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 20px; backdrop-filter: blur(6px); }
/* Böngésző-alapértelmezés `vertical-align: middle` - egy hosszú, sok soros cella mellett ez a rövid, egysoros szomszéd-cellák tartalmát a sor KÖZEPÉRE tolná, nem a tetejére. */
th, td { text-align: left; padding: 11px 13px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-muted); font-weight: 600; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-sunken); }
tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 10.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; background: var(--panel-2); border: 1px solid var(--border); }
/* a v0.3 design-koncepció
   állapot-jelvényein egy izzó pötty vezeti be a szöveget - ez korábban
   csak a mockupban létezett, ide `::before`-ral (nincs markup-hatása,
   sem a Portál/Dashboard HTML-jét, sem a JS-t nem kell hozzá módosítani). */
.badge-success, .badge-danger {
  display: inline-flex; align-items: center; gap: 5px;
  padding-left: 8px;
}
.badge-success::before, .badge-danger::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.badge-success { color: var(--success); border-color: var(--success-dim); background: rgba(77, 255, 178, 0.1); }
.badge-success::before { background: var(--success); box-shadow: 0 0 6px var(--success); }
.badge-danger { color: var(--danger); border-color: var(--danger); }
.badge-danger::before { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

/* A felület "nem prémium"/lapos hatását
   nagyrészt az adta, hogy a kártyáknak nem volt valódi mélységük (csak
   szegély + elmosott háttér, árnyék nélkül) - most egy finom felső fény-
   csík (mintha felülről világítanák meg) + réteges árnyék (lásd --shadow-*)
   ad tényleges térbeli súlyt, üveg/lakk hatást. */
/* a brief pontos kártya-
   specifikációja: 65%-os áttetsző kártya-háttér, 24px blur, halvány FEHÉR
   (nem arany) szegély, 20px sarok, kétrétegű "kontakt" árnyék - a korábbi
   14px sarok/10px blur helyett. */
.dispute-message {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.dispute-message-admin { background: rgba(217, 128, 61, 0.12); }
.dispute-message-other { background: var(--panel-2); }
.mk-cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--panel-2);
  color: var(--text);
  border-top: 1px solid var(--glass-border);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.mk-cookie-bar__text { flex: 1; min-width: 240px; line-height: 1.5; }
.mk-cookie-bar__link { color: var(--primary-bright); }
.mk-cookie-bar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Az "Elutasítom" gomb SÚLYA szándékosan azonos az elfogadáséval (azonos
   méret, azonos betűvastagság) - egy vizuálisan elrejtett elutasítás a
   GDPR/NAIH gyakorlat szerint nem érvényes választás. Csak a kitöltés tér el. */
.mk-cookie-bar__button {
  border-radius: 6px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.mk-cookie-bar__button--accept { background: var(--primary); color: var(--bg-deep); border: none; }
.mk-cookie-bar__button--reject { background: transparent; color: var(--text); border: 1px solid var(--border); }
.mk-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 8, 11, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}
.card {
  position: relative;
  /* a felhasználó ismételten ("10x") jelezte, hogy
     kékség van a Portálon - ez volt a VALÓDI, mindent érintő forrás: a
     `.card` (a Dashboard/Fiókom/árazás/MINDEN kártya alapja) egy nyers,
     hardkódolt `rgba(13, 24, 48, ...)` háttérszínt használt, amit a
     korábbi "signal-szín egységesítés" kör kihagyott, mert az kizárólag a
     `--signal`/CSS-változókra hivatkozó szabályokat söpörte át, ezt a
     nyers rgba-t nem. A landing egységesített panel-színére (rgba(10, 14,
     23, ...), lásd :root --panel) cserélve. */
  background: var(--card-bg);
  border: 1px solid var(--overlay-line-strong);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(24px);
  box-shadow: var(--card-shadow);
  /* Visszafogott, EGYSZERI fade-in-up az oldal betöltésekor - a mkStatIn
     kulcskockákat a dashboard statisztika-kártyák (.stat-card/.dash-stat-card)
     már használják, itt ugyanezt az idiómát terjesztjük ki az ÁLTALÁNOS
     kártya-osztályra. Blazorban ez minden lapváltáskor újra lejátszódik,
     mert az adott lap gyökér-eleme (és benne a kártyák) minden navigációkor
     újra létrejön. */
  animation: mkStatIn .45s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.card:hover {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}
.card::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 128, 61, 0.35), transparent);
}
/* kurzort követő fényfolt a kártyákon/modalokon.
   A --mx/--my egérpozíciót a site.js egyetlen, delegált mousemove-
   figyelője állítja (lásd ott) - alapértelmezésben (JS nélkül/érintőn)
   50%/0%-on áll, tehát sosem hibás, csak nem mozog. */
.card::after, .modal-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .3s ease; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 128, 61, 0.12), transparent 65%);
}
.card:hover::after, .modal-box:hover::after { opacity: 1; }

.section-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: .01em;
  margin: 28px 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--glass-border), transparent); margin-left: 4px; }
.section-title:first-child { margin-top: 0; }

/* erősebb, homályosított háttér-
   elsötétítés (a korábbi 2px blur alig látszott), a modal-doboz pedig
   réz-izzású szegélyt + felső gravírozott csíkot kap, hogy tényleg
   "kiemelt panelnek" hasson, ne csak egy nagyobb kártyának. */
.modal-overlay { position: fixed; inset: 0; background: rgba(4, 4, 6, 0.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-box {
  position: relative;
  background: var(--panel); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  width: 380px; max-width: 90vw; max-height: 85vh; overflow-y: auto; padding: 22px;
  box-shadow: 0 40px 90px -35px rgba(0,0,0,0.7), 0 0 0 1px rgba(217, 128, 61, 0.08), 0 0 60px -25px rgba(217, 128, 61, 0.35);
}
.modal-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-deep), var(--primary-bright), var(--primary-deep));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* A felhasználó kérése: a beérkező ajánlat-ablak legyen nagyobb, jobban
   látszódjon - a sima 380px-es alap túl szűk volt a táblázatos ajánlat-
   listához (ár/üzenet/állapot/gombok egy sorban). */
.modal-box.modal-large { width: 680px; }
.modal-box h2 { margin: 0 0 14px; font-size: 19px; padding-right: 32px; }
.modal-box p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.modal-close-btn {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.modal-close-btn:hover { color: var(--text); border-color: var(--primary); background: rgba(217, 128, 61, 0.1); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.qr-image { display: block; margin: 14px auto; border-radius: 3px; background: white; padding: 10px; width: 200px; height: 200px; }
.secret-code { font-family: var(--font-mono); background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; text-align: center; letter-spacing: 1px; font-size: 14px; margin: 8px 0; word-break: break-all; }