/* ============================================================================
   PORTÁL — jeden hárok štýlov. Server-rendered HTML, žiadny build, žiadny JS.
   CSP: default-src 'none'; style-src 'self' → tento súbor je JEDINÉ miesto,
   kde smie byť čo i len jedna deklarácia štýlu. Žiadny <style>, žiadny
   style="" atribút. Farba per-aplikácia ide cez [data-app] selektory nižšie.

   Pravidlo domu (rovnaké ako v doklady-app/src/ui.ts):
   ŽIADNA farba nesmie mať svoju JEDINÚ definíciu vnútri @media.
   Svetlý režim je základ; tmavý blok sa píše DVA razy — raz pre ručnú voľbu
   [data-theme="dark"], raz pre systémovú @media. Obsah oboch je identický.
   light-dark() sa NEPOUŽÍVA: pod Safari 17.5 je to neplatná syntax a celá
   deklarácia by vypadla → nečitateľné farby na staršom iPhone.
   ============================================================================ */

:root{
  color-scheme: light;

  /* ── plochy a text ─────────────────────────────────────────────────────
     ink/surface 18,07:1 · ink/bg 16,29:1 · ink-2/surface 10,40:1
     muted/surface 6,21:1 · muted/bg 5,60:1 · muted/surface-2 5,26:1
     muted na najsýtejšom bode závoja 4,96:1                             */
  --bg:#f1f3f9;
  --surface:#ffffff;
  --surface-2:#e9ecf5;
  --ink:#14161d;
  --ink-2:#3b3f52;
  --muted:#5b6076;

  --line:rgba(16,20,40,.12);
  --line-strong:rgba(16,20,40,.24);
  --fill:rgba(16,20,40,.06);
  --fill-press:rgba(16,20,40,.13);

  /* ── značka portálu = modrá. V portáli je modrá zároveň „informačná".
     Doklady majú --info-ink:#264990; portál ho zámerne zlučuje so značkou,
     lebo dve takmer rovnaké modré vedľa seba sú šum, nie informácia.     */
  --brand:#0d5fd0;        /* biely text 5,89:1 */
  --brand-2:#1668d8;      /* svetlejší koniec gradientu, biely text 5,24:1 */
  --on-brand:#ffffff;
  --brand-ink:#1a4fa8;    /* 7,70:1 na surface · 6,94:1 na bg */
  --brand-soft:rgba(13,95,208,.11);
  --brand-ring:rgba(13,95,208,.40);

  /* ── STAVOVÝ REBRÍK — štyri významy, piaty je „údaj chýba" ──────────── */
  --ok-ink:#066b35;   --ok-soft:rgba(6,107,53,.12);     /* 6,64:1 · na nádychu 5,52:1 */
  --warn-ink:#8a5000; --warn-soft:rgba(138,80,0,.14);   /* 6,51:1 · 5,27:1 */
  --bad-ink:#a3201a;  --bad-soft:rgba(163,32,26,.12);   /* 7,56:1 · 6,14:1 */
  --info-ink:#1a4fa8; --info-soft:rgba(26,79,168,.12);  /* 7,70:1 · 6,37:1 */

  /* ── HLASNÉ PLOCHY — len pre .pas a .oznam.je-hlasny.
     Jantár sa obracia už v svetle: tmavý sýty jantár JE tá hnedá škvrna,
     na ktorú sa majiteľ sťažuje. Zelená/červená/modrá tmavú podobu majú.  */
  --ok-bg:#0e7a43;   --ok-on:#ffffff;    /* 5,41:1 */
  --warn-bg:#f5a524; --warn-on:#2a1500;  /* 8,53:1 */
  --bad-bg:#b3261e;  --bad-on:#ffffff;   /* 6,54:1 — žetón Dokladov */
  --info-bg:#1a4fa8; --info-on:#ffffff;  /* 7,70:1 */

  /* ── identita aplikácií — farba = KTORÁ aplikácia, nie aký stav ─────── */
  --app-sklad:#08733d;    /* 5,95:1  (pôvodné #0a8f4c malo len 4,16:1) */
  --app-faktury:#6b2fd0;  /* 7,14:1 */
  --app-doklady:#0a767d;  /* 5,38:1 — presne žetón --accent Dokladov */
  --app-sprava:#1a4fa8;   /* 7,70:1 */
  --app-ina:#4a5168;      /* 7,87:1 — neznáma aplikácia bez pridelenej farby */

  --contrast:#14161d; --contrast-ink:#ffffff;   /* passkey tlačidlo, 18,07:1 */
  --danger:var(--bad-ink);

  --focus:#0a75ff;         /* netextový indikátor: 4,20:1 na surface, 3,78:1 na bg */
  --hlava-bg:rgba(247,248,252,.78);

  --shadow-1:0 1px 2px rgba(16,20,40,.06);
  --shadow-2:0 12px 30px -16px rgba(16,20,40,.26);
  --shadow-btn:0 10px 22px -10px rgba(13,95,208,.55);
  --hrana:inset 0 1px 0 rgba(255,255,255,.75);  /* horný svetelný zráz karty */

  /* ── tvar a rytmus — zhodné s Dokladmi ─────────────────────────────── */
  --r-card:22px; --r-btn:18px; --r-field:14px; --r-pill:999px;
  --tap:56px;              /* zhodné s Dokladmi (--tap:56px) */
  --tap-lg:68px;           /* zhodné s .btn-lg Dokladov */
  --hlava-h:calc(3.5rem + env(safe-area-inset-top,0px));
  --ease:cubic-bezier(.22,.9,.24,1);
}

/* ── TMAVÝ REŽIM — ručná voľba ─────────────────────────────────────────
   Kanvas NIE JE čierny. #0b0d13 je chladný modro-uhlíkový základ a nad ním
   stoja tri skutočné stupne (1,18:1 medzi susednými), takže karta je
   predmet na ploche, nie diera vyrezaná do čierna.                       */
[data-theme="dark"]{
  color-scheme: dark;

  --bg:#0b0d13;
  --surface:#1b1f29;
  --surface-2:#262c38;
  --ink:#f4f6fb;      /* 15,24:1 na surface · 17,96:1 na bg */
  --ink-2:#c8cede;    /* 10,47:1 */
  --muted:#9aa2b6;    /* 6,45:1 na surface · 7,60:1 na bg · 5,48:1 na surface-2 */

  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.30);
  --fill:rgba(255,255,255,.09);
  --fill-press:rgba(255,255,255,.18);

  --brand:#5aa4ff;    --brand-2:#74b2ff;  --on-brand:#041a3d;  /* 6,71:1 · 7,83:1 */
  --brand-ink:#8cbdff;                                        /* 8,50:1 */
  --brand-soft:rgba(90,164,255,.17);
  --brand-ring:rgba(90,164,255,.48);

  /* stavová rampa je VERBATIM rampa Dokladov — oba produkty svietia rovnako */
  --ok-ink:#4ee08e;   --ok-soft:rgba(78,224,142,.16);    /* 10,25:1 · 6,80:1 */
  --warn-ink:#ffc46b; --warn-soft:rgba(255,196,107,.16); /* 11,07:1 · 7,24:1 */
  --bad-ink:#ff8d84;  --bad-soft:rgba(255,141,132,.16);  /*  7,78:1 · 5,50:1 */
  --info-ink:#9cc4ff; --info-soft:rgba(156,196,255,.16); /*  9,74:1 · 6,48:1 */

  --ok-bg:#8cf5b0;   --ok-on:#04240f;   /* 12,50:1 */
  --warn-bg:#ffc46b; --warn-on:#2a1500; /* 11,08:1 */
  --bad-bg:#ff8d84;  --bad-on:#2b0806;  /*  8,24:1 */
  --info-bg:#9cc4ff; --info-on:#041a3d; /*  9,63:1 */

  --app-sklad:#45dd8d;    /* 9,40:1 */
  --app-faktury:#b492ff;  /* 6,67:1 */
  --app-doklady:#35d3c8;  /* 8,87:1 — presne žetón --accent Dokladov v tme */
  --app-sprava:#8cbdff;   /* 8,50:1 */
  --app-ina:#9aa2b6;      /* 6,45:1 */

  --contrast:#f4f6fb; --contrast-ink:#0b0d13;   /* 17,96:1 */
  --danger:var(--bad-ink);

  --focus:#5aa9ff;         /* 7,91:1 na bg */
  --hlava-bg:rgba(17,20,29,.76);

  --shadow-1:0 1px 2px rgba(0,0,0,.55);
  --shadow-2:0 14px 34px -18px rgba(0,0,0,.85);
  --shadow-btn:0 10px 24px -12px rgba(90,164,255,.5);
  --hrana:inset 0 1px 0 rgba(255,255,255,.07);  /* svetelný lem = karta svieti */
}

