/* =============================================================
   DJAnalyzer - Design Tokens
   Vizuální identita SHODNÁ s reálnou aplikací: téměř černá plocha,
   Spotify-zelený akcent, datové micro-labely (jako stat bar v appce),
   tónina/BPM v mono. Záměrně NE generický gradientový "AI template".
   ============================================================= */

:root {
    /* ---------- PLOCHA ---------- */
    --bg:            #0a0b0c;   /* body - jako appka */
    --bg-deep:       #060708;   /* sekce „pod" */
    --panel:         #121316;   /* karty / panely */
    --panel-2:       #16181b;   /* vyvýšené */
    --panel-3:       #1c1f23;   /* hover, řádky */
    --rail:          #0d0e10;   /* levý rail / chrome */
    --overlay:       rgba(5, 6, 7, 0.74);

    /* ---------- TEXT ---------- */
    --tx:            #f3f4f5;
    /* Tlumené odstíny zvednuté kvůli WCAG AA (4.5:1). Na 0.64/0.42/0.24 padal
       footer, lang-switch, pricing/cenik a další pod kontrast. Tyto hodnoty
       projdou AA s rezervou na všech tmavých podkladech (bg #0a0b0c i panely),
       u sekundárního/tlumeného i AAA (7:1) — viz report přístupnosti. */
    --tx-2:          rgba(243, 244, 245, 0.90);
    --tx-3:          rgba(243, 244, 245, 0.80);
    --tx-4:          rgba(243, 244, 245, 0.62);
    --on-accent:     #052b14;

    /* ---------- AKCENT (zelená appky) ---------- */
    --grn:           #1ed760;
    --grn-bright:    #2bf06e;
    --grn-dim:       #1ab852;
    --grn-soft:      rgba(30, 215, 96, 0.12);
    --grn-soft-2:    rgba(30, 215, 96, 0.20);
    --grn-line:      rgba(30, 215, 96, 0.34);
    /* Neprůhledná výplň chat bubliny „Z praxe" - stejná barva pro
       bublinu i ocásek = žádné artefakty z průhlednosti. */
    --grn-bubble:    #15281d;

    /* Datové akcenty (jako v track tabulce appky) */
    --key:           #38d9d2;   /* tónina (Camelot) */
    --bpm:           #f3f4f5;
    --warn:          #ffc24b;
    --bad:           #ff6b5e;
    --info:          #5db4ff;

    --warn-bg:       rgba(255, 194, 75, 0.12);
    --bad-bg:        rgba(255, 107, 94, 0.12);
    --grn-glow:      0 0 0 1px rgba(30,215,96,.26), 0 18px 46px -16px rgba(30,215,96,.45);

    /* ---------- LINKY / OKRAJE ---------- */
    --line:          rgba(243, 244, 245, 0.09);
    --line-2:        rgba(243, 244, 245, 0.06);
    --line-strong:   rgba(243, 244, 245, 0.18);

    /* ---------- GRADIENTY (decentní, ne duhové) ---------- */
    --grad-grn:      linear-gradient(180deg, #1ed760 0%, #18b94f 100%);
    --grad-panel:    linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    --grad-fade:     linear-gradient(180deg, transparent, var(--bg-deep));
    --hero-glow:     radial-gradient(58% 48% at 80% 26%, rgba(30,215,96,.13), transparent 62%);

    /* ---------- STÍNY ---------- */
    --sh-sm:         0 2px 8px rgba(0,0,0,.45);
    --sh-md:         0 14px 36px rgba(0,0,0,.5);
    --sh-lg:         0 36px 90px -20px rgba(0,0,0,.7);
    --ring:          0 0 0 3px rgba(30,215,96,.30);

    /* ---------- TYPOGRAFIE ---------- */
    /* Space Grotesk = technický „music-tech" charakter (ne generický Sora).
       JetBrains Mono = data (BPM/tónina/čas) jako v appce. */
    --f-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.3rem;
    --fs-2xl:  1.65rem;
    --fs-3xl:  2.1rem;
    --fs-4xl:  clamp(2.1rem, 4.2vw, 3.1rem);
    --fs-5xl:  clamp(2.4rem, 4.6vw, 3.4rem);
    --fs-hero: clamp(2rem, 4vw, 3.25rem);

    --lh-tight: 1.06;
    --lh-snug:  1.26;
    --lh-norm:  1.55;
    --lh-loose: 1.72;

    --tr-tight: -0.025em;
    --tr-label: 0.16em;

    /* ---------- SPACING ---------- */
    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
    --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem;
    --s20:5rem; --s24:6rem; --s32:8rem;

    --maxw:        1280px;
    --maxw-narrow: 860px;
    --pad:         1.5rem;

    /* ---------- RADIUS ---------- */
    --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px;
    --r-xl:24px; --r-2xl:30px; --r-full:999px;

    /* ---------- POHYB ---------- */
    --t-fast:   130ms cubic-bezier(.4,0,.2,1);
    --t:        220ms cubic-bezier(.4,0,.2,1);
    --t-slow:   480ms cubic-bezier(.18,.9,.28,1);

    --z-nav:200; --z-overlay:800; --z-modal:1000; --z-toast:1500;
    --nav-h: 70px;

    /* ---------- KOMPATIBILNÍ ALIASY ----------
       Účet, administrace a checkout byly napsané s jinou sadou názvů
       tokenů, než definuje tento soubor. Mapujeme je na reálné tokeny,
       jinak var() padá na fallback a povrchy/okraje/tlumené texty se
       vůbec nevykreslí (vše „splývá"). */
    --text-primary:   var(--tx);
    --text-secondary: var(--tx-2);
    --text-muted:     var(--tx-3);
    --bg-surface:     var(--panel-2);
    --border:         var(--line);
    --border-soft:    var(--line-2);
    --border-strong:  var(--line-strong);
    --success:        var(--grn);
    --warning:        var(--warn);
    --danger:         var(--bad);
    --accent:         var(--grn);
    --font-accent:    var(--f-mono);
    --lh-relaxed:     var(--lh-norm);
}

@media (prefers-reduced-motion: reduce) {
    :root { --t-fast:0ms; --t:0ms; --t-slow:0ms; }
}

/* =============================================================
   DJAnalyzer - Base: reset, typografie, layout primitivy
   Editorial, levostranně zarovnané, datové micro-labely (jako appka).
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--f-body);
    font-size: var(--fs-base);
    line-height: var(--lh-norm);
    color: var(--tx);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

/* Decentní zrnitá záře - jen jemně, žádný duhový gradient */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(50% 38% at 84% 0%, rgba(30, 215, 96, 0.07), transparent 60%),
        var(--bg);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }
strong, b { font-weight: 700; color: var(--tx); }

::selection { background: rgba(30, 215, 96, 0.3); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

/* Posuvníky všude ve stylu TOC návodu: tenké, tmavé, zakulacené, hover zelený.
   height pokrývá vodorovné posuvníky (admin tabulky, srovnání tarifů). */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--grn); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    color: var(--tx);
}

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
    background: var(--grn); color: var(--on-accent);
    padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad);
}
.container--narrow { max-width: var(--maxw-narrow); }

/* ---------- Section ---------- */
/* Každá sekce má zřetelný předěl nahoře (zelený hairline) + střídavý
   pruh, aby sekce graficky nesplývaly. */
.section { position: relative; padding-block: clamp(3.5rem, 9vw, 9rem); }

/* MOBILE: stáhnout horizontal padding tak, aby obsah seděl bez
   horizontálního scrollu i na 360 px wide telefonu. Default 1.5rem
   je na velmi malých displejích zbytečně velký a krájí čitelný
   obsah. Container má padding-inline: var(--pad) → mění se globálně. */
@media (max-width: 640px) {
    :root { --pad: 1rem; }
    .section { padding-block: clamp(2.75rem, 8vw, 4rem); }
}
@media (max-width: 420px) {
    :root { --pad: .85rem; }
}
.section::before,
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(30, 215, 96, 0.32), transparent);
    opacity: 0.75;
}
/* Střídavý „vyvýšený" pruh - výrazně světlejší než základ (#0a0b0c),
   aby byl na monitoru jasně odlišitelný. */
.section--deep {
    background: #111319;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.section--hair { /* předěl řeší .section::before */ }

/* Editorial section head: mono index + štítek vlevo, žádný „pill" */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--grn);
    margin-bottom: 1.1rem;
}
.kicker::before {
    content: attr(data-i);
    color: var(--tx-3);
    font-weight: 500;
}
.kicker__line { width: 30px; height: 1px; background: var(--grn-line); }

