/* ==========================================================================
   BCG Nexus — vzhľady portálu (grafické šablóny) · TOKENY + SPOLOČNÁ VRSTVA
   --------------------------------------------------------------------------
   Register šablón je `core/vzhlady.py`, voľba je osobné nastavenie človeka
   (`core.NastaveniePouzivatela`) a prichádza zo servera ako
   `<html data-design="…">`. Predvolený vzhľad „Nexus" atribút NEMÁ — z tohto
   súboru nepoužije nič okrem galérie; portál vyzerá presne ako predtým.

   DVE VRSTVY:
     vzhlady.css            (tento súbor, načítaný vždy) — TOKENY všetkých
                            šablón (galéria ich potrebuje na miniatúry) a
                            spoločná mechanika: tabuľky riadené tokenmi,
                            posuvné indikátory, svetlo pod kurzorom, vlnka.
     vzhlady/<kod>.css      (načíta sa LEN pri zvolenej šablóne) — charakter:
                            rozloženie shellu, tabuľky, záložky, tlačidlá,
                            grafové bubliny, dialógy, pohyb.

   KONTRAKT ŠABLÓNY (keď pridávaš novú):
     1) záznam v `core/vzhlady.py`,
     2) tu tri bloky v tomto poradí (stráži `core.tests_vzhlady`):
          TVAR   `:root[data-design=X], .vz-nahlad[data-nahlad=X]`
                 — polomery, písmo, --char-*, osobnosť grafu --graf-*,
          SVETLÁ `:root[data-design=X]` (+ náhľad, ak je šablóna denná),
          TMAVÁ  `:root[data-design=X][data-theme="dark"]`
                 — MUSÍ prepísať každý token zo svetlej,
     3) súbor `static/css/vzhlady/X.css`; rozloženie shellu v ňom LEN
        v `@media (min-width: 861px)` — pod 861 px je menu zásuvka z mobil.css.

   Téma: pri šablóne base.html VŽDY nastaví `data-theme` (aj „podľa
   systému" sa prekladá na light/dark), preto tu nie je zrkadlo v @media.

   GRAFOVÁ PALETA --c1…--c7 je pre každú šablónu vlastná, ale OVERENÁ
   (C:\Claude\_tmp\nexus-gui\palety_opt.py → validate_palette.py): svetlosť
   v pásme, sýtosť, kontrast ≥ 3 k ploche a odstup susedných sérií pri
   protanopii/deuteranopii ≥ 8 ΔE. Pri zmene palety ho pusti znova.
   Sémantické farby (--success/--warning/--danger/--info, --fill-*) a pásma
   --pas-* sa NEMENIA — „zamietnuté" vyzerá rovnako v každej šablóne.
   ========================================================================== */


/* ==========================================================================
   0) Spoločné — platí aj pre predvolený vzhľad
   ========================================================================== */

:root {
    --font-display: var(--font);
    --display-w: 700;
    --font-num: var(--font);
    --num-w: 700;
    --vz-dot: var(--accent);
    --accent-ink: #ffffff;
    --sb-active-ink: var(--sb-ink-strong);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --pruzina: cubic-bezier(.34, 1.4, .64, 1);
}

/* Ozdoby a pomocníci, ktoré existujú len v šablónach. */
.vz-nad, .vz-bodka, .vz-ornament, .vz-ind, .vz-vlna { display: none; }

/* Prelnutie pri prepnutí vzhľadu v galérii: celá obrazovka ako jeden obraz. */
.vz-prechod .sidebar, .vz-prechod .ctxbar, .vz-prechod .content { view-transition-name: none; }
.vz-prechod::view-transition-old(root) { animation: vz-von .5s ease both; }
.vz-prechod::view-transition-new(root) { animation: vz-dnu .5s ease both; }
@keyframes vz-von { to { opacity: 0; } }
@keyframes vz-dnu { from { opacity: 0; } }


/* ==========================================================================
   1) Galéria vzhľadov (core/vzhlad.html)
   ========================================================================== */

.vz-rezim { align-items: center; }
.vz-rezim .seg button { display: inline-flex; align-items: center; gap: 6px; }

