/* ==========================================================================
   L2 Beleth — Design v3 (shared design system)
   Spec: design_handoff_l2beleth/README.md + design/*.dc.html
   Jediný design webu. Načítá se VŽDY v layoutu app/Views/layouts/main.php (i pro starší obsah).
   Starý style.css (+ main.js) se načítá jen pro starší obsah — views mimo app/Views/v3/
   (admin, management, dashboard, tickety, postava, výhody, tým, partneři) → body.b3-legacy.
   Styly jedné stránky NEPATŘÍ sem: public/assets/css/v3/<page>.css (view nastaví $pageCss = '<page>',
   vlastní prefix tříd, např. .hm- / .st3- / .er3-); JS stránky public/assets/js/v3/<page>.js ($pageJs).

   ── BODY CLASSES (nastavuje layout) ───────────────────────────────────────
   .b3                 vždy
   .b3-legacy          view není z app/Views/v3/ (starší obsah) → načten style.css + main.js,
                       base styly v3 se NEaplikují (jen chrome: nav/footer/flash)
   .b3-hero-under-nav  view nastavil $heroUnderNav = true → <main> je vytažen
                       pod nav o var(--b-nav-h) (nav průhledný, překrývá hero)
   + $pageClass        libovolná třída z view (per-page pozadí)
   html.b3-js          JS běží (inline skript v <head>) — pro page skripty
   html.b3-chrome      nastaví inline skript v <head> (bez FOUC); při DOMContentLoaded ho
                       odebere, pokud beleth.js nenastavil html.b3-chrome-ready (nenačetl se /
                       spadl). Mobilní menu a user dropdown se skrývají JEN s .b3-chrome,
                       takže bez funkčního beleth.js zůstane vše viditelné/ovladatelné.

   ── TOKENS (:root, prefix --b-) ───────────────────────────────────────────
   Pozadí:   --b-bg #070d0e (stránka) · --b-surface #0b1315 (karty/panely)
             --b-surface-2 #081012 · --b-surface-3 #0a1213 · --b-surface-4 #0e1a1b
   Linky:    --b-line #14201f (nejjemnější) · --b-line-2 #1d2d31 · --b-line-3 #2a3e42
   Text:     --b-text #e7eeec · --b-text-2 #cfdcda · --b-text-3 #bfcecd
             --b-muted #a4b6b4 · --b-faint #6f8584
   Zlatá:    --b-gold-hi #f6ead0 · --b-gold-text #e3c47f · --b-gold #d9b562 · --b-gold-dark #8a6a2a
   Tyrkys:   --b-teal-hi #e3fbf5 · --b-teal-text #a6ebdd · --b-teal-soft #6fc9b0
             --b-teal #3cc9b4 · --b-teal-dim #1d7a6e · --b-teal-dark #14514a
   Medaile:  --b-medal-gold #e3c47f · --b-medal-silver #c9d4d3 · --b-medal-bronze #c08a55
   Chyba:    --b-danger #e0705a · --b-danger-text #f0a390 (není ve spec; flash/errory)
   Gradienty:--b-grad-gold  radial-gradient(circle at 50% 0,#f6ead0,#d9b562 60%,#8a6a2a)
             --b-grad-teal  radial-gradient(circle at 50% 0,#e3fbf5,#3cc9b4 60%,#14514a)
   Fonty:    --b-display 'Cinzel Decorative',serif · --b-body 'EB Garamond',serif
   Layout:   --b-pad-x clamp(20px,4vw,56px)  (vodorovný padding stránky, nav, footer)
             --b-nav-h  výška navigace; default 82px, beleth.js ji přepisuje na
                        změřenou výšku (<html style="--b-nav-h:…">). Použij pro hero:
                        padding-top: calc(var(--b-nav-h) + clamp(40px,6vw,88px))
             --b-page-bg pozadí obalu .b3-shell (default --b-bg). Per-page pozadí:
                        body.<pageClass> { --b-page-bg: radial-gradient(...), #070d0e; }
   Motion:   --b-dur 180ms · --b-ease cubic-bezier(.2,.7,.2,1)

   ── BASE (jen v3 views = body.b3:not(.b3-legacy)) ─────────────────────────
   Nulová specificita (:where), takže JAKÁKOLI třída ji přebije:
   box-sizing:border-box; body 15px/1.55 EB Garamond #e7eeec na #070d0e, text-wrap:pretty;
   a{#e3c47f} a:hover{#f6ead0} — POZOR: link s vlastní třídní barvou hover NEdědí
   (jako inline style v prototypu) → hover si nadefinuj sám;
   h1–h6: Cinzel Decorative 700, line-height 1.12, letter-spacing -.015em, margin 0;
   p/figure margin 0; img block max-width 100%; button/input font:inherit;
   input::placeholder #6f8584; :focus-visible zlatý outline 2px/offset 2px.

   ── CHROME (layout; platí i na legacy stránkách, vše scoped vlastními třídami) ─
   .b3-skip                 skip-link „Přeskočit na obsah“ (viditelný při focusu)
   .b3-shell                obal stránky: min-height 100vh, flex column, bg var(--b-page-bg)
   .b3-main (#b3-main)      <main>, flex:1 (patička dole), display:block
   .b3-nav                  navigace (Beleth Nav v3), position:relative; z-index:30; ~82px
     .b3-nav__logo / __links / __link(.is-active, aria-current) / __dot / __right
     .b3-nav__lang / __lang-link(.is-active) / __discord / __enter („Vstoupit“)
     .b3-nav__burger / __burger-bar / __menu (mobilní panel ≤ 1080px, .b3-nav.is-open)
     .b3-nav.is-open / .is-user-open (beleth.js) → z-index 70, otevřené menu je nad flash toasty
   .b3-user                 dropdown přihlášeného (.is-open): __trigger __avatar(--lg, --letter)
     __caret __menu __profile __who __name __tag __group __item(--logout) __form
   .b3-flashes / .b3-flash(--success|--error|--info|--warning)  toasty vpravo nahoře,
     __body __kicker __msg __close; auto-dismiss v beleth.js (6 s, error/warning 10 s,
     pauza při hoveru/focusu). Nepoužívá třídu .flash (tu by zavřel legacy main.js).
   .b3-footer               patička (Beleth Footer v3): __brand __logo __legal

   ── SHARED COMPONENTS (pro stránky; prefix .b-) ───────────────────────────
   .b-page        kontejner stránky: width 100%, max-width var(--b-max, 1240px), margin auto,
                  padding clamp(40px,6vw,72px) var(--b-pad-x) clamp(80px,10vw,128px).
                  Šířku nastav style="--b-max:1100px" (prototypy: 900/1000/1100/1240/1280).
   .b-page--loose větší horní padding clamp(48px,7vw,96px) (Novinky, Podpora, Jak začít)
   .b-stack       flex column, gap var(--b-gap, 24px)
   .b-head        hlavička stránky: flex column, gap var(--b-head-gap, 10px) (kicker + .b-h1)
   .b-kicker      small-caps štítek 15px, letter-spacing .32em, tyrkys #a6ebdd (default)
     --gold (#e3c47f) · --teal (#3cc9b4, tmavší tyrkys) · --muted (#a4b6b4)
     --sm (14px, .24em) · --line (před textem 40px linka #3cc9b4, gap 12px, jako hero)
   .b-h1          H1 stránky: Cinzel Decorative 700, #d9b562, glow 0 0 40px rgba(217,181,98,.3),
                  font-size var(--b-h1-size, clamp(40px,6vw,76px)), line-height 1
                  (prototypy mají .95–1.05 → případně přepiš per-page)
   .b-h2          sekční nadpis: Cinzel Decorative 700, clamp(28px,3.6vw,44px), #e7eeec
   .b-lead        italic perex 22px/1.45 #cfdcda
   .b-text        odstavec 17.5px/1.65 #bfcecd
   .b-btn         pilulka (inline-flex, gap 10px, Cinzel Decorative 16px, padding 16px 30px)
     --gold        primární zlatá (700, #070d0e na --b-grad-gold, glow 30px → hover 50px)
     --teal        primární tyrkys (700, #070d0e na --b-grad-teal, hover glow 40px)
     --ghost-gold  outline #8a6a2a, text #e3c47f; hover okraj #d9b562 + bg .08
     --ghost-teal  outline #14514a, text #a6ebdd; hover okraj #3cc9b4 + bg .08 + text #e7eeec
     --sm          14px, padding 12px 20px (ghost 11px 19px)
     --block       width 100%
     Ikona: <i class="ph ph-…"> / <i class="ph-bold ph-arrow-right"> uvnitř; [disabled]/.is-disabled
   .b-textbtn     textové tlačítko: small-caps 15px .18em #a6ebdd → hover #3cc9b4 (bez pozadí)
   .b-chip        filtr/štítek pilulka: small-caps 15px .14em, padding 8px 16px, okraj #1d2d31,
                  text #cfdcda; hover okraj #2a3e42; aktivní ([aria-pressed="true"],
                  [aria-selected="true"], .is-active): okraj #8a6a2a, bg rgba(217,181,98,.1), #e3c47f
     --teal        aktivní varianta tyrkys (okraj #14514a, text #a6ebdd)
     --static      štítek (span), bez hover/cursor (home „pilulky“: 16px, .1em)
   .b-card        karta: radius var(--b-radius, 18px), 1px #1d2d31, bg #0b1315 + jemný glow
                  v rohu (var(--b-card-glow, rgba(217,181,98,.10))), padding var(--b-card-pad,
                  clamp(24px,3vw,40px)), position relative, overflow hidden
     --gold / --teal  zlatý/tyrkysový okraj+glow; --link hover okraj zlatý (pro <a> karty)
   .b-diamond     7px kosočtverec (rotate 45°) s glow; barva var(--ink, #3cc9b4); --lg = 8px
   .b-empty       prázdný stav: dashed 1px #1d2d31, radius 18px, padding 64px 24px, center,
                  italic 18px #a4b6b4, gap 12px; ikona uvnitř <i class="ph ph-scroll"> → 36px #8a6a2a
   .b-divider     1px linka #14201f (hr)
   .b-sr-only     visually hidden (pro screen readery)
   Keyframes: b-spin (rotate 360°), b-spin-r (rotate -360°), b-mist (opacity .6↔1, scale 1↔1.08),
              b-float (translateY 0↔-14px). Použití: animation: b-spin 160s linear infinite.
              .b-anim-spin / .b-anim-spin-r / .b-anim-mist — helpery (délka přes --b-anim-dur).
   prefers-reduced-motion: vypíná animace, transitions a smooth scroll pro celý dokument.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --b-bg: #070d0e;
    --b-surface: #0b1315;
    --b-surface-2: #081012;
    --b-surface-3: #0a1213;
    --b-surface-4: #0e1a1b;

    --b-line: #14201f;
    --b-line-2: #1d2d31;
    --b-line-3: #2a3e42;

    --b-text: #e7eeec;
    --b-text-2: #cfdcda;
    --b-text-3: #bfcecd;
    --b-muted: #a4b6b4;
    --b-faint: #6f8584;

    --b-gold-hi: #f6ead0;
    --b-gold-text: #e3c47f;
    --b-gold: #d9b562;
    --b-gold-dark: #8a6a2a;

    --b-teal-hi: #e3fbf5;
    --b-teal-text: #a6ebdd;
    --b-teal-soft: #6fc9b0;
    --b-teal: #3cc9b4;
    --b-teal-dim: #1d7a6e;
    --b-teal-dark: #14514a;

    --b-medal-gold: #e3c47f;
    --b-medal-silver: #c9d4d3;
    --b-medal-bronze: #c08a55;

    --b-danger: #e0705a;
    --b-danger-text: #f0a390;

    --b-grad-gold: radial-gradient(circle at 50% 0, #f6ead0, #d9b562 60%, #8a6a2a);
    --b-grad-teal: radial-gradient(circle at 50% 0, #e3fbf5, #3cc9b4 60%, #14514a);

    --b-display: 'Cinzel Decorative', serif;
    --b-body: 'EB Garamond', serif;

    --b-pad-x: clamp(20px, 4vw, 56px);
    --b-nav-h: 82px;

    --b-dur: 180ms;
    --b-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Base (jen v3 views; nulová specificita) ────────────────────────────── */
