/*
 * LUMA 3D — spoločná 3D vrstva identity pre celú rodinu appiek.
 *
 * Jazyk rozcestníka iLuma a webu lumacreative (17. 10. 2026): nočná scéna
 * #070a10 s modrou hmlovinou a izometrickou mriežkou, tichý hviezdny prach za
 * obsahom, 3D znak a nápis LUMA Creative písmom Ubuntu, karty a dlaždice ako
 * 3D dosky (sklenený vrch, svetlá hrana, modrá stena dole, tieň do priestoru),
 * mono štítky „■ …", modré tlačidlá so žiarou a odznak AI.
 *
 * ZAPNUTIE (podrobne v iTask/docs/3d-identita.md):
 *   <head>  luma-3d-start.js (namiesto tema-start.js) → <html data-luma3d data-tema="tmava">
 *           pisma.css → luma-identita.css → styles.css appky → luma-3d.css (POSLEDNÝ)
 *   <body>  luma-hviezdy.js pred app.js; značka cez LUMA.znacka3d()
 * Všetko je pod `html[data-luma3d]`: kým appka nemá štartovací skript, súbor
 * nič nezmení. Prefix zároveň zvyšuje váhu selektorov, takže vrstva prebije
 * štýly appky aj `!important` z vrstvy 2027 v luma-identita.css bez toho,
 * aby appka musela čokoľvek mazať.
 *
 * TÉMA: tmavá 3D je predvolená. Svetlá (`data-tema="svetla"`, alebo `auto`
 * pri svetlom systéme) mení len tokeny nižšie — komponenty sú napísané raz.
 * Bočný panel, mobilná lišta a toasty ostávajú tmavé v oboch témach.
 *
 * VÝKON: animuje sa len transform/translate a opacity, nič neposúva layout.
 * Žiadny backdrop-filter — nad animovaným plátnom s hviezdami by ho prehliadač
 * prepočítaval každú snímku. Riadky tabuliek nemajú tiene ani filtre, len
 * linku a hover farbu. `prefers-reduced-motion` vypne pohyb úplne.
 *
 * ZDROJ PRAVDY je `iTask/shared/`. Do appiek sa kopíruje skriptom
 * `iTask/scripts/sync-shared.sh` — needituj kópie, prepíšu sa.
 */

/* =====================================================================
   1. TOKENY — tmavá 3D (predvolená)
   ===================================================================== */