/* ── TMAVÝ REŽIM — systémová voľba. OBSAH MUSÍ BYŤ ZNAK PO ZNAKU ROVNAKÝ. ── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --bg:#0b0d13;
    --surface:#1b1f29;
    --surface-2:#262c38;
    --ink:#f4f6fb;
    --ink-2:#c8cede;
    --muted:#9aa2b6;

    --line:rgba(255,255,255,.14);
    --line-strong:rgba(255,255,255,.30);
    --fill:rgba(255,255,255,.09);
    --fill-press:rgba(255,255,255,.18);

    --brand:#5aa4ff;    --brand-2:#74b2ff;  --on-brand:#041a3d;
    --brand-ink:#8cbdff;
    --brand-soft:rgba(90,164,255,.17);
    --brand-ring:rgba(90,164,255,.48);

    --ok-ink:#4ee08e;   --ok-soft:rgba(78,224,142,.16);
    --warn-ink:#ffc46b; --warn-soft:rgba(255,196,107,.16);
    --bad-ink:#ff8d84;  --bad-soft:rgba(255,141,132,.16);
    --info-ink:#9cc4ff; --info-soft:rgba(156,196,255,.16);

    --ok-bg:#8cf5b0;   --ok-on:#04240f;
    --warn-bg:#ffc46b; --warn-on:#2a1500;
    --bad-bg:#ff8d84;  --bad-on:#2b0806;
    --info-bg:#9cc4ff; --info-on:#041a3d;

    --app-sklad:#45dd8d;
    --app-faktury:#b492ff;
    --app-doklady:#35d3c8;
    --app-sprava:#8cbdff;
    --app-ina:#9aa2b6;

    --contrast:#f4f6fb; --contrast-ink:#0b0d13;
    --danger:var(--bad-ink);

    --focus:#5aa9ff;
    --hlava-bg:rgba(17,20,29,.76);

    --shadow-1:0 1px 2px rgba(0,0,0,.55);
    --shadow-2:0 14px 34px -18px rgba(0,0,0,.85);
    --shadow-btn:0 10px 24px -12px rgba(90,164,255,.5);
    --hrana:inset 0 1px 0 rgba(255,255,255,.07);
  }
}

/* ══════════════════════════════ ZÁKLAD ══════════════════════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;      /* záloha pre iOS 15.0–15.3 */
  min-height:100svh;
  display:flex;flex-direction:column;
  background-color:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.35;
  -webkit-font-smoothing:antialiased;
}

/* ZÁVOJ — jediná dekoratívna farba v celom portáli. Drží sa na 5 % / 4 %,
   takže aj v najsýtejšom bode má --muted stále 4,96:1 (ink 14,43:1).      */
body{
  background-image:
    radial-gradient(80rem 42rem at 6% -14%, rgba(13,95,208,.05), transparent 62%),
    radial-gradient(64rem 38rem at 106% 0%, rgba(125,60,232,.04), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
[data-theme="dark"] body{
  background-image:
    radial-gradient(80rem 42rem at 6% -14%, rgba(90,164,255,.04), transparent 62%),
    radial-gradient(64rem 38rem at 106% 0%, rgba(160,107,255,.03), transparent 60%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body{
    background-image:
      radial-gradient(80rem 42rem at 6% -14%, rgba(90,164,255,.04), transparent 62%),
      radial-gradient(64rem 38rem at 106% 0%, rgba(160,107,255,.03), transparent 60%);
  }
}

main{
  flex:1;
  width:min(64rem,100%);
  margin:0 auto;
  padding-top:1rem;
  padding-bottom:2rem;
  padding-inline-start:max(.85rem,env(safe-area-inset-left,0px));
  padding-inline-end:max(.85rem,env(safe-area-inset-right,0px));
}
/* Na 375 px zostáva 347,8 px obsahu — z toho vychádzajú šírky mriežok nižšie. */
@media (min-width:66rem){ main{padding-inline:0} }



footer{
  padding:1.1rem 1rem;
  padding-bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
  color:var(--muted);font-size:.75rem;text-align:center;
  border-top:1px solid var(--line);
}

a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-weight:500;font-size:.85em}
.center{text-align:center}
code{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:.88em}

/* ══════════════════════════ HLAVIČKA A NAVIGÁCIA ══════════════════════════
   JEDNORIADKOVÁ, PEVNÁ VÝŠKA. NIKDY nepridávať header{flex-wrap:wrap} —
   presne to robí dnešné dva ragged riadky na telefóne.
   POZNÁMKA: keby sa sem niekedy pridal potomok s position:fixed, blur MUSÍ
   prejsť na header::before — backdrop-filter robí z prvku obsahový blok pre
   fixed potomkov a lišta by sa prilepila na hlavičku namiesto na obrazovku. */
header{
  position:sticky;top:0;z-index:30;
  height:var(--hlava-h);
  padding-top:env(safe-area-inset-top,0px);
  display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;
  padding-left:max(.85rem,env(safe-area-inset-left,0px));
  padding-right:max(.85rem,env(safe-area-inset-right,0px));
  background:var(--hlava-bg);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--line);
}

.znacka{
  display:flex;align-items:center;gap:.45rem;flex:0 0 auto;
  min-height:44px;color:var(--ink);text-decoration:none;
  font-size:1.0625rem;font-weight:800;letter-spacing:-.025em;
}
.znacka:hover{text-decoration:none}
.znacka svg{width:26px;height:26px;color:var(--brand);flex:0 0 auto}
/* Slovo „Portál" zostáva viditeľné aj na 375 px — hlavička bez neho je mŕtva.
   Zmizne až pod 22,5rem (360 px), kde už naozaj nie je miesto.            */
@media (max-width:22.4375rem){ .znacka span{display:none} }

/* ── NAVIGÁCIA: tvar .tabs z Dokladov ─────────────────────────────────── */
.navi{
  display:flex;flex-wrap:nowrap;gap:2px;
  margin-left:auto;padding:3px;
  border-radius:var(--r-pill);
  background:var(--fill);
  box-shadow:inset 0 0 0 1px var(--line);
  overflow-x:auto;scrollbar-width:none;      /* poistka pre dlhšie preklady */
  -webkit-overflow-scrolling:touch;
}
.navi::-webkit-scrollbar{display:none}
.navi-p{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-width:44px;min-height:44px;padding:0 .5rem;
  border-radius:var(--r-pill);
  color:var(--ink-2);text-decoration:none;
  font-size:.875rem;font-weight:700;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.navi-p svg{width:21px;height:21px;flex:0 0 auto}
.navi-p:hover{color:var(--ink);text-decoration:none}
.navi-p.je-on{
  background:var(--surface);color:var(--brand-ink);
  box-shadow:0 1px 3px rgba(0,0,0,.20);
  padding:0 .7rem;
}
.navi-p.je-on svg{stroke-width:2.4}
.navi-p:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--focus)}

/* Rozpočet šírky na 375 px (správca = 4 položky, najhoršia zostava):
   okraje 27,2 + značka 26+8+52 + medzera 8 + lišta (6+4×44+3×2=188)
   + medzera 8 + avatar 44 = 334 px z 375. Nemá sa ako zalomiť.
   Popis sa objaví najprv pri aktívnej položke (od 30rem), potom pri všetkých. */
.navi-p span{display:none}
@media (min-width:30rem){ .navi-p.je-on span{display:inline} }
@media (min-width:46rem){
  .navi-p span{display:inline}
  .navi-p{padding:0 .8rem;font-size:.9375rem}
  .navi-p.je-on{padding:0 .9rem}
}

/* ── ÚČET + PREPÍNAČ TÉMY: jedna ponuka, 44 px terč ───────────────────── */
.ucet{position:relative;flex:0 0 auto}
.ucet > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;
  background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand-ring);
}
.ucet > summary::-webkit-details-marker{display:none}
.ucet > summary::marker{content:""}
.ucet > summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ucet-ini{font-size:.8125rem;font-weight:800;letter-spacing:.02em;color:var(--brand-ink)}
.ucet-pop{
  position:absolute;right:0;top:calc(100% + .5rem);z-index:40;
  width:16rem;padding:.85rem;
  display:flex;flex-direction:column;gap:.6rem;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-2),var(--hrana);
}
.ucet-kto{margin:0;display:flex;flex-direction:column;line-height:1.25;gap:.1rem}
.ucet-kto strong{font-size:.9375rem;font-weight:700}
.ucet-kto span{font-size:.8125rem;color:var(--muted)}
.ucet-pop .btn{width:100%}
.ucet-lbl{font-size:.6875rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.ucet-ciara{height:1px;background:var(--line);margin:.1rem 0}

.temy{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  padding:3px;border-radius:14px;background:var(--fill);
  box-shadow:inset 0 0 0 1px var(--line)}
.tema{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:48px;padding:.3rem .2rem;border:0;border-radius:11px;
  background:transparent;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:.6875rem;font-weight:800;line-height:1.1}
.tema svg{width:18px;height:18px}
.tema.je-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.tema:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus)}

/* ══════════════════════════ TYPOGRAFIA STRÁNKY ══════════════════════════ */
.hlavicka-stranky{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .7rem;
  margin:.2rem 0 1rem}
