/* ════════════════════════════════════════════════════════════════════
   Deveney — Holding UI réteg  (v64, 2026-08-14)
   A holding weboldal tipográfiáját, ritmusát és mozgásait hozza át az appba.

   ELV: FRISSÍTÉS, NEM CSERE.
   - Nem definiál új komponenst, nem ír át funkciót, nem nyúl osztálynévhez.
   - Csak a meglévő tokeneket finomítja és a megjelenítést emeli.
   - Az app.css UTÁN töltendő be, hogy felülírhassa a durvább értékeket.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. FONT — egyetlen család mindenhol ──────────────────────────────
   Az app eddig Manrope-ot ÉS Outfitet is töltött, keverve. A holding
   végig Outfitet használ. Egy család, több súly: ettől lesz egységes. */
:root{
  --font-head:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid ritmus — a holding clamp() skálája.
     Így a spacing a képernyővel együtt lélegzik, nem ugrik töréspontonként. */
  --space-2xs:clamp(4px, .35vw, 6px);
  --space-xs: clamp(8px, .7vw, 12px);
  --space-sm: clamp(12px, 1.1vw, 18px);
  --space-md: clamp(18px, 1.7vw, 26px);
  --space-lg: clamp(26px, 2.6vw, 40px);
  --space-xl: clamp(38px, 4.4vw, 70px);

  /* Finomabb sarkok és árnyék — a holding visszafogottabb, mint az app volt */
  --r-sm:8px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

html, body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'kern' 1, 'liga' 1;
}

/* Minden vezérlő örökölje a családot — a böngésző alapértelmezése
   különben felülírja a form-elemeken, és ez volt az egyik keveredés. */
button, input, select, textarea, optgroup{
  font-family:var(--font-body);
  font-feature-settings:inherit;
}

/* Számoszlopok: azonos szélességű számjegyek, hogy a táblák ne ugráljanak. */
.kpi-value, .kpi-num, .stat-value, .num, .amount, .money,
td.num, td.amount, .table-num, .metric-value{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ── A HOLDING ALÁÍRÁSA: nagy szám, KÖNNYŰ vastagsággal ──────────────
   Ez a legfontosabb különbség. Az app 700-as súllyal szedte a KPI-számokat
   (testes, általános érzet); a holding 400-assal, szoros betűközzel és
   nagyobb méretben (kifinomult, műszeres érzet). A méret nő, a súly csökken. */
.kpi-value, .revenue-value, .stat-value, .metric-value{
  font-family:var(--font-head);
  font-weight:300 !important;
  letter-spacing:-.035em;
  line-height:1.02;
  color:var(--white);
}
.kpi-value{font-size:clamp(30px, 3.2vw, 42px) !important}
.revenue-value{font-size:clamp(38px, 4.4vw, 58px) !important; font-weight:250 !important}
.kpi-secondary .kpi-value{font-size:clamp(24px, 2.4vw, 32px) !important}

/* A mértékegység/utótag ("nap", "Ft") halkabb és kisebb, mint a szám —
   így a szám marad a főszereplő, ahogy a holdingnál. */
.kpi-value .unit, .kpi-value small, .revenue-value small{
  font-weight:400; font-size:.42em; letter-spacing:0;
  color:var(--mutedlt); margin-left:.18em;
}

/* Címkék: erősebb ritkítás, kisebb méret — a holding "micro" eleme.
   A kontraszt a pici ritkított címke és a nagy könnyű szám között
   adja a professzionális hatást. */
.kpi-label, .stat-label, .metric-label, .card-label, .section-label{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase;
  color:var(--muted);
}

/* A KPI alatti magyarázó sor: halkabb, kisebb */
.kpi-sub, .kpi-meta, .kpi-note{
  font-size:12px; color:var(--muted); letter-spacing:0; line-height:1.5;
}


/* ── 2. TÍPUS-PRIMITÍVEK — a holding skálája ──────────────────────── */

/* Apró, ritkított nagybetűs címke (a holding "micro"/"kicker" eleme) */
.ui-micro{
  font-size:clamp(8.5px,.72vw,10px); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.ui-kicker{
  font-size:clamp(9px,.78vw,10.5px); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent2);
  margin-bottom:var(--space-sm);
}

/* Szekciócím — világos hierarchia, negatív betűköz nagy méretben */
.ui-display{
  font-weight:400; font-size:clamp(26px,3.4vw,44px); line-height:1.14;
  letter-spacing:-.018em; color:var(--white);
}
.ui-display .accent{color:var(--accent2)}

/* A meglévő címsorok finomítása — nem cserélünk, csak ráigazítunk */
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--white);
  letter-spacing:-.015em;
  line-height:1.18;
  text-wrap:balance;          /* nem hagy árva szót a sor végén */
}
h1{font-weight:400; font-size:clamp(22px,2.4vw,32px)}
h2{font-weight:500; font-size:clamp(18px,1.9vw,25px)}
h3{font-weight:600; font-size:clamp(15px,1.45vw,18px); letter-spacing:-.01em}
h4{font-weight:600; font-size:clamp(13px,1.2vw,15px); letter-spacing:0}

