/* ── Triedy stranky login (CSP: boli to inline style atributy) ─── */
.login-s1{text-align:center;font-size:var(--fs-mini);color:var(--c-text-muted);margin-top:var(--s-md)}

/* ── Pozadie prihlasovacej stranky (v3.54.0) ─────────────────────
   Zadanie MS 03.10.2026: „graficky zaujimave pozadie“. Scena v `.login-scena`
   (aria-hidden, len dekoracia) ma tri vrstvy:
     1. aury — tri mekke kruhy modra → indigo → fialova, pomaly sa prelievaju,
     2. linajky — riadky a stlpce uctovnej knihy s jantarovou dvojitou linkou
        okraja, k okrajom obrazovky sa stracaju (maska),
     3. tvary — par obrysovych geometrickych tvarov, ktore pomaly plavu.
   Vsetko cistym CSS: ziadny obrazok, ziadny externy zdroj, ziadny skript
   (CSP `style-src 'self'; img-src 'self' data:` — styly su v tomto subore,
   nie v `style=`). Animuje sa LEN `transform` a `opacity` (kompozitor GPU,
   ziadny layout ani repaint) a pri `prefers-reduced-motion` scena stoji.

   ⚑ Farby su tokeny scopnute na `.login-page` (vzor `test_farby.py`). Paleta
     je zamerne len modra → fialova + jantarovy akcent (#F59E0B): nove logo
     Moviry sa navrhuje v tejto palete a pozadie ho nesmie prebit.
   ⚑ `isolation:isolate` je nutne: bez vlastneho stacking kontextu by scena
     so zapornym z-index skoncila POD pozadim `.login-page` a nebolo by ju vidno.
   ⚑ Text sa kresli na nepriehladny `.login-box` (`--c-surface`), takze pozadie
     neovplyvnuje kontrast ziadneho pisma — dvojice text/povrch stravi
     `test_kontrast.py`.                                                */
.login-page{
  position:relative;isolation:isolate;overflow:hidden;
  --aura-1:rgba(59,130,246,.40);     /* Movira modra #3B82F6 */
  --aura-2:rgba(139,92,246,.32);     /* fialova --note-purple */
  --aura-3:rgba(99,102,241,.26);     /* indigo */
  --linajka:rgba(148,163,184,.075);
  --stlpec:rgba(148,163,184,.05);
  --okraj:rgba(245,158,11,.26);
  --tvar-1:rgba(147,197,253,.30);
  --tvar-2:rgba(196,181,253,.28);
  --akcent:rgba(245,158,11,.80);
  --pruh-1:#3b82f6;--pruh-2:#8b5cf6;--pruh-3:#f59e0b
}
[data-theme="light"] .login-page{
  --aura-1:rgba(59,130,246,.22);
  --aura-2:rgba(139,92,246,.17);
  --aura-3:rgba(99,102,241,.15);
  --linajka:rgba(71,85,105,.08);
  --stlpec:rgba(71,85,105,.05);
  --okraj:rgba(217,119,6,.28);
  --tvar-1:rgba(37,99,235,.24);
  --tvar-2:rgba(124,58,237,.22);
  --akcent:rgba(245,158,11,.90);
  --pruh-1:#2563eb;--pruh-2:#7c3aed;--pruh-3:#f59e0b
}
.login-scena{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}

/* 1. Aury — radialny gradient je makky sam, `filter:blur` netreba (setri GPU) */
.scena-aura{position:absolute;border-radius:50%;will-change:transform;
  animation:scena-aura 26s ease-in-out infinite alternate}
.scena-aura-1{width:70vmax;height:70vmax;left:-24vmax;top:-30vmax;
  background:radial-gradient(closest-side, var(--aura-1), transparent)}
.scena-aura-2{width:64vmax;height:64vmax;right:-26vmax;bottom:-30vmax;
  background:radial-gradient(closest-side, var(--aura-2), transparent);
  animation-duration:32s;animation-delay:-9s;animation-direction:alternate-reverse}