.hlavicka-stranky h1{flex:1 0 100%;margin:0;
  font-size:clamp(1.6rem,7.5vw,2.05rem);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.hlavicka-stranky .lead{flex:1 1 14rem;margin:0;color:var(--muted);
  font-size:.9375rem;line-height:1.45}
.hlavicka-stranky .pill{flex:0 0 auto}

.nadpis-sekcie{margin:1.6rem 0 .7rem;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em}
.nadpis-sekcie:first-child{margin-top:0}
h1{font-size:clamp(1.6rem,7.5vw,2.05rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.08;margin:.2rem 0 .8rem}
h2{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;margin:1.6rem 0 .7rem}
h3{font-size:.9375rem;font-weight:800;letter-spacing:-.01em;margin:1.1rem 0 .5rem}
p{margin:0 0 .8rem;line-height:1.5}

/* ══════════════════════════ .pas — STAVOVÝ VERDIKT ══════════════════════════
   Jediný hlasný prvok stránky. Nahrádza kopu farebných bannerov jedným
   výrokom; všetko ostatné padne na váhu karty.                            */
.pas{
  --s-bg:var(--info-bg); --s-on:var(--info-on);
  display:flex;align-items:center;gap:.85rem;
  min-height:5.25rem;padding:.9rem 1rem;margin:0 0 1rem;
  border-radius:var(--r-card);
  background:var(--s-bg);color:var(--s-on);
  box-shadow:var(--shadow-1),var(--shadow-2);
}
.pas.je-ok  {--s-bg:var(--ok-bg);   --s-on:var(--ok-on)}
.pas.je-warn{--s-bg:var(--warn-bg); --s-on:var(--warn-on)}
.pas.je-bad {--s-bg:var(--bad-bg);  --s-on:var(--bad-on)}
.pas.je-info{--s-bg:var(--info-bg); --s-on:var(--info-on)}
.pas-i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:15px;
  background:rgba(127,127,127,.26);                     /* záloha bez color-mix */
  background:color-mix(in srgb,var(--s-on) 18%,transparent)}
.pas-i svg{width:25px;height:25px;stroke-width:2.3}
.pas-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.pas-t strong{font-size:1.125rem;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.pas-t small{font-size:.875rem;line-height:1.3;opacity:.9}
.pas-a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 1rem;border-radius:var(--r-pill);
  background:var(--s-on);color:var(--s-bg);
  font-size:.9375rem;font-weight:800;text-decoration:none;white-space:nowrap}
.pas-a:hover{text-decoration:none;filter:brightness(1.08)}
.pas-a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* TICHÝ verdikt: keď na stránke už stojí .oznam.je-hlasny, verdikt sa
   nesmie prekrikovať — spadne na kartu s 5px lištou. Server to rozhoduje. */
.pas.je-tichy{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-left:5px solid var(--s-bg);
  box-shadow:var(--shadow-1),var(--shadow-2),var(--hrana);
}
.pas.je-tichy .pas-i{background:var(--fill);
  background:color-mix(in srgb,var(--s-bg) 14%,transparent);color:var(--s-bg)}
.pas.je-tichy .pas-a{background:var(--s-bg);color:var(--surface)}
[data-theme="dark"] .pas.je-tichy .pas-a{color:var(--bg)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pas.je-tichy .pas-a{color:var(--bg)}
}
@media (max-width:24rem){ .pas-t small{display:none} .pas{min-height:4.5rem} }

/* ══════════════════════════ PREHĽAD — pozdrav, verdikt, oznámenia ══════════
   Prehľad je štartovacia plocha: jedna veta o stave účtu a hneď aplikácie.
   Šesť stavových dlaždíc tu bývalo — každá niesla jedno číslo, ktoré človek
   aj tak rieši až v Zabezpečení. Namiesto nich je tichý pás (.pas.je-tichy)
   a všetko ostatné sa zmestí pod aplikácie.                                */
.pozdrav{font-size:clamp(1.4rem,6vw,1.7rem)}
.hlavicka-stranky.je-uvod{margin:.1rem 0 .7rem}
.pas.je-tichy{min-height:0;margin-bottom:.9rem;padding:.7rem .85rem;gap:.7rem;border-radius:16px}
.pas.je-tichy .pas-i{width:34px;height:34px;border-radius:11px}
.pas.je-tichy .pas-i svg{width:19px;height:19px}
.pas.je-tichy .pas-t strong{font-size:.9375rem}
.pas.je-tichy .pas-t small{font-size:.8125rem;opacity:.85}
.pas.je-tichy .pas-a{min-height:38px;padding:0 .8rem;font-size:.8125rem}

/* Oznámenia zbalené do jedného riadka; počet je vidieť bez otvorenia. */
.oznamenia{margin:.9rem 0 0;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow-1)}
.oznamenia>summary{display:flex;align-items:center;gap:.6rem;min-height:52px;
  padding:.55rem .9rem;list-style:none;cursor:pointer;font-weight:700;
  -webkit-tap-highlight-color:transparent}
.oznamenia>summary::-webkit-details-marker{display:none}
.oznamenia>summary::marker{content:""}
.oznamenia>summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:16px}
.oznamenia>summary>svg:first-child{width:18px;height:18px;flex:0 0 auto;color:var(--brand-ink)}
.ozn-pocet{margin-left:auto;min-width:1.6rem;padding:.1rem .5rem;border-radius:999px;
  background:var(--warn-bg);color:var(--warn-on);font-size:.75rem;font-weight:800;
  text-align:center;font-variant-numeric:tabular-nums}
.ozn-ch{width:16px;height:16px;flex:0 0 auto;color:var(--muted);stroke-width:2.6;
  transition:transform .2s var(--ease)}
.oznamenia[open]>summary .ozn-ch{transform:rotate(180deg)}
.ozn-list{list-style:none;margin:0;padding:0 .9rem;border-top:1px solid var(--line)}
.ozn-list li{padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.45}
.ozn-list li:last-child{border-bottom:0}
.ozn-list time{display:block;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}
.oznamenia form{margin:0;padding:.6rem .9rem .8rem}
.oznamenia .btn{width:100%}
@media (min-width:34rem){ .oznamenia .btn{width:auto} }

/* Formulár v hlásení (overenie e-mailu) ide do jedného radu aj na telefóne —
   pole na kód je krátke, netreba mu celú šírku, a hlásenie tak nezaberie
   pol obrazovky. */
.oznam .rada{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.6rem}
.oznam .rada form{width:auto;display:flex;align-items:center;gap:.5rem}
.oznam .rada .btn{width:auto}

/* ══════════════════════════ .karta — SEKCIA S HLAVIČKOU ══════════════════════════
   PRIAMA oprava sivej steny na /security: „Passkeys", „Dvojfaktorové
   overenie", „Zmena hesla" prestávajú byť holé <h2> a stávajú sa kartami
   so stavovou pilulkou v hlavičke.                                          */
.karta{
  --s:var(--info-ink);
  position:relative;overflow:hidden;
  margin:0 0 .8rem;padding:1.05rem 1.05rem 1.1rem;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);
  box-shadow:var(--shadow-1),var(--shadow-2),var(--hrana);
}
/* Pruh nenesie text, takže nepotrebuje textový kontrast — a smie byť preto
   sýty. Jantár ako tmavá „inková" hnedá je presne tá kalná škvrna, ktorá robí
   rozhranie smutným; --s-pruh preto berie živú podobu odtieňa. */
.karta::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--s-pruh,var(--s))}
.karta.je-ok{--s:var(--ok-ink);     --s-pruh:var(--ok-bg)}
.karta.je-warn{--s:var(--warn-ink); --s-pruh:var(--warn-bg)}
.karta.je-bad{--s:var(--bad-ink);   --s-pruh:var(--bad-bg)}
.karta.je-info{--s:var(--info-ink); --s-pruh:var(--brand)}
.karta.je-nic{--s:var(--line-strong)}
/* Karta prevezme farbu najhoršej pilulky vo svojej hlavičke — server nemusí
   stav počítať dvakrát. Bez :has() ostáva platná trieda je-* zo servera.   */
.karta:has(> .karta-h .pill.je-bad){--s:var(--bad-ink)}
.karta:has(> .karta-h .pill.je-warn):not(:has(> .karta-h .pill.je-bad)){--s:var(--warn-ink)}

.karta-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .5rem}
.karta-h h2{flex:1;min-width:6rem;margin:0;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em}
.karta-i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:11px;
  background:var(--fill);                                    /* záloha */
  background:color-mix(in srgb,var(--s) 12%,var(--surface));
  color:var(--s)}
.karta-i svg{width:19px;height:19px}
.karta-lead{margin:0 0 .9rem;color:var(--muted);font-size:.9375rem;line-height:1.45}
.karta > p{margin:0 0 .8rem;font-size:.9375rem;line-height:1.5}
.karta > *:last-child{margin-bottom:0}

/* skladacia varianta */
details.karta > summary{list-style:none;cursor:pointer;min-height:44px;margin:0 0 .5rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
details.karta > summary::-webkit-details-marker{display:none}
details.karta > summary::marker{content:""}
details.karta > summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:12px}
.karta-ch{width:18px;height:18px;flex:0 0 auto;color:var(--muted);
  transition:transform .2s var(--ease)}
details.karta[open] > summary .karta-ch{transform:rotate(180deg)}

/* ══════════════════════════ .oznam — HLÁSENIA ══════════════════════════
   Koniec olivových blokov. Farbu nesie 5px lišta + NADPIS; telo zostáva
   normálny --ink na 12–16 % nádychu (svetlo #efe6db, tma #3f3934).         */
.oznam{
  --s:var(--info-ink); --s-soft:var(--info-soft);
  margin:0 0 .85rem;padding:.9rem 1rem .9rem .95rem;
  /* Ľavá lišta nenesie text — smie byť sýta. Tmavý jantár ako lišta je
     presne tá hnedá škvrna, ktorú bolo treba odstrániť. */
  border-radius:16px;border:1px solid var(--line);border-left:5px solid var(--s-pruh,var(--s));
  background:var(--s-soft);
  color:var(--ink);
  font-size:.9375rem;line-height:1.45;
}
.oznam.je-ok  {--s:var(--ok-ink);   --s-soft:var(--ok-soft)}
.oznam.je-warn{--s:var(--warn-ink); --s-soft:var(--warn-soft); --s-pruh:var(--warn-bg)}
.oznam.je-bad {--s:var(--bad-ink);  --s-soft:var(--bad-soft)}
.oznam.je-info{--s:var(--info-ink); --s-soft:var(--info-soft)}
.oznam.je-nic {--s:var(--line-strong); --s-soft:var(--fill)}
.oznam-n{margin:0 0 .3rem;font-size:1rem;font-weight:800;letter-spacing:-.015em;color:var(--s)}
.oznam-t > :first-child{margin-top:0}
.oznam-t > :last-child{margin-bottom:0}
.oznam a{color:var(--s);font-weight:700;text-decoration:underline}

/* HLASNÝ variant — len tri prípady v celom portáli (bežiaca obnova hesla,
   roztrhnutá reťaz auditu, pozastavená firma). Plná stavová plocha.        */
.oznam.je-hlasny{border:0;padding:1rem 1.15rem;border-radius:var(--r-card);
  background:var(--info-bg);color:var(--info-on)}
