/* ==========================================================================
   TURNAJ ŽIVĚ — REDESIGN 2026
   Design system vrstva. Načítá se PO style.css a přebarvuje celý veřejný web.
   Struktura webu, routy ani třídy se nemění — mění se jen vizuál.

   Témata: dark (výchozí) · light · solar (vysoký kontrast)
   Písma:  Manrope (text) + Montserrat (čísla, nadpisy, skóre)
   ========================================================================== */

/* ---------- 1. TOKENY ---------------------------------------------------- */

:root,
html[data-theme="dark"] {
    --bg:          #0B0F17;
    --bg-el:       #1E293B;
    --bg-sunk:     #111827;
    --text:        #F8FAFC;
    --text-sec:    #94A3B8;
    --border:      #243244;
    --primary:     #22C55E;
    --accent:      #06B6D4;
    --live:        #22C55E;
    --success:     #22C55E;
    --warn:        #F59E0B;
    --danger:      #EF4444;
    --primary-glow: rgba(34, 197, 94, .45);
    --glass-head:  rgba(11, 15, 23, .82);
    --hero-grad:   linear-gradient(150deg, #0B0F17, #111827, #0e2a24);
    --on-primary:  #061a0e;
    --shadow-card: 0 12px 32px -14px rgba(0, 0, 0, .55);
    --shadow-pop:  0 18px 44px -12px rgba(0, 0, 0, .65);
}

html[data-theme="light"] {
    --bg:          #F1F5F9;
    --bg-el:       #FFFFFF;
    --bg-sunk:     #E9EEF5;
    --text:        #0B1220;
    --text-sec:    #64748B;
    --border:      #DCE3EE;
    --primary:     #059669;
    --accent:      #0891B2;
    --live:        #059669;
    --success:     #059669;
    --warn:        #D97706;
    --danger:      #DC2626;
    --primary-glow: rgba(5, 150, 105, .32);
    --glass-head:  rgba(255, 255, 255, .82);
    --hero-grad:   linear-gradient(150deg, #0B1220, #10263a, #0d3b30);
    --on-primary:  #FFFFFF;
    --shadow-card: 0 10px 26px -16px rgba(15, 23, 42, .35);
    --shadow-pop:  0 18px 44px -14px rgba(15, 23, 42, .28);
}

html[data-theme="solar"] {
    --bg:          #000000;
    --bg-el:       #0A0A0A;
    --bg-sunk:     #111111;
    --text:        #FFFFFF;
    --text-sec:    #E5E5E5;
    --border:      #FFFFFF;
    --primary:     #22FF88;
    --accent:      #22FF88;
    --live:        #FF3B30;
    --success:     #22FF88;
    --warn:        #FFD400;
    --danger:      #FF3B30;
    --primary-glow: rgba(34, 255, 136, .55);
    --glass-head:  rgba(0, 0, 0, .85);
    --hero-grad:   linear-gradient(150deg, #000, #061a0e, #000);
    --on-primary:  #000000;
    --shadow-card: 0 0 0 1px #fff;
    --shadow-pop:  0 0 0 1px #fff;
}

/* Zpětná kompatibilita — staré proměnné mapujeme na nové tokeny,
   aby nezůstaly „osamocené" barvy v komponentách, které je ještě používají. */
:root {
    --primary-blue: var(--primary);
    --primary-red:  var(--live);
    --dark-blue:    var(--primary);
    --light-blue:   var(--accent);
    --light-red:    var(--danger);
    --dark:         var(--text);
    --dark-gray:    var(--bg-el);
    --gray:         var(--text-sec);
    --light-gray:   var(--bg-sunk);
    --white:        var(--bg-el);

    --gradient-primary: linear-gradient(140deg, var(--primary), var(--accent));
    --gradient-hero:    var(--hero-grad);

    --radius-sm: 9px;
    --radius-md: 11px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .16);
    --shadow-md: var(--shadow-card);
    --shadow-lg: var(--shadow-card);
    --shadow-xl: var(--shadow-pop);
}

/* ---------- 2. ZÁKLAD ---------------------------------------------------- */

html { background: var(--bg); }

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    transition: background .25s, color .25s;
}

h1, h2, h3, h4, h5,
.lp-hero-h1, .lp-org-h2,
.md-sb-score, .stats-metric-value {
    font-family: 'Montserrat', 'Manrope', sans-serif;
    letter-spacing: -.02em;
}

h1, h2 { font-weight: 900; }
h3, h4 { font-weight: 800; }

a { color: var(--primary); }
.text-muted { color: var(--text-sec) !important; }
.text-success { color: var(--success) !important; }
hr { border-color: var(--border); }

::selection { background: var(--primary); color: var(--on-primary); }

/* Sjednocené odsazení stránek: mobil má bottom nav, ať se obsah neschová pod ní */
@media (max-width: 899px) {
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 3. HEADER / NAVIGACE ---------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--glass-head) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: none !important;
}

.nav-wrapper { padding: 12px 0; gap: 16px; }

.logo-img { height: 34px; width: auto; }

/* Nová značka: gradientová dlaždice + wordmark */
.tz-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.tz-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -3px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.tz-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    color: var(--text);
    white-space: nowrap;
}

.tz-logo-accent { color: var(--accent); }

.footer .tz-logo { margin-bottom: 12px; }
.footer .tz-logo-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.footer .tz-logo-text { font-size: 16px; }

.nav-menu { gap: 2px; }

.nav-link {
    padding: 9px 15px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text) !important;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background .15s, color .15s;
}

.nav-link:hover { background: var(--bg-sunk); }

.nav-link.active {
    color: var(--primary) !important;
    background: var(--bg-sunk);
}

.nav-link.active::after { display: none; }

.nav-link-live i.pulse {
    color: var(--live) !important;
    animation: pulseDot 1.3s infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 var(--primary-glow); }
    70%      { box-shadow: 0 0 0 8px transparent; }
}

.auth-login-link {
    background: linear-gradient(140deg, var(--primary), var(--accent));
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 6px 16px -8px var(--primary-glow);
}

.auth-login-link:hover { filter: brightness(1.08); background: linear-gradient(140deg, var(--primary), var(--accent)); }

.mobile-toggle {
    color: var(--text);
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    border-radius: 9px;
    width: 38px;
    height: 38px;
}

/* Uživatelské menu */
.user-menu-toggle { color: var(--text) !important; }

.user-dropdown {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 13px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    padding: 6px;
}

.user-dropdown-item {
    color: var(--text);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
}

.user-dropdown-item:hover { background: var(--bg-sunk); color: var(--primary); }

/* Mobilní rozbalené menu */
@media (max-width: 899px) {
    .nav-menu {
        background: var(--bg-el);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-pop);
        padding: 10px;
        gap: 4px;
    }
    .nav-menu .nav-link { padding: 12px 14px; font-size: 15px; }
}

/* ---------- 4. OVLÁDACÍ PRVKY V HLAVIČCE --------------------------------
   Jazyk, téma a přihlášení tvoří jednu skupinu, takže sdílejí stejnou
   výšku, rádius, rámeček i typografii. Bez toho každý prvek vypadal jinak
   (26 / 33 / 40 px, tři různé rádiusy).
   ------------------------------------------------------------------------ */

:root {
    --ctl-h: 36px;   /* jednotná výška ovládacích prvků */
    --ctl-r: 10px;   /* jednotný rádius */
}

.nav-menu {
    align-items: center;
    gap: 6px;
}

/* Navigační odkazy a ovládací prvky jsou dvě skupiny — oddělíme je větší
   mezerou a jemnou svislou linkou, ať se tlačítka neslepí do jednoho pásu. */