/* Folyószöveg: kényelmes sorhossz és sormagasság */
p, .body-text, .card-desc, .desc, .hint, .help-text{
  line-height:1.7;
  text-wrap:pretty;
}
.page-title + p, .section-desc, .card-desc{
  max-width:68ch;             /* olvasható sorhossz — nem fut ki a képernyőn */
}


/* ── 3. MOZGÁS — a holding reveal-rendszere ───────────────────────── */
.reveal{
  opacity:0; will-change:opacity, transform;
  transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s ease;
}
.reveal.r-up{transform:translateY(24px)}
.reveal.r-scale{transform:scale(.976)}
.reveal.r-left{transform:translateX(-24px)}
.reveal.r-blur{transform:translateY(14px); filter:blur(8px)}
.reveal.visible{opacity:1; transform:none; filter:none}

/* A gyerekek sorban érkeznek, nem egyszerre */
.stagger > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible .stagger > *{opacity:1; transform:none}
.reveal.visible .stagger > *:nth-child(1){transition-delay:.05s}
.reveal.visible .stagger > *:nth-child(2){transition-delay:.11s}
.reveal.visible .stagger > *:nth-child(3){transition-delay:.17s}
.reveal.visible .stagger > *:nth-child(4){transition-delay:.23s}
.reveal.visible .stagger > *:nth-child(5){transition-delay:.29s}
.reveal.visible .stagger > *:nth-child(6){transition-delay:.35s}
.reveal.visible .stagger > *:nth-child(7){transition-delay:.41s}
.reveal.visible .stagger > *:nth-child(n+8){transition-delay:.46s}


/* ── 4. MOZGÓ FÉNYEFFEKTEK — KIVEZETVE (2026-08-14) ───────────────────
   A HUD-sarokjelek, a scan-vonal és a sheen-sáv cyan csíkokat hagytak a
   felületen. Kérésre mind kikerült; a fényhatást a statikus glow adja,
   ami nem mozog és nem hagy nyomot.

   Az alábbi szabályok ELREJTIK a maradék elemeket is, ha egy régebbi,
   gyorsítótárazott JS mégis beszúrná őket. Így a kék artifact akkor sem
   jelenhet meg, ha a böngésző a régi motort tölti be.                   */
.ui-corner, .ui-scan{display:none !important}


/* ── 4/b. HOLOGRAM — a holding fénykezelése ───────────────────────────
   Négy réteg adja ki a hatást, ugyanúgy, ahogy a holding oldalon:
     1) üveg-alap: halvány cyan színezet a felületen
     2) specular él: a fény megcsillan a bal felső sarkon
     3) sheen: lassan átfutó fénysáv
     4) derengő talaj: elmosott fény a kártya alatt                     */

.kpi-card, .card.is-holo, .tile.is-holo, .chart-card{
  position:relative;
  overflow:hidden;
  background-image:linear-gradient(135deg, rgba(6,182,212,.055), rgba(255,255,255,.012) 46%, transparent 70%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.055) inset,
    0 22px 44px -26px rgba(0,0,0,.9);
}

/* 2) Specular él — a fény "megfogja" a felület sarkát */
.kpi-card::before, .card.is-holo::before, .tile.is-holo::before, .chart-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:0;
  background:linear-gradient(135deg,
    rgba(255,255,255,.14),
    rgba(255,255,255,.02) 26%,
    transparent 52%);
  opacity:.5;
}
/* A tartalom a fényrétegek FÖLÖTT marad */
.kpi-card > *, .card.is-holo > *, .tile.is-holo > *, .chart-card > *{
  position:relative; z-index:1;
}

/* 3) Sheen — KIVEZETVE (2026-08-14).
      Az átfutó fénysáv adta a kék csíkokat. Kérésre eltávolítva; helyette
      a statikus glow dolgozik. Az ::after itt kifejezetten letiltva, hogy
      egy régebbi gyorsítótárazott szabály se hozhassa vissza. */