.shead { max-width: 760px; margin-bottom: clamp(2rem, 5.5vw, 4.5rem); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .kicker { justify-content: center; }
.shead__title { font-size: var(--fs-4xl); margin-bottom: 1rem; }
.shead__sub {
    font-size: var(--fs-lg);
    color: var(--tx-2);
    line-height: var(--lh-loose);
    max-width: 620px;
}
.shead--center .shead__sub { margin-inline: auto; }
/* Hero varianta: nadpis na jeden řádek, podnadpis přes celou šířku containeru */
.shead--hero { max-width: none; }
.shead--hero .shead__sub { max-width: none; }
@media (min-width: 992px) { .shead--hero .shead__title { white-space: nowrap; } }
@media (max-width: 640px) {
    .shead__title { font-size: clamp(1.55rem, 6vw, 2.2rem); }
    .shead__sub { font-size: .95rem; }
}

.accent { color: var(--grn); }
.u-mono { font-family: var(--f-mono); }

/* ---------- Reveal ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    transition-delay: var(--rd, 0ms);
    will-change: opacity, transform;
}
[data-reveal].vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

/* Zpětná kompat. - starší stránky (account.php) používají section-head* */
.section-head { max-width: 760px; margin: 0 auto clamp(2.5rem,5vw,3.75rem); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-title { font-size: var(--fs-4xl); margin-bottom: 1rem; }
/* Admin: odsadit nadpis od eyebrow chipu (zrcadlí "Ahoj, …" na účtu). */
.page-admin .section-head--left .section-title { margin-top: .85rem; }
.section-sub { font-size: var(--fs-lg); color: var(--tx-2); line-height: var(--lh-loose); }

/* =============================================================
   DJAnalyzer - Layout: navbar + footer
   ============================================================= */

.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-nav);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
}
.navbar--solid,
.navbar.is-scrolled {
    background: rgba(8, 9, 10, 0.78);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom-color: var(--line);
}
.navbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; width: 100%;
}
.navbar__brand {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--f-display);
    font-weight: 700; font-size: 1.28rem;
    letter-spacing: -.02em; color: var(--tx);
}
.navbar__wordmark span { color: var(--grn); }

/* Animované logo – „ekvalizér" (rozhýbe bary přes scaleY, barvy zůstávají) */
.navbar__logo svg { display: block; }
.navbar__bar { transform-box: fill-box; transform-origin: center bottom; animation: navbar-eq 1.15s ease-in-out infinite; }
.navbar__bar:nth-child(1) { animation-delay: 0s; }
.navbar__bar:nth-child(2) { animation-delay: .2s; }
.navbar__bar:nth-child(3) { animation-delay: .38s; }
.navbar__bar:nth-child(4) { animation-delay: .1s; }
@keyframes navbar-eq { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .navbar__bar { animation: none; } }

.navbar__menu { display: flex; align-items: center; gap: 2.25rem; }
.navbar__links { display: flex; align-items: center; gap: .2rem; }
.navbar__link {
    padding: .5rem .85rem;
    font-size: var(--fs-sm); font-weight: 500;
    color: var(--tx-2); border-radius: var(--r-sm);
    transition: color var(--t-fast), background var(--t-fast);
    /* Never let a label wrap to two lines, and never let flex shrink it: when
       the bar got tight (~1100-1200px) "Jak to funguje" used to wrap, and the
       flex item kept its wider allocation, leaving a dead gap to its right. */
    white-space: nowrap; flex-shrink: 0;
}
.navbar__link:hover { color: var(--tx); background: rgba(255,255,255,.05); }
.navbar__link--active { color: var(--grn); }
.navbar__actions { display: flex; align-items: center; gap: .6rem; }
.navbar__toggle { display: none; font-size: 1.65rem; color: var(--tx); padding: .25rem; line-height: 1; }

/* Tight desktop band: between the hamburger breakpoint and ~1200px the full
   nav only just fits, so trim the menu gap + link padding to keep it on ONE
   line (no wrap, no gap). Below the hamburger breakpoint the mobile block
   below overrides menu gap → 0 and link padding, so this is effectively the
   1101-1200px range. */
@media (max-width: 1200px) {
    .navbar__menu { gap: 1.25rem; }
    .navbar__link { padding-left: .6rem; padding-right: .6rem; }
}

/* Hamburger raised from 980 → 1100: this wide nav (wordmark + 5 links +
   language + Admin/account/launch buttons) overflows below ~1100px even when
   tightened, so the clean mobile menu takes over there instead of a crowded /
   wrapping bar. */
@media (max-width: 1100px) {
    .navbar__toggle { display: block; }
    .navbar__menu {
        position: fixed; inset: var(--nav-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 1rem var(--pad) 1.75rem;
        background: rgba(8,9,10,.97);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
        transform: translateY(-130%);
        transition: transform var(--t);
        max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    }
    .navbar__menu.is-open { transform: translateY(0); }
    .navbar__links { flex-direction: column; align-items: stretch; gap: .1rem; }
    .navbar__link { padding: .85rem 1rem; font-size: var(--fs-base); }
    .navbar__actions {
        flex-direction: column; align-items: stretch; gap: .55rem;
        margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
    }
    .navbar__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Footer ---------- */
.footer {
    padding-block: clamp(3.5rem, 6vw, 5rem) 2.25rem;
    background: var(--bg-deep);
    border-top: 1px solid var(--line);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.7fr repeat(3, 1fr);
    gap: 2.5rem;
    padding-bottom: 2.75rem;
    border-bottom: 1px solid var(--line);
}
.footer__brand .navbar__brand { margin-bottom: 1rem; }
.footer__tagline {
    color: var(--tx-3); font-size: var(--fs-sm);
    line-height: var(--lh-loose); max-width: 330px; margin-bottom: 1rem;
}
.footer__mail {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--fs-sm); color: var(--tx-2);
    transition: color var(--t-fast);
}
.footer__mail:hover { color: var(--grn); }
/* Footer column headings are <h2> (not <h4>) so the page heading outline never
   skips a level (h1 → … → h2; the old h4 skipped h3 — a11y "heading order").
   Styling here keeps them looking like the small mono labels they were. */
.footer__col h2 {
    font-family: var(--f-mono);
    font-size: var(--fs-xs); font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-label); text-transform: uppercase;
    color: var(--tx-3); margin: 0 0 1rem;
}
.footer__col a {
    display: block; font-size: var(--fs-sm); color: var(--tx-2);
    padding: .4rem 0; transition: color var(--t-fast), transform var(--t-fast);
}
.footer__col a:hover { color: var(--grn); transform: translateX(3px); }
.footer__bottom {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .75rem; padding-top: 1.6rem;
    font-size: var(--fs-xs); color: var(--tx-3);
}
.footer__legal { color: var(--tx-4); font-family: var(--f-mono); }

@media (max-width: 860px) {
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .footer__grid { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   DJAnalyzer - Components: tlačítka, karty, formuláře, data-labely
   ============================================================= */

/* ---------- Tlačítka ---------- */
.btn {
    --py: .85rem; --px: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    gap: .55rem;
    font-family: var(--f-body);
    font-size: var(--fs-sm); font-weight: 600;
    padding: var(--py) var(--px);
    border-radius: var(--r-full);
    border: 1px solid transparent;
    transition: transform var(--t-fast), background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--sm { --py:.58rem; --px:1.05rem; }
.btn--lg { --py:1.02rem; --px:2rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
    background: var(--grn); color: var(--on-accent); font-weight: 700;
}
.btn--primary:hover { background: var(--grn-bright); transform: translateY(-2px); }

.btn--ghost {
    background: rgba(255,255,255,.045); color: var(--tx);
    border-color: var(--line-strong);
}
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: var(--grn-line); transform: translateY(-2px); }
/* Aktivní stav ("jsi tady") - zvýrazní navbar tlačítko účtu/adminu na dané stránce. */
.btn--ghost.is-active { background: var(--grn-soft); border-color: var(--grn-line); color: var(--grn); }
.btn--ghost.is-active:hover { transform: none; }

.btn--outline { background: transparent; color: var(--grn); border-color: var(--grn-line); }
.btn--outline:hover { background: var(--grn-soft); transform: translateY(-2px); }

.btn--danger {
    background: rgba(255, 92, 92, .10); color: var(--danger, #ff6b6b);
    border-color: rgba(255, 92, 92, .38);
}
.btn--danger:hover {
    background: rgba(255, 92, 92, .18);
    border-color: var(--danger, #ff6b6b); transform: translateY(-2px);
}

/* ── Přepínač jazyka (CZ / EN) ─────────────────────────────────── */
.lang-switch {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    overflow: hidden; background: rgba(255, 255, 255, .045);
}
.lang-switch__opt {
    padding: .4rem .7rem; font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .04em; color: var(--tx-3);
    text-decoration: none; line-height: 1;
    transition: background var(--t), color var(--t);
}
.lang-switch__opt:hover { color: var(--tx); background: rgba(255, 255, 255, .08); }
.lang-switch__opt.is-active { background: var(--grn); color: var(--on-accent); }

.btn--violet { background: var(--grn); color: var(--on-accent); font-weight: 700; }
.btn--violet:hover { background: var(--grn-bright); transform: translateY(-2px); }

.btn:disabled { opacity: .5; pointer-events: none; }

/* ── Admin sekce (read-only přehledy) ──────────────────────────── */
.adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.adm-stat {
    background: var(--bg-surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 1.1rem 1.25rem;
    font-size: var(--fs-sm); color: var(--text-muted);
    display: flex; flex-direction: column; gap: .35rem;
}
.adm-stat span { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); line-height: 1; }
.adm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.adm-table th {
    text-align: left; padding: .6rem .75rem;
    font-family: var(--f-mono); font-size: var(--fs-xs);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}
.adm-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--border-soft); color: var(--text-secondary); }
.adm-table tbody tr:hover { background: var(--bg-surface); }
.adm-table code { font-family: var(--f-mono); color: var(--text-primary); }

/* Inline tier picker v sloupci Tarif — ruční grant Pro/Studio přímo z buňky
   (vypadá jako label, po najetí/kliknutí se chová jako select; žádný extra
   ovládací prvek v Akce → bez horizontálního scrollu). */
.adm-tier-select {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    padding: .25rem .35rem;
    font: inherit;
    cursor: pointer;
    max-width: 130px;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.adm-tier-select:hover,
.adm-tier-select:focus {
    border-color: var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
}
.adm-tier-select option { background: var(--panel-3); color: var(--text-primary); }

/* ---------- Data label / tag (motiv z appky) ---------- */
.dtag {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--f-mono); font-size: .7rem; font-weight: 700;
    letter-spacing: .03em;
    padding: .2rem .5rem; border-radius: var(--r-xs);
    background: var(--panel-3); color: var(--tx-2);
    border: 1px solid var(--line);
}
.dtag--key { color: var(--key); }
.dtag--grn { color: var(--grn); background: var(--grn-soft); border-color: var(--grn-line); }

.label {
    font-family: var(--f-mono);
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: var(--tr-label); text-transform: uppercase;
    color: var(--tx-3);
}

/* eyebrow / badge / chip - zpětná kompat. pro account/checkout */
.eyebrow, .badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--grn); padding: .35rem .7rem;
    background: var(--grn-soft); border: 1px solid var(--grn-line);
    border-radius: var(--r-full);
}
.badge--violet { color: var(--grn); }
.chip {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--fs-sm); color: var(--tx-2);
    padding: .5rem .9rem; background: var(--panel-2);
    border: 1px solid var(--line); border-radius: var(--r-full);
}
.chip i { color: var(--grn); }