.scena-aura-3{width:46vmax;height:46vmax;left:30%;top:78%;
  background:radial-gradient(closest-side, var(--aura-3), transparent);
  animation-name:scena-aura-3;animation-duration:38s;animation-delay:-14s}
@keyframes scena-aura{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vmax,4vmax,0) scale(1.08)}
  100%{transform:translate3d(-3vmax,7vmax,0) scale(.96)}
}
@keyframes scena-aura-3{
  0%{transform:translate3d(-50%,-50%,0) scale(.9);opacity:.7}
  50%{transform:translate3d(-62%,-38%,0) scale(1.06);opacity:1}
  100%{transform:translate3d(-40%,-58%,0) scale(.95);opacity:.8}
}

/* 2. Linajky uctovnej knihy: riadok 32 px, stlpec 160 px, jantarovy okraj */
.scena-linajky{position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, transparent calc(14% - 4px), var(--okraj) calc(14% - 4px), var(--okraj) calc(14% - 3px),
      transparent calc(14% - 3px), transparent 14%, var(--okraj) 14%, var(--okraj) calc(14% + 1px), transparent calc(14% + 1px)),
    linear-gradient(90deg, var(--stlpec) 1px, transparent 1px),
    linear-gradient(var(--linajka) 1px, transparent 1px);
  background-size:100% 100%, 160px 100%, 100% 32px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 45%, #000 25%, transparent 85%);
          mask-image:radial-gradient(75% 65% at 50% 45%, #000 25%, transparent 85%)}

/* 3. Tvary — obrysy, len transform/opacity */
.scena-tvar{position:absolute;display:block;will-change:transform;
  animation:scena-plavanie 18s ease-in-out infinite alternate}
.scena-kruh{width:120px;height:120px;left:9%;top:16%;border-radius:50%;border:1.5px solid var(--tvar-1)}
.scena-stvorec{width:72px;height:72px;right:12%;top:20%;border-radius:var(--r-lg);border:1.5px solid var(--tvar-2);
  transform:rotate(18deg);animation-name:scena-plavanie-rot;animation-duration:22s;animation-delay:-6s}
.scena-obluk{width:180px;height:180px;right:8%;bottom:10%;border-radius:50%;
  border:1.5px dashed var(--tvar-1);border-left-color:transparent;border-bottom-color:transparent;
  animation-name:scena-plavanie-rot;animation-duration:30s;animation-delay:-12s}
.scena-plus{width:28px;height:28px;left:18%;bottom:18%;
  background:linear-gradient(var(--tvar-2),var(--tvar-2)) center/100% 2px no-repeat,
             linear-gradient(var(--tvar-2),var(--tvar-2)) center/2px 100% no-repeat;
  animation-duration:16s;animation-delay:-4s}
.scena-bod{width:10px;height:10px;border-radius:50%;background:var(--akcent);left:calc(9% + 112px);top:calc(16% + 18px);
  animation-name:scena-blik;animation-duration:6s}
@keyframes scena-plavanie{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(10px,-22px,0)}
}
@keyframes scena-plavanie-rot{
  0%{transform:translate3d(0,0,0) rotate(18deg)}
  100%{transform:translate3d(-14px,18px,0) rotate(48deg)}
}
@keyframes scena-blik{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(1.35);opacity:1}
}
/* Na mobile by tvary lezali pod kartou a len rusili — ostane kruh a bod */
@media(max-width:640px){
  .scena-stvorec,.scena-obluk,.scena-plus{display:none}
  .scena-kruh{width:84px;height:84px;left:-20px;top:24px}
  .scena-bod{left:52px;top:36px}
  .scena-linajky{background-size:100% 100%, 120px 100%, 100% 28px}
}
/* Pohyb vypnuty uplne — globalne pravidlo v app.css len skrati trvanie na
   0,01 ms, scena by tak skocila do koncoveho snimku. Tu ostane v zakladnej polohe. */