.kpi-card::after, .card.is-holo::after,
.tile.is-holo::after, .chart-card::after{
  content:none !important;
  animation:none !important;
}

/* 4) Derengő talaj — a felület mintha lebegne a háttér fölött */
.kpi-grid, .stat-grid{position:relative}
.kpi-grid::after, .stat-grid::after{
  content:''; position:absolute; left:50%; bottom:-14px;
  width:min(560px,78%); height:64px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(6,182,212,.14), transparent 70%);
  filter:blur(22px); pointer-events:none; z-index:0;
  opacity:0; transition:opacity 1.4s ease .35s;
}
.reveal.visible .kpi-grid::after,
.reveal.visible.kpi-grid::after{opacity:1}

/* Élő állapotjelző pont — lélegző cyan fény, mint a holding "ELÉRHETŐ" jelzése */
.status-dot, .live-dot, .badge.live::before, .status.active::before{
  box-shadow:0 0 10px var(--accent);
  animation:uiPulse 2.6s ease-in-out infinite;
}
@keyframes uiPulse{
  0%,100%{opacity:1; box-shadow:0 0 10px var(--accent)}
  50%{opacity:.72; box-shadow:0 0 18px var(--accent)}
}


/* ── 4/c. MÉLYSÉG — visszafogott 3D ──────────────────────────────────
   A holding kártyái enyhén elfordulnak a térben. Az appban ezt sokkal
   halkabban alkalmazzuk: csak érintésre reagál, nem tolakodó.          */
.kpi-grid, .card-grid{perspective:1400px; perspective-origin:50% 40%}
.kpi-card, .card.is-holo{transform-style:preserve-3d}

@media (hover:hover) and (pointer:fine){
  .kpi-card:hover{
    transform:translateY(-3px) rotateX(1.5deg) scale(1.008);
    border-color:rgba(6,182,212,.34);
    box-shadow:
      0 1px 0 rgba(255,255,255,.08) inset,
      0 28px 56px -28px rgba(0,0,0,.95),
      0 0 34px -10px rgba(6,182,212,.30);
  }
}


/* ── 4/d. FUTURISZTIKUS TEXTÚRA ──────────────────────────────────────
   Nagyon halvány rácsvonal a fő tartalom mögött. Alig látható, de
   megadja a "műszerfal" érzetet, ami a holding oldal sajátja.          */
/* A fő munkafelületre tesszük, HTML-módosítás nélkül. A rács NEM görget
   együtt a tartalommal: rögzített műszerfal-háttérként viselkedik. */
.main{position:relative}
.main::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 15%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 15%, transparent 78%);
}
/* Halvány cyan derengés a munkafelület tetején — a holding ambientje */
.main::after{
  content:''; position:absolute; left:0; right:0; top:0; height:340px;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 100% at 20% 0%, rgba(6,182,212,.055), transparent 62%),
    radial-gradient(ellipse 50% 90% at 88% 0%, rgba(6,182,212,.03), transparent 66%);
}
.main > *{position:relative; z-index:1}

/* Világos témában a rács sötét vonal, a derengés visszafogottabb */
html[data-theme="light"] .main::before{
  background-image:
    linear-gradient(rgba(15,23,42,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.030) 1px, transparent 1px);
}
html[data-theme="light"] .main::after{
  background:
    radial-gradient(ellipse 60% 100% at 20% 0%, rgba(6,182,212,.05), transparent 62%),
    radial-gradient(ellipse 50% 90% at 88% 0%, rgba(6,182,212,.028), transparent 66%);
}
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .card.is-holo,
html[data-theme="light"] .chart-card{
  background-image:linear-gradient(135deg, rgba(6,182,212,.045), rgba(255,255,255,.4) 46%, transparent 70%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px -20px rgba(15,23,42,.28);
}
html[data-theme="light"] .kpi-card::before,
html[data-theme="light"] .card.is-holo::before,
html[data-theme="light"] .chart-card::before{
  background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.15) 26%, transparent 52%);
  opacity:.8;
}


/* ── 5. FELÜLETEK — visszafogottabb, mint eddig ───────────────────── */

/* A kártyák emelkednek hoverre, de csak alig — a holding mértéktartó */
.card, .panel, .kpi-card, .tile, .surface{
  transition:transform .45s var(--ease), border-color .35s ease, box-shadow .45s ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover, .panel:hover, .kpi-card:hover, .tile:hover{
    transform:translateY(-2px);
    border-color:var(--border2);
  }
}