/* ---------- Karta ---------- */
.card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    transition: transform var(--t), border-color var(--t), background var(--t);
}
.card--hover:hover { transform: translateY(-4px); border-color: var(--grn-line); background: var(--panel-2); }
.card--ring { border-color: var(--grn-line); box-shadow: var(--grn-glow); }
@media (max-width: 640px) {
    .card { padding: 1.2rem; border-radius: var(--r-md); }
}

/* ---------- Sbalovací (accordion) karta - jako Nastavení v appce ---------- */
.card--acc { padding: 0; overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.card--acc > .card__summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.6rem;
    transition: background var(--t);
}
.card--acc > .card__summary::-webkit-details-marker { display: none; }
.card--acc > .card__summary:hover { background: var(--panel-2); }
.card--acc > .card__summary:focus-visible { outline: 2px solid var(--grn); outline-offset: -2px; }
.card__summary-main {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem 1rem; flex-wrap: wrap;
}
.card__summary-main .eyebrow { margin: 0 !important; }
.card__chev {
    flex-shrink: 0; color: var(--text-muted); font-size: 1rem;
    transition: transform var(--t), color var(--t);
}
.card--acc[open] > .card__summary > .card__chev { transform: rotate(180deg); }
.card--acc > .card__summary:hover .card__chev,
.card--acc[open] > .card__summary > .card__chev { color: var(--grn); }
.card--acc[open] > .card__summary { border-bottom: 1px solid var(--border-soft); }
.card--acc > .card__body { padding: 1.3rem 1.6rem 1.6rem; }
.card--acc[open] > .card__body { animation: accFade .18s ease; }
@keyframes accFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .card--acc > .card__summary { padding: 1rem 1.2rem; }
    .card--acc > .card__body { padding: 1.1rem 1.2rem 1.2rem; }
}

/* ---------- Historie aktivit ---------- */
.act-cat { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.act-cat i { font-size: .95rem; }
.act-empty { text-align: center; color: var(--text-muted); padding: 1.75rem; }

/* Dlaždice zálohovaných předvoleb v účtu - na desktopu všechny na jeden řádek. */
.pref-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; }
@media (max-width: 900px) { .pref-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pref-tiles { grid-template-columns: 1fr; } }

/* ---------- Stat tile (jako stat bar v appce) ---------- */
.stat {
    padding: 1.1rem 1.25rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.stat__k {
    font-family: var(--f-mono); font-size: .68rem; font-weight: 700;
    letter-spacing: var(--tr-label); text-transform: uppercase;
    color: var(--tx-3);
}
.stat__v {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1; margin-top: .3rem;
}
.stat__v small { font-size: .55em; color: var(--tx-3); font-weight: 500; }
.stat__d { font-size: var(--fs-xs); color: var(--tx-3); margin-top: .2rem; }
.stat--accent .stat__v { color: var(--grn); }

/* ---------- Formuláře (auth/checkout) ---------- */
.field { margin-bottom: 1.1rem; }
.field__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--tx-2); margin-bottom: .5rem; }
.field__input {
    width: 100%; padding: .9rem 1.05rem;
    background: var(--panel-2); border: 1px solid var(--line-strong);
    border-radius: var(--r-md); color: var(--tx);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field__input::placeholder { color: var(--tx-4); }
.field__input:focus { outline: none; border-color: var(--grn); background: var(--panel-3); box-shadow: var(--ring); }
.field__hint { margin-top: .45rem; font-size: var(--fs-xs); color: var(--tx-3); }

.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--nav-h) + 2.5rem) var(--pad) 3rem; }
.auth-card {
    width: 100%; max-width: 440px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 2.6rem);
    box-shadow: var(--sh-lg);
}
.auth-card__title { font-size: var(--fs-3xl); margin-bottom: .5rem; }
.auth-card__sub { color: var(--tx-2); font-size: var(--fs-sm); margin-bottom: 1.6rem; }
.auth-card__alt { margin-top: 1.4rem; text-align: center; font-size: var(--fs-sm); color: var(--tx-3); }
.auth-card__alt a { color: var(--grn); font-weight: 600; }

.codebox {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.2rem; background: var(--bg-deep);
    border: 1px dashed var(--grn-line); border-radius: var(--r-md);
    font-family: var(--f-mono); font-size: var(--fs-lg);
    letter-spacing: .05em; color: var(--grn); word-break: break-all;
}
.codebox button { color: var(--tx-2); transition: color var(--t-fast); }
.codebox button:hover { color: var(--grn); }

/* ---------- Toast ---------- */
.toast-stack {
    position: fixed; top: calc(var(--nav-h) + 1rem); right: 1.25rem;
    z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: .6rem;
    max-width: min(92vw, 400px);
}
.toast {
    display: flex; align-items: center; gap: .7rem;
    padding: .9rem 1.05rem;
    background: rgba(12,13,15,.97); backdrop-filter: blur(14px);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    box-shadow: var(--sh-lg); font-size: var(--fs-sm);
    animation: toast-in var(--t-slow);
}
.toast i { font-size: 1.15rem; }
.toast--success i { color: var(--grn); }
.toast--error i { color: var(--bad); }
.toast--warning i { color: var(--warn); }
.toast--info i { color: var(--info); }
.toast__x { margin-left: auto; color: var(--tx-3); font-size: 1.2rem; line-height: 1; }
.toast__x:hover { color: var(--tx); }
@keyframes toast-in { from { opacity:0; transform: translateX(40px); } to { opacity:1; transform:none; } }

/* ---------- Billing toggle ---------- */
.bill-toggle {
    display: inline-flex; align-items: center; gap: .9rem;
    margin-top: 1.5rem;
    font-size: var(--fs-sm); font-weight: 600; color: var(--tx-2);
}
.bill-toggle__switch {
    position: relative; width: 56px; height: 30px;
    border-radius: var(--r-full); background: var(--panel-3);
    border: 1px solid var(--line-strong); transition: background var(--t);
}
.bill-toggle__switch::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--grn); transition: transform var(--t-slow);
}
.bill-toggle[data-period="year"] .bill-toggle__switch::after { transform: translateX(26px); }
.bill-toggle[data-period="month"] .bill-toggle__opt--m,
.bill-toggle[data-period="year"]  .bill-toggle__opt--y { color: var(--tx); }
.bill-toggle__save {
    font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--grn);
    background: var(--grn-soft); border: 1px solid var(--grn-line);
    padding: .2rem .55rem; border-radius: var(--r-full);
}

/* =============================================================
   DJAnalyzer - Věrná reprodukce REÁLNÉHO UI aplikace
   1:1 podle aktuální verze open.djanalyzer.com: player bar
   (transport, metriky, LUFS+gain, hvězdy, hlasitost), sbalený
   ikonový rail s CZ/EN, strom playlistů s počty, dvouřádkový
   toolbar, tabulka s drag handle + sort šipkami, stat bar,
   pravý panel Fronta (Právě hraje / Další).
   Žádné generické mockupy - tohle JE prostředí appky.
   ============================================================= */

.app {
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    font-size: 13px;
    color: var(--tx);
    line-height: 1.45;
}