@media (min-width: 900px) {
    #themeSwitchItem {
        margin-left: 14px;
        padding-left: 14px;
        position: relative;
    }

    #themeSwitchItem::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 22px;
        background: var(--border);
    }

    #langSwitcherItem { margin-left: 2px; }
    #authNavItem      { margin-left: 4px; }
}

/* Společný základ pro všechny tři prvky */
.theme-switch,
.lang-switcher-btn,
.auth-login-link,
.user-menu-toggle {
    height: var(--ctl-h);
    border-radius: var(--ctl-r);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* --- Přepínač témat (segmentovaný) --- */
.theme-switch {
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    padding: 3px;
    gap: 2px;
}

.theme-switch-btn {
    height: 100%;
    min-width: 30px;
    padding: 0 9px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    background: transparent;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.theme-switch-btn:hover { color: var(--text); }

.theme-switch-btn.active {
    background: var(--primary);
    color: var(--on-primary);
}

/* --- Jazykový přepínač --- */
.lang-switcher { display: inline-flex; align-items: center; }

.lang-switcher-btn {
    background: var(--bg-sunk) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    padding: 0 12px !important;
    gap: 8px;
    font-weight: 600 !important;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.lang-switcher-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.lang-switcher-btn img,
.lang-switcher-btn .lang-flag {
    width: 18px;
    height: auto;
    border-radius: 3px;
    display: block;
}

.lang-switcher-btn .lang-name-short { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.lang-switcher-btn .fa-chevron-down { font-size: 9px; opacity: .6; }

/* --- Přihlášení / uživatelské menu --- */
.auth-login-link {
    padding: 0 16px !important;
    font-weight: 700 !important;
    gap: 8px;
    border: 1px solid transparent !important;
}

.user-menu-toggle {
    background: var(--bg-sunk) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    padding: 0 12px !important;
    gap: 8px;
    font-weight: 600 !important;
    cursor: pointer;
}

.user-menu-toggle:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.user-menu-arrow { font-size: 9px; opacity: .6; }

/* Navigační odkazy mají stejnou výšku, ať je celá lišta opticky v jedné ose */
.nav-menu > li > .nav-link {
    height: var(--ctl-h);
    border-radius: var(--ctl-r);
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
}

/* --- Mobil: prvky přes celou šířku, stále stejná soustava --- */
@media (max-width: 899px) {
    .nav-menu { align-items: stretch; gap: 6px; }
    .nav-menu > li { width: 100%; }

    /* Obalový div jazykového přepínače nepředává šířku sám od sebe */
    #langSwitcher,
    #langSwitcherItem,
    #themeSwitchItem,
    #authNavItem { width: 100%; display: block; }

    .theme-switch,
    .lang-switcher,
    .lang-switcher-btn,
    .auth-login-link,
    .user-menu,
    .user-menu-toggle {
        width: 100%;
        height: 44px;
        justify-content: center;
    }

    .theme-switch-btn { flex: 1; font-weight: 600; }

    .nav-menu > li > .nav-link {
        height: 44px;
        width: 100%;
        font-size: 15px;
    }

    .lang-switcher-btn { justify-content: center; }
}

/* ---------- 5. MOBILNÍ BOTTOM NAV (nová komponenta) --------------------- */

.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--glass-head);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav-inner { display: flex; }

.bottom-nav-item {
    flex: 1;
    text-align: center;
    padding: 6px 2px;
    cursor: pointer;
    color: var(--text-sec);
    background: none;
    border: none;
    font-family: inherit;
    text-decoration: none;
    transition: color .15s;
}

.bottom-nav-item.active { color: var(--primary); }
.bottom-nav-icon  { font-size: 17px; line-height: 1; display: block; }
.bottom-nav-label { font-size: 10px; font-weight: 600; margin-top: 3px; display: block; }

.bottom-nav-item .live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--live);
    animation: pulseDot 1.3s infinite;
}

@media (max-width: 899px) { .bottom-nav { display: block; } }

/* ---------- 6. TLAČÍTKA -------------------------------------------------- */

.btn,
.lp-btn-primary, .lp-btn-ghost, .lp-btn-lg,
.lp-pricing-btn, .lp-uh-btn,
.help-btn-outline, .auth-submit-btn,
.btn-pdf-download, .contact-social-btn {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    border-radius: 11px;
    transition: filter .15s, background .15s, border-color .15s, transform .1s;
}

.btn:active, .lp-btn-primary:active, .auth-submit-btn:active { transform: translateY(1px); }

.btn-primary,
.lp-btn-primary,
.lp-pricing-btn-primary,
.lp-uh-btn-reg,
.auth-submit-btn {
    background: linear-gradient(140deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 22px -12px var(--primary-glow);
}

.btn-primary:hover, .lp-btn-primary:hover, .auth-submit-btn:hover { filter: brightness(1.08); }

.btn-outline,
.lp-btn-ghost,
.lp-pricing-btn-outline,
.lp-uh-btn-ghost,
.help-btn-outline {
    background: var(--bg-el) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

.btn-outline:hover, .lp-btn-ghost:hover, .help-btn-outline:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn-sm { padding: 7px 13px; font-size: 12.5px; }

.btn-pdf-download {
    background: var(--live) !important;
    color: #fff !important;
    border: none !important;
    padding: 11px 20px;
    font-size: 13.5px;
}

.btn-pdf-download:hover { filter: brightness(1.08); }

.pdf-export-bar {
    text-align: center;
    margin-top: 20px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ---------- 7. KARTY / PANELY ------------------------------------------- */

.info-card, .group-card, .match-section, .stats-section-card,
.stats-metric-card, .team-card-pub, .contact-form-card, .contact-info-card,
.contact-social-card, .help-cta-card, .faq-item, .tournament-card,
.tournament-list-card, .lp-feature-card, .lp-pricing-card, .info-details,
.team-group-card, .mportal-card, .attachment-card, .lp-lm-card,
.stats-table, .info-section, .roster-panel, .price-tiers, .tlc-header {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    color: var(--text);
}

.info-section { padding: 18px; margin-bottom: 14px; }

.match-section { padding: 18px; margin-bottom: 16px; }

.match-section h3, .stats-section-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    margin: 0 0 12px;
    color: var(--text);
}

/* ---------- 8. HOMEPAGE / LANDING --------------------------------------- */

.lp-hero, .page-hero {
    background: var(--hero-grad) !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.lp-hero::after, .page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 72% 18%, var(--primary-glow), transparent 55%),
        radial-gradient(circle at 20% 90%, rgba(6, 182, 212, .2), transparent 50%);
}

/* Obsah musí být nad barevným překryvem.
   POZOR: nesmí se použít `.lp-hero > *` — přepsalo by to `position: absolute`
   u dekorací (.lp-hero-decor-1/2) i šipky (.lp-hero-scroll), ty by spadly
   do toku a odsunuly obsah hero sekce doprava. Cílíme jen na obalové prvky. */
.lp-hero > .container,
.page-hero > .container,
.page-hero > .page-hero-content {
    position: relative;
    z-index: 1;
}

.lp-hero-h1, .page-hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.03em;
}

/* Původní růžovo-fialový gradient v nadpisech nahrazujeme značkovou zelenou */
.lp-hero-accent, .lp-org-h2 .lp-hero-accent {
    background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.lp-hero-sub, .page-hero p { color: rgba(255, 255, 255, .8); }

.lp-badge, .lp-badge-dark, .lp-badge-sm, .lp-section-header .lp-badge {
    background: rgba(34, 197, 94, .14);
    border: 1px solid rgba(34, 197, 94, .35);
    color: var(--primary);
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .03em;
}

.lp-features, .lp-organizer-section, .lp-showcase, .lp-pricing-section {
    background: var(--bg);
    color: var(--text);
}

.lp-organizer-section { background: var(--bg-sunk); }

.lp-section-header h2, .lp-org-h2 { color: var(--text); }
.lp-section-header p, .lp-org-sub, .lp-pricing-desc { color: var(--text-sec); }

.lp-feature-card { padding: 20px; }
.lp-feature-card h3 { color: var(--text); font-size: 16px; }
.lp-feature-card p  { color: var(--text-sec); }

.lp-feature-icon {
    border-radius: 12px;
    background: linear-gradient(140deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -10px var(--primary-glow);
}

.lp-icon-blue, .lp-icon-green, .lp-icon-orange, .lp-icon-purple, .lp-icon-gray {
    background: linear-gradient(140deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
}

.lp-feature-list li { color: var(--text-sec); }
.lp-feature-list i  { color: var(--primary); }

/* Ceník */
.lp-pricing-card { padding: 22px; }
.lp-pricing-card h3 { color: var(--text); }
.lp-price-amount { font-family: 'Montserrat', sans-serif; font-weight: 900; color: var(--text); }
.lp-price-per    { color: var(--text-sec); }

.lp-pricing-card-popular {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .1), var(--shadow-card);
}

.lp-pricing-card-popular .lp-badge-sm,
.lp-pricing-card-popular > .lp-badge {
    background: var(--primary);
    color: var(--on-primary);
    border-color: transparent;
}

.lp-pricing-features li { color: var(--text) !important; font-size: 13.5px; }
.lp-pf-yes    { color: var(--text) !important; }
.lp-pf-yes i  { color: var(--success) !important; }
.lp-pf-no     { color: var(--text-sec) !important; opacity: .6; }
.lp-pf-no i   { color: var(--text-sec) !important; }
.lp-pf-warn   { color: var(--text-sec) !important; }
.lp-pf-warn i { color: var(--warn) !important; }

/* Závěrečné CTA */
.lp-cta-section {
    background: linear-gradient(140deg, var(--primary), var(--accent)) !important;
    color: #fff;
}

.lp-cta-section h2, .lp-cta-section p { color: #fff !important; }

.lp-cta-icon {
    background: rgba(255, 255, 255, .18) !important;
    border: 1px solid rgba(255, 255, 255, .3);
}

.lp-cta-section .lp-btn-primary {
    background: #fff !important;
    color: var(--primary) !important;
}

.lp-cta-section .lp-btn-ghost {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .4) !important;
    color: #fff !important;
}

/* Živý hero pro diváky */
.lp-live-matches, .lp-lm-card {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.lp-lm-scoreboard, .lp-lm-score-row { color: var(--text); }
.lp-lm-tname  { color: var(--text); font-weight: 700; }
.lp-lm-sc-win { color: var(--success); }
.lp-lm-clock  { color: var(--primary); font-family: 'Montserrat', sans-serif; font-weight: 800; }
.lp-lm-round  { color: var(--text-sec); }
.lp-lm-btn-watch  { background: linear-gradient(140deg, var(--primary), var(--accent)) !important; color: #fff !important; }
.lp-lm-btn-detail { background: var(--bg-sunk) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }

/* Produktový mockup v hero — nechat tmavý i ve světlém tématu */
.lp-hero-ui .lp-ui-main,
.lp-hero-ui .lp-ui-live-card {
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
}

.lp-ui-live-pill { background: var(--live) !important; color: #fff !important; }
.lp-ui-pulse-dot { animation: pulseDot 1.3s infinite; }

.lp-trust-bar  { background: var(--bg-sunk); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-trust-item { color: var(--text-sec); }
.lp-trust-item i { color: var(--primary); }

.lp-hero-scroll { color: rgba(255, 255, 255, .55); }

/* ---------- 9. STRÁNKOVÉ HERO ------------------------------------------- */

.page-hero-small  { padding: 44px 0 26px; text-align: center; }
.page-hero-content h1 { font-size: clamp(24px, 4vw, 34px); }

.tournament-badge, .status-badge {
    display: inline-block;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 4px 12px;
    text-transform: uppercase;
}

.status-upcoming { background: rgba(6, 182, 212, .9);  color: #fff; }
.status-live     { background: var(--live);            color: #fff; }
.status-finished { background: rgba(22, 163, 74, .9);  color: #fff; }

/* ---------- 10. KARTY TURNAJŮ ------------------------------------------- */

.tournaments-list { display: flex; flex-direction: column; gap: 14px; }

.tournament-card, .tournament-list-card { padding: 18px; }

.tournament-card:hover, .tournament-list-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
}

.tournament-card h3, .tlc-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--text);
    font-size: 18px;
}

.tlc-meta, .tournament-info, .meta-item { color: var(--text-sec); font-size: 13px; }
.tlc-icon { color: var(--primary); }

/* Sport chipy + hledání (nová komponenta z designu) */
.tz-filterbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.tz-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 6px 6px 16px;
    max-width: 460px;
}

.tz-search-wrap i { color: var(--text-sec); }

.tz-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    outline: none;
    min-width: 0;
}

.tz-search-input::placeholder { color: var(--text-sec); }

.tz-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.tz-chip {
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    background: var(--bg-el);
    color: var(--text-sec);
    border: 1px solid var(--border);
    font-family: 'Manrope', sans-serif;
    transition: background .15s, color .15s;
}

.tz-chip:hover { color: var(--text); }

.tz-chip.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: transparent;
}

/* ---------- 11. PODZÁLOŽKY TURNAJE -------------------------------------- */

.sub-tabs-wrapper {
    position: sticky;
    top: 61px;
    z-index: 30;
    background: var(--glass-head);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

.sub-tabs { gap: 2px; border: none; }

.sub-tab-btn {
    padding: 15px 13px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    border: none;
    border-bottom: 2.5px solid transparent;
    background: transparent;
    color: var(--text-sec);
    cursor: pointer;
}

.sub-tab-btn:hover { color: var(--text); }

.sub-tab-btn.active {
    border-bottom-color: var(--primary);
    color: var(--primary);
    background: transparent;
}

/* ---------- 12. TABULKY -------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-el);
}

.pub-table, .stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: var(--text);
    background: transparent;
}

.pub-table thead th, .stats-table thead th {
    background: transparent;
    color: var(--text-sec);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}

.pub-table td, .stats-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}

.pub-table tbody tr:last-child td { border-bottom: none; }
.pub-table tbody tr:hover { background: var(--bg-sunk); }

.team-link, .stats-team-link { color: var(--text); font-weight: 600; }
.team-link:hover { color: var(--primary); }

/* Tabulka pořadí */
.standings-cell-rank { width: 44px; }

.srank-badge {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    background: var(--bg-sunk);
    color: var(--text-sec);
}

.srank-1, .srank-2 { background: var(--success); color: #fff; }
.srank-3           { background: var(--primary); color: var(--on-primary); }

.srow-1, .srow-2, .srow-3 { background: transparent; }

.standings-pts-badge {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--primary);
    background: transparent;
    padding: 0;
    font-size: 14px;
}

.standings-cell-score { font-variant-numeric: tabular-nums; color: var(--text-sec); }
.standings-mobile-stats { color: var(--text-sec); font-size: 11px; }

.abbr-badge {
    background: var(--bg-sunk);
    color: var(--text-sec);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 700;
}

/* Hvězdička oblíbeného týmu v tabulce (nová funkce) */
.tz-fav-star {
    cursor: pointer;
    margin-right: 7px;
    color: var(--text-sec);
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    opacity: .55;
    transition: opacity .15s, color .15s, transform .1s;
}

.tz-fav-star:hover  { opacity: 1; color: var(--warn); }
.tz-fav-star:active { transform: scale(.9); }
.tz-fav-star.on     { color: var(--warn); opacity: 1; }

/* ---------- Přehled oblíbených týmů (spodní panel) ---------------------- */

.tz-fav-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 64px;
    z-index: 55;
    background: var(--bg-el);
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 36px -18px rgba(0, 0, 0, .6);
    max-height: 62vh;
    overflow: auto;
    animation: tzFavUp .22s ease;
}

@keyframes tzFavUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.tz-fav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tz-fav-head strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
}

.tz-fav-head strong i { color: var(--warn); margin-right: 6px; }

.tz-fav-close {
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    color: var(--text-sec);
    border-radius: 9px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.tz-fav-close:hover { color: var(--text); }

.tz-fav-list { display: flex; flex-direction: column; gap: 8px; }

.tz-fav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
}

.tz-fav-link { flex: 1; min-width: 0; display: block; text-decoration: none; }

.tz-fav-name {
    display: block;
    color: var(--text);
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-fav-sub { display: block; color: var(--text-sec); font-size: 11.5px; margin-top: 2px; }

.tz-fav-remove {
    background: none;
    border: none;
    color: var(--warn);
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.tz-fav-remove:hover { opacity: .7; }

.tz-fav-empty { text-align: center; padding: 18px 8px 22px; }
.tz-fav-empty i { font-size: 30px; color: var(--text-sec); opacity: .45; }
.tz-fav-empty p { color: var(--text); font-weight: 600; font-size: 14px; margin: 12px 0 4px; }
.tz-fav-empty span { color: var(--text-sec); font-size: 12.5px; }

/* Na desktopu (kde není spodní navigace) panel ukotvíme ke spodní hraně */
@media (min-width: 900px) {
    .tz-fav-sheet {
        bottom: 0;
        left: auto;
        right: 20px;
        width: 360px;
        border-radius: 18px 18px 0 0;
    }
}

/* Křížová tabulka */
.cross-table { font-size: 12px; }
.cross-table th { color: var(--text-sec); }

/* Úhlopříčka (tým sám proti sobě) — jen jemné ztlumení, ne plná plocha */
.cross-self {
    background: var(--bg-sunk) !important;
    color: var(--text-sec) !important;
    opacity: .6;
}

.cross-sticky-col,
.cross-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-el);
    z-index: 1;
}

/* ---------- 13. AKORDEONY SKUPIN ---------------------------------------- */

.group-card { margin-bottom: 14px; overflow: hidden; }

.group-card-header {
    padding: 16px 18px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.group-card-header h3, .group-card-header > span:first-child {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
}

.group-card-header i { color: var(--primary); }
.group-card-meta { color: var(--text-sec); font-size: 12px; }
.group-card-body { padding: 0 18px 18px; }

/* ---------- 14. PAVOUK PLAY-OFF ----------------------------------------- */

.pub-bracket, .pub-bracket-mobile { color: var(--text); }

.bracket-round-label, .bracket-mobile-round-title {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: .05em;
    background: transparent;
    border: none;
    padding: 0 0 10px;
}

.bracket-single, .bracket-pair > div, .bracket-mobile-matches > div {
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: var(--bg-el);
}

.bracket-team-abbr {
    width: 22px;
    height: 22px;
    border-radius: 28%;
    color: #fff;
    font-size: 8.5px;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.bracket-team-score {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: var(--text);
}

.bracket-team-pending { color: var(--text-sec); font-style: normal; }

.bracket-connector-col { border-color: var(--border) !important; }

/* Karty zápasů v pavouku — všechny varianty na tmavý panel */
.bracket-match-card,
.bracket-single,
.bracket-split-top .bracket-single,
.bracket-split-bottom .bracket-single,
.bracket-mobile-matches .bracket-match-card {
    background: var(--bg-el) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    overflow: hidden;
}

.bracket-match-card:hover { border-color: var(--primary) !important; }

.bracket-team {
    background: transparent !important;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.bracket-team:last-child { border-bottom: none; }

.bracket-team.winner {
    background: transparent !important;
    font-weight: 800;
    box-shadow: inset 3px 0 0 var(--primary);
}

.bracket-team.winner .bracket-team-name {
    color: var(--primary) !important;
    font-weight: 800;
}

.bracket-team.winner .bracket-team-score {
    color: var(--primary) !important;
}

.bracket-team.loser { opacity: .65; }

.bracket-team.loser .bracket-team-name {
    color: var(--text-sec) !important;
}

.bracket-team.loser .bracket-team-score {
    color: var(--text-sec) !important;
}

.bracket-team-name {
    color: var(--text);
    font-weight: 600;
}

/* Finále zvýrazněné zlatým rámečkem */
.bracket-round:last-child .bracket-single:first-of-type,
.bracket-round:last-child .bracket-match-card:first-of-type {
    border-color: var(--warn) !important;
}

/* ---------- 15b. ŘÁDKY ZÁPASŮ (mc-row) --------------------------------- */

.mc-row {
    background: var(--bg-el) !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid transparent !important;
    border-radius: 12px !important;
    color: var(--text);
}

.mc-row:hover {
    border-left-color: var(--primary) !important;
    box-shadow: var(--shadow-card);
}

.mc-row-live {
    border-left-color: var(--live) !important;
    background: var(--bg-el) !important;
}

.mc-row-showmatch {
    border-left-color: var(--warn) !important;
    background: var(--bg-el) !important;
}

.mc-row-finished { opacity: 1; }

.mc-teams-wrap, .mc-team-row { color: var(--text); }

.mc-team-name {
    color: var(--text) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.mc-team-name.mc-team-winner {
    color: var(--primary) !important;
    font-weight: 800;
}

.mc-team-name.mc-team-pending {
    color: var(--text-sec) !important;
    font-style: italic;
    opacity: 0.85;
    font-weight: 500;
}

a.mc-team-name {
    color: var(--text) !important;
}

a.mc-team-name:hover {
    color: var(--primary) !important;
    text-decoration: underline;
}

.mc-score-pill {
    background: var(--bg-sunk);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

.mc-score-pill.mc-score-live { background: var(--live); color: #fff; border-color: transparent; }

/* ---------- 15. SEZNAM ZÁPASŮ ------------------------------------------- */

.match-card-list {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.mc-team-row, .match-card-list > a, .match-card-list > div {
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.match-card-list > *:last-child { border-bottom: none; }
.match-card-list > a:hover, .match-card-list > div:hover { background: var(--bg-sunk); }

.mc-time {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: var(--text-sec);
}

.mc-group-chip {
    background: var(--bg-sunk);
    color: var(--text-sec);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid var(--border);
}

.mc-field-txt, .mc-ref-txt { color: var(--text-sec); font-size: 11px; }
.mc-result-suffix { color: var(--text-sec); font-size: 11px; }

.mc-showmatch-badge {
    background: linear-gradient(140deg, #b45309, #d97706);
    color: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 800;
}

/* ---------- 16. STAVOVÉ ODZNAKY ZÁPASU ---------------------------------- */

.match-status-badge, .mc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.badge-secondary, .mc-status-sched {
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    color: var(--text-sec);
}

.badge-live, .mc-status-live {
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #fca5a5;
}

.badge-success, .mc-status-done {
    background: rgba(22, 163, 74, .18);
    border: 1px solid rgba(22, 163, 74, .45);
    color: #4ade80;
}

.badge-danger, .mc-status-cancelled {
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #fca5a5;
}

html[data-theme="light"] .badge-live,
html[data-theme="light"] .mc-status-live      { color: #b91c1c; }
html[data-theme="light"] .badge-success,
html[data-theme="light"] .mc-status-done      { color: #15803d; }
html[data-theme="light"] .badge-danger,
html[data-theme="light"] .mc-status-cancelled { color: #b91c1c; }

.badge-live-dot, .mc-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: pulseDot 1.3s infinite;
}

/* ---------- 17. DETAIL ZÁPASU — SCOREBOARD ------------------------------ */

.md-scoreboard {
    background: var(--hero-grad) !important;
    border: 1px solid var(--border);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    padding: 26px 22px;
    box-shadow: var(--shadow-pop);
}

.md-scoreboard::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 18%, var(--primary-glow), transparent 55%),
        radial-gradient(circle at 20% 90%, rgba(6, 182, 212, .2), transparent 50%);
    pointer-events: none;
}

.md-scoreboard > * { position: relative; z-index: 1; }

.md-sb-meta { color: #94a3b8; font-size: 11.5px; font-weight: 600; gap: 16px; margin-bottom: 20px; }

.md-sb-abbr {
    border-radius: 28%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.md-sb-tname, .md-sb-tname-link { color: #f1f5f9 !important; font-weight: 700; font-size: 14.5px; }
.md-sb-tname-link:hover { color: var(--primary) !important; }

.md-sb-fouls { color: #64748b; font-size: 11px; margin-top: 5px; }

.md-sb-score {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(38px, 9vw, 56px);
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    gap: 18px;
}

.md-sb-score-sep { color: #475569; font-size: .7em; }
.md-sb-suffix    { color: #94a3b8; font-size: 12px; margin-top: 4px; }
.md-sb-period    { color: #4ade80; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; }
.md-sb-footer    { color: #64748b; font-size: 11.5px; margin-top: 20px; }

/* Showmatch varianta zůstává zlatá */
.md-scoreboard[style*="78350f"] { background: linear-gradient(150deg, #1a1206, #78350f, #b45309) !important; }

/* ---------- 18. UDÁLOSTI ZÁPASU ----------------------------------------- */

.md-events { display: flex; flex-direction: column; }

.md-event {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}

.md-event:last-child { border-bottom: none; }

.md-event-time {
    width: 38px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--text-sec);
    font-size: 12px;
}

.md-event-ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--bg-sunk);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.md-event-ico-goal i   { color: var(--primary) !important; }
.md-event-ico-yellow   { background: rgba(250, 204, 21, .15); }
.md-event-ico-red      { background: rgba(239, 68, 68, .15); }

.md-event-type   { font-weight: 600; color: var(--text); display: block; }
.md-event-player { font-size: 12px; color: var(--text-sec); display: block; }
.md-event-team   { font-size: 11.5px; color: var(--text-sec); margin-left: auto; }

/* ---------- 19. SOUPISKY -------------------------------------------------- */

.match-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 767px) { .match-rosters { grid-template-columns: 1fr; } }

.roster-panel { padding: 16px; }

.roster-panel h4 {
    font-size: 13.5px;
    margin: 0 0 10px;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 8px;
    color: var(--text);
}

.roster-panel:nth-of-type(2) h4 { border-bottom-color: var(--accent); }

.roster-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--border);
}

.roster-player:last-child { border-bottom: none; }

.roster-number {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-sunk);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    flex-shrink: 0;
}

/* V tabulce střelců je číslo dresu inline pilulka, ne čtvercový odznak */
.stats-table .player-number-badge, .player-number-badge {
    display: inline-block;
    width: auto;
    height: auto;
    background: var(--bg-sunk);
    color: var(--text-sec);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    margin-right: 6px;
}

.stats-table .rank-col { color: var(--text-sec); }

.roster-name { flex: 1; color: var(--text); }
.roster-pos  { color: var(--text-sec); font-size: 10.5px; }

.roster-stat-badge {
    background: var(--bg-sunk);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10.5px;
    margin-left: 4px;
}

/* ---------- 20. STATISTIKY ---------------------------------------------- */

.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stats-metric-card { padding: 16px 12px; text-align: center; }

.stats-metric-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-sunk) !important;
}

.stats-metric-icon i { color: var(--primary) !important; }

.stats-metric-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: var(--text);
}

.stats-metric-label { font-size: 10.5px; color: var(--text-sec); margin-top: 2px; }

.stats-biggest-win {
    background: linear-gradient(140deg, var(--primary), var(--accent));
    border-radius: 14px;
    padding: 16px 20px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: 0 10px 26px -14px var(--primary-glow);
    border: none;
}

.stats-biggest-win i { color: #fff; }

.stats-sections { display: flex; flex-direction: column; gap: 14px; }
.stats-section-card { padding: 18px; }

.stats-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text);
}

.stats-section-header i { color: var(--primary); }

/* ---------- 21. TÝMY ------------------------------------------------------ */

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.team-card-pub { padding: 18px; text-align: center; }
.team-card-pub:hover { border-color: var(--primary); transform: translateY(-2px); }

.team-card-icon img { border-radius: 12px; }

.team-card-fallback, .team-profile-fallback {
    background: var(--bg-sunk);
    color: var(--text-sec);
    border-radius: 12px;
}

.team-card-name  { font-weight: 600; font-size: 13px; color: var(--text); }
.team-card-short { font-size: 11px; color: var(--text-sec); }

.team-profile-header {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-card);
}

.team-profile-info h1 { font-family: 'Montserrat', sans-serif; color: var(--text); font-size: 24px; }
.team-profile-short   { color: var(--text-sec); }

.fav-btn {
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    color: var(--text-sec);
    border-radius: 11px;
    width: 42px;
    height: 42px;
}

.fav-btn.fav-active { color: var(--warn); border-color: var(--warn); }

.team-group-card { padding: 14px 16px; }
.team-group-name { color: var(--text); font-weight: 700; }
.team-group-type { color: var(--text-sec); font-size: 12px; }
.team-group-stats { color: var(--text-sec); font-size: 12px; }
.team-group-stats strong { color: var(--primary); }

/* ---------- 22. INFO ZÁLOŽKA -------------------------------------------- */

.info-grid { gap: 24px; }
.info-main, .info-sidebar { min-width: 0; }

.info-details { padding: 6px 16px; }

.info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.info-row:last-child { border-bottom: none; }
.info-row i { color: var(--primary); width: 18px; text-align: center; }
.info-row strong { color: var(--text-sec); font-size: 13px; font-weight: 500; display: block; }
.info-row span { color: var(--text); font-weight: 600; font-size: 13.5px; }

.price-highlight {
    background: linear-gradient(140deg, var(--primary), var(--accent));
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    text-align: center;
    box-shadow: 0 10px 26px -14px var(--primary-glow);
}

.price-amount { font-family: 'Montserrat', sans-serif; font-weight: 900; color: #fff; }
.price-label  { color: rgba(255, 255, 255, .85); }

.price-tiers { padding: 16px; }
.price-tiers h4 { color: var(--text); }
.price-tiers li { color: var(--text-sec); border-bottom: 1px solid var(--border); padding: 8px 0; }
.price-tiers li.current-tier { color: var(--primary); font-weight: 700; }

.wysiwyg-content { color: var(--text-sec); line-height: 1.7; }
.wysiwyg-content strong, .wysiwyg-content b { color: var(--text); }

.attachment-card, .attachment-block-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    padding: 12px 14px !important;
    background: var(--bg-sunk) !important;
    margin: 12px 0;
}

.attachment-block-icon, .attachment-icon { color: var(--danger) !important; font-size: 20px; }
.attachment-block-name, .attachment-name { color: var(--text) !important; font-weight: 600; font-size: 13.5px; }
.attachment-block-size, .attachment-size { color: var(--text-sec) !important; font-size: 11.5px; }
.attachment-action-btn { background: transparent !important; color: var(--primary) !important; border: none !important; }

.btn-cal-add { color: var(--primary); }

/* ---------- 23. FILTRY / FORMULÁŘE -------------------------------------- */

.schedule-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

select, input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], textarea {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-el);
    color: var(--text);
    font-size: 13.5px;
    font-family: 'Manrope', sans-serif;
    outline: none;
}

select:focus, input:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}

input::placeholder, textarea::placeholder { color: var(--text-sec); }

label { color: var(--text-sec); font-size: 13px; }

/* ---------- 24. SHARE TLAČÍTKA ------------------------------------------ */

.share-buttons { display: flex; gap: 10px; margin: 18px 0; }

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    transition: filter .15s, transform .1s;
}

.share-btn:hover  { filter: brightness(1.12); }
.share-btn:active { transform: translateY(1px); }

.share-fb    { background: #1877f2; }
.share-wa    { background: #25d366; }
.share-copy  { background: var(--bg-sunk); color: var(--text); border: 1px solid var(--border); }
.share-story { background: #a21caf; }

.share-buttons-sm .share-btn { width: 34px; height: 34px; font-size: 13px; border-radius: 9px; }

/* ---------- 25. BREADCRUMB / PRÁZDNÉ STAVY ------------------------------ */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.breadcrumb a { color: var(--text-sec); font-size: 13px; font-weight: 600; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { color: var(--text-sec); font-size: 13px; }

.watch-mode-badge, .showmatch-badge {
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    color: var(--text-sec);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 700;
}

.showmatch-badge { background: linear-gradient(140deg, #b45309, #d97706); color: #fff; border: none; }

.empty-state {
    background: var(--bg-el);
    border: 1px dashed var(--border);
    border-radius: 16px;
    padding: 44px 22px;
    text-align: center;
    color: var(--text-sec);
}

.empty-state i { color: var(--text-sec); opacity: .5; font-size: 42px; margin-bottom: 12px; }
.empty-state p { color: var(--text-sec); }

.page-loading { color: var(--text-sec); text-align: center; padding: 44px 0; }
.page-loading i { color: var(--primary); }

.page-content { background: var(--bg); color: var(--text); }

/* ---------- 26. MODALY --------------------------------------------------- */

.auth-modal-overlay, .story-modal-overlay, .field-picker-overlay {
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.auth-modal, .story-modal-box, .field-picker-modal {
    background: var(--bg-el) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px;
    box-shadow: var(--shadow-pop);
    color: var(--text) !important;
}

.field-picker-header h3 { color: var(--text) !important; font-family: 'Montserrat', sans-serif; font-weight: 800; }
.field-picker-close { color: var(--text-sec) !important; background: none; border: none; }
.field-picker-close:hover { color: var(--text) !important; }
.field-picker-desc { color: var(--text-sec) !important; }
.field-picker-btn {
    background: var(--bg-sunk) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    transition: all 0.15s ease;
}
.field-picker-btn:hover {
    background: var(--bg-el) !important;
    border-color: var(--primary) !important;
}
.field-picker-btn i { color: var(--primary) !important; }

.auth-modal-header h2 { font-family: 'Montserrat', sans-serif; color: var(--text); }
.auth-modal-header p  { color: var(--text-sec); }

.auth-modal-logo {
    background: linear-gradient(140deg, var(--primary), var(--accent));
    border-radius: 14px;
    padding: 10px;
    display: inline-flex;
}

.auth-modal-tabs { border-bottom: 1px solid var(--border); gap: 2px; }

.auth-modal-tab {
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--text-sec);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    padding: 12px 16px;
    cursor: pointer;
}

.auth-modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.auth-field label { color: var(--text-sec); }
.auth-field label i { color: var(--primary); }
.auth-pw-toggle { background: transparent; border: none; color: var(--text-sec); }

.auth-error {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #fca5a5;
    border-radius: 9px;
}

.auth-success {
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .35);
    color: #4ade80;
    border-radius: 9px;
}

.auth-modal-close { background: var(--bg-sunk); border: 1px solid var(--border); color: var(--text-sec); border-radius: 9px; }
.auth-form-link a { color: var(--primary); }
.auth-checkbox-label span { color: var(--text-sec); font-size: 12.5px; }

/* ---------- 27. COOKIE BANNER + PWA INSTALL ----------------------------- */

#cookieBanner {
    background: var(--bg-el) !important;
    color: var(--text) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, .5) !important;
}

@media (max-width: 899px) { #cookieBanner { bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; } }

#cookieBanner .cookie-banner-text strong { color: var(--text) !important; }
#cookieBanner .cookie-banner-text { color: var(--text-sec) !important; }
#cookieBanner .cookie-banner-text a { color: var(--primary) !important; }

#cookieBanner .cookie-btn {
    border-radius: 9px !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
}

#cookieBanner .cookie-btn-accept {
    background: linear-gradient(140deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
}

#cookieBanner .cookie-btn-reject {
    background: var(--bg-sunk) !important;
    color: var(--text-sec) !important;
    border: 1px solid var(--border) !important;
}

#install-banner {
    background: var(--bg-el) !important;
    color: var(--text) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, .5) !important;
}

@media (max-width: 899px) { #install-banner { bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; } }

#install-banner #install-btn {
    background: linear-gradient(140deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    border-radius: 9px !important;
    font-family: 'Manrope', sans-serif !important;
}

#install-banner #dismiss-btn { color: var(--text-sec) !important; border-color: var(--border) !important; }

/* ---------- 28. FOOTER --------------------------------------------------- */

.footer {
    background: var(--bg) !important;
    color: var(--text-sec);
    border-top: 1px solid var(--border);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 28px;
    padding: 48px 0 30px;
}

.footer-title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    margin-bottom: 10px;
}

.footer-description, .footer-links a, .footer-contact li { color: var(--text-sec); font-size: 13px; }
.footer-links a:hover { color: var(--primary); }
.footer-contact i { color: var(--primary); }

.social-link {
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    color: var(--text-sec);
    border-radius: 10px;
    width: 36px;
    height: 36px;
}

.social-link:hover { color: var(--primary); border-color: var(--primary); }

.footer-bottom {
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 16px 0;
    color: var(--text-sec);
    font-size: 12px;
}

/* ---------- 29. OBSAHOVÉ STRÁNKY (FAQ, nápověda, kontakt, právní) ------- */

.legal-page, .faq-page, .help-page, .contact-page { background: var(--bg); color: var(--text); }

.legal-content, .help-section-inner, .faq-list { color: var(--text-sec); }
.legal-content h2, .legal-content h3, .help-text h3 { color: var(--text); }

.faq-hero, .help-hero, .contact-hero { background: var(--hero-grad) !important; position: relative; overflow: hidden; }
.faq-hero h1, .help-hero h1, .contact-hero h1 { color: #fff; }
.faq-hero p, .help-hero p, .contact-hero p { color: rgba(255, 255, 255, .8); }

.help-hero-accent, .faq-hero .accent { color: var(--primary); }

.help-hero-badge, .help-section-badge {
    background: rgba(34, 197, 94, .14);
    border: 1px solid rgba(34, 197, 94, .35);
    color: var(--primary);
    border-radius: 999px;
}

.faq-item { margin-bottom: 10px; overflow: hidden; }

.faq-question {
    color: var(--text);
    font-weight: 700;
    padding: 16px 18px;
    background: transparent;
    cursor: pointer;
}

.faq-question:hover { color: var(--primary); }
.faq-answer-inner { color: var(--text-sec); padding: 0 18px 16px; }
.faq-chevron { color: var(--text-sec); }
.faq-cat-title { color: var(--text); font-family: 'Montserrat', sans-serif; }

.faq-search-wrap {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.faq-search { background: transparent; border: none; color: var(--text); }
.faq-search-icon { color: var(--text-sec); }

.help-quick-nav { display: flex; flex-wrap: wrap; gap: 8px; }

.help-qnav-item {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-sec);
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 700;
}

.help-qnav-item:hover { color: var(--primary); border-color: var(--primary); }

.help-tip {
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 11px;
    color: var(--text-sec);
    padding: 14px 16px;
}

.help-cta-card, .faq-contact-cta {
    background: linear-gradient(140deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    border: none !important;
}

.help-cta-card h3, .faq-contact-cta h3, .help-cta-card p, .faq-contact-cta p,
.help-cta-card strong, .help-cta-card span, .help-cta-card i,
.faq-contact-cta strong, .faq-contact-cta span, .faq-contact-cta i {
    color: #fff !important;
}

.help-cta-card span { opacity: .9; }

.contact-fb-embed {
    background: var(--bg-sunk) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    min-height: 120px;
}

.contact-form-card, .contact-info-card, .contact-social-card { padding: 22px; }
.contact-info-label { color: var(--text-sec); font-size: 12px; }
.contact-info-value { color: var(--text); font-weight: 600; }
.contact-info-icon  { background: var(--bg-sunk); color: var(--primary); border-radius: 11px; }
.contact-char-count { color: var(--text-sec); font-size: 11.5px; }

.contact-form-success {
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .35);
    color: #4ade80;
    border-radius: 11px;
}

.contact-form-error {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #fca5a5;
    border-radius: 11px;
}

.contact-social-fb { background: #1877f2 !important; color: #fff !important; }

/* ---------- 30. ŽIVÉ LOSOVÁNÍ ------------------------------------------- */

.draw-stage, .draw-pot, .draw-group {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text);
}

.draw-stage-title { font-family: 'Montserrat', sans-serif; color: var(--text); }
.draw-stage-sub   { color: var(--text-sec); }
.draw-pot-name    { color: var(--primary); font-weight: 800; }
.draw-team        { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 9px; color: var(--text); }
.draw-progress    { background: var(--bg-sunk); }
.draw-progress > div { background: linear-gradient(140deg, var(--primary), var(--accent)); }
.draw-overlay     { background: rgba(0, 0, 0, .8); }
.draw-overlay-name { font-family: 'Montserrat', sans-serif; color: #fff; }
.draw-overlay-target { color: var(--primary); }
.draw-loading     { color: var(--text-sec); }

/* ---------- 31. REKLAMNÍ SLOTY ------------------------------------------ */

.tz-ad-inner, .tz-ad-placeholder {
    background: var(--bg-sunk);
    border: 1px dashed var(--border);
    border-radius: 14px;
    color: var(--text-sec);
}

.tz-ad-ph-link { color: var(--text-sec); }
.tz-ad-ph-link:hover { color: var(--primary); }

/* ---------- 32. M-PORTAL STREAM ----------------------------------------- */

.mportal-card { overflow: hidden; }
.mportal-card-title { color: var(--text); font-family: 'Montserrat', sans-serif; }
.mportal-card-desc  { color: var(--text-sec); }
.mportal-card-meta  { color: var(--text-sec); }
.mportal-card-price { color: var(--primary); font-family: 'Montserrat', sans-serif; font-weight: 900; }
.mportal-card-price-free { color: var(--success); }
.mportal-card-btn   { background: linear-gradient(140deg, var(--primary), var(--accent)) !important; color: #fff !important; }
.mportal-card-thumb-placeholder { background: var(--bg-sunk); color: var(--text-sec); }
.mportal-status-badge { background: var(--live); color: #fff; border-radius: 999px; }

/* ---------- 33. SLEDOVACÍ LIŠTA ----------------------------------------- */

.btn-watch-tournament {
    background: linear-gradient(140deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 13px;
    box-shadow: 0 8px 22px -12px var(--primary-glow);
}

.watch-next-match {
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-sec);
    padding: 14px 16px;
}

/* ---------- 34. STORY MODAL --------------------------------------------- */

.story-modal-header h3 { color: #ffffff !important; font-family: 'Montserrat', sans-serif; }
.story-modal-close { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #cbd5e1 !important; border-radius: 12px; }
.story-modal-close:hover { background: rgba(255,255,255,0.2) !important; color: #ffffff !important; }
.story-preview-img { border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); }

/* ---------- 35. DROBNOSTI ------------------------------------------------ */

.toggle-icon, .group-toggle-icon { color: var(--text-sec); }
.tab-count { background: var(--bg-sunk); color: var(--text-sec); border-radius: 999px; padding: 1px 8px; font-size: 11px; }

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--text-sec);
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    padding: 12px 14px;
}

.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.goals-highlight { color: var(--primary); font-family: 'Montserrat', sans-serif; font-weight: 900; }
.card-icon-yellow { color: #facc15; }
.card-icon-red    { color: var(--danger); }

.stat-number { font-family: 'Montserrat', sans-serif; font-weight: 900; color: var(--text); }
.stat-label  { color: var(--text-sec); }

/* ---------- 36. DOTAŽENÍ ZBYLÝCH SVĚTLÝCH PLOCH -------------------------
   Původní CSS má na řadě míst natvrdo zapsané světlé barvy (#fff, #f8fafc,
   #eff6ff…). Ty by v tmavém tématu zůstaly bílé, proto je převádíme na tokeny.
   Výjimkou jsou produktové mockupy v hero sekci (.lp-ui-*, .lp-pub-*,
   .lp-pv2-*, .lp-browser-*, .lp-phone-v2) — ty mají zůstat světlé záměrně.
   ------------------------------------------------------------------------ */

.lp-tournaments, .lp-features, .lp-pricing-section { background: var(--bg-sunk) !important; }
.lp-showcase { background: var(--bg) !important; }
.lp-pricing-card { background: var(--bg-el) !important; }
.lp-pricing-btn-outline:hover { background: var(--bg-sunk) !important; }

.stats-metric-card { background: var(--bg-el) !important; }
.standings-modern thead th { background: transparent !important; }
.legal-table th { background: var(--bg-sunk) !important; color: var(--text-sec) !important; }

.md-event:hover { background: var(--bg-sunk) !important; }
.md-event-ico-other { background: var(--bg-sunk) !important; }
.md-event-time { background: transparent !important; color: var(--text-sec) !important; }

.faq-answer { background: transparent !important; }
.faq-question:hover { background: var(--bg-sunk) !important; }
.faq-question[aria-expanded="true"] { background: var(--bg-sunk) !important; color: var(--primary) !important; }

.help-section-alt { background: var(--bg-sunk) !important; }
.help-tip { background: var(--bg-sunk) !important; }
.help-qnav-item:hover { background: var(--bg-sunk) !important; }
.help-badge-blue { background: rgba(34, 197, 94, .14) !important; color: var(--primary) !important; }

.help-visual, .help-svg, .help-feature-list, .help-text, .help-section-inner {
    background: transparent;
    color: inherit;
}

.contact-info-icon { background: var(--bg-sunk) !important; color: var(--primary) !important; }
.faq-contact-cta { background: linear-gradient(140deg, var(--primary), var(--accent)) !important; }
.field-picker-btn:hover { background: var(--bg-sunk) !important; }

.lang-switcher-dropdown {
    background: var(--bg-el) !important;
    border: 1px solid var(--border) !important;
    border-radius: 13px !important;
    box-shadow: var(--shadow-pop) !important;
}

.lang-option { color: var(--text) !important; }
.lang-option:hover { background: var(--bg-sunk) !important; }
.lang-option.active { background: var(--bg-sunk) !important; color: var(--primary) !important; }

.wysiwyg-content blockquote {
    background: var(--bg-sunk) !important;
    border-left: 3px solid var(--primary) !important;
    color: var(--text-sec);
    border-radius: 0 11px 11px 0;
}

/* Sekce nápovědy: střídavé bílé bloky měly tmavý text — narovnat na tokeny */
.help-section, .help-section-alt, .help-section-inner { color: var(--text); }
.help-section h2, .help-section h3, .help-section-alt h2, .help-section-alt h3 { color: var(--text); }
.help-section p, .help-section li, .help-section-alt p, .help-section-alt li { color: var(--text-sec); }
.help-feature-list li i { color: var(--success); }

/* Staré generické komponenty (features/tournament-stats) */
.features, .tournament-stats { background: var(--bg-sunk) !important; }
.feature-card { background: var(--bg-el) !important; border: 1px solid var(--border); }
.btn-secondary { background: var(--bg-el) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.btn-white { background: var(--bg-el) !important; color: var(--text) !important; }

/* PDF export lišta */
.pdf-export-bar {
    background: var(--bg-el) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
}

/* Karta skupiny v profilu týmu */
.team-group-card {
    background: var(--bg-el) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.team-group-card:hover {
    background: var(--bg-sunk) !important;
    border-color: var(--primary) !important;
}
.team-group-name { color: var(--text) !important; font-weight: 700; }
.team-group-type, .team-group-stats { color: var(--text-sec) !important; }

/* Výběrová pole a možnosti */
select option {
    background: var(--bg-el);
    color: var(--text);
}

/* Scrollbar */
* { scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-sec); }

/* ---------- 37. KOMPATIBILITA MOBILY & TABLETY (iOS, iPadOS & Android) ----
   Zajišťuje špičkový zážitek na mobilních zařízeních a tabletech:
   • Ochrana před nežádoucím iOS auto-zoomem u formulářových polí (min 16px)
   • Eliminace 300ms prodlevy u dotyků (touch-action: manipulation)
   • Podpora dynamického viewportu (dvh) pro modály a plovoucí panely
   • Plynulý momentum scrolling a bezpečné zóny (safe-area-insets)
   • Zlepšení čitelnosti a rozložení na tabletech i malých telefonech (320px+)
   ------------------------------------------------------------------------ */

/* 1. Touch targets & okamžitá reakce bez delaye */
button, a, input, select, textarea,
.tab-btn, .sub-tab-btn, .tz-chip, .theme-switch-btn,
.bottom-nav-item, .fav-btn, .tz-fav-star, .share-btn,
.auth-modal-tab, .cookie-btn, .btn, .btn-primary, .btn-outline {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 2. Plynulý momentum scroll pro všechny horizontální lišty */
.sub-tabs, .table-wrap, .tz-chips, .cross-table-wrap,
.story-modal-preview, .tournaments-list, .tz-fav-sheet,
.bracket-wrapper, .pub-bracket {
    -webkit-overflow-scrolling: touch;
}

.sub-tabs::-webkit-scrollbar,
.tz-chips::-webkit-scrollbar {
    display: none;
}

/* 3. Modály – podpora dynamic viewport height (iOS Safari i Android Chrome) */
.auth-modal,
.story-modal-box,
.modal {
    max-height: 90vh;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.auth-modal-overlay,
.story-modal-overlay,
.modal-overlay {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* 4. Mobilní formuláře – zamezení iOS auto-zoomu */
@media (max-width: 899px) {
    select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    textarea,
    .tz-search-input,
    .auth-field input {
        font-size: 16px !important;
    }

    /* Vylepšené odsazení mobilních karet */
    .tournament-list-card {
        padding: 16px 14px;
        gap: 12px;
    }

    .tlc-title {
        font-size: 16px;
        line-height: 1.3;
    }

    .tlc-meta {
        font-size: 12.5px;
        gap: 8px 14px;
    }

    /* Sub-tabs na mobilu */
    .sub-tabs {
        padding: 0 4px;
    }

    .sub-tab-btn {
        padding: 12px 10px;
        font-size: 13px;
        min-height: 44px;
    }

    /* Zápasová karta a live panel */
    .lp-lm-card {
        padding: 14px 12px;
    }

    .lp-lm-score-val {
        font-size: 22px;
    }

    .match-header {
        padding: 16px 12px;
    }

    .score-board {
        padding: 16px 10px;
    }

    .score-num {
        font-size: 2.25rem;
    }

    .team-name-lg {
        font-size: 1.1rem;
    }
}

/* 5. Extra malé displeje (iPhone SE, Galaxy A, 320px–380px) */
@media (max-width: 380px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .tz-logo-text {
        font-size: 16px;
    }

    .tz-logo-mark {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .standings-table th,
    .standings-table td {
        padding: 6px 3px;
        font-size: 12px;
    }

    .standings-cell-team {
        max-width: 110px;
    }

    .tlc-actions {
        flex-direction: column;
        width: 100%;
    }

    .tlc-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* 6. Tablety & iPady (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .info-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }

    .stats-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-live-matches {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* ---------- 38. VYLEPŠENÍ USER FLOW A UX (SWIPE, OBLÍBENÉ, LIVE PILL, OFFLINE) */

/* 1. Filtr oblíbených týmů v harmonogramu */
.tz-fav-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: var(--bg-el);
    color: var(--text);
    border: 1px solid var(--border);
    transition: all .15s ease;
}

.tz-fav-filter-chip.active {
    background: rgba(245, 158, 11, .15);
    border-color: var(--warn);
    color: var(--warn);
}

.tz-fav-filter-chip .tz-chip-count {
    background: var(--bg-sunk);
    color: var(--text-sec);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
}

.tz-fav-filter-chip.active .tz-chip-count {
    background: var(--warn);
    color: #000;
}

/* 2. Plovoucí skóre pro živě sledovaný zápas (Floating Live Pill) */
.tz-floating-live-pill {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    z-index: 45;
    background: var(--bg-el);
    border: 1px solid var(--border);
    border-left: 3px solid var(--live);
    border-radius: 999px;
    padding: 8px 16px 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .55);
    text-decoration: none;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    animation: tzPillSlideUp .25s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: calc(100vw - 32px);
    transition: transform .15s, box-shadow .15s;
}

.tz-floating-live-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -6px rgba(0, 0, 0, .65);
    color: var(--text);
}

@keyframes tzPillSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@media (min-width: 900px) {
    .tz-floating-live-pill {
        bottom: 24px;
        right: 24px;
    }
}

.tz-floating-live-pill .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live);
    animation: pulseDot 1.3s infinite;
    flex-shrink: 0;
}

.tz-floating-live-pill .pill-teams {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-floating-live-pill .pill-score {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--live);
    background: rgba(34, 197, 94, .12);
    padding: 2px 8px;
    border-radius: 6px;
}

/* 3. Offline indikátor & banner */
.tz-offline-banner {
    background: rgba(245, 158, 11, .15);
    border: 1px solid rgba(245, 158, 11, .4);
    color: #fbbf24;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    animation: tzFadeIn .2s ease;
}

.tz-offline-banner i {
    font-size: 16px;
    flex-shrink: 0;
}

.tz-offline-banner .tz-offline-retry-btn {
    background: var(--warn);
    color: #000;
    border: none;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tz-offline-banner .tz-offline-retry-btn:hover {
    filter: brightness(1.1);
}

/* 4. Plynulý přechod obsahu záložek při swipování */
#dtabContent {
    transition: opacity .15s ease, transform .15s ease;
    touch-action: pan-y;
}

#dtabContent.swipe-transition {
    opacity: 0.5;
}