.vz-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    margin: 6px 0 18px;
}
.vz-karta {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 10px;
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.vz-karta:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.vz-karta.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-sm); }
@supports selector(:has(a)) {
    .vz-karta:has(.vz-radio:focus-visible) { box-shadow: var(--focus); }
}
.vz-karta.je-nacitava .vz-nahlad::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    background-size: 240% 100%; animation: vz-lesk 1s ease infinite;
}
@keyframes vz-lesk { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.vz-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.vz-popis { display: flex; flex-direction: column; gap: 4px; padding: 14px 8px 8px; }
.vz-riadok { display: flex; align-items: baseline; gap: 10px; }
.vz-cislo { font-family: var(--mono); font-size: .72rem; color: var(--faint); letter-spacing: .06em; }
.vz-meno { font-size: 1.28rem; font-weight: 680; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.vz-karta[data-kod="atelier"] .vz-meno,
.vz-karta[data-kod="bordeaux"] .vz-meno { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; }
.vz-karta[data-kod="atelier"] .vz-meno { font-style: italic; }
.vz-karta[data-kod="pulse"] .vz-meno { font-weight: 850; text-transform: uppercase; letter-spacing: -.04em; }
.vz-karta[data-kod="nordic"] .vz-meno { font-weight: 450; letter-spacing: -.03em; }
.vz-karta[data-kod="midnight"] .vz-meno { font-weight: 620; letter-spacing: -.035em; }
.vz-karta[data-kod="maison"] .vz-meno { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -.04em; }
.vz-karta[data-kod="orbit"] .vz-meno { font-size: .95rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.vz-karta[data-kod="canvas"] .vz-meno { font-weight: 750; letter-spacing: -.07em; font-size: 1.45rem; }
.vz-karta[data-kod="canvas"] .vz-meno::after { content: " \2733"; color: #f27841; }
.vz-karta[data-kod="aurora"] .vz-meno { font-weight: 400; letter-spacing: -.05em; font-size: 1.5rem; }
.vz-karta[data-kod="aurora"] .vz-meno::after { content: "."; font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #9a85df; }
.vz-karta[data-kod="monograph"] .vz-meno { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.55rem; letter-spacing: -.03em; }
.vz-karta[data-kod="monograph"] .vz-meno::after { content: "."; color: #ae442f; }
.vz-karta[data-kod="terrace"] .vz-meno { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: 1.5rem; color: var(--ink); }
.vz-aktivny {
    margin-left: auto; display: none; align-items: center; gap: 4px;
    font-size: .72rem; font-weight: 700; color: var(--brand-ink-on); background: var(--brand);
    padding: 3px 9px 3px 7px; border-radius: var(--r-pill); align-self: center;
}
.vz-karta.is-on .vz-aktivny { display: inline-flex; animation: vz-pop .35s var(--pruzina); }
@keyframes vz-pop { from { transform: scale(.6); opacity: 0; } }
.vz-nalada { font-size: .86rem; font-weight: 620; color: var(--ink-soft); }
.vz-text { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.vz-stitky { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vz-stitok {
    display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600;
    color: var(--muted); background: var(--sunken); border: 1px solid var(--line-soft);
    padding: 2px 9px; border-radius: var(--r-pill);
}
.vz-pozn { display: flex; gap: 8px; align-items: flex-start; max-width: var(--read-max); }
.vz-pozn .ti { font-size: 16px; margin-top: 1px; }
.vz-bezjs { grid-column: 1 / -1; }

/* --- Miniatúra portálu — farbí sa tokenmi šablóny (bloky nižšie) ---------- */
.vz-nahlad {
    position: relative;
    display: flex; height: 176px; overflow: hidden;
    background: var(--bg); color: var(--ink);
    border-radius: calc(var(--r-lg) - 5px);
    border: 1px solid var(--line-soft);
    font-family: var(--font);
    transition: transform .35s var(--ease);
}
.vz-karta:hover .vz-nahlad { transform: scale(1.015); }
.vz-nahlad > span { display: flex; }
.vzn-rail {
    flex: 0 0 25%; flex-direction: column; gap: 6px;
    background: var(--sb-bg); padding: 12px 8px;
    border-right: 1px solid var(--sb-line);
}
.vzn-logo { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.vzn-logo i { width: 11px; height: 11px; border-radius: 50%; background: #ef3e3d; flex: 0 0 auto; }
.vzn-logo b { height: 6px; width: 60%; border-radius: 3px; background: var(--sb-ink-strong); opacity: .85; }
.vzn-pol { height: 7px; border-radius: 3px; background: var(--sb-ink); opacity: .32; margin: 3px 4px; }
.vzn-pol.is-on { height: 15px; margin: 0; opacity: 1; background: var(--sb-active-bg); border-radius: var(--r-xs); position: relative; }
.vzn-pol.is-on::after { content: ""; position: absolute; left: 7px; right: 35%; top: 5px; height: 5px; border-radius: 3px; background: var(--sb-active-ink); opacity: .9; }
.vzn-plocha { flex: 1; flex-direction: column; gap: 8px; padding: 10px 12px; min-width: 0; }
.vzn-lista { height: 7px; width: 42%; margin-left: auto; border-radius: 4px; background: var(--line); }
.vzn-titul {
    display: block; font-family: var(--font-display); font-weight: var(--display-w);
    font-size: 17px; letter-spacing: -.03em; color: var(--ink); line-height: 1.1;
}
.vzn-titul em { font-style: normal; color: var(--vz-dot); }
.vzn-kpis { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vzn-kpi {
    display: flex; flex-direction: column; gap: 5px; padding: 7px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.vzn-kpi i { height: 4px; width: 60%; border-radius: 2px; background: var(--muted); opacity: .45; }
.vzn-kpi b { height: 8px; width: 75%; border-radius: 2px; background: var(--ink); }
.vzn-kpi.is-hl { background: var(--brand-50); border-color: var(--brand-100); }
.vzn-kpi.is-hl b { background: var(--brand); }
.vzn-panel {
    flex: 1; gap: 10px; align-items: flex-end; padding: 8px 9px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.vzn-graf { display: flex; align-items: flex-end; gap: 4px; height: 100%; flex: 1.3; }
.vzn-graf i { flex: 1; border-radius: min(var(--graf-r, 2px), 4px) min(var(--graf-r, 2px), 4px) 0 0; background: var(--c1); }
.vzn-graf i:nth-child(3n+2) { background: var(--c2); }
.vzn-graf i:nth-child(3n) { background: var(--c3); }
.vzn-graf i:nth-child(1) { height: 45%; } .vzn-graf i:nth-child(2) { height: 62%; }
.vzn-graf i:nth-child(3) { height: 52%; } .vzn-graf i:nth-child(4) { height: 80%; }
.vzn-graf i:nth-child(5) { height: 66%; } .vzn-graf i:nth-child(6) { height: 92%; }
.vzn-graf i:nth-child(7) { height: 74%; }
.vzn-riadky { display: flex; flex-direction: column; gap: 6px; flex: 1; align-self: stretch; justify-content: center; }
.vzn-riadky i { height: 5px; border-radius: 3px; background: var(--line); }
.vzn-riadky i:nth-child(2) { width: 80%; } .vzn-riadky i:nth-child(3) { width: 60%; }

/* Rozloženia v miniatúre zodpovedajú rozloženiu shellu šablóny. */
.vz-nahlad[data-nahlad="atelier"] { flex-direction: column; }
.vz-nahlad[data-nahlad="atelier"] .vzn-rail {
    flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--sb-line);
}
.vz-nahlad[data-nahlad="atelier"] .vzn-logo { margin: 0 6px 0 0; width: 22%; }
.vz-nahlad[data-nahlad="atelier"] .vzn-pol { width: 9%; margin: 0; }
.vz-nahlad[data-nahlad="atelier"] .vzn-pol.is-on { height: 7px; background: transparent; box-shadow: 0 5px 0 -3px var(--sb-active-ink); }
.vz-nahlad[data-nahlad="atelier"] .vzn-pol.is-on::after { left: 0; right: 0; top: 1px; }
.vz-nahlad[data-nahlad="atelier"] .vzn-titul { font-style: italic; }
.vz-nahlad[data-nahlad="atelier"] .vzn-panel { border-width: 2px 0 1px; border-color: var(--ink) transparent var(--line); }
.vz-nahlad[data-nahlad="bordeaux"] .vzn-rail { order: 2; border-right: 0; border-left: 1px solid var(--sb-line); }
.vz-nahlad[data-nahlad="bordeaux"] .vzn-kpi.is-hl { border-radius: 14px 4px 4px 4px; }
.vz-nahlad[data-nahlad="bordeaux"] .vzn-panel { border-top: 3px double var(--accent); }
.vz-nahlad[data-nahlad="midnight"] .vzn-rail { margin: 6px 0 6px 6px; border-radius: 9px; border: 1px solid var(--sb-line); }
.vz-nahlad[data-nahlad="midnight"] .vzn-graf i { box-shadow: 0 0 8px color-mix(in srgb, currentColor 0%, var(--c1)); }
.vz-nahlad[data-nahlad="midnight"] .vzn-plocha { background: radial-gradient(circle at 80% 10%, rgba(126, 124, 243, .18), transparent 55%); }
.vz-nahlad[data-nahlad="pulse"] .vzn-kpi.is-hl { background: var(--ink); border-color: var(--ink); }
.vz-nahlad[data-nahlad="pulse"] .vzn-kpi.is-hl b { background: var(--accent); }
.vz-nahlad[data-nahlad="pulse"] .vzn-kpi.is-hl i { background: var(--surface); }
.vz-nahlad[data-nahlad="pulse"] .vzn-panel { box-shadow: 3px 3px 0 var(--ink); border-color: var(--ink); }
.vz-nahlad[data-nahlad="nordic"] .vzn-kpi, .vz-nahlad[data-nahlad="nordic"] .vzn-panel { border-color: transparent; box-shadow: 0 2px 8px rgba(60, 116, 144, .1); }

/* Predvolený vzhľad (Nexus Signature) v miniatúre: farby aj tvar berie
   z bloku 00 NEXUS nižšie (svetlá téma), tu len polomer stĺpca grafu. */
.vz-nahlad[data-nahlad="nexus"] { --graf-r: 4px; }


/* ==========================================================================
   2) Spoločná vrstva všetkých šablón (nie pôvodného vzhľadu)
   ========================================================================== */

:root[data-design] {
    scrollbar-color: var(--line-strong) transparent;
}
/* Tón scény modulov (styles.css sekcia 19, templates/core/_scena_ton.html):
   ilustrácie v uhlíku a červenej Nexusu prejdú do jedného tónu značky
   šablóny (v tmavej téme do jej svetlej značky). Pôvodný Nexus nechá originál. */
:root[data-design]:not([data-design="nexus"]) {
    --scena-ton: var(--brand);
    --scena-filter: url(#nx-ton);
}
:root[data-design]:not([data-design="nexus"])[data-theme="dark"] { --scena-filter: url(#nx-ton-tma); }
:root[data-design] ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ink); }
/* Fokus z klávesnice nad tieňom šablóny: súbory charakteru dávajú kartám
   a tlačidlám vlastný tieň váhou (0,3,0) a prstenec z styles.css by pod ním
   zmizol (Nordic, Atelier — preklikané Tabom 4. 10. 2026). Polia majú
   vlastný fokus (okraj + --ring), preto sú vynechané. */
@supports selector(:is(a)) and selector(:where(a)) {
    :root[data-design] :focus-visible:not(input, select, textarea, :where([tabindex="-1"])),
    :root[data-design] .side-nav a.is-active:focus-visible,
    :root[data-design] [data-vz-ind] > :is(.is-on, .is-active, [aria-pressed="true"], [aria-selected="true"]):focus-visible { box-shadow: var(--focus); }
}

:root[data-design] .vz-nad {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
:root[data-design] .vz-bodka { display: inline; color: var(--vz-dot); }

/* Menu — farby cez tokeny; vodoznak a červený pásik aktívnej položky patria
   pôvodnej značke, šablóny majú vlastný spôsob zvýraznenia. */
:root[data-design] .sidebar::before { display: none; }
:root[data-design] .side-nav a.is-active::before { display: none; }
:root[data-design] .side-nav a.is-active { background: var(--sb-active-bg); color: var(--sb-active-ink); }
:root[data-design] .side-nav a.is-active .ti { color: inherit; }
:root[data-design] .side-nav a .nav-cnt,
:root[data-design] .bell-badge { background: var(--accent-fill, var(--accent)); color: var(--accent-ink); }
:root[data-design] .sidebar-brand .name::after { content: "."; color: var(--vz-dot); }
:root[data-design] .avatar { background: var(--sb-active-bg); color: var(--sb-active-ink); }

:root[data-design] h1 { font-family: var(--font-display); font-weight: var(--display-w); }
:root[data-design] .page-head h1 { font-size: 1.62rem; letter-spacing: -.03em; line-height: 1.2; }
:root[data-design] .panel h2, :root[data-design] .panel-head h2,
:root[data-design] .nx-karta h2, :root[data-design] .nx-karta h3 { font-family: var(--font-display); }
:root[data-design] .stat-value,
:root[data-design] .kpi-v,
:root[data-design] .nx-z-cislo { font-family: var(--font-num); font-weight: var(--num-w); }
:root[data-design] .pav-fab:hover { background: var(--brand-dark); }

/* Hlavná (tmavá) karta radu `.nx-cisla` je vždy `--brand` s `--brand-ink-on`
   textom — aj keď šablóna vzhľadu farbí všetky `.stat-card` po svojom
   (Terrace a Orbit plocha, Aurora sklo, Midnight prechod). Bez toho bol na
   karte v týchto štyroch vzhľadoch biely text na svetlej ploche a smer
   (--nx-na-tmavej-*) sa počítal proti farbe, ktorá tam nebola (8. 10. 2026). */
:root[data-design] .nx-cisla > .accent.accent {
    background: var(--brand); border-color: var(--brand); color: var(--brand-ink-on);
}
:root[data-design] .nx-cisla > .accent.accent .stat-top { color: inherit; }   /* Orbit: tlmený popis */

/* Holé `.btn` bez variantu nemá v styles.css podklad — prehliadač mu dal
   systémovú sivú. `:where` = nulová špecificita: modulové pravidlo vyhrá. */
@supports selector(:where(a)) {
    :root[data-design] :where(button.btn:not(.btn-primary, .btn-ghost, .btn-submit, .btn-danger, .btn-ms)) {
        background: var(--surface); color: var(--ink); border-color: var(--line-strong);
    }
    :root[data-design] :where(button.btn:not(.btn-primary, .btn-ghost, .btn-submit, .btn-danger, .btn-ms)):hover {
        background: var(--sunken);
    }
}

/* --- Tabuľky riadené tokenmi ------------------------------------------------
   Jedno pravidlo pre `table.tbl` aj 12 modulových tabuliek (ZJEDNOTENIE
   v modules.css). Špecificita je ZÁMERNE rovnaká ako základné pravidlá
   (`:where` z koreňa nič nepridá) — vyhrá len preto, že ide neskôr. Stavové
   pravidlá modulov (chyba, schválené, vybraný riadok) sú špecifickejšie a
   ostávajú nedotknuté. Šablóna mení vzhľad nastavením `--th-*`, `--td-*`,
   `--tr-*`, `--tf-*`, `--tbl-*`. */
@supports selector(:where(a)) {
    :where(:root[data-design]) .table-wrap {
        border: var(--tbl-ram, 1px solid var(--line));
        border-radius: var(--tbl-r, var(--r));
        background: var(--tbl-bg, var(--surface));
        box-shadow: var(--tbl-tien, none);
    }
    :where(:root[data-design]) .tbl thead th {
        background: var(--th-bg, var(--sunken));
        color: var(--th-ink, var(--ink-soft));
        font-family: var(--th-font, inherit);
        font-size: var(--th-fs, .735rem);
        font-weight: var(--th-w, 700);
        letter-spacing: var(--th-ls, .045em);
        text-transform: var(--th-tt, uppercase);
        border-bottom-color: transparent;
        box-shadow: var(--th-linka, inset 0 -1px 0 var(--line));
    }
    :where(:root[data-design]) .tbl tbody td {
        border-bottom-color: var(--td-linka, var(--line-soft));
    }
    :where(:root[data-design]) .tbl tbody tr:hover > td,
    :where(:root[data-design]) .tbl tbody tr:hover > td.stick {
        background-color: var(--tr-hover, var(--tonal));
    }
}
/* Farba súčtu zo šablóny len s nulovou váhou — farebná trieda bunky
   (plus/mínus, tlmené) má vždy prednosť (krok 0b). */
@supports selector(:where(a)) {
    :where(:root[data-design] .tbl tfoot td) { color: var(--tf-ink, inherit); }
    :where(:root[data-design]) .tbl tfoot td,
    :where(:root[data-design]) .tbl tfoot td.stick {
        background: var(--tf-bg, var(--tonal));
        border-top-color: transparent;
        box-shadow: var(--tf-linka, inset 0 1px 0 var(--line-strong));
    }
    :where(:root[data-design]) table.nx-tab tbody tr:not([class*="st-"]):hover > td:first-child {
        box-shadow: var(--tr-pruh, inset 3px 0 0 var(--c1));
    }
    :where(:root[data-design]) table.nx-tab tbody td.nx-zoradeny {
        background-color: color-mix(in srgb, var(--tr-zoradeny, var(--c1)) 6%, transparent);
    }
    :where(:root[data-design]) th.nx-sortable.nx-sorted { color: var(--th-ink-zoradeny, var(--ink)); }
}

/* --- Posuvný indikátor (vzhlady.js) -------------------------------------------
   Záložky (`.nx-zalozky` — jedna trieda pre všetky moduly) a prepínače (`.seg`,
   `.graf-typy`) dostanú jeden prvok `.vz-ind`, ktorý sa presúva
   za aktívnou položkou a pri prejdení myšou sa nakloní k položke pod kurzorom.
   Skript označí skupinu `data-vz-ind="zalozky|prepinac"` a dá súradnice
   --ix/--iy/--iw/--ih; ako vyzerá, rozhoduje šablóna tokenmi --tab-ind-*
   a --seg-ind-*. */
:root[data-design] .vz-ma-ind { position: relative; isolation: isolate; }
@supports selector(:is(a)) {
    :root[data-design] .vz-ma-ind > :is(button, a) { position: relative; z-index: 1; }
}
:root[data-design] .vz-ind {
    display: block; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
    width: var(--iw, 0); height: var(--ih, 0);
    transform: translate(var(--ix, 0), var(--iy, 0));
    transition: transform .5s var(--pruzina), width .5s var(--pruzina), height .3s ease, opacity .25s ease, background-color .25s ease;
}
:root[data-design] .vz-ind.bez-animacie { transition: none; }
@supports selector(:is(a)) {
    :root[data-design] [data-vz-ind="prepinac"] > :is(.is-on, [aria-pressed="true"]) { background: transparent; box-shadow: none; }
}
:root[data-design] [data-vz-ind="prepinac"] > .vz-ind {
    background: var(--seg-ind, var(--brand)); border-radius: var(--seg-ind-r, var(--r-pill));
    box-shadow: var(--seg-ind-tien, var(--shadow-xs));
}
:root[data-design] [data-vz-ind="prepinac"] > .vz-ind.je-nahlad { opacity: .55; }
@supports selector(:is(a)) {
    :root[data-design] [data-vz-ind="zalozky"] > :is(.is-on, .is-active, [aria-selected="true"]) { border-bottom-color: transparent; }
}
:root[data-design] [data-vz-ind="zalozky"] > .vz-ind {
    height: var(--tab-ind-h, 2px);
    transform: translate(var(--ix, 0), calc(var(--iy, 0px) + var(--ih, 0px) - var(--tab-ind-h, 2px) - 1px));
    background: var(--tab-ind, var(--accent)); border-radius: var(--tab-ind-r, 2px);
}
:root[data-design] [data-vz-ind="zalozky"] > .vz-ind.je-nahlad { opacity: .35; }
/* Záložky sú odkazy — v šablónach nikdy podčiarknuté. */
@supports selector(:is(a)) {
    :root[data-design] .nx-zalozky > :is(a, button) { text-decoration: none; }
}

/* --- Svetlo pod kurzorom (vzhlady.js dáva --mx/--my) ---------------------------
   Šablóna ho zapne tokenom `--vz-svetlo` (farba svetla); bez neho nič. */
@supports selector(:is(a)) {
    :root[data-design] :is(.stat-card, .nx-karta, .panel, .vz-uvod):hover {
        background-image: radial-gradient(var(--vz-svetlo-r, 380px) circle at var(--mx, 50%) var(--my, 50%),
            var(--vz-svetlo, transparent), transparent 70%);
    }
}

/* --- Vlnka po kliknutí (vzhlady.js, zapína `--vz-vlna: 1`) --------------------- */
:root[data-design] .vz-vlna {
    display: block; position: absolute; border-radius: 50%; pointer-events: none;
    width: 8px; height: 8px; margin: -4px 0 0 -4px; z-index: 0;
    background: var(--vz-vlna-farba, currentColor); opacity: .28;
    animation: vz-vlna .6s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes vz-vlna { to { transform: scale(var(--vz-vlna-s, 40)); opacity: 0; } }

/* --- Nástenka: úvod s monogramom ------------------------------------------ */
:root[data-design] .vz-uvod {
    position: relative; align-items: center; overflow: hidden;
    padding: 24px 28px; margin-bottom: 22px;
    background-color: transparent;
    background: var(--vz-hero, var(--surface));
    color: var(--vz-hero-ink, var(--ink));
    border: 1px solid var(--vz-hero-line, var(--line));
    border-radius: var(--r-xl);
}
:root[data-design] .vz-uvod h1 { font-size: 1.9rem; }
:root[data-design] .vz-uvod p { color: var(--vz-hero-muted, var(--muted)); }
:root[data-design] .vz-uvod .vz-nad { color: var(--vz-hero-muted, var(--muted)); }
@media (min-width: 1100px) {
    :root[data-design] .vz-ornament {
        display: grid; place-items: center; position: relative;
        flex: 0 0 auto; width: 112px; height: 112px; margin: -8px 4px -8px 18px;
    }
    .vz-ornament::before, .vz-ornament::after {
        content: ""; position: absolute; inset: -6px -22px; border-radius: 50%;
        border: 1px solid var(--vz-ring, var(--line-strong)); transform: rotate(-24deg);
    }
    .vz-ornament::after { inset: -22px 6px; }
    .vz-ornament span {
        position: relative; z-index: 1; width: 76px; height: 76px;
        display: flex; align-items: center; justify-content: center; padding-top: 2px;
        background: var(--vz-orn-bg, var(--brand)); color: var(--vz-orn-ink, var(--brand-ink-on));
        border-radius: var(--vz-orn-r, 20px); box-shadow: var(--vz-orn-shadow, var(--shadow));
        font-family: var(--font-display); font-weight: var(--display-w); font-size: 42px; line-height: 1;
        letter-spacing: -.04em;
    }
    .vz-ornament span em { font-style: normal; color: var(--vz-orn-dot, var(--vz-dot)); }
    .vz-ornament i {
        position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 50%;
        background: var(--vz-orn-dot, var(--vz-dot)); right: -4px; top: 10px;
    }
}

@media (min-width: 861px) {
    :root[data-design] { --sidebar-w: 240px; }
    :root[data-design] .content { padding: 0 32px; margin-top: 28px; }
    :root[data-design] .sidebar-brand { padding: 20px 18px 16px; }
    :root[data-design] .sidebar-brand .name { font-family: var(--font-display); font-weight: var(--display-w); font-size: 1.18rem; }
    :root[data-design] .side-nav { padding: 6px 12px; }
    :root[data-design] .side-nav a { padding: 9px 12px; }
    :root[data-design] .ctxbar { padding-left: 28px; padding-right: 28px; min-height: 58px; }
}

/* --- Kĺzavé zvýraznenie v menu (vzhlady.js) -------------------------------------
   Pod položku, na ktorej je myš, sa presunie jedna „pilulka" — nerozsvecujú
   sa položky jedna po druhej, ale jedno svetlo kĺže menu. Farbu a tvar
   dáva šablóna tokenmi `--menu-ind` a `--menu-ind-r`. */
:root[data-design] .side-nav.vz-ma-menu { position: relative; }
:root[data-design] .side-nav.vz-ma-menu a { position: relative; z-index: 1; }
:root[data-design] .side-nav.vz-ma-menu a:not(.is-active):hover { background: transparent; }
:root[data-design] .vz-menu-ind {
    display: block; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0;
    width: var(--iw, 0); height: var(--ih, 0); transform: translate(var(--ix, 0), var(--iy, 0));
    background: var(--menu-ind, var(--sb-hover)); border-radius: var(--menu-ind-r, var(--r-sm));
    transition: transform .42s var(--pruzina), width .42s var(--pruzina), height .3s ease, opacity .25s ease;
}
:root[data-design] .vz-menu-ind.je-videt { opacity: 1; }
:root[data-design] .vz-menu-ind.bez-animacie { transition: opacity .2s ease; }

/* --- 3D naklonenie karty za kurzorom (vzhlady.js, zapína `--vz-naklon: 1`) ----
   Dlaždica sa jemne nakloní k myši (najviac pár stupňov) a zdvihne sa. */
:root[data-design] .vz-naklon {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px) !important;
    transition: transform .12s ease-out, box-shadow .3s ease, border-color .3s ease !important;
    will-change: transform;
}
:root[data-design] .vz-naklon-von { transition: transform .5s var(--pruzina), box-shadow .3s ease !important; }

/* --- Odkrývanie pri skrolovaní (vzhlady.js) ------------------------------------
   Panely pod okrajom obrazovky sa pri príchode jemne vynoria. Čo je vidieť
   hneď pri načítaní, sa NEskrýva — žiadne bliknutie, žiadna prázdna stránka
   bez JavaScriptu. */
:root[data-design] .vz-odhal { opacity: 0; transform: translateY(18px); }
:root[data-design] .vz-odhal.je-videt {
    opacity: 1; transform: none;
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
@media print { :root[data-design] .vz-odhal { opacity: 1 !important; transform: none !important; } }

/* --- Nábeh nadpisu stránky -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    :root[data-design] .page-head h1 { animation: vz-nadpis .6s cubic-bezier(.2, .7, .2, 1) both; }
    :root[data-design] .page-head h1 .vz-bodka { display: inline-block; animation: vz-bodka .5s var(--pruzina) .35s both; }
    :root[data-design] .page-head p { animation: vz-nadpis .6s cubic-bezier(.2, .7, .2, 1) .08s both; }
}
@keyframes vz-nadpis { from { opacity: 0; transform: translateY(8px); } }
@keyframes vz-bodka { from { opacity: 0; transform: scale(0); } }

/* --- Kruhové prelnutie svetlá/tmavá (vzhlady.js) -------------------------------- */
.vz-kruh::view-transition-old(root), .vz-kruh::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.vz-kruh .sidebar, .vz-kruh .ctxbar, .vz-kruh .content { view-transition-name: none; }

/* Zasunuté menu na telefóne nesmie hádzať tieň do obrazovky — v šablónach
   s tvrdým tieňom (Pulse: 9 px bez rozmazania) by presvital pri ľavom okraji. */
@media (max-width: 860px) {
    :root[data-design] body:not(.nav-open) .sidebar { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    @supports selector(:is(a)) {
        :root[data-design] :is(.vz-ind, .vz-menu-ind) { transition: none; }
    }
    :root[data-design] .vz-vlna { display: none; }
    :root[data-design] .vz-odhal { opacity: 1; transform: none; }
    :root[data-design] .vz-naklon { transform: none !important; }
}


/* ==========================================================================
   00 NEXUS — predvolený vzhľad, smer SIGNATURE (schválený 31. 10. 2026)
   Tmavé grafitové menu, pokojné ivory pozadie, svetlé pracovné plochy,
   koralová hlavná akcia, jemné okraje a mäkké tiene. Kód ostáva `nexus`
   (žiadna nová šablóna v galérii — kto má predvolený vzhľad, dostane
   Signature priamo). Referenčné hodnoty: docs/vzhlady/SIGNATURE.md.
   Sémantické farby (--success, --warning, --danger, --info, --fill-*,
   --pas-*) a grafová paleta ostávajú zo styles.css — význam sa nemení.
   Charakter (menu, nástenka, scény, pohyb) je vo vzhlady/nexus.css.
   ========================================================================== */

:root[data-design="nexus"], .vz-nahlad[data-nahlad="nexus"] {
    --r-xs: 5px; --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
    --font-display: var(--font); --display-w: 700; --num-w: 650;
    --vz-orn-r: 22px;
    --graf-r: 6; --graf-stlpec: 28; --graf-ciara: 2.6; --graf-hladko: .35; --graf-plocha: .30;
    --graf-symbol: emptyCircle; --graf-symbol-vel: 7; --graf-mriezka: solid; --graf-gradient: 1;
    --graf-donut: 60%; --graf-donut-r: 8; --graf-donut-medzera: 1.8;
    --graf-anim: 950; --graf-easing: cubicOut; --graf-oneskorenie: 32;
    --graf-kurzor: rgba(204, 65, 66, .07);
    /* Jedna časová škála pohybu (zadanie Signature §8): odozva, malá zmena,
       nástup obsahu a odstup panelov. */
    --nex-t-odozva: 120ms; --nex-t-zmena: 180ms; --nex-t-nastup: 280ms; --nex-t-odstup: 35ms;
    --nex-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --- SVETLÁ --- */
:root[data-design="nexus"], .vz-nahlad[data-nahlad="nexus"] {
    /* Rampy: neutrálny teplý grafit namiesto hnedastej uhlíkovej a koral
       namiesto signálnej červenej — všetko, čo z rámp čerpá, ide s nimi. */
    --char-100: #efeeea; --char-200: #dedcd6; --char-300: #c4c1b9; --char-400: #96938b;
    --char-500: #696862; --char-600: #4a4945; --char-700: #2d2b28; --char-800: #272624; --char-900: #1a1918;
    --red-50: #fbefed; --red-200: #f3c4c1; --red-400: #e0726f; --red-600: #cc4142; --red-700: #b33738; --red-800: #8f2a2b;
    --cream-200: #e2dfd6; --cream-soft: #f2f1ed; --cream-tint: #f8f7f3;

    --bg: #f6f5f1; --sunken: #f2f1ed; --surface: #ffffff; --surface-2: #fbfaf7; --tonal: #f8f7f3; --raised: #ffffff;
    --ink: #292928; --ink-soft: #4f4e49; --muted: #696862; --faint: #73726b; --ink-inv: #ffffff;
    --line: #e6e4df; --line-soft: #efeee9; --line-strong: #d5d2ca; --pole-okraj: #85837c;

    /* --brand = silná súhrnná plocha a fokus (grafit); hlavná AKCIA je
       koral (--accent) — tlačidlo .btn-primary prefarbuje nexus.css. */
    --brand: #2d2b28; --brand-dark: #1f1e1c; --brand-ink-on: #ffffff;
    --brand-50: #f8f7f3; --brand-100: #f2f1ed; --brand-200: #e2dfd6; --brand-ink: #2d2b28;
    --accent: #cc4142; --accent-soft: #e0726f; --accent-ink: #ffffff; --accent-fill: #cc4142; --vz-dot: #cc4142;
    --nex-akcia: var(--red-600); --nex-akcia-hover: var(--red-700); --nex-akcia-ink: #ffffff;
    --nx-na-tmavej-rast: #f3c98b; --nx-na-tmavej-pokles: #9fd8c9;

    --c1: #008b79; --c2: #c67a12; --c3: #3f6fc4; --c4: #9c4a80; --c5: #6f7d24; --c6: #5b6b8a; --c7: #a15c3a;

    --sb-bg: #272624; --sb-ink: #d4d1ca; --sb-ink-strong: #ffffff; --sb-faint: #a7a39c;
    --sb-hover: rgba(255, 255, 255, .06); --sb-line: rgba(255, 255, 255, .09);
    --sb-active-bg: #3d3a36; --sb-active-ink: #ffffff;

    --shadow-xs: 0 1px 2px rgba(38, 34, 28, .04);
    --shadow-sm: 0 1px 3px rgba(38, 34, 28, .06), 0 1px 2px rgba(38, 34, 28, .03);
    --shadow:    0 9px 30px rgba(38, 34, 28, .07), 0 1px 3px rgba(38, 34, 28, .04);
    --shadow-lg: 0 20px 48px rgba(38, 34, 28, .16), 0 4px 12px rgba(38, 34, 28, .06);
    --focus:     0 0 0 2px var(--surface), 0 0 0 4px #5f5d57;
}

/* --- TMAVÁ --- */
:root[data-design="nexus"][data-theme="dark"] {
    --char-100: #efeeea; --char-200: #dedcd6; --char-300: #c4c1b9; --char-400: #96938b;
    --char-500: #696862; --char-600: #4a4945; --char-700: #2d2b28; --char-800: #272624; --char-900: #1a1918;
    --red-50: #462e2d; --red-200: #6b3c3a; --red-400: #f3a19b; --red-600: #ee817a; --red-700: #f3a19b; --red-800: #f8c3be;
    --cream-200: #45463f; --cream-soft: #31322f; --cream-tint: #2d2e2b;

    --bg: #202120; --sunken: #252624; --surface: #292a28; --surface-2: #2d2e2b; --tonal: #31322f; --raised: #31322f;
    --ink: #f0eee7; --ink-soft: #d1cfc7; --muted: #b7b5ad; --faint: #a09e96; --ink-inv: #1d1d1b;
    --line: #41423c; --line-soft: #353631; --line-strong: #52534c; --pole-okraj: #807f77;

    --brand: #e4dfd2; --brand-dark: #f6f3ea; --brand-ink-on: #25251f;
    --brand-50: #2d2e2b; --brand-100: #31322f; --brand-200: #45463f; --brand-ink: #f0eee7;
    /* Tmavý akcent má tmavý text (#251b1a), nie automaticky biely. */
    --accent: #ee817a; --accent-soft: #f3a19b; --accent-ink: #251b1a; --accent-fill: #ee817a; --vz-dot: #ee817a;
    --nex-akcia: var(--red-600); --nex-akcia-hover: var(--red-700); --nex-akcia-ink: #251b1a;
    --nx-na-tmavej-rast: #96430b; --nx-na-tmavej-pokles: #0b5049;

    --c1: #0f9c88; --c2: #c28429; --c3: #5f8ce0; --c4: #b3689f; --c5: #87993a; --c6: #7d8fb3; --c7: #c07a52;

    --sb-bg: #191a18; --sb-ink: #d1d0c8; --sb-ink-strong: #ffffff; --sb-faint: #a7a69e;
    --sb-hover: rgba(255, 255, 255, .05); --sb-line: rgba(255, 255, 255, .08);
    --sb-active-bg: #31332e; --sb-active-ink: #ffffff;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .34);
    --shadow:    0 8px 24px rgba(0, 0, 0, .32), 0 1px 3px rgba(0, 0, 0, .24);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .34);
    --focus:     0 0 0 2px var(--surface), 0 0 0 4px #c9c6bd;
}


/* ==========================================================================
   01 BOTANICAL — skleník a herbár: pokoj, rast, organické tvary
   ========================================================================== */

:root[data-design="botanical"], .vz-nahlad[data-nahlad="botanical"] {
    --r-xs: 7px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px;
    --font-display: var(--font); --display-w: 560; --num-w: 600;
    --char-100: #ecf0ea; --char-200: #d8e0d5; --char-300: #bccabb; --char-400: #8a9c8d;
    --char-500: #627566; --char-600: #45574a; --char-700: #263a30; --char-800: #1e3027; --char-900: #13201a;
    --vz-orn-r: 26px;
    --graf-r: 9; --graf-stlpec: 26; --graf-ciara: 2.6; --graf-hladko: .45; --graf-plocha: .30;
    --graf-symbol: emptyCircle; --graf-symbol-vel: 7; --graf-mriezka: dashed; --graf-gradient: 1;
    --graf-donut: 62%; --graf-donut-r: 12; --graf-donut-medzera: 2.4;
    --graf-anim: 1100; --graf-easing: cubicOut; --graf-oneskorenie: 40;
    --graf-kurzor: rgba(154, 196, 125, .16);
}
:root[data-design="botanical"], .vz-nahlad[data-nahlad="botanical"] {
    --bg: #f3f5f0; --sunken: #ecf0e8; --surface: #ffffff; --surface-2: #fafbf8; --tonal: #f3f7ef; --raised: #ffffff;
    --ink: #1f2b27; --ink-soft: #4b5a54; --muted: #5d6b65; --faint: #6c7872; --ink-inv: #ffffff;
    --line: #dfe6db; --line-soft: #ebf0e8; --line-strong: #c8d3c5; --pole-okraj: #818b7e;
    --cream-200: #dde5d3; --cream-soft: #eef2e8; --cream-tint: #f6f8f2;
    --brand: #264f3c; --brand-dark: #193d2b; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #deb870; --nx-na-tmavej-pokles: #8cceb0;
    --brand-50: #eff5ea; --brand-100: #e2edd8; --brand-200: #c9dcbb; --brand-ink: #264f3c;
    --accent: #56813e; --accent-soft: #9ac47d; --accent-ink: #ffffff; --vz-dot: #7fa862;
    --c1: #40a47d; --c2: #906908; --c3: #4371de; --c4: #b64891; --c5: #8e862d; --c6: #2d8ab8; --c7: #c06240;
    --sb-bg: #172c24; --sb-ink: #b6c6ba; --sb-ink-strong: #f1f6ec; --sb-faint: #839888;
    --sb-hover: rgba(255, 255, 255, .06); --sb-line: rgba(255, 255, 255, .08);
    --sb-active-bg: #2f4c3c; --sb-active-ink: #e6f3d8;
    --shadow-xs: 0 1px 2px rgba(24, 46, 38, .05);
    --shadow-sm: 0 2px 6px rgba(24, 46, 38, .06), 0 1px 2px rgba(24, 46, 38, .04);
    --shadow:    0 12px 28px -8px rgba(24, 59, 36, .16), 0 2px 6px rgba(24, 46, 38, .05);
    --shadow-lg: 0 28px 60px -12px rgba(24, 46, 38, .26), 0 6px 14px rgba(24, 46, 38, .08);
    --ring: 0 0 0 3px #d5e4c9; --focus: 0 0 0 2px var(--surface), 0 0 0 5px #689946;
    --vz-hero: radial-gradient(ellipse at 88% 20%, rgba(154, 196, 125, .28), transparent 50%), linear-gradient(110deg, var(--brand-50), var(--surface-2) 70%);
    --vz-hero-line: #dbe7d2; --vz-hero-ink: #1f2b27; --vz-hero-muted: #5d6b65;
    --vz-ring: #bfd1b1; --vz-orn-bg: #294d39; --vz-orn-ink: #f1f5e7; --vz-orn-dot: #9ac47d;
    --vz-orn-shadow: 0 16px 32px rgba(38, 79, 60, .24);
    --vz-svetlo: rgba(154, 196, 125, .16);
}
:root[data-design="botanical"][data-theme="dark"] {
    --bg: #0f1814; --sunken: #0c1410; --surface: #16221c; --surface-2: #141f19; --tonal: #1b2922; --raised: #1e2e26;
    --ink: #e7efe4; --ink-soft: #bccbbc; --muted: #9aad9c; --faint: #849786; --ink-inv: #10201a;
    --line: #2a3b32; --line-soft: #202f27; --line-strong: #3a4e42; --pole-okraj: #647a6d;
    --cream-200: #33463a; --cream-soft: #213027; --cream-tint: #1b2821;
    --brand: #a9c98f; --brand-dark: #c3dcaa; --brand-ink-on: #10201a;
    --nx-na-tmavej-rast: #634401; --nx-na-tmavej-pokles: #055539;
    --brand-50: #1a2920; --brand-100: #223428; --brand-200: #355040; --brand-ink: #c7dfb5;
    --accent: #9ac47d; --accent-soft: #b5d69c; --accent-ink: #10201a; --vz-dot: #9ac47d;
    --c1: #47a57c; --c2: #976b0e; --c3: #1783e9; --c4: #ad5c92; --c5: #899605; --c6: #2382b0; --c7: #b75a38;
    --sb-bg: #0a130e; --sb-ink: #a9bbad; --sb-ink-strong: #eef5e9; --sb-faint: #6f8574;
    --sb-hover: rgba(255, 255, 255, .05); --sb-line: rgba(255, 255, 255, .07);
    --sb-active-bg: #243a2d; --sb-active-ink: #d9ecc8;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .4);
    --shadow:    0 12px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 28px 60px -12px rgba(0, 0, 0, .7), 0 6px 14px rgba(0, 0, 0, .4);
    --ring: 0 0 0 3px #2f4a3a; --focus: 0 0 0 2px var(--surface), 0 0 0 5px #7fa56a;
    --vz-hero: radial-gradient(ellipse at 88% 20%, rgba(154, 196, 125, .14), transparent 50%), linear-gradient(110deg, #1b2c22, var(--surface) 70%);
    --vz-hero-line: #2a3b32; --vz-hero-ink: #e7efe4; --vz-hero-muted: #9aad9c;
    --vz-ring: #34503f; --vz-orn-bg: #a9c98f; --vz-orn-ink: #10201a; --vz-orn-dot: #e2efd4;
    --vz-orn-shadow: 0 16px 32px rgba(0, 0, 0, .4);
    --vz-svetlo: rgba(154, 196, 125, .08);
}


/* ==========================================================================
   02 ATELIER — redakcia a tlač: pätkové písmo, papier, rumelka, menu hore
   ========================================================================== */

:root[data-design="atelier"], .vz-nahlad[data-nahlad="atelier"] {
    --r-xs: 1px; --r-sm: 2px; --r: 2px; --r-lg: 3px; --r-xl: 4px; --r-pill: 2px;
    --font-display: var(--serif); --display-w: 400;
    --font-num: var(--serif); --num-w: 400;
    --char-100: #f0ebe3; --char-200: #e0d7ca; --char-300: #c9bcab; --char-400: #9b8a78;
    --char-500: #74655a; --char-600: #54483f; --char-700: #342c27; --char-800: #2a231f; --char-900: #1b1613;
    --vz-orn-r: 50% 50% 4px 4px;
    --graf-r: 0; --graf-stlpec: 16; --graf-ciara: 1.6; --graf-hladko: 0; --graf-plocha: .12;
    --graf-symbol: emptyCircle; --graf-symbol-vel: 6; --graf-mriezka: dotted; --graf-gradient: 0;
    --graf-donut: 74%; --graf-donut-r: 0; --graf-donut-medzera: .6;
    --graf-anim: 1500; --graf-easing: quarticOut; --graf-oneskorenie: 55;
    --graf-os-font: var(--serif);
    --graf-kurzor: rgba(192, 65, 46, .07);
}
:root[data-design="atelier"], .vz-nahlad[data-nahlad="atelier"] {
    --bg: #f6f2ea; --sunken: #efe9de; --surface: #fffdf8; --surface-2: #faf6ee; --tonal: #f8f2e7; --raised: #fffdf8;
    --ink: #2f2823; --ink-soft: #5f554c; --muted: #75675c; --faint: #807267; --ink-inv: #ffffff;
    --line: #ddd4c5; --line-soft: #ebe4d8; --line-strong: #c9bda9; --pole-okraj: #8e8370;
    --cream-200: #e3d5bd; --cream-soft: #f4ecdf; --cream-tint: #faf5ec;
    --brand: #2f2823; --brand-dark: #1b1613; --brand-ink-on: #fffaf2;
    --nx-na-tmavej-rast: #e1b671; --nx-na-tmavej-pokles: #7ecfc7;
    --brand-50: #f9eee4; --brand-100: #f0dfcd; --brand-200: #e3c7ad; --brand-ink: #9c3627;
    --accent: #c0412e; --accent-soft: #e07b62; --accent-ink: #ffffff; --vz-dot: #c0412e;
    --c1: #b53d46; --c2: #637ed8; --c3: #bb861c; --c4: #059f96; --c5: #9144a1; --c6: #738c24; --c7: #7973ca;
    --sb-bg: #fffdf8; --sb-ink: #6b5d52; --sb-ink-strong: #2f2823; --sb-faint: #817265;
    --sb-hover: #f5eee2; --sb-line: #e6ded0;
    --sb-active-bg: transparent; --sb-active-ink: #b3392a;
    --shadow-xs: 0 1px 0 rgba(47, 40, 35, .06);
    --shadow-sm: 0 1px 2px rgba(47, 40, 35, .07);
    --shadow:    0 14px 30px -14px rgba(47, 40, 35, .22), 0 1px 2px rgba(47, 40, 35, .06);
    --shadow-lg: 0 30px 60px -20px rgba(47, 40, 35, .35), 0 2px 6px rgba(47, 40, 35, .08);
    --ring: 0 0 0 3px #f0dfcd; --focus: 0 0 0 2px var(--surface), 0 0 0 3px #c0412e;
    --vz-hero: transparent; --vz-hero-line: transparent; --vz-hero-ink: #2f2823; --vz-hero-muted: #75675c;
    --vz-ring: #d8ad8d; --vz-orn-bg: #b3392a; --vz-orn-ink: #fff4df; --vz-orn-dot: #e4be8a;
    --vz-orn-shadow: 10px 12px 0 rgba(223, 200, 169, .5);
    --vz-svetlo: transparent;
}
:root[data-design="atelier"][data-theme="dark"] {
    --bg: #15110e; --sunken: #110e0b; --surface: #1d1814; --surface-2: #1a1511; --tonal: #231d18; --raised: #28211b;
    --ink: #f1e9de; --ink-soft: #cdbfae; --muted: #a8988a; --faint: #928375; --ink-inv: #1b1613;
    --line: #372e27; --line-soft: #2a231e; --line-strong: #4a3f35; --pole-okraj: #776b60;
    --cream-200: #3d3229; --cream-soft: #2a221c; --cream-tint: #221c17;
    --brand: #f1e9de; --brand-dark: #ffffff; --brand-ink-on: #1b1613;
    --nx-na-tmavej-rast: #875804; --nx-na-tmavej-pokles: #06716b;
    --brand-50: #291c16; --brand-100: #35241c; --brand-200: #50342a; --brand-ink: #f0a590;
    --accent: #e0765e; --accent-soft: #eea08c; --accent-ink: #1e120d; --vz-dot: #e0765e;
    --c1: #b53b3f; --c2: #377fe5; --c3: #c18425; --c4: #13a299; --c5: #9751c3; --c6: #6c8419; --c7: #726cc2;
    --sb-bg: #1a1511; --sb-ink: #bfb0a0; --sb-ink-strong: #f1e9de; --sb-faint: #8e7f72;
    --sb-hover: rgba(255, 255, 255, .04); --sb-line: #372e27;
    --sb-active-bg: transparent; --sb-active-ink: #eea08c;
    --shadow-xs: 0 1px 0 rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow:    0 14px 30px -14px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .5);
    --ring: 0 0 0 3px #4a3025; --focus: 0 0 0 2px var(--surface), 0 0 0 3px #e0765e;
    --vz-hero: transparent; --vz-hero-line: transparent; --vz-hero-ink: #f1e9de; --vz-hero-muted: #a8988a;
    --vz-ring: #5b4232; --vz-orn-bg: #e0765e; --vz-orn-ink: #1e120d; --vz-orn-dot: #fff0dc;
    --vz-orn-shadow: 10px 12px 0 rgba(90, 60, 45, .5);
    --vz-svetlo: transparent;
}


/* ==========================================================================
   03 MIDNIGHT — nočné riadiace centrum: sklo, žiara, plávajúci panel
   ========================================================================== */

:root[data-design="midnight"], .vz-nahlad[data-nahlad="midnight"] {
    --r-xs: 6px; --r-sm: 9px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
    --font-display: var(--font); --display-w: 640; --num-w: 650;
    --char-100: #e6e8f3; --char-200: #cfd3e6; --char-300: #aeb4d0; --char-400: #7d86a8;
    --char-500: #5a6283; --char-600: #3f4663; --char-700: #262c45; --char-800: #1c2236; --char-900: #0f1322;
    --vz-orn-r: 22px;
    --graf-r: 5; --graf-stlpec: 22; --graf-ciara: 2.4; --graf-hladko: .35; --graf-plocha: .42;
    --graf-symbol: circle; --graf-symbol-vel: 6; --graf-mriezka: dashed; --graf-gradient: 1;
    --graf-tien: 0 0 14; --graf-tien-farba: seria;
    --graf-donut: 68%; --graf-donut-r: 4; --graf-donut-medzera: 1.6;
    --graf-anim: 950; --graf-easing: cubicOut; --graf-oneskorenie: 30;
    --graf-kurzor: rgba(142, 151, 250, .14);
}
/* Midnight je nočná šablóna; svetlá podoba existuje pre toho, kto si ju zapne. */
:root[data-design="midnight"] {
    --bg: #eef0f9; --sunken: #e6e8f4; --surface: #ffffff; --surface-2: #f7f8fe; --tonal: #f3f4fd; --raised: #ffffff;
    --ink: #1c2240; --ink-soft: #454c6c; --muted: #5b6384; --faint: #6c7594; --ink-inv: #ffffff;
    --line: #dce0f0; --line-soft: #e8eaf5; --line-strong: #c7cce3; --pole-okraj: #7f8398;
    --cream-200: #d5d9ee; --cream-soft: #eceefa; --cream-tint: #f5f6fd;
    --brand: #4d55b0; --brand-dark: #3b4296; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #fed99a; --nx-na-tmavej-pokles: #aaeccc;
    --brand-50: #edf0ff; --brand-100: #e1e5fa; --brand-200: #c4cbef; --brand-ink: #4a52ad;
    --accent: #6169de; --accent-soft: #9aa1f5; --accent-ink: #ffffff; --vz-dot: #6b73e0;
    --c1: #7370d7; --c2: #009fa6; --c3: #a54767; --c4: #9e7000; --c5: #26a275; --c6: #926abe; --c7: #c06240;
    --sb-bg: #1a2137; --sb-ink: #aab4d0; --sb-ink-strong: #eef0fb; --sb-faint: #7e89a7;
    --sb-hover: rgba(163, 169, 255, .08); --sb-line: #2d3654;
    --sb-active-bg: #7c84ee; --sb-active-ink: #0f1430;
    --shadow-xs: 0 1px 2px rgba(32, 38, 67, .05);
    --shadow-sm: 0 2px 6px rgba(32, 38, 67, .07);
    --shadow:    0 14px 32px -10px rgba(55, 62, 130, .22), 0 1px 3px rgba(32, 38, 67, .05);
    --shadow-lg: 0 30px 70px -18px rgba(32, 38, 67, .34), 0 4px 12px rgba(32, 38, 67, .08);
    --ring: 0 0 0 3px #d8dcfb; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #777fed;
    --vz-hero: radial-gradient(ellipse at 85% 40%, rgba(124, 132, 238, .22), transparent 55%), linear-gradient(100deg, #eef0ff, #ffffff);
    --vz-hero-line: #d6dbf5; --vz-hero-ink: #1c2240; --vz-hero-muted: #5b6384;
    --vz-ring: #b7bdf2; --vz-orn-bg: linear-gradient(135deg, #8e97fa, #424eac); --vz-orn-ink: #ffffff;
    --vz-orn-dot: #9dabff; --vz-orn-shadow: 0 0 44px rgba(120, 137, 249, .35);
    --vz-svetlo: rgba(124, 132, 238, .12);
}
:root[data-design="midnight"][data-theme="dark"], .vz-nahlad[data-nahlad="midnight"] {
    --bg: #0a0e19; --sunken: #0d1320; --surface: #131a29; --surface-2: #111726; --tonal: #192034; --raised: #1c243a;
    --ink: #edf0fb; --ink-soft: #c4cbe3; --muted: #9ca7c5; --faint: #8893b2; --ink-inv: #0f1322;
    --line: #252d45; --line-soft: #1d2539; --line-strong: #3a4566; --pole-okraj: #626e92;
    --cream-200: #2e3858; --cream-soft: #1b2236; --cream-tint: #171e30;
    --brand: #a3a9ff; --brand-dark: #c1c5ff; --brand-ink-on: #141a33;
    --nx-na-tmavej-rast: #563a05; --nx-na-tmavej-pokles: #064931;
    --brand-50: #1e2446; --brand-100: #2a3157; --brand-200: #444d79; --brand-ink: #b8bdff;
    --accent: #8e97fa; --accent-soft: #aeb6ff; --accent-ink: #10152c; --vz-dot: #929aff;
    --c1: #7e7cf3; --c2: #009ab1; --c3: #b64671; --c4: #b67f19; --c5: #3ba479; --c6: #8b63b6; --c7: #b75a38;
    --sb-bg: #111727; --sb-ink: #9ca9c7; --sb-ink-strong: #e7eafd; --sb-faint: #75819f;
    --sb-hover: rgba(163, 169, 255, .08); --sb-line: #232c45;
    --sb-active-bg: #858cf3; --sb-active-ink: #10152c;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .5);
    --shadow:    0 14px 34px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(142, 151, 250, .06);
    --shadow-lg: 0 30px 70px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(142, 151, 250, .1);
    --ring: 0 0 0 3px #2f3766; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #858cf3;
    --vz-hero: radial-gradient(ellipse at 82% 50%, rgba(67, 73, 153, .5), transparent 55%), linear-gradient(100deg, #1d2340, #141b2f);
    --vz-hero-line: #333c60; --vz-hero-ink: #edf0fb; --vz-hero-muted: #a9b3d0;
    --vz-ring: #4c56a0; --vz-orn-bg: linear-gradient(135deg, #8e97fa, #424eac); --vz-orn-ink: #ffffff;
    --vz-orn-dot: #5fd4dd; --vz-orn-shadow: 0 0 50px rgba(120, 137, 249, .4);
    --vz-svetlo: rgba(142, 151, 250, .13);
}


/* ==========================================================================
   04 NORDIC — severské svetlo: vzduch, mäkkosť, pružina
   ========================================================================== */

:root[data-design="nordic"], .vz-nahlad[data-nahlad="nordic"] {
    --r-xs: 9px; --r-sm: 12px; --r: 18px; --r-lg: 22px; --r-xl: 28px;
    --font-display: var(--font); --display-w: 460; --num-w: 460;
    --char-100: #e7eff5; --char-200: #d1dee8; --char-300: #b1c4d3; --char-400: #7f97aa;
    --char-500: #5c7488; --char-600: #425668; --char-700: #1e354c; --char-800: #172a3d; --char-900: #0e1b28;
    --vz-orn-r: 30px;
    --graf-r: 11; --graf-stlpec: 20; --graf-ciara: 3; --graf-hladko: .55; --graf-plocha: .22;
    --graf-symbol: none; --graf-symbol-vel: 8; --graf-mriezka: solid; --graf-gradient: 0;
    --graf-donut: 64%; --graf-donut-r: 14; --graf-donut-medzera: 3.5;
    --graf-anim: 1000; --graf-easing: backOut; --graf-oneskorenie: 45;
    --graf-kurzor: rgba(56, 145, 215, .09);
}
:root[data-design="nordic"], .vz-nahlad[data-nahlad="nordic"] {
    --bg: #edf3f7; --sunken: #e6eef4; --surface: #ffffff; --surface-2: #f7fbfd; --tonal: #f1f7fb; --raised: #ffffff;
    --ink: #1e354c; --ink-soft: #43607a; --muted: #546d87; --faint: #60788b; --ink-inv: #ffffff;
    --line: #dae6ee; --line-soft: #eaf1f6; --line-strong: #c6d7e3; --pole-okraj: #7a8994;
    --cream-200: #cfe2ef; --cream-soft: #e8f2f9; --cream-tint: #f3f8fc;
    --brand: #226d9f; --brand-dark: #185276; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #fdebda; --nx-na-tmavej-pokles: #affdeb;
    --brand-50: #eaf5fc; --brand-100: #dceef9; --brand-200: #b9daef; --brand-ink: #1d6594;
    --accent: #267abd; --accent-soft: #6cb2e6; --accent-ink: #ffffff; --vz-dot: #4c9cce;
    --c1: #4294dd; --c2: #b46f16; --c3: #7754aa; --c4: #16a48e; --c5: #b6342a; --c6: #218cb5; --c7: #668f33;
    --sb-bg: #ffffff; --sb-ink: #546d87; --sb-ink-strong: #1e354c; --sb-faint: #5d798f;
    --sb-hover: #f0f6fa; --sb-line: #dae6ee;
    --sb-active-bg: #dceef9; --sb-active-ink: #1d6594;
    --shadow-xs: 0 1px 3px rgba(30, 53, 76, .05);
    --shadow-sm: 0 4px 14px -4px rgba(60, 116, 144, .12);
    --shadow:    0 16px 40px -14px rgba(60, 116, 144, .24), 0 2px 6px rgba(30, 53, 76, .04);
    --shadow-lg: 0 34px 80px -24px rgba(30, 53, 76, .32), 0 6px 16px rgba(30, 53, 76, .06);
    --ring: 0 0 0 4px #d4e9f7; --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent);
    --vz-hero: radial-gradient(ellipse at 90% 10%, rgba(255, 255, 255, .9), transparent 45%), linear-gradient(115deg, #d4ebf8, #e3efff 60%, #cbe0f5);
    --vz-hero-line: transparent; --vz-hero-ink: #1f4462; --vz-hero-muted: #4d6f8a;
    --vz-ring: #ffffff; --vz-orn-bg: linear-gradient(145deg, #ffffff, #d8ebfc); --vz-orn-ink: #4f80a9;
    --vz-orn-dot: #3891d7; --vz-orn-shadow: 0 16px 28px rgba(72, 123, 153, .22);
    --vz-svetlo: rgba(56, 145, 215, .08);
}
:root[data-design="nordic"][data-theme="dark"] {
    --bg: #0d1721; --sunken: #0b141c; --surface: #14202b; --surface-2: #121d28; --tonal: #192735; --raised: #1c2b39;
    --ink: #e6f0f7; --ink-soft: #b9cbd9; --muted: #94aabb; --faint: #7f95a7; --ink-inv: #0e1b28;
    --line: #24364a; --line-soft: #1c2d3d; --line-strong: #34485c; --pole-okraj: #60768b;
    --cream-200: #28405a; --cream-soft: #182736; --cream-tint: #152230;
    --brand: #7cbde9; --brand-dark: #a2d1f1; --brand-ink-on: #0c1a26;
    --nx-na-tmavej-rast: #5b3e01; --nx-na-tmavej-pokles: #064c36;
    --brand-50: #172a3a; --brand-100: #1e3549; --brand-200: #2d4a63; --brand-ink: #a0d0f2;
    --accent: #6cb2e6; --accent-soft: #9fd0f2; --accent-ink: #0c1a26; --vz-dot: #6cb2e6;
    --c1: #3b98ca; --c2: #9b7020; --c3: #7a5bc8; --c4: #43a580; --c5: #b9433c; --c6: #1484ad; --c7: #5f872a;
    --sb-bg: #111c27; --sb-ink: #94aabb; --sb-ink-strong: #e6f0f7; --sb-faint: #708699;
    --sb-hover: rgba(255, 255, 255, .04); --sb-line: #213345;
    --sb-active-bg: #1e3549; --sb-active-ink: #a2d1f1;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-sm: 0 4px 14px -4px rgba(0, 0, 0, .45);
    --shadow:    0 16px 40px -14px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 34px 80px -24px rgba(0, 0, 0, .8), 0 6px 16px rgba(0, 0, 0, .4);
    --ring: 0 0 0 4px #1f3a52; --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent);
    --vz-hero: radial-gradient(ellipse at 90% 10%, rgba(124, 189, 233, .16), transparent 45%), linear-gradient(115deg, #16304a, #172a40 60%, #1b3653);
    --vz-hero-line: transparent; --vz-hero-ink: #e6f0f7; --vz-hero-muted: #9fbcd3;
    --vz-ring: rgba(162, 209, 241, .35); --vz-orn-bg: linear-gradient(145deg, #25415c, #1b3148); --vz-orn-ink: #a2d1f1;
    --vz-orn-dot: #6cb2e6; --vz-orn-shadow: 0 16px 28px rgba(0, 0, 0, .35);
    --vz-svetlo: rgba(108, 178, 230, .07);
}


/* ==========================================================================
   05 PULSE — plagát a neo-brutalizmus: čierna, limetka, tvrdé hrany
   ========================================================================== */

:root[data-design="pulse"], .vz-nahlad[data-nahlad="pulse"] {
    --r-xs: 0; --r-sm: 0; --r: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;
    --font-display: var(--font); --display-w: 800; --num-w: 780;
    --char-100: #ecece3; --char-200: #dadbcd; --char-300: #c0c2b0; --char-400: #8e917f;
    --char-500: #686b5c; --char-600: #4b4e42; --char-700: #24291d; --char-800: #1b1f16; --char-900: #111310;
    --vz-orn-r: 0;
    --graf-r: 0; --graf-stlpec: 34; --graf-ciara: 3.2; --graf-hladko: 0; --graf-plocha: .22;
    --graf-symbol: rect; --graf-symbol-vel: 9; --graf-mriezka: solid; --graf-gradient: 0;
    --graf-tien: 3 3 0; --graf-tien-farba: var(--ink);
    --graf-donut: 50%; --graf-donut-r: 0; --graf-donut-medzera: 0;
    --graf-anim: 520; --graf-easing: quinticOut; --graf-oneskorenie: 18;
    --graf-os-font: var(--mono);
    --graf-kurzor: rgba(198, 226, 84, .45);
}
:root[data-design="pulse"], .vz-nahlad[data-nahlad="pulse"] {
    --bg: #efefe7; --sunken: #e7e7dc; --surface: #fafaf5; --surface-2: #f5f5ee; --tonal: #f2f4e4; --raised: #ffffff;
    --ink: #1c1f18; --ink-soft: #45493d; --muted: #5a5e51; --faint: #707466; --ink-inv: #f1f7dc;
    --line: #d2d4c5; --line-soft: #e2e3d6; --line-strong: #1c1f18; --pole-okraj: var(--line-strong);
    --cream-200: #d9dfbb; --cream-soft: #ebeed9; --cream-tint: #f4f6ea;
    --brand: #1c1f18; --brand-dark: #000000; --brand-ink-on: #eaf6c4;
    --nx-na-tmavej-rast: #f3aa85; --nx-na-tmavej-pokles: #7fcfc6;
    --brand-50: #eef2d5; --brand-100: #e2eab8; --brand-200: #c7d98a; --brand-ink: #3c481f;
    --accent: #c6e254; --accent-soft: #d8ee7c; --accent-ink: #1c1f18; --vz-dot: #a6c62e;
    --c1: #889637; --c2: #3e6cc7; --c3: #a84a00; --c4: #a43f9e; --c5: #069a90; --c6: #866ec5; --c7: #908126;
    --sb-bg: #1c1f18; --sb-ink: #b7bea9; --sb-ink-strong: #f2f6e6; --sb-faint: #879273;
    --sb-hover: rgba(206, 233, 108, .08); --sb-line: #363b2d;
    --sb-active-bg: #cee96c; --sb-active-ink: #1d2213;
    --shadow-xs: 2px 2px 0 rgba(28, 31, 24, .9);
    --shadow-sm: 3px 3px 0 #1c1f18;
    --shadow:    5px 5px 0 #1c1f18;
    --shadow-lg: 9px 9px 0 #1c1f18;
    --ring: 0 0 0 3px #c6e254; --focus: 0 0 0 2px var(--surface), 0 0 0 5px #1c1f18;
    --vz-hero: #c9e56a; --vz-hero-line: #1c1f18; --vz-hero-ink: #1c1f18; --vz-hero-muted: #45522a;
    --vz-ring: #394921; --vz-orn-bg: #1c1f18; --vz-orn-ink: #e0efb7; --vz-orn-dot: #cee96c;
    --vz-orn-shadow: 7px 7px 0 #7d9a2a;
    --vz-svetlo: transparent;
}
:root[data-design="pulse"][data-theme="dark"] {
    --bg: #10120e; --sunken: #0c0e0a; --surface: #181b14; --surface-2: #151812; --tonal: #1d2118; --raised: #20241b;
    --ink: #eef2e2; --ink-soft: #c3c9b3; --muted: #a2a993; --faint: #8b927c; --ink-inv: #1a1f10;
    --line: #2e3328; --line-soft: #24281f; --line-strong: #6f7760; --pole-okraj: var(--line-strong);
    --cream-200: #384022; --cream-soft: #22271a; --cream-tint: #1d2117;
    --brand: #cee96c; --brand-dark: #dcf28e; --brand-ink-on: #1a1f10;
    --nx-na-tmavej-rast: #944711; --nx-na-tmavej-pokles: #0d695e;
    --brand-50: #20271a; --brand-100: #2b3419; --brand-200: #4a5a22; --brand-ink: #d4ec7e;
    --accent: #cee96c; --accent-soft: #dcf28e; --accent-ink: #1a1f10; --vz-dot: #cee96c;
    --c1: #739f56; --c2: #455fc5; --c3: #a2511a; --c4: #8a5398; --c5: #17a494; --c6: #7f67bd; --c7: #887a1b;
    --sb-bg: #0a0c08; --sb-ink: #a9b09b; --sb-ink-strong: #f2f6e6; --sb-faint: #778069;
    --sb-hover: rgba(206, 233, 108, .06); --sb-line: #262b20;
    --sb-active-bg: #cee96c; --sb-active-ink: #1a1f10;
    --shadow-xs: 2px 2px 0 #000000;
    --shadow-sm: 3px 3px 0 #000000;
    --shadow:    5px 5px 0 #000000;
    --shadow-lg: 9px 9px 0 #000000;
    --ring: 0 0 0 3px #4a5a22; --focus: 0 0 0 2px var(--surface), 0 0 0 5px #cee96c;
    --vz-hero: #c9e56a; --vz-hero-line: #c9e56a; --vz-hero-ink: #1c1f18; --vz-hero-muted: #45522a;
    --vz-ring: #394921; --vz-orn-bg: #181b14; --vz-orn-ink: #e0efb7; --vz-orn-dot: #cee96c;
    --vz-orn-shadow: 7px 7px 0 #5f7a1f;
    --vz-svetlo: transparent;
}


/* ==========================================================================
   06 BORDEAUX — vínna pivnica a mosadz: pohostinnosť, menu po pravej ruke
   ========================================================================== */

:root[data-design="bordeaux"], .vz-nahlad[data-nahlad="bordeaux"] {
    --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 14px; --r-xl: 18px;
    --font-display: var(--serif); --display-w: 400;
    --font-num: var(--serif); --num-w: 400;
    --char-100: #f2e8ea; --char-200: #e4d2d6; --char-300: #cfb4bb; --char-400: #a2848d;
    --char-500: #7c616c; --char-600: #5c4550; --char-700: #402d36; --char-800: #33232b; --char-900: #20151b;
    --vz-orn-r: 50px 50px 4px 4px;
    --graf-r: 8; --graf-stlpec: 24; --graf-ciara: 2; --graf-hladko: .3; --graf-plocha: .26;
    --graf-symbol: diamond; --graf-symbol-vel: 8; --graf-mriezka: dotted; --graf-gradient: 1;
    --graf-donut: 70%; --graf-donut-r: 3; --graf-donut-medzera: 1;
    --graf-anim: 1300; --graf-easing: cubicInOut; --graf-oneskorenie: 50;
    --graf-os-font: var(--serif);
    --graf-kurzor: rgba(214, 184, 133, .18);
}
:root[data-design="bordeaux"], .vz-nahlad[data-nahlad="bordeaux"] {
    --bg: #f6f0f0; --sunken: #efe5e6; --surface: #fffcfa; --surface-2: #fbf6f4; --tonal: #fbf3f2; --raised: #fffcfa;
    --ink: #3d2a33; --ink-soft: #634955; --muted: #785d69; --faint: #876d76; --ink-inv: #fff8f0;
    --line: #e6d6d8; --line-soft: #f0e4e5; --line-strong: #d6c0c4; --pole-okraj: #927e82;
    --cream-200: #e6d3bd; --cream-soft: #f6ede4; --cream-tint: #fbf6f1;
    --brand: #6f3450; --brand-dark: #4f2238; --brand-ink-on: #fff8f0;
    --nx-na-tmavej-rast: #e1b671; --nx-na-tmavej-pokles: #80cfc3;
    --brand-50: #f7ecef; --brand-100: #eed9e2; --brand-200: #d7b2c1; --brand-ink: #6e3650;
    --accent: #b08a50; --accent-soft: #d6b885; --accent-ink: #3a2330; --vz-dot: #c6a56d;
    --c1: #a73582; --c2: #af7d1e; --c3: #00a596; --c4: #5277e2; --c5: #6ea04b; --c6: #926abe; --c7: #c06240;
    --sb-bg: #431f31; --sb-ink: #d8bfcb; --sb-ink-strong: #fbeee4; --sb-faint: #b08a9b;
    --sb-hover: rgba(255, 255, 255, .05); --sb-line: rgba(255, 255, 255, .09);
    --sb-active-bg: #663a4e; --sb-active-ink: #f8e9d6;
    --shadow-xs: 0 1px 2px rgba(64, 45, 54, .05);
    --shadow-sm: 0 2px 6px rgba(64, 45, 54, .07);
    --shadow:    0 14px 32px -12px rgba(104, 55, 77, .22), 0 1px 3px rgba(64, 45, 54, .05);
    --shadow-lg: 0 30px 64px -18px rgba(64, 45, 54, .3), 0 4px 12px rgba(64, 45, 54, .07);
    --ring: 0 0 0 3px #eed9e2; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #aa8442;
    --vz-hero: radial-gradient(ellipse at 86% 30%, rgba(214, 184, 133, .25), transparent 50%), linear-gradient(110deg, #f3e3e9, #fbf3ef 70%);
    --vz-hero-line: #ead3dc; --vz-hero-ink: #3d2a33; --vz-hero-muted: #785d69;
    --vz-ring: #d6b98f; --vz-orn-bg: #d6b885; --vz-orn-ink: #63384b; --vz-orn-dot: #85546b;
    --vz-orn-shadow: none;
    --vz-svetlo: rgba(214, 184, 133, .16);
}
:root[data-design="bordeaux"][data-theme="dark"] {
    --bg: #150d11; --sunken: #110a0e; --surface: #1f1319; --surface-2: #1b1116; --tonal: #26181f; --raised: #2b1c23;
    --ink: #f5e8ec; --ink-soft: #d6bec7; --muted: #b3989f; --faint: #9a808a; --ink-inv: #20151b;
    --line: #3a2730; --line-soft: #2d1e25; --line-strong: #4f3844; --pole-okraj: #7e6471;
    --cream-200: #463225; --cream-soft: #2a1d18; --cream-tint: #221815;
    --brand: #d99bb6; --brand-dark: #e8b9cd; --brand-ink-on: #2a1520;
    --nx-na-tmavej-rast: #533701; --nx-na-tmavej-pokles: #0b4446;
    --brand-50: #2b1922; --brand-100: #3a212d; --brand-200: #573444; --brand-ink: #eab8cc;
    --accent: #d6b885; --accent-soft: #e4cc9f; --accent-ink: #2a1a10; --vz-dot: #d6b885;
    --c1: #9b4c67; --c2: #b18132; --c3: #19a5aa; --c4: #4663cf; --c5: #628c3a; --c6: #8b63b6; --c7: #b75a38;
    --sb-bg: #100a0d; --sb-ink: #cbb0bc; --sb-ink-strong: #fbeee4; --sb-faint: #957784;
    --sb-hover: rgba(255, 255, 255, .04); --sb-line: rgba(255, 255, 255, .07);
    --sb-active-bg: #3d2531; --sb-active-ink: #f1d9ab;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .45);
    --shadow:    0 14px 32px -12px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 30px 64px -18px rgba(0, 0, 0, .8), 0 4px 12px rgba(0, 0, 0, .4);
    --ring: 0 0 0 3px #4a2a3a; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #d6b885;
    --vz-hero: radial-gradient(ellipse at 86% 30%, rgba(214, 184, 133, .14), transparent 50%), linear-gradient(110deg, #3a1f2c, #24151c 70%);
    --vz-hero-line: #4f3040; --vz-hero-ink: #f5e8ec; --vz-hero-muted: #cfb0bd;
    --vz-ring: #7a5c3f; --vz-orn-bg: #d6b885; --vz-orn-ink: #4a2536; --vz-orn-dot: #85546b;
    --vz-orn-shadow: none;
    --vz-svetlo: rgba(214, 184, 133, .08);
}


/* ==========================================================================
   KOMPOZÍCIE (od v1.206) — iná KOSTRA stránky, nielen farby
   Maison, Orbit, Canvas podľa kolekcie „Nové perspektívy". Majú scénu
   nástenky s obrázkom (`templates/core/_vzhlad_scena.html`), vlastné nadpisy
   sekcií (`vzhlad_texty`) a vlastné rozloženie menu.
   ========================================================================== */

/* Prvky kompozícií — v ostatných vzhľadoch ich niet alebo nič nerobia. */
.vz-scena, .vz-poznamka, .vz-dennik-obr, .vz-pod { display: none; }
.vz-hlavicka, .vz-dennik { display: contents; }

/* Voliteľné časti nástenky zapnuté textami z registra (od v1.210):
   `moduly_hladat` / `moduly_nad` = hlavička modulov s hľadaním,
   `strediska_rozbal` = strediská zbalené pod súhrnom. Tu je len
   funkčný základ; vzhľad dáva súbor charakteru šablóny. */
.moduly-hlava { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 14px; }
.moduly-hlava .moduly-nadpis { margin: 0; font-size: 1.02rem; }
.moduly-nad { display: block; margin-bottom: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.moduly-hladaj { position: relative; display: flex; align-items: center; flex: 0 1 280px; }
.moduly-hladaj .ti { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.moduly-hladaj input { width: 100%; padding-left: 36px; }
.moduly-nic { margin: 0 0 14px; }
.moduly-nadpis--sam { font-size: 1.02rem; margin: 22px 0 12px; }   /* nadpis bez hlavičky s hľadaním */
.module-grid > [hidden] { display: none !important; }
.strediska-rozbal > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.strediska-rozbal > summary::-webkit-details-marker { display: none; }
.strediska-rozbal > summary h2 { margin: 0; }
.strediska-rozbal > summary .strediska-pocet { margin-left: auto; font-size: .78rem; color: var(--muted); }
.strediska-rozbal > summary .ti { color: var(--muted); transition: transform .25s var(--ease); }
.strediska-rozbal[open] > summary .ti { transform: rotate(180deg); }
.strediska-rozbal[open] .strediska-pocet-akcia { display: none; }
.strediska-rozbal[open] > summary { margin-bottom: 14px; }
.strediska-rozbal > summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }


/* ==========================================================================
   ŠTÚDIO (od v1.206) — šesť pôvodných šablón podľa návrhu nexus-design-collection
   Nástenka: pozdrav ako obyčajná hlavička, pod ňou BANNER so znakom N
   v obežnej dráhe (`scena` s `druh: "znak"`). Farby banneru a znaku sú
   tokeny `--vz-hero*`, `--vz-ring`, `--vz-orn-*` (bloky šablón vyššie);
   TVAR znaku (kruhy, klenba, sklo, rámy) mení súbor charakteru. Premenné
   geometrie: `--znak-w` (veľkosť dráhy), `--znak-x` (odsadenie sprava),
   `--znak-uhol` (sklon dráhy), `--znak-in` (odsadenie monogramu).
   ========================================================================== */

/* Pozdrav nad bannerom už nie je karta — tú úlohu prebral banner. */
@supports selector(:has(a)) {
    :root[data-design] .vz-hlavicka:has(.vz-scena--znak) > .vz-uvod {
        padding: 4px 0 0; margin-bottom: 22px; overflow: visible;
        background: none; border: 0; border-radius: 0; box-shadow: none; animation: none; color: var(--ink);
    }
}
@supports selector(:has(a)) and selector(:is(a)) {
    :root[data-design] .vz-hlavicka:has(.vz-scena--znak) > .vz-uvod :is(p, .vz-nad) { color: var(--muted); }
}
@supports selector(:has(a)) {
    :root[data-design] .vz-hlavicka:has(.vz-scena--znak) .vz-ornament { display: none; }
}

:root[data-design] .vz-scena--znak {
    --znak-w: 218px; --znak-x: clamp(24px, 5vw, 70px); --znak-uhol: -25deg; --znak-in: 45px;
    display: flex; align-items: center; position: relative; overflow: hidden; isolation: isolate;
    min-height: 228px; padding: 30px 38px; margin-bottom: 24px;
    background: var(--vz-hero, linear-gradient(110deg, var(--brand-50), var(--surface-2)));
    color: var(--vz-hero-ink, var(--ink));
    border: 1px solid var(--vz-hero-line, var(--line)); border-radius: var(--r-xl);
    transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
:root[data-design] .vz-scena--znak .vz-scena-art { display: contents; }
:root[data-design] .vz-scena--znak .vz-scena-text { position: relative; z-index: 1; max-width: min(560px, 62%); }
:root[data-design] .vz-scena--znak .vz-scena-kicker {
    display: block; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--vz-hero-muted, var(--muted));
}
:root[data-design] .vz-scena--znak .vz-scena-nadpis {
    margin: 12px 0 10px; font-family: var(--font-display); font-weight: var(--display-w);
    font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.12; letter-spacing: -.035em; color: inherit;
}
:root[data-design] .vz-scena--znak p { margin: 0; font-size: .86rem; color: var(--vz-hero-muted, var(--muted)); }
:root[data-design] .vz-scena--znak .vz-scena-cta {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 16px;
    font-size: .8rem; font-weight: 700; color: var(--brand-ink); text-decoration: none;
    transition: gap .3s var(--pruzina);
}
:root[data-design] .vz-scena--znak .vz-scena-cta:hover { gap: 22px; }
/* Na dotyku je odkaz cieľ pre prst (kontrola_mobil: 20–26 px v Botanical,
   Midnight, Atelier, Bordeaux). Podčiarknutie Atelier/Bordeaux je preto
   `text-decoration`, nie spodný okraj — ten by visel na spodku 40 px. */
@media (max-width: 1024px), (pointer: coarse) {
    :root[data-design] .vz-scena--znak .vz-scena-cta { min-height: 40px; }
}
/* Šablóny dávajú tlačidlu tieň váhou (0,4,0) — prstenec fokusu (0,5,0) nad ním. */
:root[data-design] .vz-scena--znak .vz-scena-cta:focus-visible { box-shadow: var(--focus); }
:root[data-design] .vz-scena--znak .vz-scena-popis {
    position: absolute; right: 26px; bottom: 16px; z-index: 1;
    font-size: .58rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--vz-hero-muted, var(--muted));
}

/* Znak: dráha (rámik + dve elipsy), monogram, dve bodky. Monogram sa
   rotáciou vracia do roviny; pohyb myši ho jemne posúva (vzhlady.js, --zx/--zy). */
:root[data-design] .vz-znak {
    position: absolute; z-index: 0; right: var(--znak-x); top: 50%;
    width: var(--znak-w); height: var(--znak-w); margin-top: calc(var(--znak-w) / -2);
    border: 1px solid var(--vz-ring, var(--line-strong)); border-radius: 50%;
    transform: rotate(var(--znak-uhol));
}
:root[data-design] .vz-znak::before, :root[data-design] .vz-znak::after {
    content: ""; position: absolute; inset: 25px -35px; border-radius: 50%;
    border: 1px solid var(--vz-ring, var(--line-strong));
}
:root[data-design] .vz-znak::after { inset: -20px 45px; }
:root[data-design] .vz-znak span {
    position: absolute; inset: var(--znak-in); display: flex; align-items: center; justify-content: center;
    padding-top: 4px; border-radius: var(--vz-orn-r, 28px);
    background: var(--vz-orn-bg, var(--brand)); color: var(--vz-orn-ink, var(--brand-ink-on));
    box-shadow: var(--vz-orn-shadow, var(--shadow));
    font-family: var(--font-display); font-weight: var(--display-w); font-size: calc(var(--znak-w) * .29);
    line-height: 1; letter-spacing: -.04em;
    transform: rotate(calc(var(--znak-uhol) * -1)) translate(var(--zx, 0px), var(--zy, 0px));
    transition: transform .6s var(--pruzina), box-shadow .4s var(--ease);
}
:root[data-design] .vz-znak span em { font-style: normal; color: var(--vz-orn-dot, var(--vz-dot)); }
@supports selector(:is(a)) {
    :root[data-design] .vz-znak :is(i, b) {
        position: absolute; width: 13px; height: 13px; border-radius: 50%;
        background: var(--vz-orn-dot, var(--vz-dot)); right: 17px; top: 28px;
    }
}
:root[data-design] .vz-znak b {
    top: auto; right: auto; bottom: 5px; left: 45px; width: 9px; height: 9px;
    background: var(--vz-ring);
}
@media (prefers-reduced-motion: no-preference) {
    :root[data-design] .vz-znak::before { animation: vz-znak-obeh 70s linear infinite; }
    :root[data-design] .vz-znak::after { animation: vz-znak-obeh 100s linear infinite reverse; }
    :root[data-design] .vz-znak i { animation: vz-znak-dych 4s ease-in-out infinite; }
}
@keyframes vz-znak-obeh { to { transform: rotate(360deg); } }
@keyframes vz-znak-dych { 50% { transform: scale(1.45); opacity: .65; } }

/* Telefón a úzky tablet: znak ustúpi za text, nič nepreteká. */
@media (max-width: 860px) {
    :root[data-design] .vz-scena--znak { padding: 24px; min-height: 220px; }
    :root[data-design] .vz-scena--znak .vz-scena-text { max-width: 100%; }
    :root[data-design] .vz-znak { right: -80px; opacity: .35; }
    :root[data-design] .vz-scena--znak .vz-scena-popis { display: none; }
}

/* Podnadpis sekcie úloh („Malé rozhodnutia…"). */
@supports selector(:is(a)) {
    :root:is([data-design="botanical"], [data-design="atelier"], [data-design="midnight"], [data-design="nordic"],
             [data-design="pulse"], [data-design="bordeaux"]) .vz-pod {
        display: block; flex-basis: 100%; order: 3; margin: 2px 0 0; font-size: .76rem; color: var(--muted);
    }
}
@supports selector(:has(a)) {
    :root[data-design] .panel-head:has(.vz-pod) { flex-wrap: wrap; row-gap: 2px; }
    :root[data-design] .panel-head:has(.vz-pod) .panel-acts .btn,
    :root[data-design] .panel-head:has(.vz-pod) .panel-acts .btn-ghost { white-space: nowrap; }
}

/* Podpis pod logom a karta pomoci — len vo vertikálnom menu (Atelier má menu hore). */
@supports selector(:is(a)) {
    :root:is([data-design="botanical"], [data-design="midnight"], [data-design="nordic"],
             [data-design="pulse"], [data-design="bordeaux"]) .sidebar-podpis {
        display: block; padding: 0 20px 12px; margin-top: -6px;
        font-size: .54rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
        color: var(--sb-faint, var(--muted));
    }
    :root:is([data-design="botanical"], [data-design="midnight"], [data-design="nordic"],
             [data-design="pulse"], [data-design="bordeaux"]) .side-pomoc {
        display: grid; gap: 5px; margin: 10px 14px 12px; padding: 15px 16px 13px;
        border: 1px solid var(--sb-line, var(--line)); border-radius: 14px;
        background: color-mix(in srgb, var(--sb-ink, #fff) 5%, transparent);
        color: var(--sb-ink-strong, var(--ink)); text-decoration: none; font-size: .74rem; line-height: 1.45;
        transition: transform .3s var(--pruzina), background .25s var(--ease);
    }
}
:root[data-design] .side-pomoc > .ti { font-size: 18px; color: var(--accent); }
:root[data-design] .side-pomoc strong { font-size: .8rem; }
:root[data-design] .side-pomoc span { color: var(--sb-ink, var(--muted)); opacity: .8; }
:root[data-design] .side-pomoc em {
    display: flex; align-items: center; justify-content: space-between; margin-top: 3px;
    font-style: normal; font-weight: 700; color: var(--accent);
}
:root[data-design] .side-pomoc em .ti { transition: transform .3s var(--pruzina); }
:root[data-design] .side-pomoc:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--sb-ink, #fff) 9%, transparent); }
:root[data-design] .side-pomoc:hover em .ti { transform: translate(2px, -2px); }
/* Nízka obrazovka: menu má prednosť pred kartou. */
@media (max-height: 820px) { :root[data-design] .side-pomoc { display: none; } }

/* Miniatúry kompozícií v galérii — s ich rozložením aj obrázkom. */
.vz-nahlad[data-nahlad="maison"] { flex-direction: column; }
.vz-nahlad[data-nahlad="maison"] .vzn-rail {
    flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
    padding: 9px 12px; border-right: 0; background: var(--bg);
}
.vz-nahlad[data-nahlad="maison"] .vzn-logo { margin: 0 auto 0 0; width: 20%; }
.vz-nahlad[data-nahlad="maison"] .vzn-logo b { background: var(--ink); }
.vz-nahlad[data-nahlad="maison"] .vzn-pol { width: 8%; margin: 0; background: var(--muted); }
.vz-nahlad[data-nahlad="maison"] .vzn-pol.is-on { height: 6px; background: transparent; box-shadow: 0 4px 0 -2px var(--brand); }
.vz-nahlad[data-nahlad="maison"] .vzn-pol.is-on::after { left: 0; right: 0; top: 0; height: 4px; background: var(--ink); }
.vz-nahlad[data-nahlad="maison"] .vzn-plocha { padding: 0 8px 8px; gap: 0; }
.vz-nahlad[data-nahlad="maison"] .vzn-lista { display: none; }
.vz-nahlad[data-nahlad="maison"] .vzn-titul {
    font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: #fff9ee; font-size: 15px;
    padding: 22px 12px 26px; margin-bottom: 0;
    background: linear-gradient(90deg, rgba(27, 30, 23, .72), transparent 80%), url("../img/vzhlady/maison-maly.1dd823e7c2fa.webp") center 55% / cover;
}
.vz-nahlad[data-nahlad="maison"] .vzn-titul em { color: #d6deba; font-style: italic; }
.vz-nahlad[data-nahlad="maison"] .vzn-kpis { gap: 0; border-bottom: 1px solid var(--line); }
.vz-nahlad[data-nahlad="maison"] .vzn-kpi { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.vz-nahlad[data-nahlad="maison"] .vzn-panel { border: 0; background: transparent; }

.vz-nahlad[data-nahlad="orbit"] .vzn-rail { flex: 0 0 11%; align-items: center; padding: 10px 4px; }
.vz-nahlad[data-nahlad="orbit"] .vzn-logo { justify-content: center; }
.vz-nahlad[data-nahlad="orbit"] .vzn-logo i { display: none; }
.vz-nahlad[data-nahlad="orbit"] .vzn-logo b { width: 12px; height: 12px; border-radius: 3px; }
.vz-nahlad[data-nahlad="orbit"] .vzn-pol { width: 12px; height: 12px; border-radius: 4px; margin: 2px 0; }
.vz-nahlad[data-nahlad="orbit"] .vzn-pol.is-on { width: 16px; height: 16px; background: var(--sb-active-bg); box-shadow: inset 0 0 0 1px rgba(140, 220, 235, .3); }
.vz-nahlad[data-nahlad="orbit"] .vzn-pol.is-on::after { left: 5px; right: 5px; top: 5px; height: 6px; }
.vz-nahlad[data-nahlad="orbit"] .vzn-titul {
    font-size: 13px; font-weight: 450; color: #eaf4f7; padding: 16px 10px; border-radius: 7px;
    border: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(8, 16, 27, .92), transparent 90%), url("../img/vzhlady/orbit-maly.397086ec5e17.webp") center / cover;
}
.vz-nahlad[data-nahlad="orbit"] .vzn-titul em { color: #91d7e6; }

.vz-nahlad[data-nahlad="canvas"] { position: relative; }
.vz-nahlad[data-nahlad="canvas"] .vzn-rail {
    position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); z-index: 2;
    flex-direction: row; align-items: center; gap: 5px; padding: 4px 6px; width: auto;
    border: 1px solid var(--sb-line); border-radius: 8px; box-shadow: 0 4px 14px rgba(34, 44, 35, .14);
}
.vz-nahlad[data-nahlad="canvas"] .vzn-logo { display: none; }
.vz-nahlad[data-nahlad="canvas"] .vzn-pol { width: 18px; margin: 0; }
.vz-nahlad[data-nahlad="canvas"] .vzn-pol.is-on { width: 24px; height: 11px; border-radius: 4px; }
.vz-nahlad[data-nahlad="canvas"] .vzn-pol.is-on::after { display: none; }
.vz-nahlad[data-nahlad="canvas"] .vzn-plocha { padding-bottom: 32px; }
.vz-nahlad[data-nahlad="canvas"] .vzn-lista { display: none; }
.vz-nahlad[data-nahlad="canvas"] .vzn-titul {
    font-size: 19px; font-weight: 700; letter-spacing: -.06em; padding-right: 48%; min-height: 44px;
    background: url("../img/vzhlady/canvas-maly.2f9d34c882ff.webp") right center / 46% auto no-repeat;
}
.vz-nahlad[data-nahlad="canvas"] .vzn-titul em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; color: var(--ink); }
.vz-nahlad[data-nahlad="canvas"] .vzn-kpi { border: 0; border-radius: 7px; }
.vz-nahlad[data-nahlad="canvas"] .vzn-kpi:nth-child(1) { background: #e3dbf2; }
.vz-nahlad[data-nahlad="canvas"] .vzn-kpi:nth-child(2) { background: #f5c6a6; }
.vz-nahlad[data-nahlad="canvas"] .vzn-kpi:nth-child(3) { background: #333a31; }
.vz-nahlad[data-nahlad="canvas"] .vzn-kpi:nth-child(3) b { background: #f0f3db; }
.vz-nahlad[data-nahlad="canvas"] .vzn-kpi b { background: #252724; }
.vz-nahlad[data-nahlad="canvas"] .vzn-panel { display: none; }


/* ==========================================================================
   07 MAISON — pracovný denník v dobrej reštaurácii
   ========================================================================== */

:root[data-design="maison"], .vz-nahlad[data-nahlad="maison"] {
    --r-xs: 3px; --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-xl: 10px; --r-pill: 30px;
    --font-display: Georgia, "Times New Roman", serif; --display-w: 400;
    --font-num: Georgia, "Times New Roman", serif; --num-w: 400;
    --char-100: #efeee4; --char-200: #dfdfd1; --char-300: #c7c8b6; --char-400: #919586;
    --char-500: #6c6f60; --char-600: #4a4d40; --char-700: #292b22; --char-800: #202219; --char-900: #15160f;
    --vz-orn-r: 4px;
    --graf-r: 2; --graf-stlpec: 22; --graf-ciara: 2; --graf-hladko: .25; --graf-plocha: .18;
    --graf-symbol: circle; --graf-symbol-vel: 6; --graf-mriezka: solid; --graf-gradient: 0;
    --graf-donut: 70%; --graf-donut-r: 2; --graf-donut-medzera: .8;
    --graf-anim: 1200; --graf-easing: cubicOut; --graf-oneskorenie: 45;
    --graf-os-font: Georgia, "Times New Roman", serif;
    --graf-kurzor: rgba(64, 78, 50, .07);
}
:root[data-design="maison"], .vz-nahlad[data-nahlad="maison"] {
    --bg: #f6f3ec; --sunken: #e9e9dd; --surface: #fffdf8; --surface-2: #faf7f0; --tonal: #f3f1e8; --raised: #fffdf8;
    --ink: #292b22; --ink-soft: #545849; --muted: #66695b; --faint: #6e7064; --ink-inv: #ffffff;
    --line: #dfdfd1; --line-soft: #eeeee4; --line-strong: #c7c8b6; --pole-okraj: #848574;
    --cream-200: #dfdfcc; --cream-soft: #f2f1e7; --cream-tint: #f8f7ef;
    --brand: #404e32; --brand-dark: #2f3a24; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #eab577; --nx-na-tmavej-pokles: #99cda3;
    --brand-50: #f0f1e6; --brand-100: #e3e6d3; --brand-200: #c9d0b0; --brand-ink: #404e32;
    --accent: #a4b580; --accent-soft: #c9d4a8; --accent-ink: #292b22; --vz-dot: #8c9f63;
    --c1: #7d9c0e; --c2: #98610a; --c3: #0b9ab6; --c4: #7e54ab; --c5: #a55239; --c6: #1a89c5; --c7: #3b9555;
    --sb-bg: #f6f3ec; --sb-ink: #545849; --sb-ink-strong: #292b22; --sb-faint: #6e7064;
    --sb-hover: #efece2; --sb-line: #dfdfd1;
    --sb-active-bg: transparent; --sb-active-ink: #292b22;
    --shadow-xs: 0 2px 5px rgba(41, 43, 34, .06);
    --shadow-sm: 0 4px 14px rgba(41, 43, 34, .06);
    --shadow:    0 15px 45px rgba(41, 43, 34, .12);
    --shadow-lg: 0 30px 80px rgba(41, 43, 34, .2);
    --ring: 0 0 0 3px #e3e6d3; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #717e50;
}
:root[data-design="maison"][data-theme="dark"] {
    --bg: #16150f; --sunken: #121109; --surface: #1d1c15; --surface-2: #1a1912; --tonal: #23221a; --raised: #26251c;
    --ink: #f1efe3; --ink-soft: #cfcdbd; --muted: #aaa895; --faint: #8f8d7b; --ink-inv: #15160f;
    --line: #35342a; --line-soft: #29281f; --line-strong: #4a4939; --pole-okraj: #71705e;
    --cream-200: #3a392c; --cream-soft: #25241b; --cream-tint: #201f17;
    --brand: #c9d4a8; --brand-dark: #dfe6c4; --brand-ink-on: #1d2014;
    --nx-na-tmavej-rast: #784a0a; --nx-na-tmavej-pokles: #1f6032;
    --brand-50: #23251a; --brand-100: #2c3020; --brand-200: #465033; --brand-ink: #d5dfb3;
    --accent: #b3c48c; --accent-soft: #cfd9ac; --accent-ink: #1d2014; --vz-dot: #b3c48c;
    --c1: #81a000; --c2: #9e6416; --c3: #1fa4ad; --c4: #865ea1; --c5: #db513b; --c6: #0781bd; --c7: #328e4d;
    --sb-bg: #16150f; --sb-ink: #cfcdbd; --sb-ink-strong: #f1efe3; --sb-faint: #8f8d7b;
    --sb-hover: rgba(255, 255, 255, .04); --sb-line: #35342a;
    --sb-active-bg: transparent; --sb-active-ink: #f1efe3;
    --shadow-xs: 0 2px 5px rgba(0, 0, 0, .4);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .4);
    --shadow:    0 15px 45px rgba(0, 0, 0, .55);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px #2c3020; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #b3c48c;
}


/* ==========================================================================
   08 ORBIT — riadiace centrum s filmovou scénou
   ========================================================================== */

:root[data-design="orbit"], .vz-nahlad[data-nahlad="orbit"] {
    --r-xs: 6px; --r-sm: 8px; --r: 11px; --r-lg: 14px; --r-xl: 17px;
    --font-display: var(--font); --display-w: 450; --num-w: 450;
    --char-100: #dde7ed; --char-200: #b9cad4; --char-300: #8fa6b4; --char-400: #6d8494;
    --char-500: #4d6474; --char-600: #344a59; --char-700: #1c2c3a; --char-800: #131f2a; --char-900: #090e15;
    --vz-orn-r: 50%;
    --graf-r: 3; --graf-stlpec: 20; --graf-ciara: 2.2; --graf-hladko: .3; --graf-plocha: .34;
    --graf-symbol: circle; --graf-symbol-vel: 6; --graf-mriezka: solid; --graf-gradient: 1;
    --graf-tien: 0 0 12; --graf-tien-farba: seria;
    --graf-donut: 72%; --graf-donut-r: 3; --graf-donut-medzera: 1.4;
    --graf-anim: 900; --graf-easing: cubicOut; --graf-oneskorenie: 30;
    --graf-os-font: Consolas, ui-monospace, monospace;
    --graf-kurzor: rgba(135, 216, 231, .09);
}
:root[data-design="orbit"] {
    --bg: #eef3f6; --sunken: #e3ebf0; --surface: #ffffff; --surface-2: #f6f9fb; --tonal: #f1f6f9; --raised: #ffffff;
    --ink: #0f1c26; --ink-soft: #33495a; --muted: #4d6474; --faint: #637987; --ink-inv: #ffffff;
    --line: #d8e3ea; --line-soft: #e8eff4; --line-strong: #bccbd6; --pole-okraj: #798791;
    --cream-200: #d3e0e8; --cream-soft: #edf3f7; --cream-tint: #f5f9fb;
    --brand: #13606f; --brand-dark: #0c4652; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #fec9a8; --nx-na-tmavej-pokles: #90e1e5;
    --brand-50: #e9f5f8; --brand-100: #d6edf3; --brand-200: #a9d9e5; --brand-ink: #13606f;
    --accent: #238092; --accent-soft: #87d8e7; --accent-ink: #ffffff; --vz-dot: #2a9bb1;
    --c1: #109fa5; --c2: #bd723f; --c3: #7075e9; --c4: #19803c; --c5: #c36daa; --c6: #957f23; --c7: #c15e50;
    --sb-bg: #0d151e; --sb-ink: #93aaba; --sb-ink-strong: #eaf4f7; --sb-faint: #6d8494;
    --sb-hover: rgba(135, 216, 231, .07); --sb-line: #253543;
    --sb-active-bg: #213744; --sb-active-ink: #87d8e7;
    --shadow-xs: 0 1px 2px rgba(15, 28, 38, .05);
    --shadow-sm: 0 4px 14px rgba(15, 28, 38, .07);
    --shadow:    0 16px 40px rgba(15, 28, 38, .14);
    --shadow-lg: 0 30px 80px rgba(15, 28, 38, .24);
    --ring: 0 0 0 3px #d6edf3; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #2997ad;
}
:root[data-design="orbit"][data-theme="dark"], .vz-nahlad[data-nahlad="orbit"] {
    --bg: #090e15; --sunken: #0d151e; --surface: #101923; --surface-2: #0e1620; --tonal: #152230; --raised: #162430;
    --ink: #eaf4f7; --ink-soft: #b6c8d2; --muted: #93aaba; --faint: #7892a3; --ink-inv: #090e15;
    --line: #253543; --line-soft: #1b2b37; --line-strong: #405766; --pole-okraj: #597180;
    --cream-200: #203242; --cream-soft: #122030; --cream-tint: #0f1a26;
    --brand: #87d8e7; --brand-dark: #b0e6f0; --brand-ink-on: #0c1b24;
    --nx-na-tmavej-rast: #7f4306; --nx-na-tmavej-pokles: #185e32;
    --brand-50: #132634; --brand-100: #1a3342; --brand-200: #2b4b5e; --brand-ink: #9adbe6;
    --accent: #9adbe6; --accent-soft: #c0ebf2; --accent-ink: #0c1b24; --vz-dot: #87d8e7;
    --c1: #1aa2ad; --c2: #af5f0e; --c3: #636fdd; --c4: #32a65c; --c5: #9b5487; --c6: #8d7719; --c7: #b95749;
    --sb-bg: #0d151e; --sb-ink: #93aaba; --sb-ink-strong: #eaf4f7; --sb-faint: #6d8494;
    --sb-hover: rgba(135, 216, 231, .07); --sb-line: #253543;
    --sb-active-bg: #213744; --sb-active-ink: #87d8e7;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow:    0 16px 40px rgba(0, 0, 0, .6);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .75);
    --ring: 0 0 0 3px #1a3342; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #87d8e7;
}


/* ==========================================================================
   09 CANVAS — veľká typografia a farebné karty
   ========================================================================== */

:root[data-design="canvas"], .vz-nahlad[data-nahlad="canvas"] {
    --r-xs: 7px; --r-sm: 11px; --r: 15px; --r-lg: 20px; --r-xl: 24px;
    --font-display: var(--font); --display-w: 600; --num-w: 600;
    --char-100: #efeee6; --char-200: #dddfd4; --char-300: #c8cbbd; --char-400: #92968c;
    --char-500: #676b62; --char-600: #4a4e46; --char-700: #252724; --char-800: #1c1e1b; --char-900: #121311;
    --vz-orn-r: 18px;
    --graf-r: 12; --graf-stlpec: 26; --graf-ciara: 3; --graf-hladko: .5; --graf-plocha: .24;
    --graf-symbol: circle; --graf-symbol-vel: 8; --graf-mriezka: none; --graf-gradient: 0;
    --graf-donut: 55%; --graf-donut-r: 16; --graf-donut-medzera: 3;
    --graf-anim: 1000; --graf-easing: backOut; --graf-oneskorenie: 50;
    --graf-kurzor: rgba(53, 62, 193, .07);
    --bento-1: #e3dbf2; --bento-2: #f5c6a6; --bento-3: #dce5c7; --bento-4: #333a31;
    --bento-ink: #252724; --bento-ink-4: #f0f3db;
}
:root[data-design="canvas"], .vz-nahlad[data-nahlad="canvas"] {
    --bg: #f4f2ec; --sunken: #e9eadf; --surface: #fffef9; --surface-2: #faf8f1; --tonal: #f3f2ea; --raised: #fffef9;
    --ink: #252724; --ink-soft: #505550; --muted: #656a61; --faint: #72766d; --ink-inv: #ffffff;
    --line: #dddfd4; --line-soft: #ebece2; --line-strong: #c8cbbd; --pole-okraj: #838679;
    --cream-200: #dedfd0; --cream-soft: #f1f0e7; --cream-tint: #f8f7f0;
    --brand: #353ec1; --brand-dark: #262fa3; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #e1c67a; --nx-na-tmavej-pokles: #84d6d9;
    --brand-50: #eeeffc; --brand-100: #e0e2f8; --brand-200: #c3c7f1; --brand-ink: #353ec1;
    --accent: #f47742; --accent-soft: #f7cda9; --accent-ink: #252724; --vz-dot: #f27841;
    --c1: #6e75ea; --c2: #b05325; --c3: #6ca054; --c4: #a24ab3; --c5: #009fa4; --c6: #9a7d22; --c7: #c25c5f;
    --sb-bg: #fffdf4; --sb-ink: #505550; --sb-ink-strong: #252724; --sb-faint: #72766d;
    --sb-hover: #efeee6; --sb-line: #d9ddcd;
    --sb-active-bg: #343fc4; --sb-active-ink: #ffffff;
    --shadow-xs: 0 2px 5px rgba(34, 44, 35, .06);
    --shadow-sm: 0 6px 18px rgba(34, 44, 35, .07);
    --shadow:    0 12px 45px rgba(34, 44, 35, .12);
    --shadow-lg: 0 30px 80px rgba(34, 44, 35, .2);
    --ring: 0 0 0 3px #e0e2f8; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #353ec1;
}
:root[data-design="canvas"][data-theme="dark"] {
    --bg: #131418; --sunken: #0f1013; --surface: #1c1d23; --surface-2: #191a20; --tonal: #22232a; --raised: #25262e;
    --ink: #f2f1ea; --ink-soft: #cfcec5; --muted: #a9a89e; --faint: #8e8d84; --ink-inv: #121311;
    --line: #33343c; --line-soft: #27282f; --line-strong: #494a54; --pole-okraj: #6f707b;
    --cream-200: #34353e; --cream-soft: #21222a; --cream-tint: #1d1e25;
    --brand: #8f95f5; --brand-dark: #b3b7f8; --brand-ink-on: #14163a;
    --nx-na-tmavej-rast: #3d2f04; --nx-na-tmavej-pokles: #053734;
    --brand-50: #22234a; --brand-100: #2b2d5a; --brand-200: #43468a; --brand-ink: #a9adf7;
    --accent: #f4834f; --accent-soft: #f7b48c; --accent-ink: #1c1d23; --vz-dot: #f4834f;
    --c1: #4a7eed; --c2: #a35132; --c3: #6c9d5a; --c4: #a5419c; --c5: #00a49c; --c6: #927517; --c7: #b95558;
    --sb-bg: #1f2027; --sb-ink: #cfcec5; --sb-ink-strong: #f2f1ea; --sb-faint: #8e8d84;
    --sb-hover: rgba(255, 255, 255, .05); --sb-line: #33343c;
    --sb-active-bg: #4f55d6; --sb-active-ink: #ffffff;
    --shadow-xs: 0 2px 5px rgba(0, 0, 0, .4);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .45);
    --shadow:    0 12px 45px rgba(0, 0, 0, .55);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px #2b2d5a; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #8f95f5;
    --bento-1: #2e2842; --bento-2: #4a3022; --bento-3: #2b3423; --bento-4: #0e100d;
    --bento-ink: #f2f1ea; --bento-ink-4: #f0f3db;
}


/* Miniatúry edície štyri (Aurora, Monograph, Terrace). */
.vz-nahlad[data-nahlad="aurora"] { flex-direction: column; position: relative; }
.vz-nahlad[data-nahlad="aurora"] .vzn-rail {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1; flex-direction: row; align-items: center;
    justify-content: center; gap: 8px; padding: 8px 12px; background: none; border: 0;
}
.vz-nahlad[data-nahlad="aurora"] .vzn-logo { margin: 0 auto 0 0; width: 18%; }
.vz-nahlad[data-nahlad="aurora"] .vzn-logo b { background: #f0f1ff; }
.vz-nahlad[data-nahlad="aurora"] .vzn-pol { width: 7%; margin: 0; background: #dcdcf0; opacity: .5; }
.vz-nahlad[data-nahlad="aurora"] .vzn-pol.is-on { height: 7px; background: transparent; box-shadow: 0 4px 0 -2px #c4f3df; opacity: 1; }
.vz-nahlad[data-nahlad="aurora"] .vzn-pol.is-on::after { left: 0; right: 0; top: 0; height: 4px; background: #f0f1ff; }
.vz-nahlad[data-nahlad="aurora"] .vzn-plocha { padding: 0 10px 8px; gap: 6px; }
.vz-nahlad[data-nahlad="aurora"] .vzn-lista { display: none; }
.vz-nahlad[data-nahlad="aurora"] .vzn-titul {
    margin: 0 -10px; padding: 34px 10px 22px; text-align: center; justify-content: center;
    font-size: 16px; font-weight: 400; letter-spacing: -.05em; color: #f0f1ff;
    background: linear-gradient(0deg, #111323, transparent 60%), url("../img/vzhlady/aurora-maly.51d481beb517.webp") center 45% / cover;
}
.vz-nahlad[data-nahlad="aurora"] .vzn-titul em { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #f0f1ff; }
.vz-nahlad[data-nahlad="aurora"] .vzn-kpis { margin-top: -12px; gap: 0; border: 1px solid var(--line); border-radius: 7px; background: rgba(36, 38, 61, .8); }
.vz-nahlad[data-nahlad="aurora"] .vzn-kpi { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }

.vz-nahlad[data-nahlad="monograph"] { flex-direction: column; }
.vz-nahlad[data-nahlad="monograph"] .vzn-rail {
    flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center; gap: 9px;
    margin: 0 10px; padding: 8px 0; border: 0; border-bottom: 2px solid var(--ink); background: var(--bg);
}
.vz-nahlad[data-nahlad="monograph"] .vzn-logo { margin: 0 auto 0 0; width: 20%; }
.vz-nahlad[data-nahlad="monograph"] .vzn-logo i { background: #6b6b65; }
.vz-nahlad[data-nahlad="monograph"] .vzn-logo b { background: var(--ink); }
.vz-nahlad[data-nahlad="monograph"] .vzn-pol { width: 7%; margin: 0; background: var(--muted); }
.vz-nahlad[data-nahlad="monograph"] .vzn-pol.is-on { height: 7px; background: transparent; box-shadow: 0 4px 0 -2px var(--ink); }
.vz-nahlad[data-nahlad="monograph"] .vzn-pol.is-on::after { left: 0; right: 0; top: 0; height: 4px; background: var(--ink); }
.vz-nahlad[data-nahlad="monograph"] .vzn-lista { display: none; }
.vz-nahlad[data-nahlad="monograph"] .vzn-titul {
    font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 16px; letter-spacing: -.04em;
    padding: 8px 40% 8px 0; min-height: 50px; border-bottom: 2px solid var(--ink);
    background: url("../img/vzhlady/monograph-maly.334cbcff7b09.webp") right 12% center / 26% auto no-repeat;
}
.vz-nahlad[data-nahlad="monograph"] .vzn-titul em { color: #ae442f; }
.vz-nahlad[data-nahlad="monograph"] .vzn-kpi { border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: transparent; }
.vz-nahlad[data-nahlad="monograph"] .vzn-kpi.is-hl b { background: var(--ink); }
.vz-nahlad[data-nahlad="monograph"] .vzn-panel { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.vz-nahlad[data-nahlad="monograph"] .vzn-graf i { background: #282828; }
.vz-nahlad[data-nahlad="monograph"] .vzn-graf i:nth-child(3n+2) { background: #a49f8f; }
.vz-nahlad[data-nahlad="monograph"] .vzn-graf i:nth-child(3n) { background: #ae442f; }

.vz-nahlad[data-nahlad="terrace"] .vzn-rail { flex: 0 0 24%; padding: 10px 7px; gap: 3px; }
.vz-nahlad[data-nahlad="terrace"] .vzn-logo i { background: #d9463b; }
.vz-nahlad[data-nahlad="terrace"] .vzn-pol.is-on { height: 13px; border-radius: 5px; }
.vz-nahlad[data-nahlad="terrace"] .vzn-lista { display: none; }
.vz-nahlad[data-nahlad="terrace"] .vzn-titul {
    position: relative; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 11px; color: #fff;
    padding: 26px 30% 8px 9px; border-radius: 7px 22px 7px 7px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    background: linear-gradient(0deg, rgba(20, 40, 25, .45), transparent 70%), url("../img/vzhlady/terrace-maly.1c0904326b1e.webp") center / cover;
}
.vz-nahlad[data-nahlad="terrace"] .vzn-titul::after {
    content: "04"; position: absolute; right: -4px; top: 9px; padding: 5px 9px; border-radius: 7px;
    font: 13px Georgia, "Times New Roman", serif; color: #486740; text-shadow: none;
    background: #f8faef; box-shadow: 0 5px 14px rgba(26, 64, 32, .2); transform: rotate(3deg);
}
.vz-nahlad[data-nahlad="terrace"] .vzn-titul em { font-style: italic; color: #fff; }
.vz-nahlad[data-nahlad="terrace"] .vzn-kpi { border: 0; border-radius: 6px; }
.vz-nahlad[data-nahlad="terrace"] .vzn-panel { border: 0; border-radius: 8px; }


/* ==========================================================================
   10 AURORA — polárna žiara nad tichým jazerom
   ========================================================================== */

:root[data-design="aurora"], .vz-nahlad[data-nahlad="aurora"] {
    --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 23px; --r-pill: 30px;
    --font-display: var(--font); --display-w: 400; --num-w: 400;
    --char-100: #dcdef0; --char-200: #c3c6df; --char-300: #a8abc5; --char-400: #8d92ad;
    --char-500: #5f6385; --char-600: #3d4160; --char-700: #252940; --char-800: #1c1e31; --char-900: #111323;
    --vz-orn-r: 50%;
    --graf-r: 6; --graf-stlpec: 18; --graf-ciara: 2.4; --graf-hladko: .45; --graf-plocha: .3;
    --graf-symbol: circle; --graf-symbol-vel: 6; --graf-mriezka: dashed; --graf-gradient: 1;
    --graf-tien: 0 0 14; --graf-tien-farba: seria;
    --graf-donut: 70%; --graf-donut-r: 8; --graf-donut-medzera: 2;
    --graf-anim: 1400; --graf-easing: cubicOut; --graf-oneskorenie: 45;
    --graf-kurzor: rgba(182, 162, 250, .09);
}
:root[data-design="aurora"] {
    --bg: #f4f3fa; --sunken: #eae8f4; --surface: #ffffff; --surface-2: #f9f8fd; --tonal: #f1effa; --raised: #ffffff;
    --ink: #1b1c33; --ink-soft: #45476a; --muted: #5d6080; --faint: #6a6d8c; --ink-inv: #ffffff;
    --line: #e1dfee; --line-soft: #eeecf6; --line-strong: #c9c6dd; --pole-okraj: #858297;
    --cream-200: #dedbee; --cream-soft: #f1f0f9; --cream-tint: #f8f7fc;
    --brand: #3b3a8c; --brand-dark: #2c2b70; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #eab177; --nx-na-tmavej-pokles: #91ceab;
    --brand-50: #efeefa; --brand-100: #e2e0f6; --brand-200: #c5c2ee; --brand-ink: #3b3a8c;
    --accent: #2f9e80; --accent-soft: #a9e6d2; --accent-ink: #0b231c; --vz-dot: #7c6ae0;
    --c1: #9a85df; --c2: #50a579; --c3: #935180; --c4: #b16a01; --c5: #0788b9; --c6: #668f33; --c7: #c15e50;
    --sb-bg: #f4f3fa; --sb-ink: #45476a; --sb-ink-strong: #1b1c33; --sb-faint: #6a6d8c;
    --sb-hover: #ebe9f6; --sb-line: #e1dfee;
    --sb-active-bg: transparent; --sb-active-ink: #1b1c33;
    --shadow-xs: 0 2px 5px rgba(27, 28, 51, .06);
    --shadow-sm: 0 6px 18px rgba(27, 28, 51, .07);
    --shadow:    0 20px 50px rgba(27, 28, 51, .12);
    --shadow-lg: 0 30px 80px rgba(27, 28, 51, .22);
    --ring: 0 0 0 3px #e2e0f6; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #7c6ae0;
}
:root[data-design="aurora"][data-theme="dark"], .vz-nahlad[data-nahlad="aurora"] {
    --bg: #111323; --sunken: #0d0f1c; --surface: #1c1e31; --surface-2: #181a2c; --tonal: #202338; --raised: #252940;
    --ink: #f0f1ff; --ink-soft: #c3c6df; --muted: #a8abc5; --faint: #8d92ad; --ink-inv: #111323;
    --line: #2e3149; --line-soft: #23263b; --line-strong: #43476a; --pole-okraj: #6d7298;
    --cream-200: #2c2f47; --cream-soft: #1d2034; --cream-tint: #171a2c;
    --brand: #c4f3df; --brand-dark: #e0fbef; --brand-ink-on: #14273a;
    --nx-na-tmavej-rast: #7e5d07; --nx-na-tmavej-pokles: #18724f;
    --brand-50: #1d2a35; --brand-100: #233642; --brand-200: #2f4f57; --brand-ink: #bdf0da;
    --accent: #b6a2fa; --accent-soft: #d3c7fc; --accent-ink: #151528; --vz-dot: #b6a2fa;
    --c1: #686ae0; --c2: #43a77b; --c3: #b23a8d; --c4: #a37900; --c5: #419cc6; --c6: #5f872a; --c7: #b95749;
    --sb-bg: #111323; --sb-ink: #c3c6df; --sb-ink-strong: #f0f1ff; --sb-faint: #8d92ad;
    --sb-hover: rgba(255, 255, 255, .06); --sb-line: #2e3149;
    --sb-active-bg: transparent; --sb-active-ink: #f0f1ff;
    --shadow-xs: 0 2px 5px rgba(0, 0, 0, .35);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35);
    --shadow:    0 20px 50px rgba(0, 0, 0, .45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6);
    --ring: 0 0 0 3px #2f4f57; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #c4f3df;
}


/* ==========================================================================
   11 MONOGRAPH — čiernobiely redakčný denník
   ========================================================================== */

:root[data-design="monograph"], .vz-nahlad[data-nahlad="monograph"] {
    --r-xs: 0px; --r-sm: 0px; --r: 0px; --r-lg: 0px; --r-xl: 0px; --r-pill: 2px;
    --font-display: Georgia, "Times New Roman", serif; --display-w: 400;
    --font-num: var(--font); --num-w: 500;
    --char-100: #ebeae3; --char-200: #d9d8cf; --char-300: #b9b8af; --char-400: #8a8982;
    --char-500: #5f5f5a; --char-600: #454542; --char-700: #2a2a28; --char-800: #1d1d1b; --char-900: #121211;
    --vz-orn-r: 0;
    --graf-r: 0; --graf-stlpec: 16; --graf-ciara: 1.6; --graf-hladko: 0; --graf-plocha: 0;
    --graf-symbol: rect; --graf-symbol-vel: 5; --graf-mriezka: solid; --graf-gradient: 0;
    --graf-donut: 80%; --graf-donut-r: 0; --graf-donut-medzera: 1;
    --graf-anim: 900; --graf-easing: cubicOut; --graf-oneskorenie: 35;
    --graf-os-font: Georgia, "Times New Roman", serif;
    --graf-kurzor: rgba(25, 25, 25, .05);
}
:root[data-design="monograph"], .vz-nahlad[data-nahlad="monograph"] {
    --bg: #f6f5f0; --sunken: #ebeae3; --surface: #fcfbf7; --surface-2: #f9f8f3; --tonal: #f1f0ea; --raised: #fffffb;
    --ink: #191919; --ink-soft: #454542; --muted: #5f5f5a; --faint: #70706a; --ink-inv: #ffffff;
    --line: #d9d8cf; --line-soft: #e7e6de; --line-strong: #a9a89f; --pole-okraj: #86857d;
    --cream-200: #dfded5; --cream-soft: #f1f0ea; --cream-tint: #f8f7f2;
    --brand: #171717; --brand-dark: #000000; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #e3b572; --nx-na-tmavej-pokles: #80cfc3;
    --brand-50: #efeee8; --brand-100: #e3e2da; --brand-200: #c9c8bf; --brand-ink: #171717;
    --accent: #ae442f; --accent-soft: #e2b4a8; --accent-ink: #ffffff; --vz-dot: #ae442f;
    --c1: #a14e1f; --c2: #3983ec; --c3: #a69104; --c4: #9444a0; --c5: #12a193; --c6: #a67628; --c7: #7973ca;
    --sb-bg: #f6f5f0; --sb-ink: #454542; --sb-ink-strong: #191919; --sb-faint: #70706a;
    --sb-hover: #ebeae3; --sb-line: #d9d8cf;
    --sb-active-bg: transparent; --sb-active-ink: #191919;
    --shadow-xs: none;
    --shadow-sm: 0 1px 0 rgba(25, 25, 25, .06);
    --shadow:    0 18px 40px rgba(25, 25, 25, .12);
    --shadow-lg: 0 30px 80px rgba(25, 25, 25, .2);
    --ring: 0 0 0 3px #e3e2da; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #191919;
}
:root[data-design="monograph"][data-theme="dark"] {
    --bg: #121211; --sunken: #0c0c0b; --surface: #1d1d1b; --surface-2: #191918; --tonal: #222220; --raised: #262624;
    --ink: #f1f0ea; --ink-soft: #cfcec6; --muted: #a9a8a0; --faint: #8a8982; --ink-inv: #121211;
    --line: #33332f; --line-soft: #272725; --line-strong: #55554f; --pole-okraj: #71716a;
    --cream-200: #2e2e2b; --cream-soft: #1f1f1d; --cream-tint: #1a1a19;
    --brand: #f1f0ea; --brand-dark: #ffffff; --brand-ink-on: #121211;
    --nx-na-tmavej-rast: #865901; --nx-na-tmavej-pokles: #0d736a;
    --brand-50: #232321; --brand-100: #2c2c29; --brand-200: #45453f; --brand-ink: #f1f0ea;
    --accent: #e0735b; --accent-soft: #eab0a2; --accent-ink: #121211; --vz-dot: #e0735b;
    --c1: #a25141; --c2: #4b7bb8; --c3: #9b9028; --c4: #a547af; --c5: #24a69a; --c6: #9e6e1e; --c7: #726cc2;
    --sb-bg: #121211; --sb-ink: #cfcec6; --sb-ink-strong: #f1f0ea; --sb-faint: #8a8982;
    --sb-hover: rgba(255, 255, 255, .05); --sb-line: #33332f;
    --sb-active-bg: transparent; --sb-active-ink: #f1f0ea;
    --shadow-xs: none;
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, .4);
    --shadow:    0 18px 40px rgba(0, 0, 0, .55);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px #2c2c29; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #f1f0ea;
}


/* ==========================================================================
   12 TERRACE — slnečná terasa pri mori
   ========================================================================== */

:root[data-design="terrace"], .vz-nahlad[data-nahlad="terrace"] {
    --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 24px; --r-pill: 30px;
    --font-display: Georgia, "Times New Roman", serif; --display-w: 400;
    --font-num: var(--font); --num-w: 500;
    --char-100: #eeeee5; --char-200: #dde3d5; --char-300: #c2cbb9; --char-400: #7a877c;
    --char-500: #5d6c60; --char-600: #455c4e; --char-700: #2c4a38; --char-800: #243a30; --char-900: #16241d;
    --vz-orn-r: 22px;
    --graf-r: 10; --graf-stlpec: 22; --graf-ciara: 2.6; --graf-hladko: .5; --graf-plocha: .22;
    --graf-symbol: circle; --graf-symbol-vel: 7; --graf-mriezka: none; --graf-gradient: 1;
    --graf-donut: 62%; --graf-donut-r: 12; --graf-donut-medzera: 2.5;
    --graf-anim: 1100; --graf-easing: quarticOut; --graf-oneskorenie: 50;
    --graf-kurzor: rgba(51, 92, 73, .07);
}
:root[data-design="terrace"], .vz-nahlad[data-nahlad="terrace"] {
    --bg: #eeeee5; --sunken: #e3e7da; --surface: #fbfcf6; --surface-2: #f6f7ef; --tonal: #f0f2e8; --raised: #ffffff;
    --ink: #243a30; --ink-soft: #455c4e; --muted: #5a695d; --faint: #69746c; --ink-inv: #ffffff;
    --line: #d9dfd1; --line-soft: #e7ebe0; --line-strong: #c2cbb9; --pole-okraj: #7c8474;
    --cream-200: #dae0cf; --cream-soft: #eef0e6; --cream-tint: #f5f6ee;
    --brand: #335c49; --brand-dark: #26473a; --brand-ink-on: #ffffff;
    --nx-na-tmavej-rast: #fec389; --nx-na-tmavej-pokles: #9ddcb9;
    --brand-50: #eaf0e4; --brand-100: #dee8d6; --brand-200: #bfd1b5; --brand-ink: #2f5543;
    --accent: #c7a677; --accent-soft: #e8d6b8; --accent-ink: #2b2417; --vz-dot: #b8925e;
    --c1: #299f6c; --c2: #9373be; --c3: #c2750c; --c4: #1999b2; --c5: #d85c34; --c6: #868604; --c7: #3a84ca;
    --sb-bg: #f8f9f1; --sb-ink: #4e6556; --sb-ink-strong: #243a30; --sb-faint: #69746c;
    --sb-hover: #eef1e7; --sb-line: #dde3d5;
    --sb-active-bg: #dee8d6; --sb-active-ink: #2c4a38;
    --shadow-xs: 0 2px 6px rgba(46, 80, 51, .05);
    --shadow-sm: 0 8px 30px rgba(46, 80, 51, .06);
    --shadow:    0 20px 55px rgba(26, 64, 32, .14);
    --shadow-lg: 0 30px 80px rgba(26, 64, 32, .22);
    --ring: 0 0 0 3px #dee8d6; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #335c49;
}
:root[data-design="terrace"][data-theme="dark"] {
    --bg: #141a17; --sunken: #0f1411; --surface: #1c2320; --surface-2: #19201c; --tonal: #212a25; --raised: #26302a;
    --ink: #eef1e8; --ink-soft: #cad3c6; --muted: #a6b1a4; --faint: #869185; --ink-inv: #141a17;
    --line: #2f3a33; --line-soft: #252e29; --line-strong: #45524a; --pole-okraj: #6d7b72;
    --cream-200: #2d3831; --cream-soft: #1e2622; --cream-tint: #19201c;
    --brand: #a9cfae; --brand-dark: #c7e2ca; --brand-ink-on: #13241a;
    --nx-na-tmavej-rast: #774003; --nx-na-tmavej-pokles: #03593b;
    --brand-50: #1f2b24; --brand-100: #27362d; --brand-200: #3b5243; --brand-ink: #b5d8b9;
    --accent: #d4b687; --accent-soft: #e6d2b0; --accent-ink: #1c1810; --vz-dot: #d4b687;
    --c1: #36a878; --c2: #8f72bb; --c3: #a35b0c; --c4: #0aa5ab; --c5: #c0594a; --c6: #7d7e24; --c7: #327cc2;
    --sb-bg: #171e1a; --sb-ink: #cad3c6; --sb-ink-strong: #eef1e8; --sb-faint: #869185;
    --sb-hover: rgba(255, 255, 255, .05); --sb-line: #2f3a33;
    --sb-active-bg: #2c3d32; --sb-active-ink: #d7ecd9;
    --shadow-xs: 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-sm: 0 8px 30px rgba(0, 0, 0, .35);
    --shadow:    0 20px 55px rgba(0, 0, 0, .5);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .65);
    --ring: 0 0 0 3px #27362d; --focus: 0 0 0 2px var(--surface), 0 0 0 4px #a9cfae;
}

/* Flex `gap` (Chromium 84+) — náhradné okraje pre Edge 83 (ARCHITEKTURA §2). */
@supports not (aspect-ratio: 1 / 1) {
    .vz-rezim .seg button > * + * { margin-left: 6px; }
}