/* ---- Top transport / data bar ---- */
.app__player {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem .8rem;
    background: var(--rail);
    border-bottom: 1px solid var(--line);
}
.app__pbtns { display: flex; align-items: center; gap: .5rem; color: var(--tx-2); }
.app__pbtns i { font-size: .95rem; }
/* kulatá ghost tlačítka (režim přehrávání, fronta) - jako v appce */
.app__pbtn {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: var(--panel-2); border: 1px solid var(--line);
    display: grid; place-items: center;
}
.app__pbtn i { font-size: .78rem; }
.app__pbtn.on i { color: var(--grn); }
.app__play {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: var(--grn); color: var(--on-accent);
    display: grid; place-items: center; font-size: .95rem;
    box-shadow: 0 0 14px rgba(30,215,96,.45);
}
.app__np { min-width: 0; flex: 1; }
.app__np-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__np-t i { color: var(--grn); margin-right: .35rem; }
.app__np-t .ar { color: var(--tx-2); }
.app__np-t .sep { color: var(--tx-3); margin: 0 .3rem; }
/* čas | progress | zbývající čas v jednom řádku (jako v appce) */
.app__np-row {
    display: flex; align-items: center; gap: .45rem; margin-top: .3rem;
    font-family: var(--f-mono); font-size: .62rem; color: var(--tx-3);
}
.app__np-row .app__prog { flex: 1; margin-top: 0; }
.app__prog { height: 4px; border-radius: 2px; background: var(--panel-3); margin-top: .35rem; overflow: hidden; }
.app__prog::after { content: ""; display: block; width: 32%; height: 100%; background: var(--grn); }
.app__times { display: flex; justify-content: space-between; font-family: var(--f-mono); color: var(--tx-3); font-size: .65rem; margin-top: .15rem; }
.app__data { display: flex; align-items: center; gap: .9rem; }
.app__d { text-align: center; }
.app__d .label {
    font-size: .54rem; display: block; text-transform: uppercase;
    letter-spacing: .06em; color: var(--tx-3);
}
.app__d b { font-family: var(--f-mono); font-size: .8rem; }
.app__d .k { color: var(--key); }
.app__d .st { color: var(--grn); letter-spacing: -1px; }
.app__stars { letter-spacing: 1px; color: var(--tx-3); }
.app__stars em { font-style: normal; color: #FFB800; }
.app__gain { display: block; font-family: var(--f-mono); font-size: .5rem; color: var(--grn); }
.app__volw {
    display: flex; align-items: center; gap: .45rem; color: var(--tx-2);
    border-left: 1px solid var(--line); padding-left: .7rem;
}
.app__volw i { font-size: .9rem; }
.app__vol { width: 70px; height: 4px; border-radius: 2px; background: var(--panel-3); position: relative; }
.app__vol::after { content:""; position:absolute; inset:0 30% 0 0; background: var(--grn); border-radius: 2px; }
.app__vol::before {
    content:""; position:absolute; left:70%; top:50%; width:10px; height:10px;
    transform: translate(-50%,-50%); border-radius:50%; background: var(--grn);
    box-shadow: 0 0 6px rgba(30,215,96,.6); z-index: 1;
}
.app__px { color: var(--tx-3); font-size: .8rem; }

@media (max-width: 720px) {
    .app__data .app__d:nth-child(n+4) { display: none; }
    .app__vol, .app__volw, .app__px { display: none; }
}
/* Velmi úzké displeje (telefon < 480 px): jeden řádek se transportem
 * + datovými chipy + skladbou + progresem se prostě nevejde do
 * 360px. Roztáhneme to do MŘÍŽKY 2-rows: tlačítka a chipy nahoře,
 * název + progres celou šířkou pod tím. Bez tohoto jde celý
 * player horizontálně mimo viewport. */
@media (max-width: 480px) {
    .app__player {
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        grid-template-rows: auto auto;
        gap: .5rem .55rem;
        padding: .55rem .65rem;
    }
    .app__player > .app__pbtns:first-child { grid-row: 1; grid-column: 1; }
    .app__player > .app__play { grid-row: 1; grid-column: 2; }
    .app__player > .app__pbtns:nth-of-type(2) { grid-row: 1; grid-column: 3; }
    .app__player > .app__data { grid-row: 1; grid-column: 4; justify-self: end; gap: .55rem; }
    .app__player > .app__np {
        grid-row: 2; grid-column: 1 / -1;
        border-top: 1px solid var(--line);
        padding-top: .45rem;
    }
    .app__d b { font-size: .72rem; }
    .app__d .label { font-size: .52rem; }
}

/* ---- Body grid ---- */
.app__body {
    display: grid;
    grid-template-columns: 38px 200px 1fr 236px;
    min-height: 280px;
}
.app__rail {
    background: var(--rail);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center;
    gap: .85rem; padding: .7rem 0 .8rem;
    color: var(--tx-3); font-size: 1rem;
}
.app__rail i:hover { color: var(--grn); }
.app__rail-tgl {
    width: 22px; height: 22px; border: 1px solid var(--line);
    border-radius: var(--r-xs); display: grid; place-items: center;
    color: var(--tx-3); font-size: .7rem; margin-bottom: .1rem;
}
.app__rail > i.on {
    color: var(--grn); background: var(--grn-soft);
    border: 1px solid var(--grn-line); border-radius: var(--r-xs);
    padding: .26rem; font-size: .85rem;
}
.app__rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.app__lang {
    font-family: var(--f-mono); font-size: .55rem; font-weight: 700;
    padding: .16rem .4rem; border-radius: var(--r-xs);
    background: var(--panel-2); border: 1px solid var(--line); color: var(--tx-3);
}
.app__lang.on { background: var(--grn); border-color: var(--grn); color: var(--on-accent); }

/* Playlist sidebar (strom) */
.app__pl { background: var(--bg); border-right: 1px solid var(--line); overflow: hidden; }
.app__pl-h {
    padding: .65rem .8rem; font-family: var(--f-mono);
    font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tx-3); border-bottom: 1px solid var(--line);
}
.plrow {
    display: flex; align-items: center; gap: .4rem;
    padding: .4rem .65rem; color: var(--tx-2); cursor: default;
}
.plrow__car { width: 10px; flex: none; font-size: .55rem; color: var(--tx-4); }
.plrow i { font-size: .8rem; color: var(--tx-3); width: 12px; flex: none; }
.plrow i.plrow__car { width: 10px; }
.plrow span:not(.plrow__car) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plrow b { font-family: var(--f-mono); font-size: .66rem; font-weight: 400; color: var(--tx-3); }
.plrow--fold i { color: var(--tx-3); }
.plrow--on { background: var(--grn-soft); color: var(--tx); }
.plrow--on i, .plrow--on b { color: var(--grn); }