:where(body.b3:not(.b3-legacy)) *,
:where(body.b3:not(.b3-legacy)) *::before,
:where(body.b3:not(.b3-legacy)) *::after { box-sizing: border-box; }

:where(body.b3:not(.b3-legacy)) {
    margin: 0;
    background: var(--b-bg);
    color: var(--b-text);
    font-family: var(--b-body);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
:where(body.b3:not(.b3-legacy)) a { color: var(--b-gold-text); text-decoration: none; }
:where(body.b3:not(.b3-legacy) a:hover) { color: var(--b-gold-hi); }
:where(body.b3:not(.b3-legacy)) :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
}
:where(body.b3:not(.b3-legacy)) :is(p, figure, blockquote) { margin: 0; }
:where(body.b3:not(.b3-legacy)) img { display: block; max-width: 100%; }
:where(body.b3:not(.b3-legacy)) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.b3:not(.b3-legacy)) :is(input, textarea)::placeholder { color: var(--b-faint); opacity: 1; }
:where(body.b3:not(.b3-legacy)) ::selection { background: rgba(217, 181, 98, .28); color: var(--b-gold-hi); }
:where(body.b3:not(.b3-legacy) :focus:not(:focus-visible)) { outline: none; }
:where(body.b3:not(.b3-legacy) :focus-visible) { outline: 2px solid var(--b-gold); outline-offset: 2px; }
:where(body.b3:not(.b3-legacy) :is(a, button, input, select, textarea, summary, [role="tab"])) {
    transition: color var(--b-dur) ease, background-color var(--b-dur) ease,
                border-color var(--b-dur) ease, box-shadow 200ms ease;
}
.b3-main:focus { outline: none; }