:root[data-luma3d] {
  --l3-hviezdy: 1;                 /* luma-hviezdy.js beží len pri 1 */

  --l3-font-nadpis: "Ubuntu", "Ubuntu fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --l3-font-text: "DM Sans", "DM Sans fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --l3-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --l3-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* scéna */
  --l3-noc: #070a10;
  --l3-hmlovina:
    radial-gradient(1100px 620px at 76% -8%, rgba(21, 101, 192, 0.2), transparent 70%),
    radial-gradient(900px 600px at -10% 45%, rgba(30, 136, 229, 0.07), transparent 70%),
    radial-gradient(1200px 380px at 50% 112%, rgba(30, 136, 229, 0.12), transparent 70%);
  --l3-mriezka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='40' viewBox='0 0 69.28 40'%3E%3Cpath d='M0 20 34.64 0 69.28 20 34.64 40Z' fill='none' stroke='%236FC3F5' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");

  /* text — kontrast na doskách (#0f1828) aj na noci: nadpis 17:1, text 15:1,
     tlmený 8,6:1, slabší 6,4:1, svetlo (štítky) 9:1 */
  --l3-nadpis: #f4f7fb;
  --l3-text: #e8edf4;
  --l3-text-tlmeny: #aab4c3;
  --l3-text-slabsi: #8fa0b6;
  --l3-svetlo: #6FC3F5;
  --l3-chyba-text: #f0a08e;
  --l3-ok-text: #7cc495;

  /* dosky (karty, panely, KPI) — nepriehľadné, hviezdy pod nimi nevidno */
  --l3-plocha: linear-gradient(165deg, #172338 0%, #0f1828 58%, #0c1320 100%);
  --l3-plocha-akcent: linear-gradient(165deg, #173a63 0%, #11233b 55%, #0d1828 100%);
  --l3-plocha-riadok: #0e1624;
  --l3-plocha-hover: #132036;
  --l3-okraj: rgba(255, 255, 255, 0.08);
  --l3-hrana: rgba(255, 255, 255, 0.14);
  --l3-hrana-riadok: rgba(255, 255, 255, 0.1);
  --l3-hrana-hover: rgba(143, 209, 247, 0.42);
  --l3-hlbka: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 3px 0 -1px rgba(21, 101, 192, 0.28), 0 22px 44px -22px rgba(0, 0, 0, 0.9);
  --l3-hlbka-sm: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 2px 0 -1px rgba(21, 101, 192, 0.22), 0 8px 16px -12px rgba(0, 0, 0, 0.8);
  --l3-ziara: 0 1px 0 0 rgba(143, 209, 247, 0.22) inset, 0 6px 0 -2px rgba(30, 136, 229, 0.38), 0 34px 64px -26px rgba(0, 0, 0, 0.95), 0 0 30px -8px rgba(30, 136, 229, 0.55);
  --l3-odlesk: radial-gradient(260px circle at 18% 0%, rgba(111, 195, 245, 0.16), transparent 62%);

  /* sklo hlavičky (bez backdrop-filter — pozri VÝKON) */
  --l3-sklo: linear-gradient(160deg, rgba(20, 28, 42, 0.94), rgba(10, 15, 24, 0.96));

  /* polia a tabuľky */
  --l3-pole: #0a101a;
  --l3-pole-okraj: rgba(255, 255, 255, 0.14);
  --l3-placeholder: #7d8ba1;
  --l3-ring: 0 0 0 3px rgba(30, 136, 229, 0.28);
  --l3-tab-hlava: rgba(255, 255, 255, 0.035);
  --l3-tab-linka: rgba(255, 255, 255, 0.07);
  --l3-tab-hover: rgba(111, 195, 245, 0.06);

  /* tlačidlá — biely text na #1976D2 má 4,6 : 1, na #1565C0 5,8 : 1 */
  --l3-akcia: linear-gradient(135deg, #1976D2, #1565C0);
  --l3-akcia-ziara: 0 0 0 1px rgba(143, 209, 247, 0.35) inset, 0 12px 30px -12px rgba(30, 136, 229, 0.9);
  --l3-akcia-ziara-hover: 0 0 0 1px rgba(143, 209, 247, 0.55) inset, 0 16px 40px -12px rgba(30, 136, 229, 1);
  --l3-ghost: rgba(255, 255, 255, 0.04);
  --l3-ghost-hover: rgba(255, 255, 255, 0.08);

  /* dialógy */
  --l3-overlay: rgba(3, 6, 11, 0.74);
  --l3-modal: linear-gradient(165deg, #131e30 0%, #0d1522 60%, #0b111c 100%);
  --l3-modal-hlava: linear-gradient(180deg, rgba(30, 136, 229, 0.12), rgba(30, 136, 229, 0) 100%);
  --l3-modal-pata: rgba(255, 255, 255, 0.02);

  /* bočný panel — tmavý v oboch témach */
  --l3-bok: radial-gradient(280px 220px at 20% 0%, rgba(30, 136, 229, 0.16), transparent 70%), linear-gradient(180deg, #0b111b 0%, #080c14 100%);
  --l3-scroll: #2a3a52;

  /* štítky (rola, typ konta) — vlastné farby, nie prevrátenie filtrom */
  --l3-stitok: rgba(143, 209, 247, 0.1);
  --l3-stitok-text: #c6d1df;
  --l3-stitok-zlaty: rgba(245, 194, 107, 0.15);
  --l3-stitok-zlaty-text: #f5c26b;
  --l3-stitok-zeleny: rgba(124, 196, 149, 0.15);
  --l3-stitok-zeleny-text: #8fd4a6;
  --l3-stitok-modry: rgba(111, 195, 245, 0.15);
  --l3-stitok-modry-text: #8fd1f7;

  /* Identita: tokeny, na ktoré si appky mapujú vlastné premenné. Prepis tu
     preoblečie všetko, čo ich používa (pozadia polí, linky, hover riadkov). */
  --luma-paper: #070a10;
  --luma-white: #0f1828;
  --luma-plocha-2: #152030;
  --luma-linka: #223047;
  --luma-text: #e8edf4;
  --luma-text-tlmeny: #aab4c3;
  --luma-nadpis: #f4f7fb;
  --luma-ink: #0a0f18;
  --luma-ink-2: #131c2a;
  --luma-ink-3: #1f2b3d;
  --luma-akcent-1: #12233a;
  --luma-akcent-2: #0f1d30;
  --luma-chyba: #e0745e;
  --luma-ok: #6aa87c;
  --luma-font: var(--l3-font-text);

  /* Šablóna iTask (iTask, iSpend, iServers, iDoc, iOrdo, iDesk) má jednu
     natvrdo krémovú linku — časová os detailu. */
  --whisper: var(--luma-linka);

  color-scheme: dark;
}

/* =====================================================================
   2. TOKENY — svetlá 3D
   ===================================================================== */

:root[data-luma3d][data-tema="svetla"] {
  --l3-hviezdy: 0;
  --l3-noc: #eef2f8;
  --l3-hmlovina:
    radial-gradient(1100px 620px at 76% -8%, rgba(30, 136, 229, 0.14), transparent 70%),
    radial-gradient(900px 600px at -10% 45%, rgba(30, 136, 229, 0.06), transparent 70%),
    radial-gradient(1200px 380px at 50% 112%, rgba(30, 136, 229, 0.08), transparent 70%);
  --l3-mriezka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='40' viewBox='0 0 69.28 40'%3E%3Cpath d='M0 20 34.64 0 69.28 20 34.64 40Z' fill='none' stroke='%231565C0' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  --l3-nadpis: #0b1424;
  --l3-text: #1a2230;
  --l3-text-tlmeny: #4f5b6c;
  --l3-text-slabsi: #5b6878;
  --l3-svetlo: #1565C0;
  --l3-chyba-text: #b3412e;
  --l3-ok-text: #2f7a46;
  --l3-plocha: linear-gradient(165deg, #ffffff 0%, #f8fafd 100%);
  --l3-plocha-akcent: linear-gradient(165deg, #dcebfb 0%, #f2f8fe 70%, #ffffff 100%);
  --l3-plocha-riadok: #ffffff;
  --l3-plocha-hover: #f3f7fc;
  --l3-okraj: rgba(13, 40, 80, 0.1);
  --l3-hrana: rgba(13, 40, 80, 0.08);
  --l3-hrana-riadok: rgba(13, 40, 80, 0.08);
  --l3-hrana-hover: rgba(21, 101, 192, 0.45);
  --l3-hlbka: 0 1px 0 0 #fff inset, 0 3px 0 -1px rgba(21, 101, 192, 0.16), 0 18px 36px -24px rgba(13, 40, 80, 0.35);
  --l3-hlbka-sm: 0 1px 0 0 #fff inset, 0 2px 0 -1px rgba(21, 101, 192, 0.12), 0 6px 14px -10px rgba(13, 40, 80, 0.3);
  --l3-ziara: 0 1px 0 0 #fff inset, 0 6px 0 -2px rgba(30, 136, 229, 0.3), 0 28px 50px -24px rgba(13, 40, 80, 0.45), 0 0 26px -8px rgba(30, 136, 229, 0.35);
  --l3-odlesk: radial-gradient(260px circle at 18% 0%, rgba(30, 136, 229, 0.08), transparent 62%);
  --l3-sklo: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 253, 0.94));
  --l3-pole: #ffffff;
  --l3-pole-okraj: #c5d1e2;
  --l3-placeholder: #6b7788;
  --l3-ring: 0 0 0 3px rgba(30, 136, 229, 0.2);
  --l3-tab-hlava: #f3f6fb;
  --l3-tab-linka: #e3e9f2;
  --l3-tab-hover: rgba(21, 101, 192, 0.05);
  --l3-ghost: #ffffff;
  --l3-ghost-hover: #f1f5fb;
  --l3-overlay: rgba(10, 20, 40, 0.45);
  --l3-modal: linear-gradient(165deg, #ffffff 0%, #f8fafd 100%);
  --l3-modal-hlava: linear-gradient(180deg, rgba(30, 136, 229, 0.08), rgba(30, 136, 229, 0) 100%);
  --l3-modal-pata: #f6f8fc;
  --l3-scroll: #b9c6d8;
  --l3-stitok: #e8eef6;
  --l3-stitok-text: #3d4a5c;
  --l3-stitok-zlaty: #fbefd9;
  --l3-stitok-zlaty-text: #74500f;
  --l3-stitok-zeleny: #e1f2e6;
  --l3-stitok-zeleny-text: #22603a;
  --l3-stitok-modry: #e1edfb;
  --l3-stitok-modry-text: #0f4f9a;

  --luma-paper: #eef2f8;
  --luma-white: #ffffff;
  --luma-plocha-2: #e9eff7;
  --luma-linka: #d8e1ee;
  --luma-text: #1a2230;
  --luma-text-tlmeny: #4f5b6c;
  --luma-nadpis: #0b1424;
  --luma-akcent-1: #e3effc;
  --luma-akcent-2: #d3e6fa;
  --luma-chyba: #c2533f;
  --luma-ok: #2f7a46;

  color-scheme: light;
}

/* „Podľa systému" pri svetlom systéme — tie isté hodnoty. */
@media (prefers-color-scheme: light) {
  :root[data-luma3d][data-tema="auto"] {
    --l3-hviezdy: 0;
    --l3-noc: #eef2f8;
    --l3-hmlovina:
      radial-gradient(1100px 620px at 76% -8%, rgba(30, 136, 229, 0.14), transparent 70%),
      radial-gradient(900px 600px at -10% 45%, rgba(30, 136, 229, 0.06), transparent 70%),
      radial-gradient(1200px 380px at 50% 112%, rgba(30, 136, 229, 0.08), transparent 70%);
    --l3-mriezka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='40' viewBox='0 0 69.28 40'%3E%3Cpath d='M0 20 34.64 0 69.28 20 34.64 40Z' fill='none' stroke='%231565C0' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
    --l3-nadpis: #0b1424;
    --l3-text: #1a2230;
    --l3-text-tlmeny: #4f5b6c;
    --l3-text-slabsi: #5b6878;
    --l3-svetlo: #1565C0;
    --l3-chyba-text: #b3412e;
    --l3-ok-text: #2f7a46;
    --l3-plocha: linear-gradient(165deg, #ffffff 0%, #f8fafd 100%);
    --l3-plocha-akcent: linear-gradient(165deg, #dcebfb 0%, #f2f8fe 70%, #ffffff 100%);
    --l3-plocha-riadok: #ffffff;
    --l3-plocha-hover: #f3f7fc;
    --l3-okraj: rgba(13, 40, 80, 0.1);
    --l3-hrana: rgba(13, 40, 80, 0.08);
    --l3-hrana-riadok: rgba(13, 40, 80, 0.08);
    --l3-hrana-hover: rgba(21, 101, 192, 0.45);
    --l3-hlbka: 0 1px 0 0 #fff inset, 0 3px 0 -1px rgba(21, 101, 192, 0.16), 0 18px 36px -24px rgba(13, 40, 80, 0.35);
    --l3-hlbka-sm: 0 1px 0 0 #fff inset, 0 2px 0 -1px rgba(21, 101, 192, 0.12), 0 6px 14px -10px rgba(13, 40, 80, 0.3);
    --l3-ziara: 0 1px 0 0 #fff inset, 0 6px 0 -2px rgba(30, 136, 229, 0.3), 0 28px 50px -24px rgba(13, 40, 80, 0.45), 0 0 26px -8px rgba(30, 136, 229, 0.35);
    --l3-odlesk: radial-gradient(260px circle at 18% 0%, rgba(30, 136, 229, 0.08), transparent 62%);
    --l3-sklo: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 253, 0.94));
    --l3-pole: #ffffff;
    --l3-pole-okraj: #c5d1e2;
    --l3-placeholder: #6b7788;
    --l3-ring: 0 0 0 3px rgba(30, 136, 229, 0.2);
    --l3-tab-hlava: #f3f6fb;
    --l3-tab-linka: #e3e9f2;
    --l3-tab-hover: rgba(21, 101, 192, 0.05);
    --l3-ghost: #ffffff;
    --l3-ghost-hover: #f1f5fb;
    --l3-overlay: rgba(10, 20, 40, 0.45);
    --l3-modal: linear-gradient(165deg, #ffffff 0%, #f8fafd 100%);
    --l3-modal-hlava: linear-gradient(180deg, rgba(30, 136, 229, 0.08), rgba(30, 136, 229, 0) 100%);
    --l3-modal-pata: #f6f8fc;
    --l3-scroll: #b9c6d8;
    --l3-stitok: #e8eef6;
    --l3-stitok-text: #3d4a5c;
    --l3-stitok-zlaty: #fbefd9;
    --l3-stitok-zlaty-text: #74500f;
    --l3-stitok-zeleny: #e1f2e6;
    --l3-stitok-zeleny-text: #22603a;
    --l3-stitok-modry: #e1edfb;
    --l3-stitok-modry-text: #0f4f9a;
    --luma-paper: #eef2f8;
    --luma-white: #ffffff;
    --luma-plocha-2: #e9eff7;
    --luma-linka: #d8e1ee;
    --luma-text: #1a2230;
    --luma-text-tlmeny: #4f5b6c;
    --luma-nadpis: #0b1424;
    --luma-akcent-1: #e3effc;
    --luma-akcent-2: #d3e6fa;
    --luma-chyba: #c2533f;
    --luma-ok: #2f7a46;
    color-scheme: light;
  }
}

/* =====================================================================
   3. SCÉNA — noc, hmlovina, mriežka, hviezdy
   Scéna stojí na pevných pseudo-prvkoch (vlastná vrstva kompozície), nie na
   `background-attachment: fixed`, ktoré by pri skrolovaní dlhej tabuľky
   prekresľovalo celé pozadie.
   ===================================================================== */

html[data-luma3d] {
  background: var(--l3-noc);
  scrollbar-color: var(--l3-scroll) transparent;
  overflow-x: clip;
}
html[data-luma3d] body {
  background: transparent;
  color: var(--l3-text);
  font-family: var(--l3-font-text);
  -webkit-font-smoothing: antialiased;
}
html[data-luma3d] body::before,
html[data-luma3d] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
html[data-luma3d] body::before { background: var(--l3-hmlovina); }
/* Izometrická mriežka webu — v strede viditeľná, k okrajom sa stráca. */
html[data-luma3d] body::after {
  background-image: var(--l3-mriezka);
  background-size: 69.28px 40px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(75% 70% at 55% 40%, #000 15%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 55% 40%, #000 15%, transparent 100%);
}
/* Hviezdny prach (luma-hviezdy.js) — za obsahom, nad mriežkou. */
html[data-luma3d] .l3-hviezdy {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
html[data-luma3d] .l3-hviezdy[hidden] { display: none; }

html[data-luma3d] ::selection { background: #1976D2; color: #fff; }
html[data-luma3d] :focus-visible { outline: 2px solid var(--l3-svetlo); outline-offset: 2px; }

/* =====================================================================
   4. PÍSMO — Ubuntu na nadpisy a čísla, DM Sans na text, mono na štítky
   Vrstva 2027 v identite drží Inter cez `!important`, preto aj tu.
   ===================================================================== */

html[data-luma3d] :is(body, input, select, textarea, button, .karta, .card, .panel,
  .tagline, .footer, .footer__ver, .mobile-brand, .brand-sub, .page-head__slogan, .muted) {
  font-family: var(--l3-font-text) !important;
}
html[data-luma3d] :is(h1, h2, h3, .page-head__title, .view-title, #view-title, .karta__nadpis,
  .proof__nazov, .kategoria__nazov, .tema__nazov, .stat__num, .stat .num, .login__title,
  .confirm-title, .velke, .empty .big, .users-sub, .l3-nadpis, .l3-kpi__cislo) {
  font-family: var(--l3-font-nadpis) !important;
  letter-spacing: -0.015em;
}
html[data-luma3d] :is(h1, .page-head__title, .view-title, #view-title) {
  font-weight: 700;
  color: var(--l3-nadpis);
  letter-spacing: -0.025em;
}
html[data-luma3d] :is(.sig, .app-ver, .l3-mono) { font-family: var(--l3-font-mono) !important; }

/* Mono štítok „■ SEKCIA" ako na webe. Trieda pre nové miesta + automaticky
   na nadčiarkach panelov, dialógov a sekcií formulárov. */
html[data-luma3d] :is(.l3-stitok, .panel .eyebrow, .karta .eyebrow, .modal-head .eyebrow,
  .confirm-card .eyebrow, .lbl-sekcia, .detail-sec h4) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--l3-font-mono) !important;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--l3-svetlo);
}
html[data-luma3d] :is(.l3-stitok, .panel .eyebrow, .karta .eyebrow, .modal-head .eyebrow,
  .confirm-card .eyebrow, .lbl-sekcia, .detail-sec h4)::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
html[data-luma3d] .l3-stitok--ticho { color: var(--l3-text-slabsi); }
html[data-luma3d] .l3-stitok--ticho::before { box-shadow: none; }

/* Pre čítačku, nie pre oko. */
html[data-luma3d] .l3-sr,
.l3-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =====================================================================
   5. ZNAČKA — 3D znak + nápis LUMA Creative + meno appky (LUMA.znacka3d)
   ===================================================================== */

html[data-luma3d] .l3-znacka {
  --zh: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
html[data-luma3d] .l3-znacka__3d {
  display: block;
  flex: none;
  height: calc(var(--zh) * 1.3);
  width: calc(var(--zh) * 1.83);
  filter: drop-shadow(0 0 7px rgba(30, 136, 229, 0.6)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
  animation: l3-vznasanie 6s ease-in-out infinite;
  transition: transform 0.5s var(--l3-ease);
}
html[data-luma3d] a.l3-znacka:hover .l3-znacka__3d { animation-play-state: paused; transform: translateY(-2px) scale(1.06); }
html[data-luma3d] .l3-znacka__napis {
  font-family: var(--l3-font-nadpis);
  font-size: calc(var(--zh) * 0.8);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
html[data-luma3d] .l3-znacka__napis span { font-weight: 500; color: #6FC3F5; }

/* Meno appky — čitateľné v oboch témach (panel je tmavý vždy). */
html[data-luma3d] .l3-appka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 10px 6px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 0 -1px rgba(21, 101, 192, 0.35), 0 10px 20px -14px rgba(0, 0, 0, 0.9);
}
html[data-luma3d] .l3-appka__znak { display: block; flex: none; width: 20px; height: 20px; }
html[data-luma3d] .l3-appka__meno {
  font-family: var(--l3-font-nadpis);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #f4f7fb;
}

/* Odznak AI — pilulka v reči AI tlačidla webu. Tmavší modrý prechod než
   v iLume, aby biely text mal aj pri 9,5 px kontrast AA (5,1 : 1). */
html[data-luma3d] .l3-ai {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px 2px;
  border-radius: 999px;
  font-family: var(--l3-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, #1565C0, #1A73CF);
  box-shadow: 0 0 0 1px rgba(143, 209, 247, 0.45) inset, 0 0 10px -2px rgba(111, 195, 245, 0.6);
  vertical-align: middle;
  white-space: nowrap;
}

/* Terminálový pozdrav pod nadpisom: <p class="muted l3-terminal" data-prompt="luma://iordo $">. */
html[data-luma3d] .l3-terminal {
  font-family: var(--l3-font-mono) !important;
  font-size: 12.5px;
  color: var(--l3-text-tlmeny);
  margin-top: 5px;
}
html[data-luma3d] .l3-terminal[data-prompt]::before {
  content: attr(data-prompt);
  color: var(--l3-svetlo);
  margin-right: 0.6em;
}
html[data-luma3d] .l3-terminal::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 4px;
  vertical-align: -0.2em;
  background: rgba(111, 195, 245, 0.75);
  box-shadow: 0 0 10px rgba(111, 195, 245, 0.6);
  animation: l3-kurzor 1.05s steps(1) infinite;
}

/* =====================================================================
   6. BOČNÝ PANEL, MOBILNÁ LIŠTA, HLAVIČKA
   ===================================================================== */

html[data-luma3d] .sidebar {
  background: var(--l3-bok);
  color: #e8edf4;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset -1px 0 0 rgba(111, 195, 245, 0.06), 18px 0 40px -30px rgba(0, 0, 0, 0.9);
}
html[data-luma3d] .sidebar .nav { margin-top: 28px; }
html[data-luma3d] .nav-item {
  color: #b4bfcd;
  border-radius: 8px !important;
  transition: none;
}
html[data-luma3d] .nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
html[data-luma3d] :is(.nav-item.active, .nav-item.is-active, .nav-item[aria-current="page"]) {
  color: #fff;
  background: linear-gradient(100deg, rgba(30, 136, 229, 0.26), rgba(30, 136, 229, 0.06));
  box-shadow: inset 0 0 0 1px rgba(111, 195, 245, 0.26), inset 2px 0 0 #6FC3F5, 0 10px 22px -16px rgba(30, 136, 229, 0.9);
}
html[data-luma3d] .sidebar-foot { border-top-color: rgba(255, 255, 255, 0.07); }
html[data-luma3d] .sidebar .tagline { color: #aab4c3; opacity: 1; }
html[data-luma3d] .sidebar .sig { color: #8fa0b6; letter-spacing: 0.14em; }
html[data-luma3d] .sidebar .app-ver { color: #6FC3F5; opacity: 0.85; letter-spacing: 0.08em; }
html[data-luma3d] .user-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top-color: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
html[data-luma3d] .user-info b { color: #f4f7fb; }
html[data-luma3d] .user-info span { color: #6FC3F5; font-family: var(--l3-font-mono); letter-spacing: 0.1em; font-size: 10px; }
html[data-luma3d] .user-btn { color: #b4bfcd; border-radius: 7px; }
html[data-luma3d] .user-btn:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
html[data-luma3d] .avatar { background: linear-gradient(135deg, #6FC3F5, #1565C0); color: #fff; box-shadow: 0 0 0 1px rgba(143, 209, 247, 0.4) inset; }
html[data-luma3d] .sidebar .luma-prepinac__tlacidlo {
  color: #d5dde8;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
html[data-luma3d] .sidebar .luma-prepinac__tlacidlo:hover { color: #fff; border-color: rgba(143, 209, 247, 0.5); background: rgba(255, 255, 255, 0.05); }

html[data-luma3d] .mobile-header {
  background: linear-gradient(180deg, rgba(11, 17, 27, 0.98), rgba(8, 12, 19, 0.97));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}
html[data-luma3d] .mobile-brand { gap: 8px; min-width: 0; }
html[data-luma3d] .mobile-brand .l3-znacka { --zh: 17px; }
html[data-luma3d] .mobile-brand .l3-appka { margin-top: 0; padding: 4px 8px 4px 6px; }
html[data-luma3d] .mobile-brand .l3-appka__znak { width: 16px; height: 16px; }
html[data-luma3d] .mobile-brand .l3-appka__meno { font-size: 13.5px; }
html[data-luma3d] .hamburger { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); border-radius: 8px; }
html[data-luma3d] .hamburger span { background: #6FC3F5; }
html[data-luma3d] .nav-backdrop { background: rgba(3, 6, 11, 0.6); }

/* Hlavička obsahu ako sklenený pás iLumy. `.topbar` je v šablóne iTask,
   ostatné appky dajú svojej hlavičke triedu `.l3-hlavicka`. */
html[data-luma3d] :is(.topbar, .l3-hlavicka) {
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--l3-sklo);
  border: 1px solid var(--l3-okraj);
  border-top-color: var(--l3-hrana);
  border-radius: 12px;
  box-shadow: var(--l3-hlbka-sm);
}
html[data-luma3d] .topbar h1 { font-size: 26px; line-height: 1.15; }

/* =====================================================================
   7. TLAČIDLÁ
   ===================================================================== */

html[data-luma3d] :is(.btn, .btn-sm, .btn--sm) {
  border-radius: 8px !important;
  transition: transform 0.3s var(--l3-ease), opacity 0.2s ease !important;
}
html[data-luma3d] :is(.btn-gold, .btn--gold, .btn--modra, .btn-primary, .l3-btn) {
  background: var(--l3-akcia) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--l3-akcia-ziara) !important;
}
html[data-luma3d] :is(.btn-gold, .btn--gold, .btn--modra, .btn-primary, .l3-btn):hover {
  background: var(--l3-akcia) !important;
  box-shadow: var(--l3-akcia-ziara-hover) !important;
  transform: translateY(-1px);
}
html[data-luma3d] :is(.btn-ghost, .btn--ghost, .l3-btn--tiche) {
  background: var(--l3-ghost) !important;
  color: var(--l3-text) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--l3-pole-okraj) !important;
}
html[data-luma3d] :is(.btn-ghost, .btn--ghost, .l3-btn--tiche):hover {
  background: var(--l3-ghost-hover) !important;
  box-shadow: inset 0 0 0 1px var(--l3-hrana-hover) !important;
}
html[data-luma3d] :is(.btn-danger, .btn--danger) {
  background: rgba(224, 116, 94, 0.08) !important;
  color: var(--l3-chyba-text) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(224, 116, 94, 0.4) !important;
}
html[data-luma3d] :is(.btn-danger, .btn--danger):hover { background: rgba(224, 116, 94, 0.16) !important; }
html[data-luma3d] .btn-dark { background: #131c2a; color: #e8edf4; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
html[data-luma3d] :is(.btn, button):disabled { opacity: 0.55; transform: none; cursor: not-allowed; }

/* Prepínač témy — pilulka v štýle polí, zvolená voľba modrá. */
html[data-luma3d] .luma-tema {
  background: var(--l3-pole) !important;
  border: 1px solid var(--l3-pole-okraj) !important;
  border-radius: 8px !important;
}
html[data-luma3d] .luma-tema__btn { color: var(--l3-text-slabsi) !important; border-radius: 6px; }
html[data-luma3d] .luma-tema__btn:hover { color: var(--l3-nadpis) !important; background: var(--l3-ghost-hover) !important; }
html[data-luma3d] .luma-tema__btn[aria-pressed="true"] { color: #fff !important; background: var(--l3-akcia) !important; }

/* =====================================================================
   8. POLIA A FILTRE
   ===================================================================== */

html[data-luma3d] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="hidden"]), select, textarea):not(.l3-bez-ramu, .search-input) {
  background-color: var(--l3-pole);
  color: var(--l3-text);
  border: 1px solid var(--l3-pole-okraj);
  border-radius: 7px !important;
  box-shadow: none;
}
html[data-luma3d] :is(input, select, textarea):not(.l3-bez-ramu, .search-input):focus {
  outline: none;
  border-color: var(--l3-svetlo);
  box-shadow: var(--l3-ring);
}
html[data-luma3d] :is(input, textarea)::placeholder { color: var(--l3-placeholder); opacity: 1; }
html[data-luma3d] input:-webkit-autofill {
  -webkit-text-fill-color: var(--l3-text);
  -webkit-box-shadow: 0 0 0 40px var(--l3-pole) inset;
  caret-color: var(--l3-text);
}
html[data-luma3d] :is(input[type="checkbox"], input[type="radio"]) { accent-color: #1E88E5; }
html[data-luma3d] :is(.field label, .l3-pole__popis) { color: var(--l3-text-tlmeny); }

/* Hľadanie — celý riadok je pole, vstup v ňom je holý. */
html[data-luma3d] .search-row {
  background: var(--l3-pole);
  border: 1px solid var(--l3-pole-okraj);
  border-radius: 8px;
}
html[data-luma3d] .search-row:focus-within { border-color: var(--l3-svetlo); box-shadow: var(--l3-ring); }
html[data-luma3d] .search-row .search-input { background: transparent; border: 0; color: var(--l3-text); }
html[data-luma3d] .search-ic, html[data-luma3d] .search-clear { color: var(--l3-text-slabsi); }

/* =====================================================================
   9. DOSKY — karty a panely
   ===================================================================== */

html[data-luma3d] :is(.panel, .audit-card, .karta, .card, .table-card, .proj-card, .l3-karta) {
  background: var(--l3-plocha);
  color: var(--l3-text);
  border: 1px solid var(--l3-okraj);
  border-top-color: var(--l3-hrana);
  border-radius: 14px !important;
  box-shadow: var(--l3-hlbka) !important;
}
html[data-luma3d] :is(.panel, .karta, .card, .l3-karta) h2 { color: var(--l3-nadpis); font-weight: 700; }
html[data-luma3d] .muted { color: var(--l3-text-tlmeny); }
/* Klikacia doska (karta projektu, .l3-karta--klik) sa pri prejdení zdvihne. */
html[data-luma3d] :is(.proj-card, .l3-karta--klik) {
  transition: translate 0.45s var(--l3-ease) !important;
}
html[data-luma3d] :is(.proj-card, .l3-karta--klik):hover {
  transform: none;
  translate: 0 -4px;
  border-top-color: var(--l3-hrana-hover);
  box-shadow: var(--l3-ziara) !important;
}

/* =====================================================================
   10. KPI — dlaždice prehľadu ako 3D bloky
   `.stat` (šablóna iTask) alebo `.l3-kpi` s `.l3-kpi__cislo` + `.l3-kpi__popis`.
   Nábeh postupne (stagger), hover zdvihne blok a rozsvieti vrch.
   ===================================================================== */

html[data-luma3d] :is(.stat, .l3-kpi) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--l3-plocha);
  color: var(--l3-text);
  border: 1px solid var(--l3-okraj);
  border-top-color: var(--l3-hrana);
  border-radius: 14px !important;
  box-shadow: var(--l3-hlbka) !important;
  animation: l3-nabeh 0.6s var(--l3-ease) backwards;
  animation-delay: calc(var(--l3-i, 0) * 45ms + 40ms);
  transition: translate 0.45s var(--l3-ease) !important;
}
html[data-luma3d] :is(.stat, .l3-kpi):nth-child(2) { --l3-i: 1; }
html[data-luma3d] :is(.stat, .l3-kpi):nth-child(3) { --l3-i: 2; }
html[data-luma3d] :is(.stat, .l3-kpi):nth-child(4) { --l3-i: 3; }
html[data-luma3d] :is(.stat, .l3-kpi):nth-child(5) { --l3-i: 4; }
html[data-luma3d] :is(.stat, .l3-kpi):nth-child(6) { --l3-i: 5; }
html[data-luma3d] :is(.stat, .l3-kpi):nth-child(7) { --l3-i: 6; }
html[data-luma3d] :is(.stat, .l3-kpi):nth-child(n+8) { --l3-i: 7; }
/* Odlesk na vrchu — mení sa len opacity. */
html[data-luma3d] :is(.stat, .l3-kpi)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--l3-odlesk);
  opacity: 0;
  transition: opacity 0.45s var(--l3-ease);
}
/* Žiara v rohu (v šablóne iTask bola zlatá bodka). */
html[data-luma3d] :is(.stat, .l3-kpi)::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -34px;
  top: -34px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(111, 195, 245, 0.2), transparent 70%);
}
html[data-luma3d] :is(.stat.accent, .stat--accent, .l3-kpi--akcent) { background: var(--l3-plocha-akcent); }
html[data-luma3d] :is(.stat .num, .stat__num, .l3-kpi__cislo) {
  font-weight: 700;
  color: var(--l3-nadpis);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
html[data-luma3d] .l3-kpi__cislo { display: block; font-size: 32px; line-height: 1.05; }
html[data-luma3d] :is(.stat .lbl, .stat__lbl, .stat__label, .l3-kpi__popis) {
  font-family: var(--l3-font-mono) !important;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l3-text-tlmeny);
}
html[data-luma3d] .l3-kpi__popis { display: block; margin-top: 8px; }
html[data-luma3d] :is(.stat--zle .num, .l3-kpi--zle .l3-kpi__cislo) { color: var(--l3-chyba-text); }
html[data-luma3d] :is(.stat--ok .num, .l3-kpi--ok .l3-kpi__cislo) { color: var(--l3-ok-text); }
html[data-luma3d] :is(.stat--link, .l3-kpi--klik) { cursor: pointer; }
html[data-luma3d] :is(.stat--link, .l3-kpi--klik):is(:hover, :focus-visible) {
  transform: none;
  translate: 0 -4px;
  border-top-color: var(--l3-hrana-hover);
  box-shadow: var(--l3-ziara) !important;
}
html[data-luma3d] :is(.stat--link, .l3-kpi--klik):is(:hover, :focus-visible)::before { opacity: 1; }
html[data-luma3d] :is(.stat--link, .l3-kpi--klik):active { translate: 0 -2px; }

/* =====================================================================
   11. RIADKY ZOZNAMOV — tenká 3D doska bez veľkých tieňov
   ===================================================================== */

html[data-luma3d] :is(.cost-row, .lead-row, .bug-row, .l3-riadok) {
  background: var(--l3-plocha-riadok);
  color: var(--l3-text);
  border-top: 1px solid var(--l3-hrana-riadok);
  border-right: 1px solid var(--l3-okraj);
  border-bottom: 1px solid var(--l3-okraj);
  border-radius: 10px !important;
  box-shadow: var(--l3-hlbka-sm) !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}
/* Ľavý okraj nesie v `.bug-row` závažnosť (farba z appky) — ostáva. */
html[data-luma3d] :is(.cost-row, .lead-row, .l3-riadok) { border-left: 1px solid var(--l3-okraj); }
html[data-luma3d] :is(.cost-row--klik, .bug-row, .l3-riadok--klik):hover {
  background: var(--l3-plocha-hover);
  border-top-color: var(--l3-hrana-hover);
}
html[data-luma3d] :is(.cost-val, .bug-title, .proj-card h3) { color: var(--l3-nadpis); }

/* =====================================================================
   12. TABUĽKY — čitateľnosť má prednosť: žiadne tiene ani filtre na riadkoch
   ===================================================================== */

html[data-luma3d] :is(.audit-tab, .user-tab, .luma-log, .fintab, .tech-tabulka, .l3-tabulka) {
  color: var(--l3-text);
  font-variant-numeric: tabular-nums;
}
html[data-luma3d] :is(.audit-tab, .user-tab, .luma-log, .fintab, .tech-tabulka, .l3-tabulka) th {
  font-family: var(--l3-font-mono) !important;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l3-text-tlmeny);
  background: var(--l3-tab-hlava);
  border-bottom: 1px solid var(--l3-hrana);
}
html[data-luma3d] :is(.audit-tab, .user-tab, .luma-log, .fintab, .tech-tabulka, .l3-tabulka) td {
  border-bottom-color: var(--l3-tab-linka);
}
html[data-luma3d] :is(.audit-tab, .user-tab, .luma-log, .fintab, .tech-tabulka, .l3-tabulka) tbody tr:hover { background: var(--l3-tab-hover); }
html[data-luma3d] .audit__ts { color: var(--l3-text-slabsi); }

/* Stránkovanie */
html[data-luma3d] .pager__btn {
  background: var(--l3-pole);
  color: var(--l3-text);
  border-color: var(--l3-pole-okraj);
  border-radius: 7px;
}
html[data-luma3d] .pager__btn:hover:not(:disabled):not(.is-active) { border-color: var(--l3-svetlo); background: var(--l3-ghost-hover); }
html[data-luma3d] .pager__btn.is-active { background: var(--l3-akcia); border-color: transparent; color: #fff; }

/* Štítok stavu pre nové miesta: <span class="l3-stav" data-ton="ok|pozor|zle|info|ticho">.
   Farby sú dvojice text/pozadie s kontrastom AA v oboch témach. */
html[data-luma3d] .l3-stav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--l3-text-tlmeny);
  background: rgba(143, 160, 182, 0.14);
  box-shadow: inset 0 0 0 1px rgba(143, 160, 182, 0.22);
}
html[data-luma3d] .l3-stav::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html[data-luma3d] .l3-stav[data-ton="ok"] { color: var(--l3-ok-text); background: rgba(106, 168, 124, 0.14); box-shadow: inset 0 0 0 1px rgba(106, 168, 124, 0.3); }
html[data-luma3d] .l3-stav[data-ton="pozor"] { color: #e8a948; background: rgba(232, 169, 72, 0.14); box-shadow: inset 0 0 0 1px rgba(232, 169, 72, 0.3); }
html[data-luma3d] .l3-stav[data-ton="zle"] { color: var(--l3-chyba-text); background: rgba(224, 116, 94, 0.14); box-shadow: inset 0 0 0 1px rgba(224, 116, 94, 0.32); }
html[data-luma3d] .l3-stav[data-ton="info"] { color: var(--l3-svetlo); background: rgba(111, 195, 245, 0.12); box-shadow: inset 0 0 0 1px rgba(111, 195, 245, 0.3); }
html[data-luma3d][data-tema="svetla"] .l3-stav[data-ton="pozor"] { color: #8a5a00; }
@media (prefers-color-scheme: light) {
  html[data-luma3d][data-tema="auto"] .l3-stav[data-ton="pozor"] { color: #8a5a00; }
}

/* =====================================================================
   13. DIALÓGY — pozadie bez rozmazania, karta ako 3D doska
   ===================================================================== */

html[data-luma3d] :is(.modal-overlay, .confirm-overlay, .luma-modal, .l3-dialog-pozadie) {
  background: var(--l3-overlay) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-luma3d] :is(.modal-overlay > .modal, .modal__panel, .confirm-card, .luma-modal__karta, .l3-dialog) {
  background: var(--l3-modal) !important;
  color: var(--l3-text);
  border: 1px solid var(--l3-okraj);
  border-top-color: var(--l3-hrana);
  border-radius: 16px !important;
  box-shadow: var(--l3-hlbka), 0 50px 120px -40px rgba(0, 0, 0, 0.8) !important;
}
html[data-luma3d] :is(.modal-overlay .modal-head, .luma-modal:not(.luma-prepinac__modal) .modal-head, .modal__head, .l3-dialog__hlava) {
  background: var(--l3-modal-hlava);
  color: var(--l3-nadpis);
  border-bottom: 1px solid var(--l3-okraj);
}
html[data-luma3d] :is(.modal-head, .modal__head, .l3-dialog__hlava) h2 { color: var(--l3-nadpis); font-weight: 700; }
html[data-luma3d] .modal-overlay .modal-close,
html[data-luma3d] .luma-modal:not(.luma-prepinac__modal) .modal-close { color: var(--l3-text-tlmeny); opacity: 1; border-radius: 6px; }
html[data-luma3d] .modal-overlay .modal-close:hover,
html[data-luma3d] .luma-modal:not(.luma-prepinac__modal) .modal-close:hover { color: var(--l3-nadpis); background: var(--l3-ghost-hover); }
html[data-luma3d] :is(.modal-foot, .modal__foot, .l3-dialog__pata) {
  background: var(--l3-modal-pata);
  border-top: 1px solid var(--l3-okraj);
}
html[data-luma3d] .confirm-title { color: var(--l3-nadpis); }
html[data-luma3d] .confirm-msg { color: var(--l3-text-tlmeny); }

/* Prepínač appiek: modrá hlavička ostáva (značka), dlaždice sú 3D. */
html[data-luma3d] .luma-prepinac__dlazdica {
  background: var(--l3-plocha);
  border: 1px solid var(--l3-okraj);
  border-top-color: var(--l3-hrana);
  border-radius: 12px;
  box-shadow: var(--l3-hlbka-sm);
  transition: translate 0.4s var(--l3-ease);
}
html[data-luma3d] .luma-prepinac__dlazdica[href]:is(:hover, :focus-visible) {
  translate: 0 -3px;
  background: var(--l3-plocha);
  border-color: var(--l3-okraj);
  border-top-color: var(--l3-hrana-hover);
  box-shadow: var(--l3-ziara);
}
html[data-luma3d] .luma-prepinac__dlazdica--aktivna {
  background: var(--l3-plocha-akcent);
  box-shadow: inset 2px 0 0 #6FC3F5, var(--l3-hlbka-sm);
}
html[data-luma3d] .luma-prepinac__ikona { background: rgba(111, 195, 245, 0.12); color: var(--l3-svetlo); }
html[data-luma3d] .luma-prepinac__ikona--3d { width: 30px; height: 30px; background: none; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.45)); }
html[data-luma3d] .luma-prepinac__ikona--3d svg { display: block; width: 30px; height: 30px; }
html[data-luma3d] .luma-prepinac__nazov { font-family: var(--l3-font-nadpis); font-weight: 700; color: var(--l3-nadpis); }
html[data-luma3d] .luma-prepinac__popis { color: var(--l3-text-slabsi); }
html[data-luma3d] .luma-prepinac__oddelovac { background: var(--l3-okraj); }

/* Spoločná správa kont (luma-pouzivatelia-ui.js) — natvrdo svetlé miesta. */
html[data-luma3d] :is(.luma-uz-karta, .luma-uz-novy) {
  background: var(--l3-plocha);
  border-color: var(--l3-okraj);
  border-radius: 12px;
}
html[data-luma3d] .luma-uz-sumar { background: var(--l3-plocha-akcent); border-color: var(--l3-okraj); border-radius: 12px; }
html[data-luma3d] .luma-uz-sumar b { font-family: var(--l3-font-nadpis); }

/* =====================================================================
   14. TOAST, PRIHLÁSENIE, PRÁZDNE STAVY
   ===================================================================== */

html[data-luma3d] .toast {
  background: rgba(12, 17, 26, 0.97);
  color: #e8edf4;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.15);
  border-left: 3px solid #4BA3EE;
  border-radius: 8px;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.9);
}
html[data-luma3d] .toast.err { border-left-color: #e0745e; color: #f6c4b8; }

html[data-luma3d] body.login-mode,
html[data-luma3d] .login { background: transparent; }
html[data-luma3d] .login__card {
  background: var(--l3-plocha);
  border: 1px solid var(--l3-okraj);
  border-top-color: var(--l3-hrana);
  border-radius: 16px !important;
  box-shadow: var(--l3-hlbka) !important;
}
html[data-luma3d] .login__title { color: var(--l3-text-tlmeny); }
html[data-luma3d] .login__title b { color: var(--l3-nadpis); }
html[data-luma3d] .login__vstup { color: var(--l3-text-tlmeny); }
html[data-luma3d] .login__vstup b { color: var(--l3-nadpis); }
html[data-luma3d] .login__vizual {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
html[data-luma3d] .login__vizualtext h2 { font-weight: 700; letter-spacing: -0.03em; }

html[data-luma3d] .luma-prazdno__nadpis,
html[data-luma3d] .empty .big { color: var(--l3-nadpis); }
html[data-luma3d] .luma-prazdno__text,
html[data-luma3d] .empty { color: var(--l3-text-tlmeny); }

/* =====================================================================
   15. POHYB
   ===================================================================== */

@keyframes l3-nabeh {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes l3-vznasanie { 50% { transform: translateY(-1.5px); } }
@keyframes l3-kurzor { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html[data-luma3d] :is(.stat, .l3-kpi, .l3-znacka__3d),
  html[data-luma3d] .l3-terminal::after {
    animation: none !important;
  }
  html[data-luma3d] :is(.stat, .l3-kpi, .proj-card, .l3-karta--klik, .luma-prepinac__dlazdica, .btn, .l3-znacka__3d),
  html[data-luma3d] :is(.stat, .l3-kpi)::before {
    transition: none !important;
  }
  html[data-luma3d] :is(.stat--link, .l3-kpi--klik, .proj-card, .l3-karta--klik, .luma-prepinac__dlazdica):is(:hover, :focus-visible, :active),
  html[data-luma3d] :is(.btn-gold, .btn--gold, .btn--modra, .btn-primary, .l3-btn):hover {
    translate: none;
    transform: none;
  }
}

/* =====================================================================
   16. MOBIL
   ===================================================================== */

@media (max-width: 600px) {
  html[data-luma3d] :is(.topbar, .l3-hlavicka) { padding: 12px 14px; align-items: stretch; }
  html[data-luma3d] .topbar h1 { font-size: 23px; }
  html[data-luma3d] .l3-terminal { font-size: 11.5px; }
  html[data-luma3d] :is(.panel, .karta, .card, .l3-karta) { border-radius: 12px !important; }
}
@media (max-width: 380px) {
  html[data-luma3d] .mobile-brand .l3-znacka__napis { display: none; }
}

/* Odznaky, ktoré identita v tmavej téme prevracia filtrom (invert), si farbu
   textu berú z `--odkaz`. Ten je v tmavej téme svetlý, po prevrátení by bol
   tmavý na tmavom. Pred filtrom preto tmavomodrý — po ňom vyjde svetlý. */
html[data-luma3d] :is(.badge, .sev, .type-chip, .vis-chip, .cost-type,
  .stav-badge, .proj-status-badge, .proj-status-sel, .pot, .sluzba) {
  --odkaz: #1565C0;
  --luma-odkaz: #1565C0;
}

/* Štítky role a typu konta (dialóg Používatelia, zoznamy kont). Prevrátenie
   filtrom z identity im dávalo v tmavej téme kontrast 1,77 : 1 — preto bez
   filtra a s vlastnými tokenmi `--l3-stitok*`, AA v tmavej aj svetlej téme.
   `:root[...]` drží špecificitu nad pravidlom s filtrom aj nad `.luma-modal`. */
:root[data-luma3d] :is(.role-tag, .utype-tag) {
  filter: none;
  background: var(--l3-stitok);
  color: var(--l3-stitok-text);
}
:root[data-luma3d] .role-tag.admin {
  background: var(--l3-stitok-zlaty);
  color: var(--l3-stitok-zlaty-text);
}
:root[data-luma3d] :is(.role-tag.tester, .role-tag.clen) {
  background: var(--l3-stitok-zeleny);
  color: var(--l3-stitok-zeleny-text);
}
:root[data-luma3d] .role-tag.riesitel {
  background: var(--l3-stitok-modry);
  color: var(--l3-stitok-modry-text);
}