/* Main: toolbar (2 řádky jako v appce) + track table */
.app__main { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.app__tb {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .75rem; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.app__tb--t { border-bottom: 0; padding-bottom: .2rem; }
.app__tb-title { font-weight: 700; font-size: .95rem; }
.app__tb-title i { color: var(--tx-3); font-size: .75rem; margin-left: .35rem; }
/* modrá (teal) pilulka s počtem řádků - jako .pill blue v appce */
.app__pill {
    font-family: var(--f-mono); font-size: .62rem; color: #5cd0d6;
    background: rgba(92,208,214,.12); border: 1px solid rgba(92,208,214,.3);
    padding: .12rem .4rem; border-radius: var(--r-xs);
}
.app__inp { flex: 1; min-width: 90px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .35rem .6rem; color: var(--tx-3); font-size: .7rem; }
.app__b { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; padding: .34rem .55rem; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); color: var(--tx-2); }
.app__b i { font-size: .75rem; }
.app__b--grn { background: var(--grn-soft); border-color: var(--grn-line); color: var(--grn); }
.app__b--dgr { background: #2a1418; border-color: #4a1f25; color: #ff8a8a; }
.app__b--ico { padding: .34rem .45rem; }
/* select presetů řazení (Klíč → BPM) s caretem */
.app__sel {
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: .5rem; min-width: 118px; font-size: .68rem; padding: .34rem .55rem;
    border-radius: var(--r-sm); background: var(--panel-2);
    border: 1px solid var(--line); color: var(--tx-2);
}
.app__sel i { font-size: .6rem; color: var(--tx-3); }
.app__pro { font-style: normal; font-size: .54rem; font-weight: 800; letter-spacing: .04em; padding: .04rem .26rem; border-radius: var(--r-xs); background: var(--grn-soft); color: var(--grn); border: 1px solid var(--grn-line); }

/* Tabulka: grip | play | # | Interpret | Název | Album | Žánr | Délka | BPM | Tónina */
.trk { width: 100%; overflow: hidden; }
.trk__h, .trk__r {
    display: grid;
    grid-template-columns: 14px 20px 26px 1.1fr 1.3fr .85fr .75fr 50px 42px 46px;
    gap: .5rem; align-items: center;
    padding: .42rem .75rem;
}
.trk__h {
    font-family: var(--f-mono); font-size: .58rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--tx-3);
    border-bottom: 1px solid var(--line);
}
.trk__h span { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.trk__h .r { justify-content: flex-end; }
.trk__h .c { justify-content: center; }
.trk__h i { font-size: .55rem; color: var(--tx-4); }
.trk__h .on, .trk__h .on i { color: var(--grn); }
.trk__r { border-bottom: 1px solid var(--line-2); color: var(--tx-2); }
.trk__r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk__r .grip { color: var(--tx-4); font-size: .7rem; opacity: .6; }
.trk__r .pl { color: var(--tx-3); font-size: .7rem; opacity: .5; }
.trk__r .pl i.on, .trk__r--on .pl i { color: var(--grn); opacity: 1; }
.trk__r--on .pl { opacity: 1; }
.trk__r .num { font-family: var(--f-mono); color: var(--tx-3); }
.trk__r .r { text-align: right; }
.trk__r .ti { color: var(--tx); }
.trk__r .bpm { font-family: var(--f-mono); text-align: right; }
.trk__r .k { font-family: var(--f-mono); color: var(--key); text-align: center; font-weight: 600; }
/* hrající řádek: zelená tinta + 3px akcentní pruh vlevo (jako v appce) */
.trk__r--on { background: var(--grn-soft); box-shadow: inset 3px 0 0 var(--grn); }

/* Stat bar pod tabulkou (labely uppercase, DOBA zeleně) */
.app__strip {
    margin-top: auto;
    display: flex; flex-wrap: wrap; gap: .25rem 1rem;
    padding: .55rem .75rem; border-top: 1px solid var(--line);
    font-family: var(--f-mono); font-size: .6rem; color: var(--tx-3);
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--rail);
}
.app__strip b { color: var(--tx); font-weight: 600; }
.app__strip b.grn { color: var(--grn); }

/* Pravý panel přehrávače: Fronta (Právě hraje / Další) + Doporučeno */
.app__rec { background: var(--rail); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.app__rec-h { display: flex; align-items: center; justify-content: space-between; padding: .7rem .8rem; }
.app__rec-h b { font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }
.app__rec-h b i { color: var(--tx-2); }
.app__rec-x { color: var(--tx-3); font-size: .8rem; }
/* taby Fronta / Doporučeno - dvě rovnocenná tlačítka jako v appce */
.app__rec-tabs { display: flex; align-items: stretch; gap: .4rem; padding: .1rem .8rem .6rem; border-bottom: 1px solid var(--line); }
.app__rec-tab {
    flex: 1; justify-content: center;
    font-size: .72rem; color: var(--tx-3);
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .32rem .5rem; border-radius: var(--r-sm);
    border: 1px solid transparent;
}
.app__rec-tab em {
    font-style: normal; font-family: var(--f-mono); font-size: .58rem;
    color: #5cd0d6; background: rgba(92,208,214,.12);
    border: 1px solid rgba(92,208,214,.3);
    padding: .02rem .28rem; border-radius: var(--r-xs);
}
.app__rec-tab--on {
    color: var(--grn); font-weight: 700;
    background: var(--grn-soft); border-color: var(--grn-line);
}
.app__rec-tab--on i { font-size: .72rem; }
.app__rec-by {
    padding: .55rem .8rem .45rem; font-family: var(--f-mono);
    font-size: .56rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--tx-3);
}
/* karta Právě hraje */
.app__now {
    display: grid; grid-template-columns: 18px 1fr auto;
    gap: .55rem; align-items: center;
    margin: 0 .8rem .25rem; padding: .5rem .6rem;
    background: var(--grn-soft); border: 1px solid var(--grn-line);
    border-radius: var(--r-sm);
}
.app__now > i { color: var(--grn); font-size: .85rem; }
.app__now-t { min-width: 0; }
.app__now-t b { display: block; font-size: .76rem; font-weight: 700; color: var(--grn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__now-t span { display: block; font-size: .66rem; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__now-m { text-align: right; line-height: 1.25; }
.app__now-m .k { display: block; font-family: var(--f-mono); font-size: .66rem; font-weight: 700; }
.app__now-m .d { display: block; font-family: var(--f-mono); font-size: .6rem; color: var(--tx-3); }
/* položka fronty (Další): grip | play | track | tónina+čas | červené X */
.qrow {
    display: grid; grid-template-columns: 12px 22px 1fr auto 20px;
    gap: .45rem; align-items: center;
    padding: .4rem .8rem; border-bottom: 1px solid var(--line-2);
}
.qrow:hover { background: rgba(255,255,255,.025); }
.qrow__g { color: var(--tx-4); font-size: .65rem; }
.qrow__p {
    width: 22px; height: 22px; border: 1px solid var(--line);
    border-radius: var(--r-xs); display: grid; place-items: center;
    color: var(--tx-2); font-size: .65rem; background: var(--panel-2);
}
.qrow__t { min-width: 0; }
.qrow__t b { display: block; font-size: .74rem; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow__t span { display: flex; align-items: center; gap: .25rem; font-size: .62rem; color: var(--tx-3); white-space: nowrap; overflow: hidden; }
.qrow__t span i { color: #FFB800; font-size: .5rem; flex: none; }
.qrow__m { text-align: right; line-height: 1.25; }
.qrow__m .k { display: block; font-family: var(--f-mono); font-size: .64rem; font-weight: 700; }
.qrow__m .d { display: block; font-family: var(--f-mono); font-size: .58rem; color: var(--tx-3); }
.qrow__x {
    width: 20px; height: 20px; border-radius: var(--r-xs);
    display: grid; place-items: center; font-size: .7rem;
    color: var(--bad); background: var(--bad-bg);
    border: 1px solid rgba(255,107,94,.32);
}

/* Doporučeno (řádky s + používá mini-mock v sekci Job 1) */
.recrow {
    display: grid; grid-template-columns: 18px 1fr auto 16px;
    gap: .55rem; align-items: center;
    padding: .42rem .8rem; border-bottom: 1px solid var(--line-2);
}
.recrow:hover { background: rgba(255,255,255,.025); }
.recrow__p { color: var(--tx-3); font-size: .8rem; }
.recrow__t { min-width: 0; }
.recrow__t b { display: block; font-size: .76rem; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recrow__t span { display: block; font-size: .64rem; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recrow__m { text-align: right; line-height: 1.25; }
.recrow__m .k { display: block; font-family: var(--f-mono); font-size: .66rem; font-weight: 700; color: var(--grn); }
.recrow__m .d { display: block; font-family: var(--f-mono); font-size: .6rem; color: var(--tx-3); }
.recrow__add { color: var(--tx-4); font-size: .85rem; justify-self: end; }
.recrow:hover .recrow__add { color: var(--grn); }

@media (max-width: 1080px) {
    .app__body { grid-template-columns: 38px 180px 1fr; }
    .app__rec { display: none; }
}
@media (max-width: 720px) {
    .app__body { grid-template-columns: 1fr; }
    .app__rail, .app__pl { display: none; }
    .trk__h, .trk__r { grid-template-columns: 26px 1.2fr 1fr 44px 40px 44px; }
    .trk__h span:nth-child(1), .trk__r span:nth-child(1),
    .trk__h span:nth-child(2), .trk__r span:nth-child(2),
    .trk__h span:nth-child(6), .trk__r span:nth-child(6),
    .trk__h span:nth-child(7), .trk__r span:nth-child(7) { display: none; }
}

/* ---- Dashboard: „CO APLIKACE UMÍ (A ENGINE DJ NE)" mini-replika ---- */
.appcards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
}
.appcard {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: .9rem .95rem;
    display: flex; flex-direction: column; gap: .45rem;
}
.appcard__h { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .82rem; }
.appcard__h i { color: var(--grn); font-size: .95rem; }
.appcard__d { font-size: .68rem; color: var(--tx-3); line-height: 1.5; flex: 1; }
.appcard__btn {
    font-size: .66rem; font-weight: 700; text-align: center;
    padding: .4rem; border-radius: var(--r-xs);
    background: var(--grn-soft); color: var(--grn); border: 1px solid var(--grn-line);
}
@media (max-width: 820px) { .appcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .appcards { grid-template-columns: 1fr; } }

/* Žádné horizontální posuvníky - reprodukce appky teče responzivně
   (sloupce se skrývají přes @media výše). */
.app-scroll { overflow: visible; }
.app-scroll .app { min-width: 0; }

/* =============================================================
   DJAnalyzer - Sekce (editorial, ne generický template)
   ============================================================= */

/* ================= HERO ================= */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4.75rem)); padding-bottom: clamp(3rem, 7vw, 6.5rem); overflow: visible; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-glow); pointer-events: none; }
@media (max-width: 640px) {
    .hero__title { font-size: clamp(1.85rem, 8vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
    .hero__sub { font-size: .94rem; }
    .hero__ctas .btn { width: 100%; justify-content: center; }
    .hero__trust { gap: .5rem 1rem; font-size: .8rem; }
}

/* Textový blok nahoře, vystředěný (bez max-width - plná šířka) */
.hero__top { position: relative; margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem); text-align: center; }
.hero__title { font-size: var(--fs-hero); line-height: 1.06; letter-spacing: -.03em; margin-bottom: 1.7rem; }
.hero__title .accent { color: var(--grn); }
.hero__sub { font-size: clamp(.95rem, 1.1vw, 1.06rem); color: var(--tx-2); line-height: var(--lh-loose); margin: 0 0 1.6rem; }
.hero__sub b { color: var(--tx); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-bottom: 1.25rem; }
.hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.5rem; color: var(--tx-3); font-size: var(--fs-sm); }
.hero__trust span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__trust i { color: var(--grn); }
.hero__trust--under { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Velký screen appky (~1200 px / plná šířka kontejneru) */
.hero__visual { position: relative; }

/* ================= PROOF BAR (reálná čísla appky) ================= */
.proofbar { border-block: 1px solid var(--line); background: var(--bg-deep); }
.proofbar__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.proofbar__grid--4 { grid-template-columns: repeat(4, 1fr); }
.proofbar__c { padding: 1.4rem 1rem; text-align: center; border-right: 1px solid var(--line); }
.proofbar__c:last-child { border-right: 0; }
.proofbar__c--feat { display: flex; align-items: center; gap: .8rem; text-align: left; padding: 1rem 1.2rem; }
.proofbar__c--feat i { font-size: 1.35rem; color: var(--grn); flex-shrink: 0; }
.proofbar__t { font-weight: 700; font-size: var(--fs-base); }
.proofbar__v { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.proofbar__v .accent { color: var(--grn); }
.proofbar__k { font-family: var(--f-mono); font-size: .62rem; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--tx-3); margin-top: .35rem; }
.proofbar__c--feat .proofbar__k { margin-top: .2rem; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: var(--fs-xs); }
@media (max-width: 860px) {
    .proofbar__grid, .proofbar__grid--4 { grid-template-columns: repeat(2, 1fr); }
    .proofbar__c:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
    .proofbar__grid, .proofbar__grid--4 { grid-template-columns: 1fr; }
    .proofbar__c { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Velký čitelný showcase appky (jako přiložený screenshot) */
/* Bez rámečku - screen vystupuje z pozadí stínem + zelenkavým
   nasvícením. Glow je na .appshow (NE na .app): .appshow má kvůli
   scrollu overflow-x:auto, který by stín vnitřního .app ořízl -
   vlastní box-shadow kontejneru se ale neořezává. */
.appshow {
    position: relative;
    margin-top: clamp(.75rem, 1.5vw, 1.5rem);
    border-radius: var(--r-lg);
    box-shadow:
        0 30px 80px -24px rgba(0,0,0,.9),
        0 0 90px -6px rgba(30,215,96,.32);
}
.appshow .app {
    font-size: 13.5px;
    border: 1px solid var(--line-strong);
}
/* Bez výškového stropu - reprodukce se vykreslí celá (nic se neořezává). */
.appshow .app__body { min-height: auto; }
@media (min-width: 1100px) { .appshow .app { font-size: 14px; } }
/* MOBIL: complex app reproduction nedává smysl vtěsnat do 360 px wide
   - layout má fixed sidebar, dual-pane, sticky transport. Místo
   chrome-flopu rovnou skryjeme náhled aplikace na malých displejích.
   Uživatel na mobilu už appku reálně viděl (přišel přes funkce/
   pricing) - hero copy + CTA stačí. */
@media (max-width: 720px) {
    .appshow { display: none; }
}

/* Generická ikona v KPI dlaždici (job „Úklid knihovny") */
.kpi__ic { font-size: 1.5rem; color: var(--grn); display: block; margin-bottom: .55rem; }

/* ================= PROBLEM ================= */
.problem__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.pain {
    display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
    padding: 1.6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.pain__n { font-family: var(--f-mono); font-size: 1.6rem; font-weight: 700; color: var(--bad); line-height: 1; }
.pain__t { font-size: var(--fs-lg); font-weight: 700; font-family: var(--f-display); margin-bottom: .4rem; }
.pain__d { color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.pain__d b { color: var(--tx); }
@media (max-width: 760px) { .problem__grid { grid-template-columns: 1fr; } }

/* ================= VS (doplněk, ne náhrada) ================= */
.vs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; }
.vscol { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.9rem; }
.vscol--app { border-color: var(--grn-line); box-shadow: var(--grn-glow); background: linear-gradient(180deg, var(--grn-soft), transparent 40%), var(--panel); }
.vscol__h { display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xl); margin-bottom: .4rem; }
.vscol__sub { color: var(--tx-3); font-size: var(--fs-sm); margin-bottom: 1.4rem; }
.vscol--app .vscol__h { color: var(--grn); }
.vslist { display: grid; gap: .85rem; }
.vslist li { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; font-size: var(--fs-sm); color: var(--tx-2); line-height: var(--lh-snug); }
.vslist li i { margin-top: .15rem; }
.vscol--engine .vslist i { color: var(--tx-4); }
.vscol--app .vslist i { color: var(--grn); }
.vscol--app .vslist b { color: var(--tx); }
.vs__mid { text-align: center; margin-top: 1.5rem; color: var(--tx-3); font-size: var(--fs-sm); }
.vs__mid b { color: var(--grn); }
@media (max-width: 820px) { .vs__grid { grid-template-columns: 1fr; } }

/* ================= JOBS (funkce = benefit + reálné UI) ================= */
.job { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.job + .job { margin-top: clamp(3.5rem, 7vw, 6rem); }
.job--flip .job__media { order: -1; }
.job__tag { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--grn); margin-bottom: .8rem; }
.job__title { font-size: var(--fs-3xl); margin-bottom: .9rem; }
.job__lead { color: var(--tx-2); font-size: var(--fs-base); line-height: var(--lh-loose); margin-bottom: 1.3rem; }
.job__list { display: grid; gap: .7rem; margin-bottom: 1.5rem; }
.job__list li { display: grid; grid-template-columns: 18px 1fr; gap: .65rem; font-size: var(--fs-sm); color: var(--tx-2); }
.job__list i { color: var(--grn); margin-top: .15rem; }
.job__save {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: var(--fs-sm); font-weight: 600; color: var(--tx);
    padding: .65rem 1rem; background: var(--grn-soft);
    border: 1px solid var(--grn-line); border-radius: var(--r-md);
}
.job__save i { color: var(--grn); font-size: 1.1rem; }
.job__save b { color: var(--grn); font-family: var(--f-mono); }
@media (max-width: 880px) {
    .job { grid-template-columns: 1fr; }
    .job--flip .job__media { order: 0; }
}

/* ================= MONEY (čas = peníze) ================= */
.money__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,4vw,3rem); align-items: start; }
.calc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.calc__r { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: .5rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-2); font-size: var(--fs-sm); align-items: center; }
.calc__r--h { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); background: var(--bg-deep); }
.calc__r span:nth-child(n+2) { text-align: right; font-family: var(--f-mono); }
.calc__r .was { color: var(--tx-3); text-decoration: line-through; }
.calc__r .now { color: var(--tx); }
.calc__r .sv { color: var(--grn); font-weight: 700; }
.calc__r--sum { font-weight: 700; background: var(--grn-soft); border-bottom: 0; }
.calc__r--sum span { color: var(--grn); }
.money__aside { position: sticky; top: calc(var(--nav-h) + 1rem); }
.money__big { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem,4vw,3rem); line-height: 1.1; margin-bottom: .8rem; }
.money__big .accent { color: var(--grn); }
.money__p { color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-loose); margin-bottom: 1.25rem; }
.money__note { font-size: var(--fs-xs); color: var(--tx-3); margin-top: 1rem; }
@media (max-width: 880px) { .money__grid { grid-template-columns: 1fr; } .money__aside { position: static; } }
@media (max-width: 480px) {
    .calc__r { padding: .65rem .7rem; font-size: .78rem; gap: .35rem; }
    .calc__r--h { font-size: .55rem; }
}