.oznam.je-hlasny.je-ok  {background:var(--ok-bg);   color:var(--ok-on)}
.oznam.je-hlasny.je-warn{background:var(--warn-bg); color:var(--warn-on)}
.oznam.je-hlasny.je-bad {background:var(--bad-bg);  color:var(--bad-on)}
.oznam.je-hlasny.je-info{background:var(--info-bg); color:var(--info-on)}
.oznam.je-hlasny .oznam-n{color:inherit}
.oznam.je-hlasny a{color:inherit}
.oznam.je-hlasny .btn-solid,.oznam.je-hlasny .btn-danger{
  background:rgba(127,127,127,.25);color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}

/* ══════════════════════════ .pill — STAVOVÁ PILULKA ══════════════════════════
   Znak po znaku ten istý tvar ako .pill v Dokladoch (999px, .75rem, 800).  */
.pill{display:inline-flex;align-items:center;gap:.25rem;
  border-radius:var(--r-pill);padding:.2rem .6rem;
  font-size:.75rem;font-weight:800;white-space:nowrap;
  background:var(--fill);color:var(--ink-2)}
.pill svg{width:13px;height:13px;flex:0 0 auto}
.pill.je-ok  {background:var(--ok-soft);   color:var(--ok-ink)}
.pill.je-warn{background:var(--warn-soft); color:var(--warn-ink)}
.pill.je-bad {background:var(--bad-soft);  color:var(--bad-ink)}
.pill.je-info{background:var(--info-soft); color:var(--info-ink)}
.pill.je-nic {background:var(--fill);      color:var(--ink-2)}
.pill.je-plna.je-ok  {background:var(--ok-bg);   color:var(--ok-on)}
.pill.je-plna.je-warn{background:var(--warn-bg); color:var(--warn-on)}
.pill.je-plna.je-bad {background:var(--bad-bg);  color:var(--bad-on)}
.pill.je-plna.je-info{background:var(--info-bg); color:var(--info-on)}
.pill.s-bodkou::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:0 0 auto}

/* ══════════════════════════ .apka — DLAŽDICA APLIKÁCIE ══════════════════════════
   Odvodené z .ritem Dokladov, o stupeň menšie: 66px, 42px medailón, 5px ľavá
   lišta, gradient 90deg do 46 %, chevron, :active scale(.985).
   Farba = identita cieľovej aplikácie → dlaždica predpovedá obrazovku.     */
.apky{display:flex;flex-direction:column;gap:.6rem}
.apka{
  --s:var(--app-ina);
  display:flex;align-items:center;gap:.75rem;min-height:66px;padding:.6rem .8rem;
  border:1px solid var(--line);border-left:5px solid var(--s);border-radius:18px;
  background:var(--surface);                                   /* záloha */
  background:linear-gradient(90deg,color-mix(in srgb,var(--s) 9%,transparent),transparent 46%),var(--surface);
  color:var(--ink);text-decoration:none;
  box-shadow:var(--shadow-1),var(--shadow-2);
  transition:transform .12s ease,box-shadow .2s ease;
}
.apka:hover{transform:translateY(-2px);text-decoration:none;
  box-shadow:var(--shadow-1),0 18px 40px -18px rgba(16,20,40,.35)}
.apka:active{transform:scale(.985)}
.apka:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--focus)}

/* Známe aplikácie majú pevný odtieň = ich vlastný akcent.                  */
.apka[data-app="demo-app"]   {--s:var(--app-sklad)}
.apka[data-app="faktury-app"]{--s:var(--app-faktury)}
.apka[data-app="doklady-app"]{--s:var(--app-doklady)}
.apka[data-app="sprava"]     {--s:var(--app-sprava)}
.apka.je-sprava{--s:var(--app-sprava)}
/* Ľubovoľná NOVÁ aplikácia zaregistrovaná v /system dostane odtieň z tej
   istej 12-farebnej palety, akú používajú Doklady pre predajcov
   (grouping.ts PALETA). Server hašuje client_id na h0…h11 — pozri html.ts.
   Pásmo 175–200° v palete zámerne chýba: nová aplikácia sa nikdy nezlije
   s tyrkysovou Dokladov.                                                   */