/* ── Skip link ──────────────────────────────────────────────────────────── */
.b3-skip {
    position: absolute;
    left: 16px;
    top: -120px;
    z-index: 100;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--b-gold);
    background: var(--b-surface);
    color: var(--b-gold-text);
    font-family: var(--b-body);
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
}
.b3-skip:focus, .b3-skip:hover { top: 12px; color: var(--b-gold-hi); }

/* ── Shell / main ───────────────────────────────────────────────────────── */
.b3-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--b-page-bg, var(--b-bg));
    color: var(--b-text);
}
.b3-main {
    flex: 1 0 auto;
    display: block;
    width: 100%;
    min-width: 0;
}
/* Home hero pod navigací: <main> se vytáhne nahoru o výšku navu (prototyp: margin-top:-82px). */
.b3-hero-under-nav .b3-main { margin-top: calc(-1 * var(--b-nav-h, 82px)); }

/* ── Navigace (Beleth Nav v3) ───────────────────────────────────────────── */
.b3-nav {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 32px;
    padding: 20px var(--b-pad-x);
    margin: 0;
    font-family: var(--b-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--b-text-2);
    text-align: left;
    box-sizing: border-box;
}
.b3-nav *, .b3-nav *::before, .b3-nav *::after { box-sizing: border-box; }
.b3-nav a { text-decoration: none; }
.b3-nav__logo { display: flex; align-items: center; flex: none; }
.b3-nav__logo picture { display: block; flex: none; }
.b3-nav__logo img { display: block; height: 42px; width: auto; max-width: none; aspect-ratio: 428 / 505; }  /* poměr originálu l2Beleth.png (71×84 kopie má jiný zaokrouhlený) */
/* Otevřené mobilní menu / user dropdown musí být nad flash toasty (.b3-flashes z-index 60). */
.b3-nav.is-open, .b3-nav.is-user-open { z-index: 70; }