/* ================= KPI (STAV KNIHOVNY) ================= */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.kpi { background: var(--panel); padding: 1.4rem 1.3rem; }
.kpi__v { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem,2.6vw,2.05rem); }
.kpi--hot .kpi__v { color: var(--grn); }
.kpi__k { font-family: var(--f-mono); font-size: .6rem; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--tx-3); margin-top: .35rem; }
.kpi__d { font-size: var(--fs-xs); color: var(--tx-3); margin-top: .25rem; }
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

/* ================= PRICING ================= */
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 2.1rem 1.8rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); transition: transform var(--t), border-color var(--t); }
.price-card--featured { border-color: var(--grn-line); box-shadow: var(--grn-glow); }
.price-card:hover { transform: translateY(-5px); border-color: var(--grn-line); }
.price-card__ribbon { position: absolute; top: -12px; left: 1.8rem; font-family: var(--f-mono); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .8rem; border-radius: var(--r-full); background: var(--grn); color: var(--on-accent); }
.price-card__name { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 700; margin-bottom: .3rem; }
.price-card__name span { color: var(--grn); }
.price-card__tagline { color: var(--tx-3); font-size: var(--fs-sm); line-height: var(--lh-snug); min-height: 2.6em; margin-bottom: 1.3rem; }
.price-card__price { display: flex; align-items: baseline; gap: .35rem; font-family: var(--f-display); margin-bottom: .2rem; }
.price-card__amount { font-size: 2.7rem; font-weight: 700; letter-spacing: -.03em; }
.price-card__per { font-size: var(--fs-sm); color: var(--tx-3); }
.price-card__alt { font-size: var(--fs-xs); color: var(--tx-4); min-height: 1.2em; margin-bottom: 1.4rem; font-family: var(--f-mono); }
.price-card__cta { margin-bottom: 1.4rem; }
.price-card__features { display: grid; gap: .65rem; }
.price-card__features li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); color: var(--tx-2); line-height: var(--lh-snug); }
.price-card__features i { color: var(--grn); margin-top: .12rem; font-size: .9rem; }
.price-amt[data-period-hide] { display: none; }
.pricing__note { text-align: center; margin-top: 1.75rem; font-size: var(--fs-sm); color: var(--tx-3); }
.pricing__note i { color: var(--grn); }

.addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.addon { padding: 1.2rem 1.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.addon__top { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.addon__name { font-weight: 700; font-size: var(--fs-base); }
.addon__price { font-family: var(--f-mono); color: var(--grn); font-weight: 700; white-space: nowrap; font-size: var(--fs-sm); }
.addon__desc { font-size: var(--fs-xs); color: var(--tx-3); line-height: var(--lh-snug); margin-top: .35rem; }
@media (max-width: 940px) {
    .pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .addons { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .price-card { padding: 1.6rem 1.3rem; }
    .price-card__amount { font-size: 2.2rem; }
}

/* Srovnávací tabulka - laděná do zbytku webu (panel, zelený akcent,
 * zvýrazněný „Pro" sloupec, zebra řádky, jemné dělící linky).
 *
 * MOBIL: tabulka má 3 sloupce + popisek = 4 columny, na malých
 * displejích to nelze čitelně zobrazit bez horizontal scrollu.
 * Ponecháme overflow-x:auto a snížíme padding buněk + first-column
 * width tak, aby se to při scrollu dalo používat. min-width: 640
 * je tady záměr - bez něj by se buňky stlačily na ~50 px / sloupec
 * a uživatel nepřečte nic. */
.compare {
    margin-top: 3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--panel);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 18px 40px -28px rgba(0, 0, 0, .8);
}
.compare table { width: 100%; border-collapse: collapse; min-width: 500px; }
@media (max-width: 640px) {
    .compare th,
    .compare td { padding: .7rem .55rem; font-size: .8rem; }
    /* PRVNÍ SLOUPEC STICKY: na mobilu uživatel horizontálně scrolluje
     * mezi Free/Pro/Studio sloupci - pokud první sloupec (název funkce)
     * scrolluje s nimi, zmizí ze zorného pole a uživatel netuší, kterou
     * funkci porovnává. position:sticky na td/th first-child to drží
     * vlevo. Background musí být neprůhledný, jinak by skrz něj
     * prosvítaly scrollované sloupce. */
    .compare th:first-child,
    .compare td:first-child {
        width: 45%;
        padding-left: .8rem;
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--panel);
        box-shadow: 1px 0 0 var(--line);
    }
    .compare thead th:first-child { background: var(--bg-deep); }
    /* Zebra řádek pod sticky sloupcem musí mít stejné pozadí jako
     * řádek pod ním - jinak by sticky sloupec na zebra řádcích
     * vypadal jinak než jeho data buňky. */
    .compare tbody tr:nth-child(odd) td:first-child { background: color-mix(in srgb, var(--panel), white 1.5%); }
    .compare thead .compare__f::before { font-size: .5rem; padding: .15rem .4rem; }
}
@media (max-width: 480px) {
    .compare table { min-width: 440px; }
    .compare th,
    .compare td { padding: .55rem .45rem; font-size: .72rem; }
    .compare th:first-child,
    .compare td:first-child { width: 48%; }
}
.compare th,
.compare td {
    padding: .95rem 1.15rem;
    text-align: center;
    border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.05));
    font-size: var(--fs-sm);
    vertical-align: middle;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare th:first-child,
.compare td:first-child {
    text-align: left;
    color: var(--tx);
    font-weight: 500;
    width: 46%;
}
/* Feature label carries a hover tooltip (title attr) explaining the row. */
.compare td:first-child { cursor: help; }
.compare__tip {
    margin-left: .45rem;
    font-size: 1.1em;
    color: var(--tx-2);
    opacity: .7;
    vertical-align: middle;
    transition: color .15s, opacity .15s;
}
.compare td:first-child:hover .compare__tip { color: var(--grn); opacity: 1; }
/* Styled hover tooltip for the comparison table (positioned via hp-public.js as
 * position:fixed so it escapes the table's overflow:auto - a pure-CSS popup would
 * be clipped). Bigger, readable font than the native title tooltip. */
.cmp-tip {
    position: fixed;
    z-index: 9999;
    max-width: 340px;
    padding: .65rem .8rem;
    background: var(--bg-deep, #0d0f12);
    border: 1px solid var(--grn-line, rgba(106,211,106,.35));
    border-radius: 10px;
    font-size: .95rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--tx);
    text-align: left;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .75);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease;
}
.cmp-tip.show { opacity: 1; visibility: visible; transform: translateY(0); }
/* Hlavička */
.compare thead th {
    position: sticky;
    top: 0;
    font-family: var(--f-display);
    font-size: var(--fs-base);
    background: var(--bg-deep);
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--line);
    /* Bottom-align header content so the PRICE line sits on the same baseline in
     * all three columns - the „Doporučeno" badge above „Pro" no longer pushes its
     * price lower than Zdarma / Studio. */
    vertical-align: bottom;
}
.compare thead th span {
    display: block;
    margin-top: .4rem;
    font-family: var(--f-mono);
    font-size: var(--fs-base);
    color: var(--tx);
    font-weight: 600;
}
/* Zebra + hover */
.compare tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .015); }
.compare tbody tr:hover td { background: rgba(255, 255, 255, .04); }
/* Buňky */
.compare .yes {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--grn-soft); color: var(--grn); font-size: .8rem;
}
.compare .no { color: var(--tx-4); opacity: .55; }
.compare .lim {
    display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    background: rgba(245, 158, 11, .12); color: var(--warn);
    font-size: var(--fs-xs); font-family: var(--f-mono);
}
/* Zvýrazněný „Pro" sloupec - táhne se přes celou výšku */
.compare__f { color: var(--grn) !important; position: relative; }
.compare thead .compare__f {
    background: linear-gradient(180deg, var(--grn-soft), transparent);
    border-bottom-color: var(--grn-line);
    box-shadow: inset 1px 0 0 var(--grn-line), inset -1px 0 0 var(--grn-line);
}
.compare thead .compare__f::before {
    content: "Doporučeno";
    display: block;
    margin: 0 auto .4rem;
    width: max-content;
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #06210f;
    background: var(--grn);
    padding: .2rem .6rem;
    border-radius: 999px;
}
.compare tbody .compare__f {
    background: var(--grn-soft) !important;
    box-shadow: inset 1px 0 0 var(--grn-line), inset -1px 0 0 var(--grn-line);
}
.compare tbody tr:last-child .compare__f {
    box-shadow: inset 1px 0 0 var(--grn-line), inset -1px 0 0 var(--grn-line),
                inset 0 -1px 0 var(--grn-line);
}