@media(prefers-reduced-motion:reduce){
  .scena-aura,.scena-tvar{animation:none;will-change:auto}
  .scena-aura-3{transform:translate3d(-50%,-50%,0)}
  .scena-stvorec{transform:rotate(18deg)}
}

/* Karta: nepriehladny povrch (kontrast) + tenky pruh v palete loga hore */
.login-box{position:relative;overflow:hidden}
.login-box::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg, var(--pruh-1), var(--pruh-2) 70%, var(--pruh-3))}

/* ── Powered by (v3.54.0) ─────────────────────────────────────────
   Odkazy na weby partnerov v pate karty — na nepriehladnom povrchu, takze
   kontrast `--c-link`/`--c-text-muted` na `--c-surface` plati (test_kontrast).
   Fokus: globalne `a:focus-visible` v app.css. */
.login-kredit{margin-top:var(--s-xs);line-height:var(--lh-telo)}
.login-kredit a{font-weight:600;padding:2px 1px;white-space:nowrap}
.login-kredit-odd{margin:0 var(--s-xs)}

/* ── QR prihlásenie cez Nexum (10.09.2026) ──────────────────────────────────
   Farby idú cez tokeny; `test_farby.py` iné nedovolí. Čakacia obrazovka žije
   vnútri `.login-box`, takže dedí jeho šírku aj pozadie. */
.qr-oddel{display:flex;align-items:center;gap:var(--s-sm);margin:var(--s-md) 0;
  color:var(--c-text-muted);font-size:var(--fs-pom)}
.qr-oddel::before,.qr-oddel::after{content:"";flex:1;height:1px;background:var(--c-border)}
.qr-nadpis{font-size:var(--fs-h3);font-weight:600;color:var(--c-text);margin:0 0 var(--s-xs)}
/* 2FA (v3.63.0): krok kódu a sprievodca nastavením */
.mfa-nadpis{font-size:var(--fs-h3);font-weight:600;color:var(--c-text);margin:0 0 var(--s-xs)}
.qr-sub{margin:0 0 var(--s-md);color:var(--c-text-secondary);font-size:var(--fs-telo)}
.qr-obraz{background:var(--qr-podklad);padding:var(--s-sm);border-radius:var(--r-md);
  display:inline-block;line-height:0}
.qr-obraz img{width:240px;height:240px;max-width:100%}
.qr-popis{margin:var(--s-md) 0 var(--s-xs);color:var(--c-text-secondary);font-size:var(--fs-pom)}
.qr-cislo{font-size:var(--fs-hero);font-weight:700;letter-spacing:4px;color:var(--c-text);
  font-variant-numeric:tabular-nums}
.qr-hint{margin:var(--s-sm) 0 0;color:var(--c-text-muted);font-size:var(--fs-pom);line-height:1.5}
.qr-stav{margin-top:var(--s-md);padding:var(--s-sm) var(--s-md);border-radius:var(--r-md);
  font-size:var(--fs-telo);background:var(--c-surface-alt);border:1px solid var(--c-border);
  color:var(--c-text-secondary)}
.qr-stav.err{background:var(--c-danger-bg);border-color:var(--c-danger-border);color:var(--c-danger-text)}
.qr-stav.ok{background:var(--c-success-bg);border-color:var(--c-success-border);color:var(--c-success-text)}
/* ⚑ Podklad QR je ZÁMERNE biely v oboch témach a nie je to prehliadnutý token:
   čítačka potrebuje svetlú tichú zónu, na tmavom podklade sa kód nenačíta.
   Je to teda funkčná konštanta — preto scopnutý token na komponente, rovnako
   ako `--aura-*` na `.login-page`, nie natvrdo zapísaná farba. */
.qr-cakanie{--qr-podklad:#ffffff;text-align:center}