.b3-nav__menu { display: contents; }

.b3-nav__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 26px;
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: 0.12em;
}
.b3-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cfdcda;
    text-transform: lowercase;
    text-decoration: none;
    transition: color var(--b-dur) ease, text-shadow var(--b-dur) ease;
}
/* Prototyp: neaktivní odkaz má místo „◆ “ prázdný flex item → +6px (gap) před textem. */
.b3-nav__link:not(.is-active)::before { content: ''; }
/* Úzký desktop (1081–1180px): menší mezery, ať se pravý blok (CS/EN, Discord, Vstoupit) nezalomí
   pod odkazy; prototyp je kreslený pro 1280+ (tam platí 32/26px). */
@media (min-width: 1081px) and (max-width: 1180px) {
    .b3-nav { column-gap: 24px; }
    .b3-nav__links { column-gap: 20px; }
}
.b3-nav__link:hover, .b3-nav__link:focus-visible { color: #e3c47f; }
.b3-nav__link.is-active {
    color: #e3c47f;
    text-shadow: 0 0 14px rgba(217, 181, 98, .6);
}
.b3-nav__dot { font-variant: normal; text-transform: none; }

.b3-nav__right {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    font-size: 14px;
    letter-spacing: 0.12em;
}
.b3-nav__lang { display: flex; gap: 8px; }
.b3-nav__lang-link { color: #6f8584; text-decoration: none; transition: color var(--b-dur) ease; }
.b3-nav__lang-link:hover, .b3-nav__lang-link:focus-visible { color: #e3c47f; }
.b3-nav__lang-link.is-active, .b3-nav__lang-link.is-active:hover { color: #e3c47f; }

.b3-nav__discord {
    display: flex;
    color: #a6ebdd;
    font-size: 20px;
    line-height: 1;
    transition: color var(--b-dur) ease;
}
.b3-nav__discord:hover, .b3-nav__discord:focus-visible { color: #3cc9b4; }

.b3-nav__enter {
    font-family: var(--b-display);
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px;
    color: #e3c47f;
    text-decoration: none;
    border: 1px solid #8a6a2a;
    border-radius: 999px;
    background: transparent;
    white-space: nowrap;
    transition: color var(--b-dur) ease, background-color var(--b-dur) ease, border-color var(--b-dur) ease;
}
.b3-nav__enter:hover, .b3-nav__enter:focus-visible {
    border-color: #d9b562;
    background: rgba(217, 181, 98, .1);
    color: #f6ead0;
}
.b3-nav :focus-visible, .b3-user :focus-visible, .b3-flash :focus-visible, .b3-footer :focus-visible {
    outline: 2px solid #d9b562;
    outline-offset: 2px;
}

/* Hamburger (jen mobil) */
.b3-nav__burger {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    margin: 0 0 0 auto;
    padding: 0;
    width: 42px;
    height: 42px;
    flex: none;
    border: 1px solid #8a6a2a;
    border-radius: 50%;
    background: transparent;
    color: #e3c47f;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color var(--b-dur) ease, background-color var(--b-dur) ease;
}
.b3-nav__burger:hover, .b3-nav__burger:focus-visible, .b3-nav.is-open .b3-nav__burger {
    border-color: #d9b562;
    background: rgba(217, 181, 98, .1);
}
.b3-nav__burger-bar {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 200ms var(--b-ease), opacity 150ms ease;
}
.b3-nav.is-open .b3-nav__burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.b3-nav.is-open .b3-nav__burger-bar:nth-child(2) { opacity: 0; }
.b3-nav.is-open .b3-nav__burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
    .b3-chrome .b3-nav__burger { display: inline-flex; }
    .b3-chrome .b3-nav { flex-wrap: nowrap; }
    .b3-chrome .b3-nav__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        max-height: calc(100vh - var(--b-nav-h, 82px));
        max-height: calc(100dvh - var(--b-nav-h, 82px));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px var(--b-pad-x) 28px;
        background:
            radial-gradient(600px 240px at 20% 0, rgba(217, 181, 98, .08), transparent 70%),
            #070d0e;
        border-top: 1px solid #1d2d31;
        border-bottom: 1px solid #1d2d31;
        box-shadow: 0 40px 80px rgba(0, 0, 0, .7);
    }
    .b3-chrome .b3-nav.is-open .b3-nav__menu { display: flex; animation: b3-drop 200ms var(--b-ease); }
    .b3-chrome .b3-nav__links { flex-direction: column; gap: 0; font-size: 18px; }
    .b3-chrome .b3-nav__link {
        padding: 14px 0;
        border-bottom: 1px solid #14201f;
    }
    .b3-chrome .b3-nav__link::before { content: none; }
    .b3-chrome .b3-nav__right {
        flex-wrap: wrap;
        gap: 18px 22px;
        margin-left: 0;
        padding-top: 22px;
        font-size: 15px;
    }
    .b3-chrome .b3-nav__right .b3-nav__enter { margin-left: auto; }
    .b3-chrome .b3-nav__right .b3-user { flex-basis: 100%; }
    .b3-chrome .b3-user__menu {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 14px;
        box-shadow: none;
        animation: none;
    }
}
@keyframes b3-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── User dropdown (přihlášený; není ve spec — stejný jazyk) ────────────── */
.b3-user { position: relative; letter-spacing: normal; }
.b3-user__trigger {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    margin: 0;
    padding: 4px 13px 4px 4px;
    border: 1px solid #8a6a2a;
    border-radius: 999px;
    background: transparent;
    color: #e3c47f;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: color var(--b-dur) ease, background-color var(--b-dur) ease, border-color var(--b-dur) ease;
}
.b3-user__trigger:hover, .b3-user__trigger:focus-visible, .b3-user.is-open .b3-user__trigger {
    border-color: #d9b562;
    background: rgba(217, 181, 98, .1);
    color: #f6ead0;
}
.b3-user__avatar {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(217, 181, 98, .35);
}
.b3-user__avatar--lg { width: 44px; height: 44px; }
.b3-user__avatar--letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--b-grad-gold);
    color: #070d0e;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}
.b3-user__avatar--lg.b3-user__avatar--letter { font-size: 19px; }
.b3-user__caret { font-size: 12px; transition: transform 200ms var(--b-ease); }
.b3-user.is-open .b3-user__caret { transform: rotate(180deg); }

.b3-user__menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 40;
    min-width: 260px;
    padding: 8px;
    border: 1px solid #1d2d31;
    border-radius: 16px;
    background:
        radial-gradient(260px 160px at 100% 0, rgba(217, 181, 98, .10), transparent 70%),
        #0b1315;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
    font-family: var(--b-body);
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: normal;
    font-variant: normal;
    text-align: left;
    animation: b3-drop 180ms var(--b-ease);
}
.b3-chrome .b3-user:not(.is-open) .b3-user__menu { display: none; }
html:not(.b3-chrome) .b3-user:not(:hover):not(:focus-within) .b3-user__menu { display: none; }

.b3-user__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid #14201f;
}
.b3-user__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b3-user__name {
    font-size: 18px;
    color: #e7eeec;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.b3-user__tag { font-size: 13px; font-variant: small-caps; letter-spacing: .24em; color: #6fc9b0; }
.b3-user__group { display: flex; flex-direction: column; gap: 2px; }
.b3-user__group + .b3-user__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid #14201f; }
.b3-user__group:empty { display: none; }
.b3-user__form { margin: 0; padding: 0; }
.b3-user__item {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #cfdcda;
    font-family: var(--b-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .01em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--b-dur) ease, background-color var(--b-dur) ease;
}
.b3-user__item i { font-size: 18px; color: #6fc9b0; transition: color var(--b-dur) ease; }
.b3-user__item:hover, .b3-user__item:focus-visible { background: rgba(217, 181, 98, .08); color: #e3c47f; }
.b3-user__item:hover i, .b3-user__item:focus-visible i { color: #e3c47f; }
.b3-user__item--logout { color: #a4b6b4; }
.b3-user__item--logout i { color: #6f8584; }
.b3-user__item--logout:hover, .b3-user__item--logout:focus-visible { background: rgba(224, 112, 90, .08); color: #f0a390; }
.b3-user__item--logout:hover i, .b3-user__item--logout:focus-visible i { color: #f0a390; }

/* ── Flash toasty (není ve spec — stejný jazyk) ─────────────────────────── */
.b3-flashes {
    position: fixed;
    top: calc(var(--b-nav-h, 82px) + 6px);
    right: var(--b-pad-x);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(420px, calc(100vw - 2 * var(--b-pad-x)));
    pointer-events: none;
}
/* Bez funkčního beleth.js (html:not(.b3-chrome)) toasty nejdou zavřít → v toku pod navem, nic nepřekrývají. */
html:not(.b3-chrome) .b3-flashes { position: static; width: auto; margin: 0 var(--b-pad-x) 24px; }
.b3-flash {
    --tone: #d9b562;
    --tone-line: rgba(138, 106, 42, .85);
    --tone-text: #e3c47f;
    --tone-glow: rgba(217, 181, 98, .12);
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 16px 12px 16px 20px;
    border: 1px solid var(--tone-line);
    border-radius: 14px;
    background:
        radial-gradient(280px 120px at 0 0, var(--tone-glow), transparent 70%),
        #0b1315;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 30px var(--tone-glow);
    color: #e7eeec;
    font-family: var(--b-body);
    font-weight: 400;
    text-align: left;
    animation: b3-toast-in 260ms var(--b-ease);
    transition: opacity 300ms ease, transform 300ms var(--b-ease);
}
.b3-flash--success { --tone: #3cc9b4; --tone-line: rgba(29, 122, 110, .9); --tone-text: #a6ebdd; --tone-glow: rgba(60, 201, 180, .12); }
.b3-flash--error   { --tone: #e0705a; --tone-line: rgba(224, 112, 90, .55); --tone-text: #f0a390; --tone-glow: rgba(224, 112, 90, .12); }
.b3-flash--info    { --tone: #6fc9b0; --tone-line: #2a3e42; --tone-text: #a4b6b4; --tone-glow: rgba(111, 201, 176, .07); }
.b3-flash.is-leaving { opacity: 0; transform: translateX(16px); }
.b3-flash__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.b3-flash__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.3;
    font-variant: small-caps;
    letter-spacing: .26em;
    color: var(--tone-text);
}
.b3-flash__kicker::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background: var(--tone);
    box-shadow: 0 0 8px var(--tone);
}
.b3-flash__msg { font-size: 17px; line-height: 1.45; color: #e7eeec; overflow-wrap: anywhere; }
.b3-flash__close {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: -4px 0 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #6f8584;
    font-size: 15px;
    cursor: pointer;
    transition: color var(--b-dur) ease, border-color var(--b-dur) ease;
}
.b3-flash__close:hover, .b3-flash__close:focus-visible { color: #e3c47f; border-color: #8a6a2a; }
@keyframes b3-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Patička (Beleth Footer v3) ─────────────────────────────────────────── */
.b3-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 32px var(--b-pad-x) 40px;
    border-top: 1px solid #14201f;
    font-family: var(--b-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    color: #6f8584;
    text-align: left;
    box-sizing: border-box;
}
.b3-footer__brand { display: flex; align-items: center; gap: 14px; }
.b3-footer__brand picture { display: block; flex: none; }
.b3-footer__logo { display: block; height: 36px; width: auto; max-width: none; aspect-ratio: 428 / 505; opacity: .8; }

/* ── Starší obsah v chrome (body.b3-legacy; style.css je načten) ────────── */
/* Admin/management/dashboard/… views. style.css počítá s fixní navigací 72px (62px ≤900px)
   — nový nav je v toku stránky. */
body.b3.b3-legacy { padding-top: 0; }
.b3-legacy .b3-shell { background: transparent; }     /* nech legacy pozadí body */
.b3-legacy .panel-sidebar { top: 24px; max-height: calc(100vh - 48px); }   /* admin/management _panel_nav */
/* Pozn.: globální `a{}`/`a:hover{}` ze style.css (specificita 0,0,1 / 0,1,1) chrome nepřebarví —
   všechny odkazy v chrome mají vlastní třídu + vlastní :hover (0,2,0). */

/* ── Shared components (.b-*) ───────────────────────────────────────────── */

/* Page container */
.b-page {
    position: relative;
    width: 100%;
    max-width: var(--b-max, 1240px);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) var(--b-pad-x) clamp(80px, 10vw, 128px);
    box-sizing: border-box;
}
.b-page--loose { padding-top: clamp(48px, 7vw, 96px); }
.b-stack { display: flex; flex-direction: column; gap: var(--b-gap, 24px); }

/* Page header */
.b-head { display: flex; flex-direction: column; gap: var(--b-head-gap, 10px); }

/* Kicker */
.b-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--b-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    font-variant: small-caps;
    letter-spacing: .32em;
    color: #a6ebdd;
}
.b-kicker--gold { color: #e3c47f; }
.b-kicker--teal { color: #3cc9b4; }
.b-kicker--muted { color: #a4b6b4; }
.b-kicker--sm { font-size: 14px; letter-spacing: .24em; }
.b-kicker--line { gap: 12px; }
.b-kicker--line::before { content: ''; flex: none; width: 40px; height: 1px; background: #3cc9b4; }

/* Headings / text */
.b-h1 {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: var(--b-h1-size, clamp(40px, 6vw, 76px));
    line-height: 1;
    letter-spacing: -0.015em;
    color: #d9b562;
    text-shadow: 0 0 40px rgba(217, 181, 98, .3);
}
.b-h2 {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #e7eeec;
}
.b-lead { margin: 0; font-size: 22px; font-style: italic; line-height: 1.45; color: #cfdcda; }
.b-text { margin: 0; font-size: 17.5px; line-height: 1.65; color: #bfcecd; }

/* Buttons */
.b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 16px 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #e3c47f;
    font-family: var(--b-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: color var(--b-dur) ease, background-color var(--b-dur) ease,
                border-color var(--b-dur) ease, box-shadow 200ms ease;
}
.b-btn i { font-size: 1em; line-height: 1; }   /* prototypy: ikona = velikost písma tlačítka */
.b-btn--gold {
    font-weight: 700;
    color: #070d0e;
    background: var(--b-grad-gold);
    box-shadow: 0 0 30px rgba(217, 181, 98, .35);
}
.b-btn--gold:hover, .b-btn--gold:focus-visible { color: #070d0e; box-shadow: 0 0 50px rgba(217, 181, 98, .6); }
.b-btn--teal {
    font-weight: 700;
    color: #070d0e;
    background: var(--b-grad-teal);
}
.b-btn--teal:hover, .b-btn--teal:focus-visible { color: #070d0e; box-shadow: 0 0 40px rgba(60, 201, 180, .5); }
.b-btn--ghost-gold {
    padding: 15px 26px;
    border: 1px solid #8a6a2a;
    color: #e3c47f;
}
.b-btn--ghost-gold:hover, .b-btn--ghost-gold:focus-visible {
    border-color: #d9b562;
    background: rgba(217, 181, 98, .08);
    color: #e3c47f;
}
.b-btn--ghost-teal {
    padding: 15px 26px;
    border: 1px solid #14514a;
    color: #a6ebdd;
}
.b-btn--ghost-teal:hover, .b-btn--ghost-teal:focus-visible {
    border-color: #3cc9b4;
    background: rgba(60, 201, 180, .08);
    color: #e7eeec;
}
.b-btn--sm { font-size: 14px; padding: 12px 20px; gap: 8px; }
.b-btn--sm.b-btn--ghost-gold, .b-btn--sm.b-btn--ghost-teal { padding: 11px 19px; }
.b-btn--block { display: flex; width: 100%; }
.b-btn[disabled], .b-btn.is-disabled, .b-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

/* Text button */
.b-textbtn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #a6ebdd;
    font-family: var(--b-body);
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: .18em;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--b-dur) ease;
}
.b-textbtn:hover, .b-textbtn:focus-visible { color: #3cc9b4; }

/* Chip (filtr / štítek) */
.b-chip {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #1d2d31;
    border-radius: 999px;
    background: transparent;
    color: #cfdcda;
    font-family: var(--b-body);
    font-size: 15px;
    line-height: 1.3;
    font-variant: small-caps;
    letter-spacing: .14em;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--b-dur) ease, background-color var(--b-dur) ease, border-color var(--b-dur) ease;
}
.b-chip:hover { border-color: #2a3e42; color: #e3c47f; }
.b-chip[aria-pressed="true"], .b-chip[aria-selected="true"], .b-chip.is-active {
    border-color: #8a6a2a;
    background: rgba(217, 181, 98, .1);
    color: #e3c47f;
}
.b-chip--teal[aria-pressed="true"], .b-chip--teal[aria-selected="true"], .b-chip--teal.is-active {
    border-color: #14514a;
    background: rgba(60, 201, 180, .08);
    color: #a6ebdd;
}
.b-chip--static, .b-chip--static:hover { cursor: default; font-size: 16px; letter-spacing: .1em; color: inherit; border-color: #1d2d31; }

/* Card */
.b-card {
    position: relative;
    overflow: hidden;
    padding: var(--b-card-pad, clamp(24px, 3vw, 40px));
    border: 1px solid #1d2d31;
    border-radius: var(--b-radius, 18px);
    background:
        radial-gradient(420px 260px at 100% 0, var(--b-card-glow, rgba(217, 181, 98, .10)), transparent 70%),
        #0b1315;
    color: #e7eeec;
}
.b-card--gold { border-color: rgba(138, 106, 42, .6); --b-card-glow: rgba(217, 181, 98, .18); }
.b-card--teal { border-color: #14514a; --b-card-glow: rgba(60, 201, 180, .14); }
a.b-card, .b-card--link { display: block; text-decoration: none; transition: border-color var(--b-dur) ease, box-shadow 200ms ease; }
a.b-card:hover, .b-card--link:hover { border-color: #8a6a2a; color: #e7eeec; }

/* Diamond indicator */
.b-diamond {
    display: inline-block;
    flex: none;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background: var(--ink, #3cc9b4);
    box-shadow: 0 0 8px var(--ink, #3cc9b4);
}
.b-diamond--lg { width: 8px; height: 8px; box-shadow: 0 0 10px var(--ink, #3cc9b4); }

/* Empty state */
.b-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    border: 1px dashed #1d2d31;
    border-radius: 18px;
    color: #a4b6b4;
    font-family: var(--b-body);
    font-size: 18px;
    font-style: italic;
    text-align: center;
}
.b-empty > i { font-size: 36px; color: #8a6a2a; font-style: normal; }

/* Misc */
.b-divider { height: 1px; margin: 0; border: 0; background: #14201f; }
.b-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes b-spin   { to { transform: rotate(360deg); } }
@keyframes b-spin-r { to { transform: rotate(-360deg); } }
@keyframes b-mist   { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes b-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.b-anim-spin   { animation: b-spin var(--b-anim-dur, 160s) linear infinite; }
.b-anim-spin-r { animation: b-spin-r var(--b-anim-dur, 60s) linear infinite; }
.b-anim-mist   { animation: b-mist var(--b-anim-dur, 9s) ease-in-out infinite; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .b-anim-spin, .b-anim-spin-r, .b-anim-mist { animation: none !important; }
}