/* ================= FAQ ================= */
.faq { max-width: 800px; margin-inline: auto; display: grid; gap: .7rem; }
.faq__item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t); }
.faq__item[open] { border-color: var(--grn-line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-lg); cursor: pointer; list-style: none; }
@media (max-width: 640px) {
    .faq__q { padding: 1rem 1.1rem; font-size: 1rem; }
    .faq__a { padding: 0 1.1rem 1.1rem; font-size: .9rem; }
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q i { color: var(--grn); transition: transform var(--t); flex-shrink: 0; }
.faq__item[open] .faq__q i { transform: rotate(180deg); }
.faq__a { padding: 0 1.4rem 1.3rem; color: var(--tx-2); line-height: var(--lh-loose); font-size: var(--fs-sm); }
.faq__a a { color: var(--grn); }

/* ================= CTA ================= */
.cta-band { position: relative; padding-block: clamp(3rem, 7vw, 5rem); }
.cta { position: relative; overflow: hidden; margin: 0 var(--pad); border-radius: var(--r-2xl); padding: clamp(3rem,7vw,5rem) clamp(1.5rem,5vw,4rem); text-align: center; background: linear-gradient(180deg, var(--grn-soft), transparent 55%), var(--panel); border: 1px solid var(--grn-line); }
.cta__inner { position: relative; max-width: 640px; margin-inline: auto; }
.cta__title { font-size: var(--fs-5xl); margin-bottom: 1rem; }
.cta__title .accent { color: var(--grn); }
.cta__sub { font-size: var(--fs-lg); color: var(--tx-2); margin-bottom: 2rem; line-height: var(--lh-loose); }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
@media (max-width: 640px) {
    .cta { margin: 0; padding: clamp(2.25rem, 7vw, 3.5rem) 1.25rem; border-radius: var(--r-lg); }
    .cta__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .cta__sub { font-size: .95rem; }
    .cta__actions .btn { width: 100%; justify-content: center; }
}

/* ============== BANNER: SPOLUPRÁCE / TESTOVÁNÍ ============== */
.collab-band { padding-top: clamp(1rem, 3vw, 2.25rem); padding-bottom: clamp(.25rem, 1.5vw, 1rem); }
.collab {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
    padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
    border-radius: var(--r-2xl); border: 1px solid var(--grn-line);
    background:
        radial-gradient(90% 170% at 100% 0%, var(--grn-soft-2), transparent 60%),
        linear-gradient(135deg, var(--grn-soft), transparent 55%),
        var(--panel);
    box-shadow: var(--grn-glow);
}
/* tenká zelená „světelná" linka u horního okraje */
.collab::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--grn), transparent); opacity: .55;
}
.collab__main { flex: 1 1 440px; min-width: 0; }
.collab__badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--f-mono); font-size: var(--fs-xs);
    letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--grn);
    background: var(--grn-soft); border: 1px solid var(--grn-line);
    padding: .3rem .72rem; border-radius: var(--r-full); margin-bottom: .9rem;
}
.collab__title {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: var(--lh-snug);
    letter-spacing: var(--tr-tight); margin: 0 0 .55rem;
}
.collab__title .accent { color: var(--grn); }
.collab__sub { color: var(--tx-2); font-size: var(--fs-base); line-height: var(--lh-norm); margin: 0; max-width: 62ch; }
.collab__sub b { color: var(--tx); font-weight: 600; }
.collab__aside { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; flex-shrink: 0; }
.collab__mail {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--tx-3);
    transition: color var(--t-fast);
}
.collab__mail:hover { color: var(--grn); }
@media (max-width: 760px) {
    .collab { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
    /* In the column layout the `flex: 1 1 440px` basis becomes a 440px HEIGHT,
       which left ~290px of empty space inside __main between the text and the
       button on a tall/narrow tablet. Reset to content height. */
    .collab__main { flex: 0 0 auto; }
    .collab__aside { width: 100%; }
    .collab__aside .btn { width: 100%; justify-content: center; }
}

/* ============== MODAL: ZÁJEM O TESTOVÁNÍ ============== */
.tmodal {
    position: fixed; inset: 0; margin: auto;
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100dvh - 3rem); padding: 0; color: var(--tx);
    background: var(--panel); border: 1px solid var(--grn-line);
    border-radius: var(--r-xl); box-shadow: var(--sh-lg);
}
.tmodal::backdrop { background: rgba(5, 6, 7, .72); backdrop-filter: blur(5px); }
.tmodal__form { max-height: calc(100dvh - 3rem); overflow-y: auto; padding: clamp(1.5rem, 3vw, 2.25rem); }
.tmodal__x {
    position: absolute; top: .55rem; right: .65rem; z-index: 2;
    width: 36px; height: 36px; border: 0; border-radius: var(--r-full);
    background: transparent; color: var(--tx-3); font-size: 1.6rem; line-height: 1; cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.tmodal__x:hover { color: var(--tx); background: var(--panel-3); }
.tmodal__title { font-family: var(--f-display); font-size: var(--fs-2xl); margin: .7rem 0 .35rem; }
.tmodal__lead { color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-norm); margin: 0 0 1.25rem; }
.tmodal__lead b { color: var(--grn); }
.tmodal__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.tmodal__field { display: grid; gap: .35rem; margin-bottom: .85rem; }
.tmodal__field > span { font-size: var(--fs-sm); color: var(--tx-2); font-weight: 500; }
.tmodal__field > span i { color: var(--grn); font-style: normal; }
.tmodal__field > span em { color: var(--tx-3); font-style: normal; font-size: var(--fs-xs); }
.tmodal input, .tmodal textarea {
    width: 100%; font: inherit; color: var(--tx);
    background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: .62rem .8rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tmodal input:focus, .tmodal textarea:focus { outline: none; border-color: var(--grn-line); box-shadow: var(--ring); }
.tmodal textarea { resize: vertical; min-height: 68px; }
.tmodal__row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.tmodal__nda {
    margin: .4rem 0 .9rem; padding: .9rem 1rem; max-height: 152px; overflow-y: auto;
    background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-sm);
    font-size: var(--fs-xs); line-height: var(--lh-norm); color: var(--tx-3);
}
.tmodal__nda strong { display: block; color: var(--tx-2); margin-bottom: .35rem; font-size: var(--fs-sm); }
.tmodal__check {
    display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.25rem;
    font-size: var(--fs-sm); color: var(--tx-2); line-height: var(--lh-norm); cursor: pointer;
}
.tmodal__check input { width: 18px; height: 18px; margin-top: .12rem; flex-shrink: 0; accent-color: var(--grn); }
.tmodal__check i { color: var(--grn); font-style: normal; }
.tmodal__rcnote { margin: 0 0 1.1rem; font-size: var(--fs-xs); color: var(--tx-4); line-height: var(--lh-norm); }
.tmodal__rcnote a { color: var(--tx-3); text-decoration: underline; }
/* v3 badge skrýváme - povinné upozornění nese .tmodal__rcnote přímo ve formuláři */
.grecaptcha-badge { visibility: hidden; }
.tmodal__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.tmodal__err { margin: 1rem 0 0; color: var(--bad); font-size: var(--fs-sm); }
.tmodal__success { text-align: center; padding: 1.5rem .5rem; }
.tmodal__success i { font-size: 3rem; color: var(--grn); }
.tmodal__success h3 { font-family: var(--f-display); font-size: var(--fs-xl); margin: .8rem 0 .4rem; }
.tmodal__success p { color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-norm); margin: 0 0 1.25rem; }
@media (max-width: 560px) {
    .tmodal__row { grid-template-columns: 1fr; }
    .tmodal__actions .btn { width: 100%; justify-content: center; }
}
.cta__micro { margin-top: 1.3rem; font-size: var(--fs-sm); color: var(--tx-3); }
.cta__micro i { color: var(--grn); }

/* ================= PROSE / LEGAL ================= */
.prose { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 5rem; }
.prose__title { font-size: var(--fs-4xl); margin-bottom: .6rem; }
.prose__meta { color: var(--tx-3); font-size: var(--fs-sm); margin-bottom: 2.5rem; font-family: var(--f-mono); }
.prose__body h2 { font-size: var(--fs-2xl); margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.prose__body h3 { font-size: var(--fs-lg); margin: 1.75rem 0 .6rem; }
.prose__body p, .prose__body li { color: var(--tx-2); line-height: var(--lh-loose); font-size: var(--fs-base); }
.prose__body p { margin-bottom: 1rem; }
.prose__body ul { margin: 0 0 1rem 1.25rem; list-style: disc; }
.prose__body li { margin-bottom: .5rem; }
.prose__body a { color: var(--grn); }
.prose__body strong { color: var(--tx); }

/* ── „Z praxe" - jednoduchá chatová bublina (příběh vlastníka) ─────
 * Neprůhledná výplň + malý ocásek vlevo dole ze STEJNÉ barvy →
 * žádné artefakty z průhlednosti, čistá bublina na jakémkoli pozadí. */
.practice {
    position: relative;
    margin-top: 1.35rem;
    margin-left: 7px;                 /* místo pro ocásek vlevo */
    padding: .95rem 1.15rem;
    background: var(--grn-bubble);
    border: 0;
    border-radius: 16px;
    border-bottom-left-radius: 5px;   /* z tohoto rohu vychází ocásek */
    font-size: var(--fs-sm);
    color: var(--tx-2);
    line-height: var(--lh-loose);
}
/* Ocásek = malý kosočtverec ve stejné barvě jako bublina, schovaný
 * spodním rohem. Špička jemně zaoblená, ať to není ostrý hrot. */
.practice::before {
    content: "";
    position: absolute;
    left: -5px;
    bottom: 6px;
    width: 14px;
    height: 14px;
    background: var(--grn-bubble);
    border-radius: 0 0 0 3px;
    transform: rotate(45deg);
}
/* Štítek „Z praxe" jako odesílatel nad textem bubliny. */
.practice__tag {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--grn);
    white-space: nowrap;
}
.practice__tag i { font-size: 1.05em; }
/* Karty funkcí (funkce.php). Fallback bez subgridu: flex sloupec se
 * spodním zarovnáním bubliny. */
.appcards .card { display: flex; flex-direction: column; }
.appcards .card .practice { margin-top: auto; }

/* Hlavní layout: subgrid přes 3 pásy (hlavička / popis / „Z praxe"
 * bublina). Karty v jednom řádku tak sdílejí stejně vysoký pás popisu -
 * bubliny ZAČÍNAJÍ na stejné lince i při různě dlouhých textech (a tím
 * pádem jsou zarovnané shora i dole). */
@supports (grid-template-rows: subgrid) {
    .appcards .card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0;
    }
    .appcards .card > * { align-self: start; }
    .appcards .card .practice { margin-top: 1.35rem; }
}