.apka.h0 {--s:#b8281e} .apka.h1 {--s:#9e4410} .apka.h2 {--s:#815508}
.apka.h3 {--s:#5b6218} .apka.h4 {--s:#1c6e34} .apka.h5 {--s:#147155}
.apka.h6 {--s:#0f6299} .apka.h7 {--s:#1d4fc3} .apka.h8 {--s:#4d33cc}
.apka.h9 {--s:#9336b5} .apka.h10{--s:#a12b89} .apka.h11{--s:#b02770}
[data-theme="dark"] .apka.h0 {--s:#f0736a} [data-theme="dark"] .apka.h1 {--s:#f38749}
[data-theme="dark"] .apka.h2 {--s:#f4ae34} [data-theme="dark"] .apka.h3 {--s:#c6d449}
[data-theme="dark"] .apka.h4 {--s:#4ed075} [data-theme="dark"] .apka.h5 {--s:#41d2a7}
[data-theme="dark"] .apka.h6 {--s:#51aeec} [data-theme="dark"] .apka.h7 {--s:#7299f3}
[data-theme="dark"] .apka.h8 {--s:#9a89f0} [data-theme="dark"] .apka.h9 {--s:#ce87e8}
[data-theme="dark"] .apka.h10{--s:#ea7bd4} [data-theme="dark"] .apka.h11{--s:#eb6fb2}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .apka.h0 {--s:#f0736a}
  :root:not([data-theme="light"]) .apka.h1 {--s:#f38749}
  :root:not([data-theme="light"]) .apka.h2 {--s:#f4ae34}
  :root:not([data-theme="light"]) .apka.h3 {--s:#c6d449}
  :root:not([data-theme="light"]) .apka.h4 {--s:#4ed075}
  :root:not([data-theme="light"]) .apka.h5 {--s:#41d2a7}
  :root:not([data-theme="light"]) .apka.h6 {--s:#51aeec}
  :root:not([data-theme="light"]) .apka.h7 {--s:#7299f3}
  :root:not([data-theme="light"]) .apka.h8 {--s:#9a89f0}
  :root:not([data-theme="light"]) .apka.h9 {--s:#ce87e8}
  :root:not([data-theme="light"]) .apka.h10{--s:#ea7bd4}
  :root:not([data-theme="light"]) .apka.h11{--s:#eb6fb2}
}

.apka-i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:13px;color:var(--s);
  background:var(--fill);                                      /* záloha */
  background:color-mix(in srgb,var(--s) 12%,var(--surface));
  box-shadow:inset 0 0 0 1.5px var(--line);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--s) 32%,transparent)}
[data-theme="dark"] .apka-i{background:color-mix(in srgb,var(--s) 16%,var(--surface))}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .apka-i{background:color-mix(in srgb,var(--s) 16%,var(--surface))}
}
.apka-i svg{width:22px;height:22px}
.apka-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.apka-t strong{font-size:1rem;font-weight:700;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apka-s{font-size:.75rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{width:18px;height:18px;flex:0 0 auto;color:var(--muted);stroke-width:2.6}
/* Šípka na konci dlaždice. Bez pevného rozmeru by inline SVG narástlo
   do celej šírky karty — vlastná trieda, nie holé <svg>. */
.apka-ch{width:18px;height:18px;flex:0 0 auto;color:var(--muted);stroke-width:2.6}
@media (max-width:24rem){ .apka .pill{display:none} .apka-s{font-size:.75rem} }

/* ══════════════════════════ .btn — TLAČIDLÁ ══════════════════════════
   Kontrakt Dokladov prenesený celý; --accent vymenený za --brand.
   Žiadne priehľadné tlačidlá: akcia je plná značková plocha alebo plná
   tónovaná plocha s viditeľnou hranou — nikdy len nápis.                  */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--tap);padding:.9rem 1.15rem;
  border:0;border-radius:var(--r-btn);
  font-family:inherit;font-size:1.0625rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;
  text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s ease,background-color .2s ease,box-shadow .2s ease;
}
.btn .i,.btn svg{width:1.25rem;height:1.25rem;flex:0 0 auto}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px) scale(.99)}
/* fokus NIKDY nie je modrý na modrom — dvojitý prstenec cez pozadie */
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--focus)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;box-shadow:none;pointer-events:none}

.btn-primary{background:var(--brand);
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:var(--on-brand);box-shadow:var(--shadow-btn)}
.btn-primary:active{box-shadow:0 4px 12px -8px rgba(0,0,0,.5)}

.btn-solid{background:var(--fill);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-solid:active{background:var(--fill-press)}

/* tónové sekundárne — pre navigačné akcie, aby sekundár nebol sivá stena */
.btn-tonal{background:var(--brand-soft);color:var(--brand-ink);
  box-shadow:inset 0 0 0 1.5px var(--brand-ring)}
.btn-tonal:active{background:var(--brand-soft);filter:brightness(.96)}

.btn-danger{background:var(--bad-soft);color:var(--bad-ink);
  box-shadow:inset 0 0 0 2px var(--bad-ink)}
/* Plná červená znamená v tejto rodine „bod, z ktorého niet návratu"
   (v Dokladoch .btn-danger.is-confirm). Preto NIE je stavom :active. */
.btn-danger.je-potvrd{background:var(--bad-bg);color:var(--bad-on);box-shadow:none}

.btn-tichy{background:transparent;color:var(--muted);min-height:44px;padding:0 .75rem;
  font-size:.9375rem;font-weight:700}
.btn-tichy:hover{color:var(--ink);background:var(--fill)}
.btn-lg{min-height:var(--tap-lg);border-radius:22px;font-size:1.25rem;font-weight:800;
  letter-spacing:-.02em}
.btn-block{width:100%}

.passkey-btn{width:100%;min-height:var(--tap);display:inline-flex;align-items:center;
  justify-content:center;gap:.6rem;border:0;border-radius:var(--r-btn);cursor:pointer;
  font-family:inherit;font-size:1.0625rem;font-weight:700;
  background:var(--contrast);color:var(--contrast-ink);box-shadow:var(--shadow-1)}
.passkey-btn:hover{filter:brightness(1.12)}
.passkey-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--focus)}
.passkey-btn svg{width:20px;height:20px}

/* .rada = skupina akcií: na telefóne stĺpec, od 30rem riadok */
.rada{display:flex;flex-direction:column;gap:.55rem;margin:.85rem 0 0}
.rada form{margin:0;display:block;width:100%}
.rada .btn{width:100%}
@media (min-width:30rem){
  .rada{flex-direction:row;flex-wrap:wrap;align-items:stretch}
  .rada form{width:auto}
  .rada .btn{width:auto}
}

/* ══════════════════════════ FORMULÁRE ══════════════════════════ */
form.stack{display:flex;flex-direction:column;gap:.85rem;margin:0}
form.narrow{max-width:26rem}
.pole{display:flex;flex-direction:column;gap:.35rem;
  font-size:.875rem;font-weight:700;color:var(--ink-2)}
input,select,textarea{
  width:100%;min-height:var(--tap);padding:.85rem .95rem;
  border:1px solid var(--line-strong);border-radius:var(--r-field);
  background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:1rem;font-weight:600;   /* 16 px = iOS nezoomuje */
  accent-color:var(--brand);
  transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--muted);font-weight:500}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-soft)}
input:user-invalid{border-color:var(--bad-ink);box-shadow:0 0 0 4px var(--bad-soft)}
input[type="checkbox"]{width:1.25rem;height:1.25rem;min-height:0;padding:0;flex:0 0 auto}
.uzke{width:6.5rem}          /* nahrádza mŕtve style="width:5rem" */

/* Opätovné overenie heslom — vlastný tvar namiesto form.inline.
   Na telefóne stĺpec, od 30rem heslo + tlačidlo vedľa seba.               */
.overit{display:flex;flex-direction:column;gap:.55rem;margin:.85rem 0 0}
.overit .btn{width:100%}
@media (min-width:30rem){
  .overit{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
  .overit .pole{flex:1 1 11rem;min-width:11rem}
  .overit .btn{width:auto;flex:0 0 auto}
}

.volba{display:flex;align-items:flex-start;gap:.7rem;
  padding:.85rem .9rem;border-radius:16px;
  background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong);
  font-size:.9375rem;font-weight:500;cursor:pointer}
.volba input{margin:.1rem 0 0}
.volba .pod{display:block;margin-top:.15rem;color:var(--muted);font-size:.8125rem;line-height:1.35}
.volba:has(input:checked){background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.volba:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem}
.perm-check{display:flex;align-items:flex-start;gap:.65rem;
  min-height:44px;padding:.7rem .85rem;
  background:var(--surface-2);border-radius:var(--r-field);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:.875rem;font-weight:500;cursor:pointer}
.perm-check code{font-size:.75rem}
.perm-check:has(input:checked){background:var(--brand-soft);
  box-shadow:inset 0 0 0 1.5px var(--brand-ring);color:var(--brand-ink)}
.perm-app{border-top:1px solid var(--line);margin-top:.9rem;padding-top:.9rem}
.perm-app:first-of-type{border-top:0;margin-top:0;padding-top:0}
.perm-app-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.6rem}
.perm-app-head strong{font-size:.9375rem;font-weight:800}
.perm-app-head select{margin-left:auto;min-width:11rem;width:auto}
@media (max-width:26rem){ .perm-app-head select{margin-left:0;width:100%} }

/* ══════════════════════════ .tabulka ══════════════════════════
   Jeden markup, dve rozloženia, nula JavaScriptu. Do 46rem sa každý riadok
   stane kartou; hlavička sa skryje a názov stĺpca príde z data-l.        */
.tabulka{margin:0 0 .9rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabulka table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem}
.tabulka th{text-align:left;padding:.5rem .6rem;
  font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.tabulka td{padding:.75rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tabulka tr:last-child td{border-bottom:0}
.tabulka .pod{display:block;color:var(--muted);font-size:.8125rem}
.tabulka td.ua{color:var(--muted);font-size:.75rem;word-break:break-all}

@media (max-width:45.99rem){
  .tabulka{overflow:visible}
  .tabulka table,.tabulka tbody,.tabulka tr,.tabulka td{display:block;width:100%}
  .tabulka thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .tabulka tr{
    position:relative;overflow:hidden;
    margin:0 0 .55rem;padding:.5rem .9rem .55rem;
    border:1px solid var(--line);border-radius:18px;
    background:var(--surface);box-shadow:var(--shadow-1),var(--hrana)}
  /* Stav riadku = 3px HORNÝ pruh (tvarová gramatika), nie ľavá lišta.
     Bez :has() ostane riadok neutrálny — nič sa nerozbije.
     Poradie je dôležité: je-bad stojí posledné, aby najhorší stav vyhral. */
  .tabulka tr::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:var(--line-strong)}
  .tabulka tr:has(.pill.je-ok)::before{background:var(--ok-ink)}
  .tabulka tr:has(.pill.je-info)::before{background:var(--info-ink)}
  .tabulka tr:has(.pill.je-warn)::before{background:var(--warn-ink)}
  .tabulka tr:has(.pill.je-bad)::before{background:var(--bad-ink)}
  .tabulka td{display:flex;align-items:flex-start;justify-content:space-between;gap:.9rem;
    padding:.55rem 0;border-bottom:1px solid var(--line);text-align:right;
    /* Hodnota sa musí zalomiť: e-maily a názvy zariadení sú dlhšie než
       polovica telefónu a inak vytečú za okraj karty. */
    overflow-wrap:anywhere;min-width:0}
  .tabulka td::before{content:attr(data-l);flex:0 0 auto;max-width:7.5rem;
    font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);text-align:left;padding-top:.2rem}
  /* :empty na <td> z template literálu NIKDY nesedí (biele znaky), preto
     prázdnu bunku značkuje SERVER triedou .prazdna.                        */
  .tabulka td.prazdna{display:none}
  .tabulka td:last-child{border-bottom:0;padding-bottom:.15rem}
  .tabulka td .btn,.tabulka td form{width:auto}
  .tabulka .pod{text-align:right}
  .tabulka .rada{margin-top:.4rem;align-items:flex-end}
}
/* Veľmi široké diagnostické tabuľky (audit, systémové udalosti) sa
   nerozkladajú — tam má vodorovné porovnanie zmysel. */
.tabulka.siroka table{min-width:44rem}
@media (max-width:45.99rem){
  .tabulka.siroka{overflow-x:auto}
  .tabulka.siroka table,.tabulka.siroka tbody,.tabulka.siroka tr,.tabulka.siroka td{display:revert}
  .tabulka.siroka thead{position:static;width:auto;height:auto;clip-path:none}
  .tabulka.siroka tr::before{content:none}
  .tabulka.siroka td::before{content:none}
  .tabulka.siroka td{text-align:left}
}

/* ══════════════════════════ .tajne — JEDNORAZOVÉ TAJOMSTVÁ ══════════════════════════ */
.tajne{margin:0 0 1rem;padding:1.05rem 1.05rem 1.1rem;
  border-radius:var(--r-card);
  border:1px solid var(--line);border-left:5px solid var(--warn-ink);
  background:var(--surface);
  box-shadow:var(--shadow-1),var(--shadow-2),var(--hrana)}
.tajne-h{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 .35rem}
.tajne-h h3{flex:1;min-width:8rem;margin:0;font-size:1rem;font-weight:800;letter-spacing:-.015em}
.tajne-h svg{width:20px;height:20px;flex:0 0 auto;color:var(--warn-ink)}
.tajne-t{margin:0 0 .8rem;color:var(--muted);font-size:.875rem;line-height:1.4}
.kody{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.45rem}
.kody code{display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:.4rem .5rem;border-radius:12px;
  background:var(--surface-2);color:var(--ink);       /* 15,30:1 / 12,95:1 */
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  font-size:.9375rem;font-weight:600;letter-spacing:.04em;
  -webkit-user-select:all;user-select:all}   /* jeden ťuk = celý kód označený */
.kody.je-jeden{grid-template-columns:1fr}
.kody.je-jeden code{min-height:64px;font-size:1.375rem;font-weight:700;letter-spacing:.08em}
.qr{border:1px solid var(--line);border-radius:14px;padding:6px;background:#fff;
  display:block;margin:.6rem 0}

/* ══════════════════════════ .prazdno — PRÁZDNY STAV ══════════════════════════
   Presne .empty z Dokladov (2,6rem / .5rem / 44px), ale ikona je značková,
   nie sivá — prázdna obrazovka nemá byť to najsmutnejšie v produkte.       */
.prazdno{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:2.6rem 1.2rem;text-align:center;color:var(--muted);
  background:var(--surface-2);border:2px dashed var(--line-strong);
  border-radius:var(--r-card)}
.prazdno svg{width:44px;height:44px;color:var(--brand-ink)}
.prazdno b{font-size:1.0625rem;font-weight:800;color:var(--ink)}
.prazdno span{font-size:.875rem;max-width:32ch;line-height:1.4}
.prazdno .btn{margin-top:.6rem;max-width:22rem;width:100%}

/* ══════════════════════════ PRIHLASOVACIE STRÁNKY ══════════════════════════ */
.auth{display:flex;flex-direction:column;align-items:center;
  margin:2.4rem auto 1rem;width:min(25.5rem,100%)}
.auth-znak{display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:22px;
  background:var(--brand-soft);color:var(--brand-ink);
  box-shadow:inset 0 0 0 1.5px var(--brand-ring),var(--shadow-1)}
.auth-znak svg{width:34px;height:34px}
.auth h1{margin:1rem 0 .3rem;font-size:1.6rem;text-align:center;letter-spacing:-.03em}
.auth-sub{margin:0 0 1.5rem;color:var(--muted);text-align:center;font-size:.9375rem}
.auth-karta{width:100%;padding:1.5rem 1.25rem 1.35rem;
  display:flex;flex-direction:column;gap:.9rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-1),var(--shadow-2),var(--hrana)}
.auth-karta h1{margin:0 0 .2rem;font-size:1.5rem;text-align:left}
.auth-karta form{margin:0}
.auth-karta .btn{width:100%}
.auth-pata{margin:1.4rem 0 0;max-width:26rem;text-align:center;
  font-size:.8125rem;color:var(--muted);line-height:1.45}
.deliaca{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.8rem}
.deliaca::before,.deliaca::after{content:"";flex:1;height:1px;background:var(--line)}
.passkey-msg{font-size:.875rem;margin:0;padding:.6rem .85rem;border-radius:12px;
  background:var(--bad-soft);color:var(--bad-ink);font-weight:600}
.passkey-msg.ok{background:var(--ok-soft);color:var(--ok-ink)}

/* ══════════════════════════ RÔZNE ══════════════════════════ */
.mail-body{white-space:pre-wrap;font-family:inherit;font-size:.875rem;
  background:var(--surface-2);border-radius:12px;padding:.9rem 1rem;margin:.4rem 0 0}
.notice{margin:.5rem 0;line-height:1.45}
.pod{color:var(--muted);font-size:.8125rem}

/* ══════════════════════════ SPÄTNÁ KOMPATIBILITA ══════════════════════════
   Aby čiastočne zmigrovaný html.ts nikdy nevyzeral rozbito. Po dokončení
   migrácie (kapitola 2) sa tento blok DÁ ZMAZAŤ — ale až vtedy.           */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.55rem;margin:0 0 1.1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1rem;box-shadow:var(--shadow-1),var(--shadow-2),var(--hrana);
  display:flex;flex-direction:column;gap:.2rem}
.card strong{font-size:1.0625rem;letter-spacing:-.015em}
.card strong.big-num{font-size:clamp(1.7rem,8vw,2.15rem);font-weight:800;letter-spacing:-.04em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.card strong.origin{font-size:.875rem;font-weight:600;line-height:1.4}
.card > .muted{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.flash{margin:0 0 .85rem;padding:.9rem 1rem .9rem .95rem;border-radius:16px;
  border:1px solid var(--line);border-left:5px solid var(--info-ink);
  background:var(--info-soft);color:var(--ink);font-size:.9375rem;font-weight:600}
.flash.ok{border-left-color:var(--ok-ink);background:var(--ok-soft)}
.flash.warn{border-left-color:var(--warn-ink);background:var(--warn-soft)}
.flash.error{border-left-color:var(--bad-ink);background:var(--bad-soft)}
.flash a{color:inherit;text-decoration:underline;font-weight:700}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.05rem;margin:0 0 .85rem;box-shadow:var(--shadow-1),var(--shadow-2),var(--hrana)}
.panel.warn{border-left:5px solid var(--warn-ink);background:var(--warn-soft);color:var(--ink)}
.panel.warn h3{color:var(--warn-ink);margin-top:0}
.badge{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:.2rem .6rem;
  font-size:.75rem;font-weight:800;white-space:nowrap;background:var(--fill);color:var(--ink-2)}
.badge.ok{background:var(--ok-soft);color:var(--ok-ink)}
.badge.danger{background:var(--bad-soft);color:var(--bad-ink)}
button:not(.btn):not(.tema):not(.passkey-btn){
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--tap);padding:.9rem 1.15rem;border:0;border-radius:var(--r-btn);
  font-family:inherit;font-size:1.0625rem;font-weight:700;cursor:pointer;
  background:var(--brand);background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:var(--on-brand);box-shadow:var(--shadow-btn)}
button.ghost:not(.btn){background:var(--fill);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line-strong)}
button.danger:not(.btn){background:var(--bad-soft);color:var(--bad-ink);
  box-shadow:inset 0 0 0 2px var(--bad-ink)}
button.ghost.danger:not(.btn){background:var(--bad-soft);color:var(--bad-ink);
  box-shadow:inset 0 0 0 2px var(--bad-ink)}
form.inline{display:flex;flex-direction:column;gap:.55rem;align-items:stretch;margin:.6rem 0 0}
@media (min-width:30rem){ form.inline{flex-direction:row;flex-wrap:wrap;align-items:center}
  form.inline input{width:auto;flex:1 1 11rem} form.inline button{flex:0 0 auto} }
.row{display:flex;flex-direction:column;gap:.55rem;margin-top:.6rem}
@media (min-width:30rem){ .row{flex-direction:row;flex-wrap:wrap} }
.auth-card.solo{width:min(25.5rem,100%);margin:2.4rem auto;padding:1.5rem 1.25rem 1.35rem;
  display:flex;flex-direction:column;gap:.9rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-1),var(--shadow-2),var(--hrana)}
.admin-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.8rem}

/* ── Prevádzková pripravenosť ─────────────────────────────────────────────
   Zoznam vecí, ktoré nič nerozbijú a nikde nesvietia — a práve preto
   patria hore a s dôvodom, nie medzi poznámky pod čiarou. */
.pripravenost{margin:0 0 1.2rem}
.pripravenost h2{margin:0 0 .5rem;font-size:1rem;letter-spacing:-.01em}
.pripravenost ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pripravenost li{
  display:flex;flex-direction:column;gap:.2rem;
  padding:.7rem .85rem;border-radius:10px;
  background:var(--surface-2,#f6f7f9);border-left:3px solid var(--muted,#6b7280);
}
.pripravenost li.je-blok{border-left-color:var(--bad,#b3261e)}
.pripravenost li.je-vsimnut{border-left-color:var(--warn,#a1670a)}
.pripravenost strong{font-size:.9375rem}
.pripravenost span{font-size:.875rem;color:var(--muted,#6b7280);max-width:70ch}
.pripravenost code{
  font-size:.8125rem;margin-top:.15rem;
  overflow-wrap:anywhere;color:var(--ink,#111);opacity:.85;
}
.admin-head h1{margin:0}
.btn-link{margin-left:auto;font-weight:700}

/* ══════════════════════════ POHYB ══════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Prehliadače bez color-mix (Safari < 16.2) dostanú plné plochy — každá
   deklarácia s color-mix má vyššie svoju platnú zálohu, takže tu netreba nič
   ďalšie. Tento @supports je len poistka pre gradientové nádychy.          */
@supports not (background:color-mix(in srgb,red 10%,white)){
  .apka{background:var(--surface)}
}

/* ══════════════════════════ STOLNÝ POČÍTAČ ══════════════════════════
   Na širokej obrazovke sa obsah nemá naťahovať do jedného dlhého stĺpca:
   dlaždice idú do radu, aplikácie a karty do dvoch stĺpcov. Zvislé
   rolovanie sa tým skráti na tretinu. */
@media (min-width:56rem){
  main{padding:1.6rem 1.2rem 0}
  h1{font-size:2.25rem}

  .pozdrav{font-size:1.85rem}

  /* Aplikácie vedľa seba. */
  .apky{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}

  /* Karty do dvoch stĺpcov; tie s tabuľkou či formulárom cez celú šírku,
     aby sa v polovičnej šírke nelámali na kašu. */
  .karty2{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;align-items:start}
  .karta{margin-bottom:0}

  .oznam{padding:1.05rem 1.2rem}
  .tabulka table{font-size:.9375rem}
}

@media (min-width:76rem){
  main{width:min(72rem,100%)}
}

/* ════════════════════════════════════════════════════════════════════════════
   /security — LISTINA. Hárok účtu.
   Pripája sa na KONIEC tohto súboru (za blok „STOLNÝ POČÍTAČ").
   Blok je čisto ADITÍVNY: každý selektor je pod triedou .lst*, ktorá inde
   v portáli neexistuje, takže /dashboard, /licenses, /admin ani /system sa
   nemenia ani o pixel. ŽIADNY nový farebný žetón — všetko beží na
   existujúcich (--surface, --ink, --muted, --line, --brand, --warn-*, …),
   takže tento blok NEMÁ čo písať do tmavých blokov: prepínajú sa samé.
   NEPOUŽÍVA: .karta, .pill, .stav, .tabulka, .prazdno, .tajne, .panel, .pas.
   POUŽÍVA nezmenené: .btn*, .rada, input/label, .kody, .qr, .passkey-msg,
   .hint, .muted, --tap, --ease, --hlava-h.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── HÁROK ───────────────────────────────────────────────────────────────
   Jediná plocha stránky. Na telefóne prekrvácia cez vodorovné odsadenie
   <main> až po okraj obrazovky. Žiadny --r-card, žiadny tieň: toto NIE JE
   karta, je to list papiera.
   POZOR: overflow MUSÍ zostať visible — inak zomrú lepivé nadpisy sekcií. */
.lst{
  --lst-pad:1.15rem;
  --lst-riadok:var(--tap);
  position:relative;
  overflow:visible;
  background:var(--surface);
  border-block:1px solid var(--line);
  margin-block:1rem 0;
  margin-inline:calc(-1 * max(.85rem,env(safe-area-inset-left,0px)))
               calc(-1 * max(.85rem,env(safe-area-inset-right,0px)));
  padding-block:0 2.4rem;
  padding-inline:max(var(--lst-pad),env(safe-area-inset-left,0px))
                 max(var(--lst-pad),env(safe-area-inset-right,0px));
}
/* POZOR na bare-element pravidlá hárku (h1{margin:.2rem 0 .8rem},
   h2{margin:1.6rem 0 .7rem}, p{margin:0 0 .8rem}): každý nadpis a odstavec
   listiny má preto vlastnú triedu alebo rodičovský selektor s vyššou
   špecificitou. ŽIADNY plošný reset typu `.lst h1{…}` sa sem pridať NESMIE —
   porazil by triedy komponentov (0,1,1 > 0,1,0). */

/* Pás, ktorý má siahať po okraj hárku (hlásenia, jednorazové odhalenia). */
.lst-bleed{
  margin-inline:calc(-1 * max(var(--lst-pad),env(safe-area-inset-left,0px)))
               calc(-1 * max(var(--lst-pad),env(safe-area-inset-right,0px)));
  padding-inline:max(var(--lst-pad),env(safe-area-inset-left,0px))
                 max(var(--lst-pad),env(safe-area-inset-right,0px));
}

/* ── HLAVIČKA LISTINY — jediná 2px linka --ink na začiatku dokumentu ───── */
.lst-hlava{padding:1.55rem 0 1.1rem;margin:0 0 1.25rem;border-bottom:2px solid var(--ink)}
.lst-oko{font-size:.6875rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);line-height:1.2}
.lst-h1{margin:.4rem 0 0;color:var(--ink);
  font-size:clamp(2.1rem,11vw,3.2rem);font-weight:800;letter-spacing:-.045em;line-height:.95}
.lst-verdikt{margin:.8rem 0 0;max-width:40ch;color:var(--ink-2);
  font-size:1.0625rem;font-weight:500;line-height:1.45}
.lst-verdikt strong{color:var(--warn-ink);font-weight:700}
.lst-verdikt strong.je-riz{color:var(--bad-ink)}

/* ── PÁSY HLÁSENÍ ────────────────────────────────────────────────────────
   Tichý pás = 2px stavová linka nad plochou --surface-2 (úspech, info).
   Hlasný pás = plná stavová plocha; len chyba a bežiaca obnova hesla.
   Je to tá istá dvojica žetónov, akú má .oznam.je-hlasny — nový kontrastný
   prípad nevzniká.                                                        */
.lst-pas{
  --s-ink:var(--info-ink);
  /* POZOR: margin-BLOCK, nikdy skratka margin — inline záporné odsadenie
     z .lst-bleed sa nesmie prepísať, inak pás prestane krvácať po okraj. */
  margin-block:0 1.1rem;padding-block:.9rem 1rem;
  border-top:2px solid var(--s-ink);border-bottom:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);
  font-size:.9375rem;line-height:1.45}
.lst-pas.je-ok  {--s-ink:var(--ok-ink)}
.lst-pas.je-warn{--s-ink:var(--warn-ink)}
.lst-pas.je-bad {--s-ink:var(--bad-ink)}
.lst-pas.je-info{--s-ink:var(--info-ink)}
.lst-pas-h{display:flex;align-items:flex-start;gap:.45rem;margin:0 0 .35rem;
  color:var(--s-ink);font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.lst-pas-h svg{width:20px;height:20px;flex:0 0 auto;margin-top:.1rem;stroke-width:2.3}
.lst-pas p{margin:0 0 .85rem;max-width:62ch;line-height:1.45}
.lst-pas form{margin:0}
.lst-pas .btn{width:100%}
.lst-pas > :last-child{margin-bottom:0}
@media (min-width:34rem){ .lst-pas .btn{width:auto} }

.lst-pas.je-hlasny{
  --s-bg:var(--bad-bg); --s-on:var(--bad-on);
  border-color:transparent;background:var(--s-bg);color:var(--s-on)}
.lst-pas.je-hlasny.je-warn{--s-bg:var(--warn-bg); --s-on:var(--warn-on)}
.lst-pas.je-hlasny.je-bad {--s-bg:var(--bad-bg);  --s-on:var(--bad-on)}
.lst-pas.je-hlasny .lst-pas-h{color:inherit}
.lst-pas.je-hlasny .btn{background:rgba(127,127,127,.25);color:inherit;
  box-shadow:inset 0 0 0 1.5px currentColor}   /* 1,5px — 2px prstenec je vyhradený pre .lst-zamok */
/* Dva pásy pod sebou sú JEDNA oblasť, nie dva plávajúce prúžky. */
.lst-pas + .lst-pas{margin-block-start:-1.1rem}

/* ── JEDNORAZOVÉ ODHALENIE — nahrádza tajne() ────────────────────────────
   Dve 2px jantárové linky cez celý hárok. ŽIADNY jantárový podklad:
   sýty jantár na veľkej ploche je presne tá hnedá škvrna, ktorú hárok
   štýlov (r. 50–52) zakazuje. Mriežka .kody sa preberá nezmenená.        */
.lst-odhal{margin-block:0 1.25rem;padding-block:1.05rem 1.15rem;
  border-block:2px solid var(--warn-ink);background:var(--surface)}
.lst-odhal-oko{display:flex;align-items:center;gap:.4rem;margin:0 0 .4rem;
  color:var(--warn-ink);font-size:.6875rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.2}
.lst-odhal-oko svg{width:14px;height:14px;flex:0 0 auto;stroke-width:2.4}
.lst-odhal h2{margin:0 0 .3rem;color:var(--ink);
  font-size:1.125rem;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.lst-odhal p{margin:0 0 .9rem;max-width:62ch;color:var(--ink-2);
  font-size:.875rem;line-height:1.45}

/* ── REGISTER ────────────────────────────────────────────────────────────
   Telefón: zalamovaný pás pod hlavičkou — všetkých päť položiek je vidno
   naraz, nič sa neroluje nabok (stránka sa vodorovne nikdy nehýbe).
   Počítač: TEN ISTÝ markup sa stane lepivým marginálnym stĺpcom vľavo
   s bodkovaným vodidlom. Jediný markup, dve rozloženia, nula JavaScriptu. */
.lst-index{
  display:flex;flex-wrap:wrap;column-gap:1.15rem;row-gap:0;margin:0 0 1.35rem;
  border-bottom:1px solid var(--line)}
.lst-index-h{display:none}
.lst-ix{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:.12rem;
  min-height:var(--tap);padding:.3rem 0 .55rem;
  color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.lst-ix:hover{text-decoration:none;color:var(--brand-ink)}
.lst-ix:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.lst-ix-r{display:flex;align-items:baseline;gap:.4rem;min-width:0}
.lst-ix-n{flex:0 0 auto;color:var(--brand-ink);
  font-size:.6875rem;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.lst-ix-t{font-size:.9375rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.lst-ix-l{display:none}
.lst-ix-v{color:var(--muted);font-size:.75rem;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lst-ix-v.je-poz{color:var(--warn-ink)}
.lst-ix-v.je-riz{color:var(--bad-ink)}
.lst-ix .lst-ix-v.je-riz{font-weight:800}

/* ── SEKCIA + LEPIVÝ NADPIS (pôžička .dayhead z Dokladov) ───────────────
   z-index 3 je pod header (30) aj pod .ucet-pop (40) — ponuka účtu
   zostáva navrchu.                                                        */
.lst-telo{min-width:0}
.lst-sek{margin:0 0 2.2rem;scroll-margin-top:calc(var(--hlava-h) + .75rem)}
.lst-sek:last-child{margin-bottom:0}
.lst-sek-h{position:sticky;top:var(--hlava-h);z-index:3;
  display:flex;align-items:baseline;gap:.6rem;margin:0;padding:.85rem 0 .5rem;
  background:var(--surface);border-bottom:1px solid var(--line-strong)}
.lst-sek-n{flex:0 0 auto;color:var(--brand-ink);
  font-size:.8125rem;font-weight:800;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.lst-sek-t{flex:1;min-width:0;color:var(--ink);
  font-size:1.125rem;font-weight:800;letter-spacing:-.025em}
.lst-sek-lead{margin:.6rem 0 .1rem;max-width:62ch;color:var(--muted);
  font-size:.875rem;font-weight:500;line-height:1.45}

/* ── RIADOK LISTINY ─────────────────────────────────────────────────────
   Atóm stránky: vľavo názov, vpravo SÚČASNÁ HODNOTA slovom.
   Rozbaľovací riadok je <details>, ktorého <summary> je ten istý riadok —
   citlivá akcia sa otvára presne pod svojím názvom, stránka neskáče.     */
.lst-riadky{display:flex;flex-direction:column}
.lst-riadky > *{border-bottom:1px solid var(--line)}
.lst-riadky > *:last-child{border-bottom:0}

.lst-r,
.lst-rd > summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  column-gap:1rem;min-height:var(--lst-riadok);padding:.7rem 0}
.lst-rd{display:block;position:relative;padding:0}
.lst-rd > summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lst-rd > summary::-webkit-details-marker{display:none}
.lst-rd > summary::marker{content:""}
.lst-rd > summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:10px}
/* Otvorený riadok nesie 2px modrú vetvu v ľavom okraji. Kreslí sa
   ABSOLÚTNE, nie záporným odsadením — inak by sa roztrhal systém vlasoviek
   a pod lepivým nadpisom by presvitala. */
.lst-rd[open]::before{content:"";position:absolute;left:-.72rem;top:0;bottom:0;
  width:2px;border-radius:2px;background:var(--brand)}
.lst-rd[open] > summary .lst-r-n{color:var(--brand-ink)}

.lst-r-n{min-width:0;color:var(--ink);
  font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.lst-r-p{display:block;margin-top:.2rem;color:var(--muted);
  font-size:.8125rem;font-weight:500;line-height:1.35}
.lst-rd[open] > summary .lst-r-p{color:var(--muted)}
.lst-r-v{justify-self:end;display:inline-flex;align-items:center;gap:.35rem;
  color:var(--ink);text-align:right;
  font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums}
.lst-r-v.je-poz{color:var(--warn-ink)}
.lst-r-v.je-riz{color:var(--bad-ink)}
.lst-r-v.je-ticho{color:var(--muted);font-weight:600}
.lst-r-zn{width:15px;height:15px;flex:0 0 auto;stroke-width:2.4}
.lst-r-ch{width:16px;height:16px;flex:0 0 auto;color:var(--muted);stroke-width:2.6;
  transition:transform .2s var(--ease)}
.lst-rd[open] > summary .lst-r-ch{transform:rotate(90deg)}

.lst-v{display:flex;flex-direction:column;gap:.9rem;padding:.1rem 0 1.2rem}
.lst-v p{margin:0;max-width:62ch;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.lst-v p.lst-tichy,.lst-pozn p.lst-tichy{color:var(--muted);font-size:.875rem}
.lst-v form{margin:0}
.lst-v > form > .btn{width:100%}
@media (min-width:34rem){ .lst-v > form > .btn{width:auto} }

/* ── PÁS OPÄTOVNÉHO OVERENIA HESLOM ─────────────────────────────────────
   JEDINÝ prvok na hárku s 2px prstencom — prstenec tu znamená
   „zastav sa a potvrď". Nič iné na tejto stránke 2px prstenec nepoužíva.
   Prstenec je PLNÝ --warn-ink: 6,51:1 v svetle, 11,07:1 v tme, čiže hlboko
   nad minimom 3:1 pre netextový prvok (WCAG 1.4.11).
   --warn-soft ako výplň je ten istý 14/16 % nádych, aký má .oznam.je-warn. */
.lst-zamok{display:flex;flex-direction:column;gap:.55rem;margin:0;
  padding:.85rem .95rem 1rem;border-radius:var(--r-field);
  background:var(--warn-soft);box-shadow:inset 0 0 0 2px var(--warn-ink)}
.lst-zamok-h{display:flex;align-items:center;gap:.4rem;margin:0;color:var(--warn-ink);
  font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.lst-zamok-h svg{width:14px;height:14px;flex:0 0 auto;stroke-width:2.4}
.lst-zamok-p{margin:0;color:var(--ink-2);font-size:.8125rem;line-height:1.4}
.lst-pole{display:block;margin:0;color:var(--ink-2);font-size:.8125rem;font-weight:700}
.lst-zamok .btn{width:100%}
.lst-form{display:flex;flex-direction:column;gap:.55rem;margin:0}
.lst-form > .btn{width:100%}
@media (min-width:34rem){
  .lst-zamok:not(.je-stlpec){flex-direction:row;flex-wrap:wrap;align-items:center;
    column-gap:.7rem;row-gap:.5rem}
  .lst-zamok:not(.je-stlpec) .lst-zamok-h,
  .lst-zamok:not(.je-stlpec) .lst-zamok-p{flex:1 0 100%}
  .lst-zamok:not(.je-stlpec) .lst-pole{flex:0 0 auto}
  .lst-zamok:not(.je-stlpec) input{flex:1 1 11rem;min-width:10rem;width:auto}
  .lst-zamok:not(.je-stlpec) .btn{width:auto;flex:0 0 auto}
  .lst-zamok.je-stlpec{max-width:27rem}
  .lst-form{max-width:27rem}
  .lst-form > .btn{width:auto;align-self:flex-start}
}

/* ── ZÁZNAMY — nahrádzajú všetky štyri <table class="tabulka"> ──────────
   Čiarkovaná vlasovka odlíši záznam od riadka listiny: dva stupne
   hierarchie bez jediného rámu. Rovnaké na 375 px aj na 1440 px.        */
.lst-zaznamy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lst-zaznam{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  column-gap:.9rem;row-gap:.3rem;padding:.8rem 0;border-top:1px dashed var(--line-strong)}
.lst-zaznam:first-child{border-top:0;padding-top:.1rem}
.lst-z-n{min-width:0;color:var(--ink);font-size:.9375rem;font-weight:700;
  letter-spacing:-.01em;overflow-wrap:anywhere}
.lst-z-teraz{justify-self:end;color:var(--brand-ink);font-size:.625rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;align-self:center}
.lst-z-m{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.1rem .9rem;
  color:var(--muted);font-size:.75rem;line-height:1.5;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.lst-z-m b{font-weight:700;color:var(--ink-2)}
.lst-z-a{grid-column:2;grid-row:1;justify-self:end;margin:0}

/* Malé tónované rizikové tlačidlo v zázname. Nie priehľadné — plná tónovaná
   plocha s viditeľnou hranou, presne ako káže kontrakt tlačidiel domu. */
.lst .lst-akcia{min-height:44px;padding:0 .85rem;border-radius:12px;
  font-size:.875rem;font-weight:700;
  background:var(--bad-soft);color:var(--bad-ink);box-shadow:inset 0 0 0 1.5px var(--bad-ink)}

/* Druhé (a posledné) otvorenie: nebezpečná akcia jedného záznamu. */
.lst-mini{grid-column:1/-1;margin:.1rem 0 0}
.lst-mini > summary{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;
  list-style:none;cursor:pointer;color:var(--bad-ink);font-size:.875rem;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
.lst-mini > summary::-webkit-details-marker{display:none}
.lst-mini > summary::marker{content:""}
.lst-mini > summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.lst-mini[open] > summary{color:var(--muted);text-decoration:none}
.lst-mini .lst-zamok{margin:.1rem 0 .5rem}

/* ── TICHÝ PRÁZDNY STAV — nikdy prerušovaný rám, len jedna veta ─────────── */
.lst-nic{display:flex;flex-direction:column;gap:.2rem;margin:0;padding:.9rem 0 1.1rem;
  max-width:52ch;color:var(--muted);font-size:.9375rem;line-height:1.45}
.lst-nic b{color:var(--ink);font-size:1rem;font-weight:700;letter-spacing:-.01em}
.lst-nic a{font-weight:700}

/* ── TICHÁ POZNÁMKA vo výsuve (vysvetlenie IP adresy) ──────────────────── */
.lst-pozn{--s-ink:var(--info-ink);
  display:flex;align-items:flex-start;gap:.6rem;margin:0;padding:.85rem .9rem;
  border-radius:var(--r-field);background:var(--fill);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink);font-size:.9375rem;line-height:1.45}
.lst-pozn.je-warn{--s-ink:var(--warn-ink)}
.lst-pozn > svg{width:19px;height:19px;flex:0 0 auto;margin-top:.1rem;
  color:var(--s-ink);stroke-width:2.4}
.lst-pozn > div{min-width:0}
.lst-pozn p{margin:0 0 .5rem;max-width:62ch}
.lst-pozn p:last-child{margin:0}
.lst-pozn b{color:var(--s-ink);font-weight:800}

/* ── SPÁROVANIE AUTENTIFIKAČNEJ APLIKÁCIE ──────────────────────────────── */
.lst-qr{display:flex;flex-direction:column;gap:1rem;margin:0}
.lst-qr .qr{margin:0;flex:0 0 auto;width:180px;height:180px}
.lst-tajomstvo{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.lst-tajomstvo span{color:var(--muted);font-size:.625rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase}
.lst-tajomstvo code{display:block;padding:.75rem .85rem;border-radius:var(--r-field);
  background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);
  font-size:.9375rem;font-weight:600;letter-spacing:.08em;word-break:break-all;
  -webkit-user-select:all;user-select:all}
.lst-kod{display:flex;flex-direction:column;gap:.5rem;margin:0}
.lst-kod input{max-width:11rem;font-size:1.25rem;font-weight:700;
  letter-spacing:.14em;font-variant-numeric:tabular-nums}
.lst-kod .btn{width:100%}
@media (min-width:34rem){
  .lst-qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 1.3rem;align-items:start}
  .lst-qr .qr{grid-row:1/3}
  .lst-kod .btn{width:auto;align-self:flex-start}
}

/* ── ZÁVER LISTINY — tá istá 2px linka --ink, akou dokument začal ───────── */
.lst-pata{margin:2.4rem 0 0;padding:1.4rem 0 0;border-top:2px solid var(--ink);
  scroll-margin-top:calc(var(--hlava-h) + .75rem)}
.lst-pata h2{margin:0 0 .45rem;color:var(--ink);
  font-size:1.125rem;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.lst-pata p{margin:0 0 1rem;max-width:62ch;color:var(--muted);
  font-size:.875rem;line-height:1.5}
.lst-pata .rada{margin:0}

/* ── STOLNÝ POČÍTAČ: dokument s marginálnym registrom ──────────────────── */
@media (min-width:56rem){
  .lst{
    --lst-pad:2.2rem;
    width:min(66rem,100%);margin-inline:auto;
    border:1px solid var(--line);border-radius:6px;
    padding-block:0 3rem;
    display:grid;grid-template-columns:15rem minmax(0,1fr);
    column-gap:3rem;align-items:start;
  }
  .lst-hlava,.lst > .lst-bleed,.lst-pata{grid-column:1 / -1}
  .lst-index{grid-column:1;align-self:start}
  .lst-telo{grid-column:2}

  .lst-hlava{padding-top:2.2rem}
  .lst-h1{font-size:3.2rem}

  .lst-index{position:sticky;top:calc(var(--hlava-h) + 1.3rem);
    flex-direction:column;flex-wrap:nowrap;column-gap:0;margin:0;border-bottom:0}
  .lst-index-h{display:block;margin:0 0 .3rem;
    font-size:.625rem;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);line-height:1.2}
  .lst-ix{flex-direction:row;align-items:baseline;gap:.5rem;min-height:40px;padding:0}
  .lst-ix-r{flex:0 0 auto}
  .lst-ix-l{display:block;flex:1 1 auto;min-width:1.25rem;align-self:center;
    border-bottom:1px dotted var(--line-strong)}
  .lst-ix-v{flex:0 0 auto;max-width:8.5rem;overflow:hidden;text-overflow:ellipsis}
  .lst-ix:hover .lst-ix-l{border-bottom-color:var(--brand-ring)}
}
@media (min-width:76rem){
  .lst{grid-template-columns:16rem minmax(0,1fr);column-gap:3.5rem}
}