/* Gombok — a holding fizikája: emelkedés + cyan derengés */
.btn, button.btn, .btn-primary, .btn-secondary{
  font-family:var(--font-body);
  font-weight:600; letter-spacing:.01em;
  transition:all .22s var(--ease);
}
.btn-primary:hover, .btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(6,182,212,.26);
}
.btn:active, button.btn:active{transform:translateY(0)}

/* Fókusz — látható, de nem harsány. Akadálymentességi minimum. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
  border-radius:4px;
}


/* ── 6. TÖBBNYELVŰSÉG — a szöveg ne csússzon szét ─────────────────── */
/* A német és orosz fordítások 25-40%-kal hosszabbak a magyarnál.
   Ezek a szabályok tartják a szerkezetet, ha a szöveg megnő. */

/* Címkék, gombok, fülek: ne törjenek szét, de ne is lógjanak ki */
.btn, .tab, .chip, .badge, .pill, .nav-item, .menu-item{
  overflow-wrap:anywhere;
  hyphens:auto;
}

/* Ahol a magasságnak fixnek kell maradnia, ott a szöveg elfér vagy levágódik,
   de a rács nem borul fel. */
.kpi-label, .stat-label, .card-label, .metric-label{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35; min-height:calc(2 * 1.35em);
}

/* Táblafejlécek: hosszú fordításnál tördeljen, ne nyomja szét az oszlopot */
th{overflow-wrap:anywhere; hyphens:auto; line-height:1.3}

/* Rácsok: a minmax alsó határa engedjen, hogy hosszabb szövegnél
   ne csússzon ki a tartalom a kártyából */
.kpi-grid, .card-grid, .stat-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap:var(--space-sm);
}

/* Oldalsáv: fix 232px széles, a német címkék viszont ~118%-kal hosszabbak.
   JAVÍTVA (2026-08-14): korábban a KONTÉNERRE tettem `-webkit-box`-ot a
   kétsoros tördeléshez, ami felülírta az eredeti `display:flex`-et, és
   emiatt az ikon meg a felirat egymásra csúszott. A tördelés mostantól
   csak a SZÖVEGRE vonatkozik, a konténer flex marad. */
/* A menüfelirat NINCS span-be csomagolva (szabad szövegcsomópont), a jelvény
   osztálya pedig `nav-badge`. A korábbi kétsoros tördelés emiatt a JELVÉNYRE
   került rá és összenyomta. Tördelést itt nem is kell erőltetni: a szabad
   szöveg magától tördel. Csak annyit állítunk, ami biztonságos. */
.sidebar .nav-item, .menu-item{
  line-height:1.35;
  overflow-wrap:anywhere;
  hyphens:auto;
}
/* Az ikon és a jelvény soha ne zsugorodjon össze */
.nav-item > .nav-icon, .nav-item > .nav-badge,
.nav-item > svg, .nav-item > .icon,
.menu-item > svg, .menu-item > .icon{
  flex:0 0 auto;
}
/* A jelvény kapjon levegőt a felirattól */
.nav-item > .nav-badge{margin-left:auto}

/* Gombok: ne nyúljanak ki a sorból, de a szöveg olvasható maradjon */
.btn, button.btn, .btn-sm{
  white-space:normal;
  min-height:36px;
  line-height:1.25;
  text-align:center;
}
/* Az egymás melletti gombok tördeljenek új sorba, ne csússzanak egymásra */
.btn-row, .actions, .modal-footer, .toolbar{
  display:flex; flex-wrap:wrap; gap:var(--space-xs); align-items:center;
}

/* Fülek: vízszintesen görgethetők, ha a fordítás nem fér ki */
.tabs, .tab-row, .segmented{
  display:flex; flex-wrap:wrap; gap:var(--space-2xs);
  overflow-x:auto; scrollbar-width:thin;
}
.tab{white-space:nowrap; flex:0 0 auto}

/* Táblák: a fejléc tördeljen, a cellák ne nyomják szét az oszlopot.
   A számoszlopok viszont maradjanak egy sorban. */
th{vertical-align:bottom}
td{overflow-wrap:anywhere}
td.num, td.amount, td.money, .col-num{white-space:nowrap; text-align:right}

/* Címkék űrlapon: hosszabb fordításnál se csússzon rá a mezőre */
.form-label, label{
  display:block; line-height:1.35; margin-bottom:6px;
  overflow-wrap:anywhere; hyphens:auto;
}

/* Chip/badge: ne nyúljon a konténeren túl, és legyen levegője.
   A képernyőképen a "Vezetői prioritások 10" jelvény a szöveghez tapadt. */
.chip, .badge, .pill, .tag{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:100px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  line-height:1.5; vertical-align:middle;
}
/* A címsor és a mellette álló jelvény közé mindig kerüljön térköz */
h1 .badge, h2 .badge, h3 .badge, h4 .badge,
h1 .chip, h2 .chip, h3 .chip, h4 .chip,
.section-title .badge, .card-title .badge, .page-title .badge{
  margin-left:10px;
}

/* Ikon + szöveg párosok.
   JAVÍTVA (2026-08-14): korábban `display:flex`-et kényszerítettem az összes
   ilyen elemre, ami felülírta az app saját elrendezéseit és összenyomta őket.
   Mostantól csak azt állítjuk, ami biztosan hiányzik: a függőleges igazítást
   és a minimális térközt — a megjelenítési módhoz nem nyúlunk. */
/* A .nav-item SZÁNDÉKOSAN kimarad: az app `align-items:flex-start`-ot állít
   neki, hogy kétsoros felirat esetén az ikon az első sorhoz igazodjon.
   Azt a döntést tiszteletben tartjuk, nem írjuk felül. */
.btn, .tab, .list-item, .card-head, .kpi-head{
  align-items:center;
}

/* Az ikonok soha ne zsugorodjanak össze */
.nav-item > svg, .menu-item > svg, .btn > svg, .tab > svg,
.list-item > svg, .card-head > svg,
.nav-item > .icon, .btn > .icon, .card-head > .icon{
  flex:0 0 auto;
}
/* Címsor-sor: cím balra, művelet jobbra, közte mindig levegő */
.card-head, .kpi-head, .section-head{
  gap:14px; flex-wrap:wrap;
}

/* Nyelvváltó: az aktív állapot legyen egyértelmű */
.lang-btn, [data-set-lang]{
  font-family:var(--font-body); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}


/* ── 7. AMBIENT — a holding derengése, nagyon halványan ───────────── */
/* Csak a bejelentkező és a teljes képernyős felületeken; a munkafelületen
   zavaró lenne, ezért ott nem kapcsoljuk be. */
.ui-ambient{position:relative}
.ui-ambient::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(6,182,212,.09), transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 8%, rgba(6,182,212,.045), transparent 65%);
}
.ui-ambient > *{position:relative; z-index:1}

::selection{background:rgba(6,182,212,.28); color:var(--white)}


/* ── 8. MOZGÁSÉRZÉKENYSÉG ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .reveal,
  .reveal.r-up, .reveal.r-scale, .reveal.r-left, .reveal.r-blur{
    opacity:1 !important; transform:none !important; filter:none !important;
    transition:none !important;
  }
  .stagger > *{opacity:1 !important; transform:none !important; transition:none !important}
  .card:hover, .panel:hover, .kpi-card:hover, .tile:hover{transform:none}

  /* A hologram-fény statikus marad: a felület megőrzi a mélységét,
     de semmi nem mozog. A derengő talaj rögtön látszik. */
  .kpi-card::after, .card.is-holo::after,
  .kpi-card:hover::after, .card.is-holo:hover::after,
  .reveal.visible .kpi-card::after{animation:none !important; opacity:0 !important}
  .status-dot, .live-dot,
  .badge.live::before, .status.active::before{animation:none !important}
  .kpi-grid::after, .stat-grid::after,
  .reveal.visible .kpi-grid::after{opacity:1 !important; transition:none !important}

  *{scroll-behavior:auto !important}
}

/* Gyenge gépen se akadjon: a sheen és a 3D csak ott fut,
   ahol a böngésző jelzi, hogy bírja a rétegkompozíciót. */
@media (max-width:820px){
  .kpi-card::after, .card.is-holo::after{display:none}
  .kpi-grid, .card-grid{perspective:none}
  .kpi-grid::after, .stat-grid::after{filter:blur(16px); height:44px}
}


/* ── 9. VILÁGOS TÉMA — a réteg ott is helyesen viselkedjen ────────── */
html[data-theme="light"] .ui-ambient::before{
  background:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(6,182,212,.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 8%, rgba(6,182,212,.03), transparent 65%);
}
html[data-theme="light"] .btn-primary:hover{box-shadow:0 10px 26px rgba(6,182,212,.2)}