/* =============================================================
   DJanalyzer (www) - Design Tokens (1:1 Engine DJ OS / Desktop)
   Přesná vizuální identita podle https://enginedj.com/software/enginedj-os:
   - Čistě černé pozadí (#000000) a střídavý uhlový pás (#111111)
   - Karty #191919 s 1px gradientním rámečkem (#70E577 -> #35B1DD)
   - Primární neonově zelená #01ED5F, kicker zelená #02bf6d
   - Typografie Inter (400 / 300 / 700), šířka kontejneru 1140px
   ============================================================= */

:root {
    /* ---------- PLOCHA (Engine DJ exact) ---------- */
    --bg:            #000000;   /* .eidwiH / body */
    --bg-deep:       #111111;   /* .eztJwz / střídavé sekce */
    --bg-legal:      #151515;   /* .hpyoIK / LegalFooter */
    --panel:         #191919;   /* .gNAXt / tmavé karty */
    --panel-2:       #151515;   /* vyvýšené plochy */
    --panel-3:       #24272c;   /* hover / aktivní řádky */
    --rail:          #0d0e10;   /* levý rail v app-ui ukázce */
    --overlay:       rgba(0, 0, 0, 0.78);

    /* ---------- TEXT (Engine DJ exact) ---------- */
    --tx:            #FFFFFF;   /* hlavní nadpisy a zvýraznění */
    --tx-2:          #BCBCBC;   /* hlavní odstavcový text (.eStiRo p, .hJbbIV p) */
    --tx-3:          #B8CFD5;   /* podnadpisy a štítky (.kbRdTz, .kGckrH) */
    --tx-4:          #979797;   /* patičkové odkazy (.gPmhOI) */
    --on-accent:     #000000;   /* černý text na #01ED5F tlačítkách (.WzXkk) */

    /* ---------- AKCENTY & GRADIENTY (Engine DJ exact) ---------- */
    --grn:           #01ED5F;   /* primární neonová zelená (.WzXkk, .UygQR, .aiDNI) */
    --grn-bright:    #3CEC88;   /* aktivní/hover stav (.css-gTnojX:active) */
    --grn-dim:       #02bf6d;   /* uppercase section kicker (.hJbbIV h3, .eStiRo h3) */
    --grn-soft:      rgba(1, 237, 95, 0.11);
    --grn-soft-2:    rgba(53, 177, 221, 0.16);
    --grn-line:      rgba(1, 237, 95, 0.42);
    --grn-bubble:    #121d18;

    /* Signaturní gradienty Engine DJ */
    --eng-grad-text:    linear-gradient(10deg, #70E577 20%, #35B1DD);
    --eng-grad-card:    linear-gradient(75deg, #70E577 20%, #35B1DD);
    --eng-grad-border:  linear-gradient(90deg, #70E577 0%, #35B1DD 120%);
    --eng-grad-pill:    linear-gradient(45deg, #70E577, #35B1DD);
    --eng-grad-backdrop:linear-gradient(223.14deg, #04847f 0%, #01ed5f 65.39%, #01ed5f 65.39%);
    --eng-grad-callout: linear-gradient(45deg, #70E577 50%, #35B1DD);
    --eng-grad-flip:    linear-gradient(60deg, #70E577 50%, #35B1DD 140%);

    /* Datové akcenty (pro reprodukci přehrávače a tabulky) */
    --key:           #35B1DD;
    --bpm:           #FFFFFF;
    --warn:          #ffc24b;
    --bad:           #ff6b5e;
    --info:          #35B1DD;

    --warn-bg:       rgba(255, 194, 75, 0.12);
    --bad-bg:        rgba(255, 107, 94, 0.12);
    --grn-glow:      0 0 0 1px rgba(112, 229, 119, 0.35), 0 22px 54px -18px rgba(1, 237, 95, 0.38);

    /* ---------- LINKY / OKRAJE (Engine DJ exact) ---------- */
    --line:          #393939;   /* .ilA-Dax / .leqayW */
    --line-2:        #1f1f1f;   /* .gPmhOI patičkové linky */
    --line-divider:  #444444;   /* .elUUaz / .gOzYrE */
    --line-strong:   rgba(184, 207, 213, 0.32);

    /* ---------- GRADIENTY KOMPATIBILITY ---------- */
    --grad-grn:      var(--eng-grad-callout);
    --grad-panel:    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    --grad-fade:     linear-gradient(180deg, transparent, var(--bg-deep));
    --hero-glow:     radial-gradient(62% 52% at 50% 18%, rgba(4, 132, 127, 0.28), rgba(1, 237, 95, 0.08) 48%, transparent 72%);

    /* ---------- STÍNY ---------- */
    --sh-sm:         0 2px 8px rgba(0,0,0,.6);
    --sh-md:         0 14px 36px rgba(0,0,0,.7);
    --sh-lg:         0 36px 90px -20px rgba(0,0,0,.85);
    --ring:          0 0 0 3px rgba(1, 237, 95, 0.35);

    /* ---------- TYPOGRAFIE (Engine DJ exact: Inter všude) ---------- */
    --f-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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;    /* 12px */
    --fs-sm:   0.875rem;   /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-lg:   1.125rem;   /* 18px */
    --fs-xl:   1.375rem;   /* 22px */
    --fs-2xl:  1.5625rem;  /* 25px (.UygQR / .gROwSK h2) */
    --fs-3xl:  2.5rem;     /* 40px (.eCLEjG h1) */
    --fs-4xl:  clamp(1.8125rem, 4vw, 3rem);     /* 29px -> 48px (.hJbbIV h2 / .eStiRo h2) */
    --fs-5xl:  clamp(1.875rem, 4.5vw, 3.4375rem); /* 30px -> 55px (.dPQfuL h2) */
    --fs-hero: clamp(2.125rem, 4.4vw, 3.125rem);  /* 34px -> 50px (.gROwSK h1) */

    --lh-tight: 1.08;
    --lh-snug:  1.32;
    --lh-norm:  1.625;     /* 26px při 16px (.eStiRo p) */
    --lh-loose: 1.625;

    --tr-tight: -0.015em;
    --tr-label: 0.0625em;  /* 1px letter-spacing (.hJbbIV h3 / .aiDNI) */

    /* ---------- SPACING & KONTEJNER (Engine DJ 1140px) ---------- */
    --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:        1140px; /* .kheaeI exact */
    --maxw-narrow: 742px;  /* .cRTop exact */
    --pad:         25px;   /* .kheaeI padding-left/right 25px */

    /* ---------- RADIUS (Engine DJ exact: 8px-10px karty, 2.5rem tlačítka) ---------- */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 10px;
    --r-2xl: 10px;
    --r-full: 2.5rem;

    /* ---------- POHYB ---------- */
    --t-fast:   150ms ease;
    --t:        250ms ease;
    --t-slow:   600ms ease;

    --z-nav: 10000;
    --z-overlay: 10100;
    --z-modal: 10200;
    --z-toast: 10500;
    --nav-h: 60px; /* .cxqDNq / .cZmWaN exact */
    /* Odsazení obsahu podstránek pod hlavičkou - jen malá mezera,
       pevnou hlavičku už vyrovnává rozpěrka .cZmWaN */
    --page-top: 1.25rem;

    /* ---------- KOMPATIBILNÍ ALIASY (account, admin, checkout) ---------- */
    --text-primary:   var(--tx);
    --text-secondary: var(--tx-2);
    --text-muted:     var(--tx-3);
    --bg-surface:     var(--panel);
    --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 (max-width: 1136px) {
    :root { --pad: 20px; }
}

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

/* =============================================================
   DJAnalyzer (Engine DJ OS / Desktop 1:1 Edition) - Base
   Pure #000000 canvas, Inter typography, Engine DJ section & divider primitives
   ============================================================= */

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

html {
    height: 100%;
    background-color: #000000;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-scroll-padding-top: 60px;
    -moz-scroll-padding-top: 60px;
    -ms-scroll-padding-top: 60px;
    scroll-padding-top: 60px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-norm);
    color: #FFFFFF;
    background: #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    min-height: 100%;
}

/* Pure #000000 Engine DJ background without artificial haze */
body::before {
    display: none;
}

p:empty { display: none; }

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: #FFFFFF; }

::selection { background: rgba(1, 237, 95, 0.32); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

* { scrollbar-width: thin; scrollbar-color: #393939 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #393939; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #01ED5F; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

h1, h2, h3, h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    color: #FFFFFF;
}

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

/* ---------- Engine DJ Root & Page Wrapper ---------- */
.kUWILL {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #000000;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}

.linRbu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
}

/* ---------- Engine DJ Section Containers ---------- */
.ewCWpb,
.eidwiH,
.cHGXWz,
.ioREXj,
.dolTdX,
.fPuyKM,
.eztJwz,
.iQzhys {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
}

.ewCWpb {
    position: relative;
    overflow: hidden;
    background-color: #050608;
}

/* Reálný snímek aktuální aplikace v pozadí Hero sekce:
   Pod hlavním sdělením (nadpisy, zařízením i spodním textem s tlačítky) je sytě černé pozadí,
   které se plynule přelévá do reálného snímku aplikace po stranách a v prostoru okolo */
.ewCWpb::before {
    content: "";
    position: absolute;
    inset: -16px;
    background-image: var(--hero-bg-img, url('../img/app-desktop-dashboard.png'));
    background-size: cover;
    background-position: center 18%;
    background-repeat: no-repeat;
    filter: blur(3px) brightness(1.05) contrast(1.04) saturate(0.95);
    opacity: 0.68;
    transform: scale(1.03);
    pointer-events: none;
    z-index: 0;
}

.ewCWpb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* 1. Zvýraznění horní části (stejný světelný efekt jako v sekci „DJpilot & Autonomní Live Mixování") */
        radial-gradient(
            circle at 50% 20%,
            rgba(53, 177, 221, 0.24) 0%,
            rgba(112, 229, 119, 0.11) 34%,
            rgba(0, 0, 0, 0) 68%
        ),
        /* 2. Eliptické přelévání: uprostřed pod sdělením tmavé pozadí, do stran se plynule otevírá obrázek aplikace */
        radial-gradient(
            ellipse 54% 82% at 50% 52%,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.84) 46%,
            rgba(0, 0, 0, 0.34) 82%,
            rgba(0, 0, 0, 0.64) 100%
        ),
        /* 3. Vertikální přelévání: nahoře a dole pod textem a tlačítky klidné tmavé pozadí */
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.78) 22%,
            rgba(0, 0, 0, 0.30) 48%,
            rgba(0, 0, 0, 0.88) 76%,
            rgba(10, 11, 13, 0.98) 100%
        );
    pointer-events: none;
    z-index: 0;
}

.ewCWpb > .inBa-Dg {
    position: relative;
    z-index: 2;
}

.cHGXWz {
    background-image:
        radial-gradient(circle at 50% 25%, rgba(53, 177, 221, 0.2) 0%, rgba(112, 229, 119, 0.08) 38%, rgba(0, 0, 0, 0.94) 75%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.95) 100%);
}

.ioREXj {
    background-image:
        radial-gradient(circle at 50% 24%, rgba(1, 237, 95, 0.18) 0%, rgba(4, 132, 127, 0.1) 40%, rgba(0, 0, 0, 0.95) 75%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.95) 100%);
}

.dolTdX {
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: 50% 14%;
}

.fPuyKM {
    background-image:
        radial-gradient(circle at 50% 28%, rgba(1, 237, 95, 0.16) 0%, rgba(53, 177, 221, 0.09) 42%, rgba(0, 0, 0, 0.95) 76%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.95) 100%);
}

.eztJwz {
    background-color: #111111;
    background-image: none;
}

.inBa-Dg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 72px;
    padding-bottom: 72px;
    overflow-x: hidden;
}

.kheaeI {
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    margin-inline: auto;
}
@media only screen and (min-width: 960px) {
    .kheaeI {
        max-width: 1360px;
        padding-left: 32px;
        padding-right: 32px;
    }
}

.iHTVtR {
    color: #FFFFFF;
    font-style: normal;
    font-weight: 700;
    font-size: 45px;
    line-height: 52px;
    letter-spacing: -0.5px;
    max-width: 1280px;
    margin-bottom: 6px;
    margin-top: 0px;
    text-align: center;
}
@media only screen and (max-width: 959px) {
    .iHTVtR {
        font-size: 30px;
        line-height: 36px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
.iHTVtR > strong,
.iHTVtR > em,
.edj-grad-text {
    background: linear-gradient(10deg, #70E577 20%, #35B1DD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.kbRdTz {
    color: #B8CFD5;
    font-style: normal;
    font-weight: 300;
    font-size: 22px;
    line-height: 34px;
    max-width: 1080px;
    letter-spacing: -0.3px;
    margin-top: 14px;
    margin-bottom: 46px;
    text-align: center;
}

/* ---------- Engine DJ Dividers & Spacers ---------- */
.bRgeKE { display: flex; width: 100%; max-width: 1360px; margin-inline: auto; }
.elUUaz { width: 100%; background-color: #444444; border: none; height: 1px; margin: 0px; }
.gOzYrE { width: 100%; background-color: #444444; border: none; height: 1px; margin: 0px 56px; }
.eCqufF { height: 80px; width: 100%; }
.eCqufK { height: 30px; width: 100%; }

/* ---------- Standard Container & Section (for subpages / admin / account) ---------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { position: relative; padding-block: clamp(3.5rem, 6vw, 5.5rem); background: #000000; }

@media (max-width: 640px) {
    :root { --pad: 1rem; }
    .section { padding-block: clamp(2.5rem, 7vw, 3.75rem); }
}
@media (max-width: 420px) {
    :root { --pad: .85rem; }
}

.section::before,
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: #444444;
    opacity: 0.55;
}

.section--deep {
    background: #111111;
}

/* Engine DJ Kicker (#02bf6d uppercase 16px, letter-spacing 1px) */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 23px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #02bf6d;
    margin-bottom: 0.75rem;
}
.kicker::before { display: none; }
.kicker__line { display: none; }

.shead { max-width: 760px; margin-bottom: clamp(2rem, 4.5vw, 3.5rem); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .kicker { justify-content: center; }
.shead__title {
    font-size: clamp(1.85rem, 4vw, 3rem);
    line-height: 1.12;
    font-weight: 400;
    margin-bottom: 1rem;
}
.shead__title strong,
.shead__title .accent {
    background: linear-gradient(10deg, #70E577 20%, #35B1DD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.shead__sub {
    font-size: 18px;
    color: #BCBCBC;
    line-height: 1.55;
    max-width: 650px;
    font-weight: 300;
}
.shead--center .shead__sub { margin-inline: auto; }
.shead--hero { max-width: none; }
.shead--hero .shead__sub { max-width: none; }

.accent {
    background: linear-gradient(10deg, #70E577 20%, #35B1DD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.u-mono { font-family: var(--f-mono); }

/* ---------- Reveal ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    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; }

/* Subpages / Account / Admin section headings */
.section-head { max-width: 760px; margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-title { font-size: clamp(1.85rem, 3.8vw, 2.85rem); font-weight: 400; margin-bottom: 1rem; }
.page-admin .section-head--left .section-title { margin-top: .85rem; }
.section-sub { font-size: 17px; color: #BCBCBC; line-height: 1.6; }

/* =============================================================
   DJAnalyzer (Engine DJ 1:1 Edition) - Layout
   Desktop NavHeader (Logo Left, Links Center, Pill Right) + 3-Tier Footer
   ============================================================= */

/* ---------- Engine DJ NavHeader (60px fixed) ---------- */
.iCDpGG,
.navbar {
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 10000;
    transition: background 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.iCDpGG.is-scrolled,
.navbar.is-scrolled,
.navbar--solid {
    background: #000000;
    border-bottom-color: #262626;
}

.cxqDNq,
.navbar__inner {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1360px;
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
    gap: 20px;
}
@media only screen and (max-width: 640px) {
    .cxqDNq,
    .navbar__inner {
        padding-left: 16px;
        padding-right: 16px;
        gap: 10px;
    }
}

.cZmWaN {
    height: 60px;
    width: 100%;
    flex-shrink: 0;
}

/* 1. LEFT: Brand Logo (and mobile-only burger trigger) */
.edj-nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Burger trigger: HIDDEN on desktop, shown only on mobile/tablet <= 960px */
.eQWZxi {
    display: none;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 960px) {
    .eQWZxi {
        display: flex;
    }
}

.wlJkX {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.eiWCVu {
    background: none;
    border-radius: 90px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    box-shadow: none;
    border: none;
    width: 34px;
    height: 34px;
    color: #FFFFFF;
    transition: color 0.2s ease;
}
.eiWCVu:hover {
    color: #01ED5F;
}
.eiWCVu svg {
    display: inline-block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: currentColor;
}

/* Animované logo - „ekvalizér" (rozhýbe bary přes scaleY) + čistý wordmark */
.edj-brand,
.navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    text-decoration: none;
    flex-shrink: 0;
}
.edj-brand__mark,
.navbar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #01ED5F;
    transition: color 0.2s ease;
}
.edj-brand__mark svg,
.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; }
}
.edj-brand__word {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
}
.edj-brand__word span {
    font-weight: 700;
    color: #01ED5F;
}

/* 2. CENTER: Desktop Navigation Links (1:1 Engine DJ: white, bold, 14px, roomy spacing) */
.edj-nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
}
.edj-desktop-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
}
.edj-desktop-link {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #FFFFFF;
    white-space: nowrap;
    text-decoration: none;
    padding: 6px 2px;
    transition: color 0.2s ease;
}
.edj-desktop-link:hover,
.edj-desktop-link.is-active {
    color: #01ED5F;
}
@media only screen and (max-width: 960px) {
    .edj-nav-center {
        display: none;
    }
}

/* 3. RIGHT: Minimal Utility (CZ/EN + Single Pill Button .fHGkiv) */
.edj-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

/* Subtle text language switch (like Engine DJ's search icon area) */
.edj-lang-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #979797;
}
.edj-lang-inline a {
    color: #979797;
    text-decoration: none;
    transition: color 0.2s ease;
}
.edj-lang-inline a:hover {
    color: #FFFFFF;
}
.edj-lang-inline a.is-active {
    color: #FFFFFF;
    font-weight: 700;
}
.edj-lang-inline span {
    color: #444444;
}

/* Engine DJ Header Pill Button (.fHGkiv) with 2px gradient mask */
.fHGkiv {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #FFFFFF;
    padding: 8px 22px;
    box-sizing: border-box;
    border-radius: 2.5rem;
    white-space: nowrap;
    z-index: 1;
    transition: color 0.2s ease;
}
.fHGkiv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #70E577, #35B1DD);
    border-radius: 2.5rem;
    z-index: -1;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.fHGkiv:hover {
    color: #01ED5F;
}

/* User dropdown on the right pill when logged in (keeps header 100% clean) */
.edj-user-menu {
    position: relative;
}
.edj-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: #111111;
    border: 1px solid #393939;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 10001;
}
.edj-user-menu.is-open .edj-user-dropdown,
.edj-user-menu:focus-within .edj-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.edj-user-dropdown__head {
    padding: 10px 16px;
    border-bottom: 1px solid #262626;
    font-size: 12px;
    color: #979797;
}
.edj-user-dropdown__head strong {
    display: block;
    color: #FFFFFF;
    font-size: 13px;
    margin-bottom: 2px;
}
.edj-user-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #BCBCBC;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.edj-user-dropdown__item i {
    color: #01ED5F;
    font-size: 14px;
}
.edj-user-dropdown__item:hover {
    background: #191919;
    color: #FFFFFF;
}
.edj-user-dropdown__item--cta {
    color: #01ED5F;
    font-weight: 600;
    border-bottom: 1px solid #262626;
}

/* Úzké telefony: hamburger, logo, CZ / EN a Přihlásit musí být v jednom řádku.
   Plná hlavička potřebuje 401 px, na 360 px tlačítko vyjíždělo za okraj okna.
   Jen hlavička (.cxqDNq) - patička používá stejné třídy loga. */
@media only screen and (max-width: 420px) {
    .cxqDNq .edj-nav-left {
        gap: 8px;
    }
    /* Ikona lícuje s okrajem stránky, dotyková plocha zůstává 34 px */
    .cxqDNq .eiWCVu {
        margin-left: -7px;
    }
    .cxqDNq .edj-brand {
        gap: 7px;
    }
    .cxqDNq .edj-brand__mark,
    .cxqDNq .edj-brand__mark svg {
        width: 28px;
        height: 28px;
    }
    .cxqDNq .edj-brand__word {
        font-size: 18px;
    }
    .cxqDNq .edj-nav-right {
        gap: 12px;
        flex-shrink: 1;
        min-width: 0;
    }
    .cxqDNq .edj-lang-inline {
        gap: 4px;
    }
    .cxqDNq .fHGkiv {
        padding: 8px 14px;
    }
    /* Přihlášený: dlouhé jméno nebo e-mail se zkrátí trojtečkou místo přetečení
       (.gjtWfw dělá z tlačítka inline-block, ve kterém .eZSelS nezkracuje) */
    .cxqDNq .edj-user-menu {
        min-width: 0;
    }
    .cxqDNq .edj-user-menu .fHGkiv {
        display: inline-flex;
        max-width: 100%;
    }
}
/* Pod 360 px (např. 320 px) nestačí ani to, zmenšíme ještě okraje, logo a tlačítko */
@media only screen and (max-width: 359px) {
    .cxqDNq {
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }
    .cxqDNq .edj-brand__mark,
    .cxqDNq .edj-brand__mark svg {
        width: 24px;
        height: 24px;
    }
    .cxqDNq .edj-brand {
        gap: 6px;
    }
    .cxqDNq .edj-brand__word {
        font-size: 16px;
    }
    .cxqDNq .edj-nav-right {
        gap: 10px;
    }
    .cxqDNq .fHGkiv {
        font-size: 12px;
        padding: 8px 11px;
    }
}

/* Mobile Slide-Down Menu (.bsbhPq.hPUDKG) */
.bsbhPq.hPUDKG {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    z-index: 9999;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background-color: #111111;
    border-right: 1px solid #393939;
    border-bottom: 1px solid #393939;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.75);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.bsbhPq.hPUDKG.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.keAkNc {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #111111;
}
.kuFTNf {
    display: flex;
    flex-direction: column;
    padding: 0px;
}
.leqayW {
    text-decoration: none;
    color: #FFFFFF;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: #111111;
    border-bottom: 1px solid #393939;
}
.leqayW:hover {
    color: #01ED5F;
    background: #191919;
}
.hGMLIM {
    list-style: none;
    padding-left: 0;
    margin: 0;
    background-color: #111111;
}
.kBKTRL {
    cursor: pointer;
    text-decoration: none;
    color: #BCBCBC;
    padding: 13px 20px 13px 34px;
    display: block;
    font-size: 13px;
    letter-spacing: 0.8px;
    background-color: #111111;
    border-bottom: 1px solid #262626;
}
.kBKTRL:hover {
    color: #FFFFFF;
    background: #1f2226;
}

/* ---------- Engine DJ 3-Tier Footer ---------- */
.brlWLt {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-top: auto;
    margin-inline: auto;
    padding: 40px 20px 72px;
    max-width: 1140px;
    box-sizing: border-box;
}
@media only screen and (max-width: 959px) {
    .brlWLt {
        padding: 24px 25px 52px;
    }
}

.bDMQIJ {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin-top: 25px;
    margin-bottom: 35px;
}

.dXHPOe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* 4 sloupce přes celou šířku kontejneru (auto-fill tu nechával prázdnou pátou stopu) */
.FDpFp {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 24px 32px;
    width: 100%;
}
@media only screen and (max-width: 959px) {
    .FDpFp {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media only screen and (max-width: 479px) {
    .FDpFp {
        grid-template-columns: 1fr;
    }
}

.kGTfOl {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.bgJvwL {
    font-size: 16px;
    line-height: 34px;
    color: #FFFFFF;
    margin-bottom: 20px;
    font-weight: 700;
    text-decoration: none;
    width: 100%;
}
@media only screen and (max-width: 959px) {
    .bgJvwL {
        margin-bottom: 10px;
    }
}

.gPmhOI {
    color: #979797;
    font-size: 13px;
    line-height: 34px;
    text-decoration: none;
    border-bottom: 1px solid #1f1f1f;
    font-weight: 400;
    padding-left: 3px;
    transition: color 200ms ease-in;
}
.gPmhOI:hover {
    color: #FFFFFF;
}

.dqVVDb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 60px;
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    box-sizing: border-box;
}
.kfVrFd {
    display: flex;
    text-decoration: none;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
}
.oeEAj {
    font-size: 12px;
    margin-top: 9px;
    margin-bottom: 22px;
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.fuvyff {
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 1140px;
}
.edj-brand-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px 42px;
    padding: 32px 24px 12px;
}
.edj-brand-strip__item {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #878787;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.edj-brand-strip__item:hover {
    color: #01ED5F;
}

.hpyoIK {
    width: 100%;
    min-height: 70px;
    padding: 18px 20px;
    background-color: #151515;
    color: #666666;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
}
.hpyoIK strong {
    color: #878787;
}
.hpyoIK a {
    color: #666666;
    text-decoration: underline;
    transition: color 0.2s ease;
}
.hpyoIK a:hover {
    color: #FFFFFF;
}
.gHOFJR {
    font-size: 11px;
}
.biOMdy {
    text-decoration: none;
}

/* =============================================================
   DJAnalyzer (Engine DJ OS / Desktop 1:1 Edition) - Components
   Engine DJ Pill Buttons (.WzXkk, .jLiwnk > .ipIDV, .fHGkiv),
   Cards, Admin, Forms, Data Labels, Toasts, Billing Toggle
   ============================================================= */

/* ---------- Engine DJ Native Pill Buttons ---------- */
.gjtWfw {
    border-radius: 2.5rem;
    border: none;
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    z-index: 1;
    cursor: pointer;
}
.gjtWfw [class^="icon-"],
.gjtWfw [class*=" icon-"],
.gjtWfw svg {
    display: inline-block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: currentColor;
    vertical-align: middle;
    margin-top: -2px;
}
.gjtWfw [class^="icon-"]:first-child,
.gjtWfw [class*=" icon-"]:first-child {
    margin-right: 10px;
}
.gjtWfw [class^="icon-"]:last-child,
.gjtWfw [class*=" icon-"]:last-child {
    margin-left: 10px;
    float: none;
}

/* Primary Neon Green Pill Button (.WzXkk) */
.WzXkk {
    background-color: #01ED5F;
    color: #000000;
    font-weight: 600;
    padding: 20px 28px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.WzXkk:hover {
    background-color: #3CEC88;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(1, 237, 95, 0.28);
}

/* Secondary 1px Gradient-Bordered Pill Button (.jLiwnk > .ipIDV / .gPvtll) */
.jLiwnk {
    background: linear-gradient(90deg, #70E577 0%, #35B1DD 120%);
    padding: 1px;
    margin: 0 auto;
    display: inline-block;
    border-radius: 2.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jLiwnk:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(53, 177, 221, 0.22);
}
.ipIDV {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #000000;
    color: #FFFFFF;
    font-weight: 500;
    padding: 20px 28px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}
.jLiwnk:hover .ipIDV {
    background: #0d1412;
    color: #01ED5F;
}
.gPvtll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #111111;
    color: #FFFFFF;
    font-weight: 500;
    padding: 20px 28px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}
.jLiwnk:hover .gPvtll {
    background: #18201d;
    color: #01ED5F;
}

.eZSelS {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    line-height: initial;
    color: inherit;
    font-size: inherit;
}

/* ---------- Standard .btn System (Engine DJ styled) ---------- */
.btn {
    --py: 16px; --px: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: .55rem;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 600;
    padding: var(--py) var(--px);
    border-radius: 2.5rem;
    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;
    cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn--sm { --py: 9px; --px: 18px; font-size: 13px; }
.btn--lg { --py: 20px; --px: 28px; font-size: 14px; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
    background: #01ED5F; color: #000000; font-weight: 700;
}
.btn--primary:hover {
    background: #3CEC88; color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(1, 237, 95, 0.25);
}

.btn--ghost {
    position: relative;
    background: #000000;
    color: #FFFFFF;
    border: 1px solid #393939;
    background-image: linear-gradient(#000000, #000000), linear-gradient(90deg, #70E577 0%, #35B1DD 120%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-color: transparent;
}
.btn--ghost:hover {
    color: #01ED5F;
    transform: translateY(-2px);
}
.btn--ghost.is-active {
    background: rgba(1, 237, 95, 0.14);
    border-color: #01ED5F;
    color: #01ED5F;
}
.btn--ghost.is-active:hover { transform: none; }

.btn--outline {
    background: transparent;
    color: #01ED5F;
    border-color: #01ED5F;
}
.btn--outline:hover {
    background: rgba(1, 237, 95, 0.12);
    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 #393939; border-radius: 2.5rem;
    overflow: hidden; background: #111111;
}
.lang-switch__opt {
    padding: 6px 10px; font-size: 11px; font-weight: 700;
    letter-spacing: .05em; color: #979797;
    text-decoration: none; line-height: 1;
    transition: background var(--t), color var(--t);
}
.lang-switch__opt:hover { color: #FFFFFF; background: #191919; }
.lang-switch__opt.is-active { background: #01ED5F; color: #000000; }

.btn--violet { background: #01ED5F; color: #000000; font-weight: 700; }
.btn--violet:hover { background: #3CEC88; 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: #191919; border: 1px solid #393939;
    border-radius: 8px; padding: 1.1rem 1.25rem;
    font-size: var(--fs-sm); color: #BCBCBC;
    display: flex; flex-direction: column; gap: .35rem;
}
.adm-stat span { font-size: var(--fs-2xl); font-weight: 700; color: #FFFFFF; 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: #979797; border-bottom: 1px solid #444444;
    white-space: nowrap;
}
.adm-table td { padding: .7rem .75rem; border-bottom: 1px solid #262626; color: #BCBCBC; }
.adm-table tbody tr:hover { background: #191919; }
.adm-table code { font-family: var(--f-mono); color: #FFFFFF; }

.adm-tier-select {
    background: transparent;
    color: #BCBCBC;
    border: 1px solid transparent;
    border-radius: 4px;
    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: #444444;
    background: #191919;
    color: #FFFFFF;
    outline: none;
}
.adm-tier-select option { background: #191919; color: #FFFFFF; }

/* ---------- Data label / tag (Engine DJ pill tags .kGckrH) ---------- */
.dtag {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
    padding: 3px 11px; border-radius: 13px;
    background: rgba(184, 207, 213, 0.06); color: #B8CFD5;
    border: 1px solid #B8CFD5;
}
.dtag--key { color: #35B1DD; border-color: #35B1DD; }
.dtag--grn { color: #01ED5F; background: rgba(1, 237, 95, 0.1); border-color: #01ED5F; }

.label {
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
    color: #02bf6d;
}

.eyebrow, .badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
    color: #01ED5F; padding: 4px 12px;
    background: rgba(1, 237, 95, 0.1); border: 1px solid rgba(1, 237, 95, 0.45);
    border-radius: 2.5rem;
}
.badge--violet { color: #01ED5F; }
.chip {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: 14px; color: #B8CFD5;
    padding: 4px 14px; background: transparent;
    border: 1px solid #B8CFD5; border-radius: 13px;
}
.chip i { color: #01ED5F; }

/* ---------- Karta (Engine DJ #191919 surface + gradient border on hover) ---------- */
.card {
    position: relative;
    background: #191919;
    border: 1px solid #393939;
    border-radius: 8px;
    padding: 1.6rem;
    transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.card--hover:hover {
    transform: translateY(-4px);
    border-color: #01ED5F;
    background: #1d1d1d;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}
.card--ring {
    background:
        linear-gradient(#191919, #191919) padding-box,
        linear-gradient(90deg, #70E577 0%, #35B1DD 120%) border-box;
    border: 1px solid transparent;
    box-shadow: 0 20px 50px rgba(1, 237, 95, 0.14);
}
@media (max-width: 640px) {
    .card { padding: 1.2rem; border-radius: 8px; }
}

/* ---------- Sbalovací (accordion) karta ---------- */
.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: #222222; }
.card--acc > .card__summary:focus-visible { outline: 2px solid #01ED5F; 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: #979797; 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: #01ED5F; }
.card--acc[open] > .card__summary { border-bottom: 1px solid #393939; }
.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; } }

/* ---------- 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: #979797; padding: 1.75rem; }

.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 ---------- */
.stat {
    padding: 1.1rem 1.25rem;
    background: #191919;
    border: 1px solid #393939;
    border-radius: 8px;
}
.stat__k {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: #979797;
}
.stat__v {
    font-family: 'Inter', sans-serif; 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: #979797; font-weight: 500; }
.stat__d { font-size: var(--fs-xs); color: #979797; margin-top: .2rem; }
.stat--accent .stat__v { color: #01ED5F; }

/* ---------- Formuláře (auth/checkout) ---------- */
.field { margin-bottom: 1.1rem; }
.field__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: #BCBCBC; margin-bottom: .5rem; }
.field__input {
    width: 100%; padding: .9rem 1.05rem;
    background: #111111; border: 1px solid #393939;
    border-radius: 8px; color: #FFFFFF;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field__input::placeholder { color: #666666; }
.field__input:focus { outline: none; border-color: #01ED5F; background: #151515; box-shadow: var(--ring); }
.field__hint { margin-top: .45rem; font-size: var(--fs-xs); color: #979797; }
/* Zaškrtávací souhlas (registrace: VOP) */
.field--check {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .85rem 1rem;
    background: #111111; border: 1px solid #393939; border-radius: 8px;
    font-size: var(--fs-sm); line-height: 1.55; color: #BCBCBC;
    cursor: pointer;
}
.field--check input { flex-shrink: 0; width: 16px; height: 16px; margin-top: .2rem; accent-color: #01ED5F; }
.field--check a { color: #01ED5F; text-decoration: underline; text-underline-offset: 2px; }

/* Souhlasy v Můj účet: řádek = název se stavem, vysvětlení a akce vpravo. */
.consent-list { display: grid; gap: .6rem; }
.consent-list .field--check { margin: 0; }
.consent-row {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; flex-wrap: wrap;
    padding: .85rem 1rem;
    background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
}
.consent-row--fixed { background: transparent; border-style: dashed; }
.consent-row__main { flex: 1 1 380px; min-width: 0; }
.consent-row__title {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm);
}
.consent-row__text { margin: .35rem 0 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.consent-row__actions { display: flex; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; }
.consent-check__meta { display: block; margin-top: .3rem; color: var(--text-muted); font-size: var(--fs-xs); }

/* Karta hned pod hlavičkou, ne svisle uprostřed obrazovky */
.auth-wrap { min-height: 100dvh; display: grid; place-items: start center; padding: var(--page-top) var(--pad) 3rem; }
.auth-card {
    width: 100%; max-width: 440px;
    background:
        linear-gradient(#191919, #191919) padding-box,
        linear-gradient(90deg, #70E577 0%, #35B1DD 120%) border-box;
    border: 1px solid transparent;
    border-radius: 10px; padding: clamp(1.75rem, 4vw, 2.6rem);
    box-shadow: var(--sh-lg);
}
.auth-card__title { font-size: 32px; font-weight: 700; margin-bottom: .5rem; }
.auth-card__sub { color: #BCBCBC; 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: #979797; }
.auth-card__alt a { color: #01ED5F; font-weight: 600; }
/* Honeypot registrace (lib/register-guard.php): mimo obrazovku, ne display:none,
   které by roboti poznali. */
.auth-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

.codebox {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.2rem; background: #111111;
    border: 1px dashed #01ED5F; border-radius: 8px;
    font-family: var(--f-mono); font-size: var(--fs-lg);
    letter-spacing: .05em; color: #01ED5F; word-break: break-all;
}
.codebox button { color: #BCBCBC; transition: color var(--t-fast); }
.codebox button:hover { color: #01ED5F; }

/* ---------- 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(17, 17, 17, .97); backdrop-filter: blur(14px);
    border: 1px solid #393939; border-radius: 8px;
    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: #01ED5F; }
.toast--error i { color: var(--bad); }
.toast--warning i { color: var(--warn); }
.toast--info i { color: #35B1DD; }
.toast__x { margin-left: auto; color: #979797; font-size: 1.2rem; line-height: 1; }
.toast__x:hover { color: #FFFFFF; }
@keyframes toast-in { from { opacity:0; transform: translateX(40px); } to { opacity:1; transform:none; } }
.toast--out { animation: toast-out var(--t-slow) forwards; }
@keyframes toast-out { to { opacity:0; transform: translateX(40px); } }

/* ---------- Billing toggle ---------- */
.bill-toggle {
    display: inline-flex; align-items: center; gap: .9rem;
    margin-top: 1.5rem;
    font-size: 14px; font-weight: 600; color: #BCBCBC;
}
.bill-toggle__switch {
    position: relative; width: 56px; height: 30px;
    border-radius: 2.5rem; background: #191919;
    border: 1px solid #444444; transition: background var(--t);
}
.bill-toggle__switch::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #01ED5F; 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: #FFFFFF; }
.bill-toggle__save {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #000000;
    background: linear-gradient(45deg, #70E577 50%, #35B1DD);
    padding: 3px 10px; border-radius: 2.5rem;
}

/* =============================================================
   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 (Engine DJ OS / Desktop 1:1 Edition) - Sections
   1:1 Engine DJ PageSections + Pricing, Comparison, Modal, Subpages
   ============================================================= */

/* ================= 1. PageSectionSingleColumn (.gROwSK) ================= */
.gROwSK {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gROwSK h1 {
    color: #FFFFFF;
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    line-height: 56px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}
@media only screen and (max-width: 959px) {
    .gROwSK h1 {
        font-size: 34px;
        line-height: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }
}
.gROwSK h1 > strong {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    background: none;
    font-weight: 700;
    display: inline-block;
}
.gROwSK h2 {
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0 20px;
    font-size: 20px;
    margin-bottom: 2rem;
    font-weight: 300;
}
.gROwSK h2 > strong {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    display: block;
}
@media only screen and (min-width: 960px) {
    .gROwSK h2 {
        font-style: normal;
        font-size: 25px;
        line-height: 35px;
        max-width: 1320px;
    }
    .gROwSK h2 > strong {
        font-size: 55px;
        line-height: 62px;
        font-weight: 700;
    }
}
.gROwSK h3 {
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0 20px;
    font-size: 20px;
    max-width: 980px;
    margin-bottom: 2.25rem;
    font-weight: 300;
    line-height: 32px;
}
@media only screen and (min-width: 960px) {
    .gROwSK h3 {
        font-size: 24px;
        line-height: 35px;
        max-width: 1120px;
    }
}
.gROwSK p {
    color: #BCBCBC;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1140px;
}
.gROwSK p strong {
    color: #FFFFFF;
}
.gROwSK .image {
    text-align: center;
    margin-bottom: 2.25rem;
    margin-top: 2.5rem;
    width: 100%;
}
.edj-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 2rem;
}

/* ================= 2. PageSectionTextWithGreenImage (.hWzEQl / .eePIeU) ================= */
.hWzEQl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
.eePIeU {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap-reverse;
}
@media only screen and (min-width: 1024px) {
    .hWzEQl,
    .eePIeU {
        flex-direction: row;
        padding: 70px 0;
        align-items: stretch;
    }
}

.RPQay {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    align-items: center;
}
@media only screen and (min-width: 1024px) {
    .RPQay {
        padding: 64px 72px;
        width: 50%;
    }
    .RPQay > div {
        margin-left: auto;
    }
}

.Fapwc {
    background: linear-gradient(223.14deg, #04847f 0%, #01ed5f 65.39%, #01ed5f 65.39%);
    padding: 28px 20px;
}
@media only screen and (min-width: 1024px) {
    .Fapwc {
        padding: 64px 72px;
        border-radius: 0 10px 10px 0;
    }
}

.cFSAZU {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 100%;
}
@media only screen and (min-width: 1024px) {
    .cFSAZU {
        justify-content: flex-start;
        padding: 64px 72px;
        width: 50%;
    }
}

.kxYGi {
    background: linear-gradient(223.14deg, #04847f 0%, #01ed5f 65.39%, #01ed5f 65.39%);
    padding: 28px 20px;
}
@media only screen and (min-width: 1024px) {
    .kxYGi {
        padding: 64px 72px;
        border-radius: 10px 0px 0px 10px;
    }
}

.bUtXyv {
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.hJbbIV {
    display: flex;
    flex-direction: column;
    padding: 28px 25px 40px;
    width: 100%;
    align-items: flex-start;
    max-width: 620px;
    box-sizing: border-box;
}
@media only screen and (min-width: 1024px) {
    .hJbbIV {
        text-align: left;
        align-items: flex-start;
        padding: 0;
        width: 620px;
        justify-content: center;
    }
}
.hJbbIV h3 {
    text-align: left;
    color: #02bf6d;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
    margin: 0;
}
.hJbbIV h2 {
    text-align: left;
    max-width: 620px;
    box-sizing: border-box;
    margin: 1rem 0 1.35rem;
    font-size: 30px;
    line-height: 38px;
    font-weight: 400;
    color: #FFFFFF;
}
@media only screen and (min-width: 1024px) {
    .hJbbIV h2 {
        font-size: 44px;
        line-height: 52px;
    }
}
.hJbbIV p {
    color: #BCBCBC;
    font-style: normal;
    font-weight: 400;
    font-size: 16.5px;
    line-height: 28px;
    text-align: left;
    margin-bottom: 1.35rem;
}
.hJbbIV p strong {
    color: #FFFFFF;
}

/* ================= 3. PageSectionTextWithImage (.jSZnlY / .eStiRo / .igBcuc) ================= */
.jSZnlY {
    flex-wrap: wrap;
    gap: 2.5rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (min-width: 960px) {
    .jSZnlY {
        flex-wrap: nowrap;
        padding: 36px 0;
    }
}

.eStiRo {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
}
@media only screen and (min-width: 960px) {
    .eStiRo {
        width: 48%;
        padding: 0;
    }
}
.eStiRo h3 {
    color: #02bf6d;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}
.eStiRo h2 {
    font-size: 30px;
    line-height: 38px;
    max-width: 620px;
    box-sizing: border-box;
    text-align: left;
    margin: 0 0 1.35rem;
    font-weight: 400;
    color: #FFFFFF;
}
@media only screen and (min-width: 960px) {
    .eStiRo h2 {
        font-size: 44px;
        line-height: 52px;
    }
}
.eStiRo p {
    color: #BCBCBC;
    font-style: normal;
    font-weight: 400;
    max-width: 600px;
    font-size: 16.5px;
    line-height: 28px;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 1.4rem;
}
.eStiRo p strong {
    color: #FFFFFF;
    font-weight: 600;
}

.igBcuc {
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 20px auto 0;
    box-sizing: border-box;
}
@media only screen and (min-width: 960px) {
    .igBcuc {
        width: 52%;
        margin-top: 0px;
    }
}

/* ================= 4. PageSectionFlipCardCarousel (3D Flip Cards - 4 vedle sebe na 1 řádku) ================= */
.dPQfuL {
    margin-bottom: 28px;
}
@media only screen and (min-width: 960px) {
    .dPQfuL {
        margin: 2.5rem 0 2.75rem;
    }
}
.dPQfuL h2 {
    text-align: center;
    font-size: 34px;
    line-height: 40px;
    max-width: 1280px;
    margin: 0 auto;
    font-weight: 700;
    color: #FFFFFF;
}
@media only screen and (min-width: 960px) {
    .dPQfuL h2 {
        font-size: 48px;
        line-height: 54px;
    }
}

.hLtPbx {
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 1320px;
    margin-bottom: 2.5rem;
    z-index: 1;
    position: relative;
}

/* Carousel Grid / Track for Flip Cards - vždy 4 vedle sebe na 1 řádku na desktopu/notebooku */
.edj-flip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    justify-content: center;
    width: 100%;
    padding: 10px 0 20px;
}
@media only screen and (min-width: 600px) {
    .edj-flip-grid {
        grid-template-columns: repeat(2, minmax(0, 280px));
        gap: 22px;
    }
}
@media only screen and (min-width: 960px) {
    .edj-flip-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}

.hKARZA {
    display: flex;
    position: relative;
    padding: 6px 0px;
    width: 100%;
    justify-content: center;
}

/* 3D Flipper Mechanics */
.react-card-flip {
    perspective: 1000px;
    z-index: auto;
    width: 100%;
    max-width: 285px;
    height: 390px;
    cursor: pointer; /* otáčí se kliknutím kamkoli na kartu (hp-public.js) */
}
.react-card-flipper {
    height: 100%;
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
}
.react-card-front,
.react-card-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}
.react-card-front {
    position: relative;
    transform: rotateY(0deg);
    z-index: 2;
}
.react-card-back {
    position: absolute;
    transform: rotateY(-180deg);
    z-index: 1;
}
.react-card-flip.is-flipped .react-card-front {
    transform: rotateY(180deg);
    z-index: 1;
}
.react-card-flip.is-flipped .react-card-back {
    transform: rotateY(0deg);
    z-index: 2;
}

.bEgHOO {
    position: relative;
    height: 390px;
    width: 100%;
    max-width: 285px;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 34px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.bEgHOO h1,
.bEgHOO h2 {
    margin: 0;
}

/* Theme 1: Dark Card with 1px Gradient Border (.hBuQNY > .gNAXt) */
.hBuQNY {
    box-sizing: border-box;
    background: linear-gradient(90deg, #70E577 0%, #35B1DD 120%);
    border-radius: 8px;
    padding: 1px;
    display: block;
    height: 390px;
    width: 100%;
    max-width: 285px;
}
.hBuQNY > .bEgHOO {
    height: 388px;
    width: 100%;
    max-width: 283px;
    min-width: 0;
    border-radius: 7px;
}
.gNAXt {
    background-color: #191919;
}
.gNAXt h1 {
    color: #FFFFFF;
}
.gNAXt h2 {
    background: linear-gradient(75deg, #70E577 20%, #35B1DD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gNAXt p {
    color: #BCBCBC;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}
.gNAXt p > b {
    color: #FFFFFF;
}

/* Theme 2: Green-Cyan Gradient Card (.bQbzin) */
.bQbzin {
    background: linear-gradient(60deg, #70E577 50%, #35B1DD 140%);
}
.bQbzin h2 {
    color: #000000;
}
.bQbzin p {
    color: #000000;
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
}

/* Theme 3: Crisp White Card (.fOHVhp) */
.fOHVhp {
    background: #FFFFFF;
}
.fOHVhp h2 {
    color: #000000;
}
.fOHVhp p {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.dcZGuA {
    font-style: normal;
    font-weight: 700;
    font-size: 46px;
    line-height: 46px;
    text-align: center;
    color: #01ED5F;
    margin-bottom: 4px !important;
}
.bQbzin .dcZGuA {
    color: #000000;
}
.jhUPNC {
    font-weight: 700;
    font-size: 26px;
    line-height: 28px;
    text-align: center;
    color: #000000;
}
.cfYupl {
    font-size: 16px;
    line-height: 22px;
    align-items: center;
    text-align: center;
    color: #000000;
}
.gkxFrW {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.kGckrH {
    font-size: 13px;
    line-height: 17px;
    border: 1px solid #B8CFD5;
    padding: 3px 10px;
    border-radius: 13px;
    color: #505D61;
    font-weight: 600;
}
.gNAXt .kGckrH {
    color: #B8CFD5;
}

.iTTGBo,
.jhOZmQ {
    background: none;
    border: none;
    padding: 4px 10px;
    font: inherit;
    cursor: pointer;
    color: #FFFFFF;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 500;
    position: relative;
}
.fKdxsY {
    background: none;
    border: none;
    padding: 4px 10px;
    font: inherit;
    cursor: pointer;
    color: #000000;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 600;
    position: relative;
}

.hxoEao {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-grow: 1;
    justify-content: space-between;
    width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
}
.iuUxZb {
    display: flex;
    width: 110px;
    height: 110px;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(1, 237, 95, 0.12);
    border: 1px solid rgba(1, 237, 95, 0.35);
    color: #01ED5F;
    font-size: 42px;
    margin-bottom: 10px;
}
.fOHVhp .iuUxZb,
.bQbzin .iuUxZb {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
    color: #000000;
}
.fPuJXm {
    font-size: 15px;
    line-height: 21px;
    text-align: center;
    color: #000000;
    font-weight: 600;
    padding-bottom: 10px;
}
/* Globální „strong, b { color: #fff }" by na bílé a zelené kartě udělal text neviditelný */
.fPuJXm b,
.fPuJXm strong {
    color: inherit;
}
.dlLFOG,
.iFsEfm {
    font-size: 15px;
    line-height: 21px;
    text-align: center;
    color: #FFFFFF;
    font-weight: 600;
    padding-bottom: 10px;
}

/* ================= 5. PageSectionThreeColumnSplit (.ibFxMN / .fzlwrn / .UygQR / .ezKvHE) ================= */
.ibFxMN {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 1140px;
    justify-content: space-between;
    gap: 32px;
    margin: 30px 0;
}
@media only screen and (min-width: 960px) {
    .ibFxMN {
        flex-direction: row;
        align-items: flex-start;
    }
}

.fzlwrn {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
}
@media only screen and (min-width: 960px) {
    .fzlwrn {
        width: 32%;
    }
}

.UygQR {
    font-size: 22px;
    font-weight: 700;
    line-height: 31px;
    border-left: 1px solid #01ED5F;
    color: #FFFFFF;
    padding-left: 20px;
    padding-right: 10px;
    text-align: left;
    align-self: flex-start;
    margin-bottom: 14px;
}
@media only screen and (min-width: 960px) {
    .UygQR {
        font-size: 25px;
    }
}

.ezKvHE {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #BCBCBC;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 21px;
}
.ezKvHE strong {
    color: #FFFFFF;
}

/* ================= 6. PageSectionCollapsibleList (.cRTop / .ilA-Dax / .iBJglI / .aiDNI) ================= */
.cRTop {
    text-align: center;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.3132px;
    margin-top: 10px;
    margin-bottom: 36px;
    font-weight: 700;
    color: #FFFFFF;
}
@media only screen and (min-width: 960px) {
    .cRTop {
        font-size: 45px;
        line-height: 54px;
    }
}

.ilA-Dax {
    display: flex;
    width: 100%;
    background: #000000;
    flex-direction: column;
    padding-top: 22px;
    padding-bottom: 22px;
    box-sizing: border-box;
    border-bottom: 1px solid #393939;
}
.ilA-Dax:last-child {
    border-bottom: none;
}

.iBJglI {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 16px;
    user-select: none;
}
.iBJglI svg {
    display: inline-block;
    width: 22px;
    height: 22px;
    stroke: #FFFFFF;
    fill: #FFFFFF;
    flex-shrink: 0;
    transition: transform 0.25s ease, fill 0.25s ease;
}
.iBJglI:hover svg {
    fill: #01ED5F;
    stroke: #01ED5F;
}
@media only screen and (min-width: 960px) {
    .iBJglI svg {
        width: 26px;
        height: 26px;
    }
}

.aiDNI {
    color: #FFFFFF;
    border-left: #01ED5F solid 1px;
    padding-left: 16px;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    transition: color 0.2s ease;
}
.iBJglI:hover .aiDNI {
    color: #01ED5F;
}
@media only screen and (min-width: 960px) {
    .aiDNI {
        font-size: 24px;
        line-height: 31px;
    }
}

.edj-collapse-body {
    display: none;
    padding: 18px 16px 6px 17px;
    color: #BCBCBC;
    font-size: 16px;
    line-height: 26px;
}
.ilA-Dax.is-open .edj-collapse-body {
    display: block;
    animation: accFade 0.22s ease;
}
.edj-collapse-body p {
    margin-bottom: 12px;
}
.edj-collapse-body ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 10px;
}
.edj-collapse-body li {
    margin-bottom: 6px;
}
.edj-collapse-body a {
    color: #01ED5F;
    text-decoration: underline;
}

/* ================= 7. PageSectionImageCarousel (Hardware Carousel) ================= */
.edj-hw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1080px;
    margin: 10px auto 36px;
}
.edj-hw-card {
    background: #191919;
    border: 1px solid #393939;
    border-radius: 10px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.edj-hw-card:hover {
    transform: translateY(-4px);
    border-color: #01ED5F;
}
.edj-hw-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(1, 237, 95, 0.1);
    border: 1px solid rgba(1, 237, 95, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #01ED5F;
    margin-bottom: 14px;
}
.edj-hw-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 6px;
}
.edj-hw-card__sub {
    font-size: 13px;
    color: #B8CFD5;
    line-height: 20px;
}

/* ================= 8. PageSectionGreenCalloutBox (.eCLEjG) ================= */
.eCLEjG {
    display: flex;
    flex-direction: row;
    position: relative;
    background: linear-gradient(45deg, #70E577 50%, #35B1DD);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    padding: 44px 72px 38px;
    box-sizing: border-box;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 1140px;
}
@media only screen and (max-width: 959px) {
    .eCLEjG {
        border-radius: 8px;
        padding: 28px 24px;
    }
}
.eCLEjG h1,
.eCLEjG h2.edj-callout-title {
    color: #000000;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.49px;
    margin: 0 0 12px;
    font-weight: 700;
}
@media only screen and (max-width: 959px) {
    .eCLEjG h1,
    .eCLEjG h2.edj-callout-title {
        font-size: 29px;
        line-height: 35px;
    }
}
.eCLEjG p {
    color: #054a3f;
    font-size: 16px;
    line-height: 26px;
    margin: 0 0 10px;
    font-weight: 500;
}
.eCLEjG p a {
    color: #000000;
    font-weight: 700;
    text-decoration: underline;
}
.kVJdnL {
    max-width: 580px;
    display: flex;
    flex-direction: column;
}
@media only screen and (max-width: 959px) {
    .kVJdnL {
        width: 100%;
    }
}
.iktWWA {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
@media only screen and (max-width: 959px) {
    .iktWWA {
        width: 100%;
        align-items: flex-start;
    }
}

/* ================= APP SHOWCASE (.appshow) ================= */
.appshow {
    position: relative;
    margin-top: clamp(.75rem, 1.5vw, 1.5rem);
    border-radius: 10px;
    width: 100%;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, .95),
        0 0 85px -10px rgba(1, 237, 95, .28);
}
.appshow .app {
    font-size: 13.5px;
    border: 1px solid #393939;
}
.appshow .app__body { min-height: auto; }
@media (min-width: 1100px) { .appshow .app { font-size: 14px; } }
@media (max-width: 720px) {
    .appshow--hide-mobile { display: none; }
}

.kpi__ic { font-size: 1.5rem; color: #01ED5F; display: block; margin-bottom: .55rem; }

/* ================= PROOF BAR ================= */
.proofbar { border-block: 1px solid #393939; background: #111111; width: 100%; }
.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 #393939; }
.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: #01ED5F; flex-shrink: 0; }
.proofbar__t { font-weight: 700; font-size: var(--fs-base); }
.proofbar__v { font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.proofbar__k { font-family: var(--f-mono); font-size: .62rem; letter-spacing: var(--tr-label); text-transform: uppercase; color: #979797; 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 #393939; }
}

/* ================= JOBS / WORKFLOW ================= */
.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: 'Inter', sans-serif; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #02bf6d; margin-bottom: .6rem; }
.job__title { font-size: clamp(1.85rem, 3.6vw, 2.75rem); font-weight: 400; margin-bottom: .9rem; }
.job__lead { color: #BCBCBC; font-size: 16px; line-height: 26px; 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: 15px; color: #BCBCBC; }
.job__list i { color: #01ED5F; margin-top: .15rem; }
.job__save {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: 14px; font-weight: 600; color: #FFFFFF;
    padding: .65rem 1.1rem; background: rgba(1, 237, 95, 0.1);
    border: 1px solid rgba(1, 237, 95, 0.45); border-radius: 2.5rem;
}
.job__save i { color: #01ED5F; font-size: 1.1rem; }
.job__save b { color: #01ED5F; font-family: var(--f-mono); }
@media (max-width: 880px) {
    .job { grid-template-columns: 1fr; }
    .job--flip .job__media { order: 0; }
}

/* ================= PRICING (Engine DJ #191919 + Gradient Borders) ================= */
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; width: 100%; }
.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 28px;
    background: #191919;
    border: 1px solid #393939;
    border-radius: 10px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.price-card--featured {
    background:
        linear-gradient(#191919, #191919) padding-box,
        linear-gradient(90deg, #70E577 0%, #35B1DD 120%) border-box;
    border: 2px solid transparent;
    box-shadow: 0 24px 60px rgba(1, 237, 95, 0.18);
}
.price-card:hover {
    transform: translateY(-5px);
    border-color: #01ED5F;
}
.price-card__ribbon {
    position: absolute;
    top: -13px;
    left: 28px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 2.5rem;
    background: linear-gradient(45deg, #70E577 50%, #35B1DD);
    color: #000000;
}
.price-card__name {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    border-left: 2px solid #01ED5F;
    padding-left: 14px;
    margin-bottom: .5rem;
}
.price-card__name span {
    background: linear-gradient(10deg, #70E577 20%, #35B1DD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.price-card__tagline { color: #B8CFD5; font-size: 14px; line-height: 21px; min-height: 2.8em; margin-bottom: 1.3rem; }
.price-card__price { display: flex; align-items: baseline; gap: .35rem; font-family: 'Inter', sans-serif; margin-bottom: .2rem; }
.price-card__amount { font-size: 44px; font-weight: 700; letter-spacing: -.03em; color: #FFFFFF; }
.price-card__per { font-size: 14px; color: #979797; }
.price-card__alt { font-size: 12px; color: #02bf6d; min-height: 1.2em; margin-bottom: 1.5rem; font-family: var(--f-mono); }
.price-card__cta { margin-bottom: 1.5rem; }
.price-card__features { display: grid; gap: .7rem; }
.price-card__features li { display: flex; align-items: flex-start; gap: .65rem; font-size: 14px; color: #BCBCBC; line-height: 21px; }
.price-card__features i { color: #01ED5F; margin-top: .12rem; font-size: .95rem; }
.price-amt[data-period-hide] { display: none; }
.pricing__note { text-align: center; margin-top: 1.75rem; font-size: 14px; color: #979797; }
.pricing__note i { color: #01ED5F; }

@media (max-width: 940px) {
    .pricing__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* ================= COMPARISON TABLE ================= */
.compare {
    margin-top: 3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #393939;
    border-radius: 10px;
    background: #191919;
    width: 100%;
}
.compare table { width: 100%; border-collapse: collapse; min-width: 500px; }
@media (max-width: 640px) {
    .compare th,
    .compare td { padding: .7rem .55rem; font-size: .8rem; }
    .compare th:first-child,
    .compare td:first-child {
        width: 45%;
        padding-left: .8rem;
        position: sticky;
        left: 0;
        z-index: 1;
        background: #191919;
        box-shadow: 1px 0 0 #393939;
    }
    .compare thead th:first-child { background: #111111; }
}
.compare th,
.compare td {
    padding: .95rem 1.15rem;
    text-align: center;
    border-bottom: 1px solid #2b2b2b;
    font-size: 14px;
    vertical-align: middle;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare th:first-child,
.compare td:first-child {
    text-align: left;
    color: #FFFFFF;
    font-weight: 500;
    width: 46%;
}
.compare td:first-child { cursor: help; }
.compare__tip {
    margin-left: .45rem;
    font-size: 1.1em;
    color: #979797;
    opacity: .75;
    vertical-align: middle;
    transition: color .15s, opacity .15s;
}
.compare td:first-child:hover .compare__tip { color: #01ED5F; opacity: 1; }
.cmp-tip {
    position: fixed;
    z-index: 9999;
    max-width: 340px;
    padding: .65rem .8rem;
    background: #111111;
    border: 1px solid #01ED5F;
    border-radius: 8px;
    font-size: .92rem;
    line-height: 1.45;
    font-weight: 400;
    color: #FFFFFF;
    text-align: left;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .85);
    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); }
.compare thead th {
    position: sticky;
    top: 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background: #111111;
    padding-block: 1.15rem;
    border-bottom: 1px solid #393939;
    vertical-align: bottom;
}
.compare thead th span {
    display: block;
    margin-top: .4rem;
    font-family: var(--f-mono);
    font-size: 15px;
    color: #FFFFFF;
    font-weight: 600;
}
.compare tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .015); }
.compare tbody tr:hover td { background: rgba(255, 255, 255, .04); }
.compare .yes {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(1, 237, 95, 0.14); color: #01ED5F; font-size: .85rem;
}
.compare .no { color: #666666; opacity: .65; }
.compare .lim {
    display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    background: rgba(53, 177, 221, .14); color: #35B1DD;
    font-size: 12px; font-family: var(--f-mono);
}
.compare__f { color: #01ED5F !important; position: relative; }
.compare thead .compare__f {
    background: linear-gradient(180deg, rgba(1, 237, 95, 0.14), transparent);
    border-bottom-color: #01ED5F;
    box-shadow: inset 1px 0 0 rgba(1, 237, 95, 0.4), inset -1px 0 0 rgba(1, 237, 95, 0.4);
}
.compare thead .compare__f::before {
    content: "PRO CHOICE";
    display: block;
    margin: 0 auto .4rem;
    width: max-content;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #000000;
    background: #01ED5F;
    padding: 3px 9px;
    border-radius: 999px;
}
.compare tbody .compare__f {
    background: rgba(1, 237, 95, 0.06) !important;
    box-shadow: inset 1px 0 0 rgba(1, 237, 95, 0.35), inset -1px 0 0 rgba(1, 237, 95, 0.35);
}

/* ============== 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: #FFFFFF;
    background: #191919; border: 1px solid #01ED5F;
    border-radius: 10px; box-shadow: var(--sh-lg);
}
.tmodal::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }
.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: 999px;
    background: transparent; color: #979797; font-size: 1.6rem; line-height: 1; cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.tmodal__x:hover { color: #FFFFFF; background: #262626; }
.tmodal__title { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; margin: .7rem 0 .35rem; }
.tmodal__lead { color: #BCBCBC; font-size: 14px; line-height: 1.55; margin: 0 0 1.25rem; }
.tmodal__lead b { color: #01ED5F; }
.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: 14px; color: #BCBCBC; font-weight: 500; }
.tmodal__field > span i { color: #01ED5F; font-style: normal; }
.tmodal__field > span em { color: #979797; font-style: normal; font-size: 12px; }
.tmodal input, .tmodal textarea {
    width: 100%; font: inherit; color: #FFFFFF;
    background: #111111; border: 1px solid #393939; border-radius: 8px;
    padding: .62rem .8rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tmodal input:focus, .tmodal textarea:focus { outline: none; border-color: #01ED5F; 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: #111111; border: 1px solid #393939; border-radius: 8px;
    font-size: 12px; line-height: 1.5; color: #979797;
}
.tmodal__nda strong { display: block; color: #BCBCBC; margin-bottom: .35rem; font-size: 13px; }
.tmodal__check {
    display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.25rem;
    font-size: 14px; color: #BCBCBC; line-height: 1.5; cursor: pointer;
}
.tmodal__check input { width: 18px; height: 18px; margin-top: .12rem; flex-shrink: 0; accent-color: #01ED5F; }
.tmodal__check i { color: #01ED5F; font-style: normal; }
.tmodal__rcnote { margin: 0 0 1.1rem; font-size: 12px; color: #666666; line-height: 1.45; }
.tmodal__rcnote a { color: #979797; text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }
.tmodal__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.tmodal__err { margin: 1rem 0 0; color: var(--bad); font-size: 14px; }
.tmodal__success { text-align: center; padding: 1.5rem .5rem; }
.tmodal__success i { font-size: 3rem; color: #01ED5F; }
.tmodal__success h3 { font-family: 'Inter', sans-serif; font-size: 20px; margin: .8rem 0 .4rem; }
.tmodal__success p { color: #BCBCBC; font-size: 14px; line-height: 1.55; margin: 0 0 1.25rem; }
@media (max-width: 560px) {
    .tmodal__row { grid-template-columns: 1fr; }
    .tmodal__actions .btn { width: 100%; justify-content: center; }
}

/* ================= PROSE / LEGAL / SUBPAGES ================= */
.prose { padding-top: var(--page-top); padding-bottom: 5rem; }
/* Odsazení dává jen .prose, horní padding sekce by mezeru zdvojil */
.section:has(> .prose) { padding-top: 0; }
.prose__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .6rem; }
.prose__meta { color: #979797; font-size: 14px; margin-bottom: 2.5rem; font-family: var(--f-mono); }
.prose__body h2 { font-size: 24px; margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid #444444; }
.prose__body h3 { font-size: 18px; margin: 1.75rem 0 .6rem; }
.prose__body p, .prose__body li { color: #BCBCBC; line-height: 1.7; font-size: 16px; }
.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: #01ED5F; }
.prose__body strong { color: #FFFFFF; }

/* ── „Z praxe" - Engine DJ callout bubble (funkce.php) ───── */
.practice {
    position: relative;
    margin-top: 1.35rem;
    margin-left: 7px;
    padding: .95rem 1.15rem;
    background: #142b1d;
    border-left: 2px solid #01ED5F;
    border-radius: 8px;
    font-size: 14px;
    color: #BCBCBC;
    line-height: 1.6;
}
.practice__tag {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #01ED5F;
    white-space: nowrap;
}
.practice__tag i { font-size: 1.05em; }
.appcards .card { display: flex; flex-direction: column; }
.appcards .card .practice { margin-top: auto; }
@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; }
}

/* ── STUDIO badge & Feature Filter Pills (funkce.php + index.php) ───── */
.dtag--stu {
    color: #35B1DD !important;
    background: rgba(53, 177, 221, 0.14) !important;
    border-color: rgba(53, 177, 221, 0.48) !important;
}

.edj-feat-filter {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
    padding: 6px;
    background: #141619;
    border: 1px solid #2e3238;
    border-radius: 999px;
}
.edj-feat-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #BCBCBC;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.18s ease;
    cursor: pointer;
}
.edj-feat-filter__btn span {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
.edj-feat-filter__btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.05);
}
.edj-feat-filter__btn.is-active {
    color: #000000;
    background: #01ED5F;
    border-color: #01ED5F;
    font-weight: 700;
}
.edj-feat-filter__btn.is-active span {
    background: rgba(0, 0, 0, 0.22);
    color: #000000;
}

/* ── HERO SEKCE NA CELOU OBRAZOVKU NOTEBOOKU (100vh) S VĚTŠÍMI PRVKY A MEZERAMI ── */
#hero {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero > .inBa-Dg {
    min-height: calc(100vh - 60px);
    padding-top: clamp(22px, 3vh, 42px);
    padding-bottom: clamp(26px, 3.6vh, 48px);
    justify-content: center;
}
#hero .gROwSK {
    gap: 0;
}
#hero .gROwSK h1 {
    font-size: clamp(38px, 3.8vw, 56px);
    line-height: 1.12;
    max-width: 1300px;
    margin-top: 0;
    margin-bottom: clamp(12px, 1.6vh, 20px);
    color: #FFFFFF;
    font-weight: 700;
}
#hero .gROwSK h2 {
    font-size: clamp(17px, 1.38vw, 22px);
    line-height: 1.38;
    max-width: 1340px;
    padding: 0 10px;
    margin-bottom: clamp(18px, 2.4vh, 28px);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.98), 0 2px 8px rgba(0, 0, 0, 0.95);
}
@media only screen and (min-width: 1180px) {
    /* Garantuje, že podtitul v Hero sekci zůstane na 1 řádku */
    #hero .gROwSK h2 {
        white-space: nowrap;
    }
}
#hero .gROwSK p {
    font-size: clamp(15.5px, 1.14vw, 18px);
    line-height: 1.62;
    max-width: 1180px;
    margin-top: 0;
    margin-bottom: clamp(18px, 2.4vh, 28px);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.98), 0 2px 10px rgba(0, 0, 0, 0.95);
}
#hero .edj-cta-row {
    margin-top: 4px;
    gap: 18px;
}
#hero .edj-cta-row .gjtWfw {
    padding: 15px 32px;
    font-size: 15.5px;
}

/* ── HERO NA TELEFONU: PRVNÍ OBRAZOVKA S TLAČÍTKY A MASKOTEM ─────
   Nadpis, podtitul, 3 zařízení a tlačítka jsou v obalu .edj-hero-first (tlačítka v HTML hned za
   zařízeními, dlouhý odstavec až za obalem). Od 40rem výš je obal průhledný a tlačítka se řadí
   za odstavec, takže desktop i tablet na výšku zůstávají beze změny (tablet na šířku má vlastní
   rozvržení níž). Do 40rem obal vyplní okno pod
   hlavičkou, podtitul je zkrácený (.edj-hero-sub--short) a tlačítka sednou k jeho
   spodnímu okraji - tam, kde stojí fixní maskot nad tlačítkem chatu (maskot.css: postava
   88 x 110 px 14 px od pravého okraje a 86 px od spodního, chat 60 px 30 px od okrajů).
   Pravý sloupec řádku tlačítek je pro maskota volný a maskot.js podle data-maskot-misto
   pozná, že tu postava může stát i mimo gesto. */
.edj-hero-first {
    display: contents;
}
#hero .edj-hero-first > .edj-cta-row {
    order: 1;
}
.edj-hero-sub--short {
    display: none;
}
@media only screen and (max-width: 40rem) {
    #hero > .inBa-Dg {
        padding-top: 20px;
    }
    #hero .edj-hero-first {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-height: calc(100vh - var(--nav-h) - 20px);
        min-height: calc(100svh - var(--nav-h) - 20px);
    }
    /* volné místo nad nadpisem jen do 7 % výšky okna, zbytek jde mezi text a tlačítka */
    #hero .edj-hero-first::before {
        content: "";
        flex: 1 1 0;
        max-height: 7vh;
        max-height: 7svh;
    }
    #hero .edj-hero-first > h1 {
        font-size: clamp(34px, 10.4vw, 44px);
    }
    #hero .edj-hero-first > h2 {
        font-size: 17px;
        line-height: 1.45;
        margin-bottom: 0;
    }
    .edj-hero-sub--full {
        display: none;
    }
    .edj-hero-sub--short {
        display: inline;
    }
    /* tlačítka 60-166 px nad spodkem okna (proti chatu a trupu maskota), řádek sahá
       do 200 px, aby text nad ním nikdy nebyl vedle postavy */
    #hero .edj-hero-first > .edj-cta-row {
        order: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        align-self: stretch;
        gap: 12px;
        margin-top: auto;
        padding: 34px 88px 60px 0;
        box-sizing: border-box;
    }
    #hero .edj-cta-row .jLiwnk {
        display: block;
        margin: 0;
    }
    #hero .edj-cta-row .gjtWfw {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 14px 12px;
        font-size: 15px;
    }
    #hero .edj-cta-row .eZSelS {
        white-space: normal;
    }
    /* 3 zařízení mezi textem a tlačítky. Výška kompozice je asi 0,45 x šířka + 92 px, takže šířka
       podle výšky okna (626 px = hlavička, nadpis, 6 řádků textu a řádek tlačítek): na 740 px vysokém
       okně asi 250 px, od zhruba 780 px plná šířka */
    #hero .edj-hero-first > .edj-multi-device {
        flex: 0 0 auto;
        max-width: min(100%, max(200px, (100vh - 626px) * 2.22));
        max-width: min(100%, max(200px, (100svh - 626px) * 2.22));
        margin: 10px auto 0;
    }
}

/* ── HERO NA TABLETU NA ŠÍŘKU: PRVNÍ OBRAZOVKA S TLAČÍTKY A MASKOTEM ─────
   Jen dotykový displej na šířku aspoň 900 x 500 px (hover: none, pointer: coarse), počítač s myší
   a telefon na šířku zůstávají beze změny.
   Obal vyplní okno pod hlavičkou: nahoře nadpis, vlevo 3 zařízení, vpravo zkrácený text a pod ním
   obě tlačítka pod sebou u spodního okraje okna. Vpravo vedle nich stojí fixní maskot (maskot.css:
   robot 120 x 150 px 18 px od pravého a 92 px od spodního okraje, chat 60 px 30 px od okrajů);
   obsah končí 32 px od okraje, takže řádek tlačítek nechává vpravo 116 px volných a sahá 252 px
   nad spodek okna, aby text nad ním nikdy nebyl vedle robota. */
@media only screen and (min-width: 900px) and (min-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #hero > .inBa-Dg {
        padding-top: 20px;
    }
    #hero .edj-hero-first {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "title title"
            "dev text"
            "dev cta";
        column-gap: clamp(24px, 3vw, 48px);
        width: 100%;
        min-height: calc(100vh - var(--nav-h) - 20px);
        min-height: calc(100svh - var(--nav-h) - 20px);
    }
    #hero .edj-hero-first > h1 {
        grid-area: title;
        margin-bottom: 8px;
    }
    #hero .edj-hero-first > h2 {
        grid-area: text;
        align-self: end;
        max-width: none;
        margin: 0;
        padding: 0;
        font-size: clamp(17px, 1.5vw, 20px);
        line-height: 1.5;
        text-align: left;
        white-space: normal;
    }
    .edj-hero-sub--full {
        display: none;
    }
    .edj-hero-sub--short {
        display: inline;
    }
    #hero .edj-hero-first > .edj-multi-device {
        grid-area: dev;
        align-self: center;
        max-width: 100%;
        margin: 0;
    }
    #hero .edj-hero-first > .edj-cta-row {
        grid-area: cta;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
        margin: 0;
        padding: 58px 116px 80px 0;
    }
    #hero .edj-cta-row .jLiwnk {
        display: block;
        margin: 0;
    }
    #hero .edj-cta-row .gjtWfw {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 15px 16px;
    }
}

/* ── VIZUÁLNÍ KOMPOZICE 3 ZAŘÍZENÍ (Mobil vlevo + Stolní monitor uprostřed + Tablet vpravo) ───── */
.edj-multi-device {
    width: 100%;
    max-width: min(940px, 78vw);
    margin: clamp(8px, 1.2vh, 16px) auto clamp(24px, 3vh, 36px);
    padding-top: 26px;
    padding-bottom: 24px;
    position: relative;
}
@media only screen and (min-width: 960px) and (max-height: 880px) {
    /* Na nižších displejích notebooků zachová 100vh vyplnění obrazovky i větší prvky */
    .edj-multi-device {
        max-width: min(820px, 66vw);
        margin-top: 6px;
        margin-bottom: 22px;
        padding-top: 22px;
        padding-bottom: 20px;
    }
}

.edj-multi-device__scene {
    position: relative;
    width: 100%;
    padding-bottom: 6px;
}
/* Jemná podlahová záře a stín pod všemi 3 zařízeními v barvách Engine DJ */
.edj-multi-device__scene::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: -4px;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(1, 237, 95, 0.22) 0%, rgba(53, 177, 221, 0.14) 36%, rgba(0, 0, 0, 0.9) 68%, transparent 82%);
    filter: blur(7px);
    pointer-events: none;
    z-index: 0;
}

.edj-hw {
    margin: 0;
    position: relative;
}

/* Decentní štítek zařízení v designu Engine DJ */
.edj-hw__tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #E2E8F0;
    background: rgba(12, 14, 18, 0.92);
    border: 1px solid rgba(1, 237, 95, 0.38);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
    z-index: 6;
}
.edj-hw__tag i {
    color: #01ED5F;
    font-size: 11.5px;
}

/* Odlesk skla displeje (diagonální studiový lesk) */
.edj-hw__glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 38%, transparent 38.5%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* ── 2. STOLNÍ MONITOR UPROSTŘED (hlavní velká obrazovka se stojanem) ── */
.edj-hw--pc {
    width: 68%;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.edj-hw--pc .edj-hw__tag {
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
}
.edj-hw__monitor {
    width: 100%;
    border-radius: 14px;
    box-shadow:
        0 0 0 1.5px rgba(112, 229, 119, 0.28),
        0 24px 64px rgba(0, 0, 0, 0.92),
        0 0 40px rgba(1, 237, 95, 0.1);
    overflow: hidden;
    background: #12151c;
}
.edj-hw__bezel {
    position: relative;
    background: #0b0d11;
    padding: 9px 9px 7px;
    border-radius: 14px 14px 0 0;
}
.edj-hw--pc .edj-hw__cam {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #334155;
    box-shadow: 0 0 0 1px #1e293b;
    z-index: 3;
}
.edj-hw--pc .edj-hw__screen {
    position: relative;
    aspect-ratio: 16 / 9.2;
    background: #07080a;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.edj-hw--pc .edj-hw__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
/* Spodní kovová brada monitoru s LED diodami a mřížkou reproduktoru (jako na vzoru) */
.edj-hw__chin {
    position: relative;
    height: 22px;
    background: linear-gradient(180deg, #272d38 0%, #1a1e26 55%, #12151b 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.edj-hw__chin-leds {
    position: absolute;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.edj-hw__chin-leds i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #01ED5F;
    box-shadow: 0 0 6px #01ED5F;
    display: block;
}
.edj-hw__chin-leds i:last-child {
    background: #475569;
    box-shadow: none;
}
.edj-hw__chin-grille {
    width: 38px;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.22) 0px,
        rgba(255, 255, 255, 0.22) 1.5px,
        transparent 1.5px,
        transparent 4px
    );
    opacity: 0.75;
}
/* Kovový stojan monitoru (krk + rozšířená základna) */
.edj-hw__stand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
}
.edj-hw__neck {
    width: 17%;
    height: 26px;
    background: linear-gradient(180deg, #11141a 0%, #262c37 48%, #1b2029 100%);
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.edj-hw__foot {
    width: 28%;
    height: 7px;
    background: linear-gradient(90deg, #1a1f28 0%, #384152 50%, #1a1f28 100%);
    border-radius: 8px 8px 3px 3px;
    border-top: 1px solid rgba(112, 229, 119, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.95);
}

/* ── 1. MOBILNÍ TELEFON VLEVO (překrývá levý dolní roh monitoru) ── */
.edj-hw--phone {
    position: absolute;
    left: 3.5%;
    bottom: 6px;
    width: 16.5%;
    min-width: 108px;
    max-width: 148px;
    z-index: 3;
}
.edj-hw--phone .edj-hw__tag {
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    border-color: rgba(53, 177, 221, 0.48);
}
.edj-hw--phone .edj-hw__body {
    position: relative;
    background: #0b0d12;
    border: 5px solid #181c24;
    border-radius: 20px;
    box-shadow:
        0 0 0 1.5px rgba(53, 177, 221, 0.42),
        12px 16px 42px rgba(0, 0, 0, 0.95),
        0 0 24px rgba(53, 177, 221, 0.16);
    overflow: hidden;
}
.edj-hw--phone .edj-hw__island {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 28%;
    height: 4px;
    border-radius: 999px;
    background: #050608;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 4;
}
.edj-hw--phone .edj-hw__screen {
    position: relative;
    aspect-ratio: 9 / 17.2;
    background: #07080a;
    overflow: hidden;
}
.edj-hw--phone .edj-hw__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.edj-hw--phone .edj-hw__homebar {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    z-index: 4;
}

/* ── 3. TABLET VPRAVO (překrývá pravý dolní roh monitoru) ── */
.edj-hw--tablet {
    position: absolute;
    right: 1%;
    bottom: 6px;
    width: 37%;
    z-index: 3;
}
.edj-hw--tablet .edj-hw__tag {
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
}
.edj-hw--tablet .edj-hw__body {
    position: relative;
    background: #0b0d12;
    border: 7px solid #181c24;
    border-radius: 14px;
    box-shadow:
        0 0 0 1.5px rgba(1, 237, 95, 0.42),
        -12px 16px 44px rgba(0, 0, 0, 0.95),
        0 0 26px rgba(1, 237, 95, 0.14);
    overflow: hidden;
}
.edj-hw--tablet .edj-hw__cam {
    position: absolute;
    top: -4.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #334155;
    z-index: 3;
}
.edj-hw--tablet .edj-hw__screen {
    position: relative;
    aspect-ratio: 16 / 10.6;
    background: #07080a;
    overflow: hidden;
}
.edj-hw--tablet .edj-hw__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Mobilní viewport (<680px): zachová kompozici Mobil vlevo + Monitor uprostřed + Tablet vpravo */
@media only screen and (max-width: 680px) {
    .edj-multi-device {
        max-width: 100%;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .edj-hw__tag {
        font-size: 9px;
        padding: 2px 7px;
    }
    .edj-hw--pc {
        width: 78%;
    }
    .edj-hw__bezel {
        padding: 5px 5px 4px;
    }
    .edj-hw__chin {
        height: 14px;
    }
    .edj-hw__neck {
        height: 16px;
    }
    .edj-hw__foot {
        height: 5px;
    }
    .edj-hw--phone {
        left: 0;
        width: 20%;
        min-width: 68px;
        bottom: 4px;
    }
    .edj-hw--phone .edj-hw__body {
        border-width: 3.5px;
        border-radius: 13px;
    }
    .edj-hw--tablet {
        right: 0;
        width: 42%;
        bottom: 4px;
    }
    .edj-hw--tablet .edj-hw__body {
        border-width: 4.5px;
        border-radius: 9px;
    }
}

/* ── 8 HLAVNÍCH PILÍŘŮ DJANALYZERU (Engine DJ Signature Grid) ───── */
.edj-pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
}
@media only screen and (min-width: 680px) {
    .edj-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (min-width: 1080px) {
    .edj-pillars-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.edj-pillar-card {
    background: #181a1f;
    border: 1px solid #2e333d;
    border-radius: 12px;
    padding: 22px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.edj-pillar-card:hover {
    transform: translateY(-3px);
    border-color: #01ED5F;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.65), 0 0 20px rgba(1, 237, 95, 0.12);
}

.edj-pillar-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.edj-pillar-card__num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #01ED5F;
    background: rgba(1, 237, 95, 0.12);
    border: 1px solid rgba(1, 237, 95, 0.32);
    padding: 3px 9px;
    border-radius: 999px;
}
.edj-pillar-card__icon {
    font-size: 22px;
    color: #35B1DD;
}
.edj-pillar-card h3.UygQR {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 10px;
    padding-left: 12px;
    border-left: 2px solid #01ED5F;
    color: #FFFFFF;
}
.edj-pillar-card p {
    font-size: 13.5px;
    line-height: 1.55;
    color: #BCBCBC;
    margin: 0;
}
.edj-pillar-card p strong {
    color: #FFFFFF;
}

.edj-pillars-more {
    margin-top: 26px;
    padding: 18px 24px;
    width: 100%;
    background: linear-gradient(90deg, rgba(1, 237, 95, 0.08) 0%, rgba(53, 177, 221, 0.08) 100%);
    border: 1px solid rgba(1, 237, 95, 0.32);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
}
.edj-pillars-more > span {
    font-size: 14.5px;
    color: #E2E8F0;
    font-weight: 500;
    max-width: 740px;
}


/* ================= 3B. Ukázky reálné aplikace (.edj-showcase / .edj-shot / .edj-lightbox) =================
   Screenshot z open.djanalyzer.com v rámu + karty (nebo záložky), které ho přepínají.
   Pozadí rámu je pozadí aplikace (#0c0c0c), takže snímky jiného poměru stran
   v něm splynou bez viditelného okraje. Bez JS zůstane vidět první snímek. */

/* Split sekce s ukázkou: užší text, širší vizuál (snímky potřebují šířku kvůli čitelnosti) */
.edj-split > .edj-split__visual {
    max-width: 720px;
}
@media only screen and (min-width: 960px) {
    .edj-split {
        gap: clamp(2.25rem, 4vw, 4rem);
    }
    .edj-split > .eStiRo {
        width: 42%;
        flex: 0 1 auto;
    }
    /* Užší textový sloupec - menší nadpis, ať se nezalamuje do pěti řádků */
    .edj-split > .eStiRo h2 {
        font-size: clamp(34px, 2.9vw, 40px);
        line-height: 1.2;
    }
    .edj-split > .edj-split__visual {
        width: 58%;
        flex: 0 1 auto;
        margin: 0;
    }
}
@media only screen and (max-width: 959px) {
    /* Na mobilu vždy nejdřív nadpis a text, pak ukázka */
    .edj-split--visual-first > .eStiRo {
        order: -1;
    }
    .edj-split > .edj-split__visual {
        margin-top: 0;
    }
}

.edj-showcase {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

/* Rám screenshotu s horní lištou (název pohledu v aplikaci) */
.edj-shot {
    margin: 0;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #0c0c0c;
    border: 1px solid #2a2e35;
    box-shadow: 0 28px 70px -22px rgba(0, 0, 0, 0.9);
}
.edj-shot__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 8px 0 14px;
    background: linear-gradient(180deg, #17191d 0%, #121316 100%);
    border-bottom: 1px solid #23262c;
}
.edj-shot__dots {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}
.edj-shot__dots i {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2f333a;
}
.edj-shot__title {
    flex: 1 1 auto;
    min-width: 0;
    color: #d6dae0;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edj-shot__real {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #01ED5F;
    background: rgba(1, 237, 95, 0.08);
    border: 1px solid rgba(1, 237, 95, 0.28);
}
.edj-shot__zoom {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 7px;
    border: 1px solid #2f333a;
    background: #1a1c20;
    color: #cfd3da;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.edj-shot__zoom:hover,
.edj-shot__zoom:focus-visible {
    color: #01ED5F;
    border-color: rgba(1, 237, 95, 0.5);
}
.edj-shot__stage {
    position: relative;
    aspect-ratio: var(--shot-ratio, 16 / 9);
    background: #0c0c0c;
    overflow: hidden;
    cursor: zoom-in;
}
.edj-shot__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.edj-shot__panel.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s;
}
.edj-shot__panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
/* Výřez, který má vyplnit celý rám (ořízne se spodek, ne obsah zleva) */
.edj-shot__panel--cover img {
    object-fit: cover;
    object-position: left top;
}
/* Snímek s barevným pozadím (fullscreen přehrávač s coverem) - vyplnit rám, ořezat okraje symetricky */
.edj-shot__panel--center img {
    object-position: center;
}
/* Výřez useknutý vpravo uprostřed řádků - jemné dotmavení okraje místo ostrého řezu */
.edj-shot__panel--fade img {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0.15) 100%);
    mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0.15) 100%);
}
@media only screen and (max-width: 480px) {
    .edj-shot__real {
        display: none;
    }
}

/* Karty pod screenshotem - přepínají, kterou funkci rám ukazuje */
.edj-showcase__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
/* Lichý počet karet: poslední vezme celý řádek, ať nezůstane osamocená. */
.edj-showcase__cards > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
@media only screen and (max-width: 520px) {
    .edj-showcase__cards {
        grid-template-columns: 1fr;
    }
}
.edj-feature-card {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    border-radius: 10px;
    background: #15171b;
    border: 1px solid #2a2e35;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.edj-feature-card:hover {
    border-color: rgba(1, 237, 95, 0.45);
    background-color: #191c21;
    transform: translateY(-1px);
}
.edj-feature-card.is-active {
    border-color: rgba(1, 237, 95, 0.7);
    background: linear-gradient(180deg, rgba(1, 237, 95, 0.08) 0%, rgba(1, 237, 95, 0.02) 100%), #15171b;
}
.edj-feature-card.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #70E577 0%, #35B1DD 100%);
}
.edj-feature-card:focus-visible {
    outline: 2px solid #35B1DD;
    outline-offset: 2px;
}
.edj-feature-card__ic {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #01ED5F;
    background: rgba(1, 237, 95, 0.10);
    border: 1px solid rgba(1, 237, 95, 0.28);
}
.edj-showcase__cards > :nth-child(even) .edj-feature-card__ic,
.edj-platform__cards > :nth-child(even) .edj-feature-card__ic {
    color: #35B1DD;
    background: rgba(53, 177, 221, 0.10);
    border-color: rgba(53, 177, 221, 0.28);
}
.edj-feature-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.edj-feature-card__body strong {
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}
.edj-feature-card__body span {
    color: #A9AEB6;
    font-size: 13px;
    line-height: 1.45;
}

/* CTA přes celou šířku bloku ukázky */
.edj-showcase__cta {
    display: block;
    width: 100%;
    margin: 4px 0 0;
}
.edj-showcase__cta .ipIDV {
    display: flex;
    width: 100%;
    padding: 17px 24px;
}
/* Na úzkém displeji se dlouhý popisek zalomí místo useknutí třemi tečkami */
.edj-showcase__cta .eZSelS {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
}

/* Záložky nad screenshotem (zelený panel sekce přípravy playlistů) */
.edj-co-visual {
    width: 100%;
    max-width: 620px;
}
.edj-seg {
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.edj-seg__btn {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d6dae0;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.edj-seg__btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.07);
}
.edj-seg__btn.is-active {
    color: #FFFFFF;
    background: #0c0c0c;
    box-shadow: inset 0 0 0 1px rgba(1, 237, 95, 0.6);
}
.edj-seg__btn:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 1px;
}
.edj-seg__num {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #01ED5F;
    background: rgba(1, 237, 95, 0.16);
}
.edj-seg__btn.is-active .edj-seg__num {
    color: #000000;
    background: #01ED5F;
}
.edj-showcase--on-green .edj-shot {
    border-color: rgba(0, 0, 0, 0.55);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65);
}
@media only screen and (max-width: 420px) {
    .edj-seg__btn {
        font-size: 12.5px;
        padding: 9px 8px;
        gap: 6px;
    }
}

/* Lightbox: celý snímek v plné velikosti */
.edj-lightbox {
    /* Modální <dialog> centruje prohlížeč přes margin: auto; globální reset
       (* { margin: 0 } v hp-base.css) ho jinak přišpendlí vlevo nahoru. */
    margin: auto;
    width: auto;
    max-width: min(1600px, 96vw);
    max-height: 94vh;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #2a2e35;
    background: #0c0c0c;
    color: #FFFFFF;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9);
}
.edj-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.86);
}
.edj-lightbox__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    background: #121316;
    border-bottom: 1px solid #23262c;
}
.edj-lightbox__cap {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #d6dae0;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edj-lightbox__x {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #2f333a;
    background: #1a1c20;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.edj-lightbox__x:hover,
.edj-lightbox__x:focus-visible {
    border-color: rgba(1, 237, 95, 0.55);
    color: #01ED5F;
}
.edj-lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(1600px, 96vw);
    max-height: calc(94vh - 56px);
    margin: 0 auto;
    cursor: zoom-out;
}

/* ================= 6B. Multiplatformní sekce - tablet + mobil v rámečcích (.edj-platform / .edj-duo) ================= */
.edj-platform {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    padding: 22px;
    border-radius: 14px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    text-align: left;
}
.edj-platform__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid #2b2b2b;
}
.edj-platform__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #01ED5F;
    font-size: 14px;
    font-weight: 700;
}
/* Kompozice znovu používá rámečky zařízení z hero sekce (.edj-hw), jen s vlastním umístěním */
.edj-duo {
    position: relative;
    padding-bottom: 40px;
}
.edj-duo .edj-hw--tablet {
    position: relative;
    right: auto;
    bottom: auto;
    width: 84%;
    z-index: 1;
}
.edj-duo .edj-hw--tablet .edj-hw__screen {
    aspect-ratio: 1024 / 575;
}
.edj-duo .edj-hw--phone {
    position: absolute;
    left: auto;
    right: 0;
    bottom: 14px;
    width: 27%;
    min-width: 0;
    max-width: 150px;
    z-index: 3;
}
.edj-duo .edj-hw--tablet .edj-hw__tag {
    bottom: -30px;
    left: 0;
    transform: none;
}
.edj-duo .edj-hw--phone .edj-hw__tag {
    bottom: -30px;
}
.edj-platform__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.edj-platform__card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    background: #191919;
    border: 1px solid #393939;
}
@media only screen and (max-width: 520px) {
    .edj-platform {
        padding: 16px;
    }
    .edj-platform__cards {
        grid-template-columns: 1fr;
    }
}

/* ── Propojení se službami (integrace.php + pruh log na homepage) ───── */
/* Loga jsou oficiální soubory výrobců; filtr je sjednotí do bílé. Spotify se
   podle jeho pravidel neupravuje (edj-logo--original, oficiální bílá verze). */
.edj-logo {
    display: block;
    width: auto;
    max-width: 100%;
    filter: brightness(0) invert(1);
    opacity: .82;
    transition: opacity var(--t-fast, .15s);
}
.edj-logo--original { filter: none; opacity: 1; }
.edj-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px 44px;
    margin: 28px auto 0;
    max-width: 980px;
}
.edj-logos__item { display: inline-flex; align-items: center; padding: 6px 2px; }
.edj-logos__item:hover .edj-logo,
.edj-logos__item:focus-visible .edj-logo { opacity: 1; }
.edj-logos--home { margin: 6px auto 30px; }
.edj-logos-head {
    width: 100%;
    margin: 4px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #BCBCBC;
}
.edj-logos-link {
    display: block;
    margin: -14px auto 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #01ED5F;
}
.edj-logos-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.edj-int {
    width: 100%;
    margin: 0 0 24px;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    scroll-margin-top: calc(var(--nav-h, 70px) + 16px);
}
.edj-int__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-bottom: 1rem;
}
.edj-int__head .dtag { margin-left: auto; }
.edj-int__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #FFFFFF;
}
.edj-int__intro {
    margin: 0 0 1.4rem;
    max-width: 880px;
    font-size: 16px;
    line-height: 1.65;
    color: #D7D7D7;
}
.edj-int__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.4rem 2.4rem;
}
.edj-int__sub {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .7rem;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #01ED5F;
}
.edj-int__steps,
.edj-int__notes {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 15px;
    line-height: 1.6;
    color: #BCBCBC;
}
.edj-int__steps li,
.edj-int__notes li { margin-bottom: .55rem; }
.edj-int__steps li::marker { color: #01ED5F; font-weight: 700; }
.edj-int__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    font-size: 14px;
    font-weight: 600;
    color: #01ED5F;
}
.edj-int__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.edj-legal-note {
    width: 100%;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #8A8A8A;
}
@media (max-width: 799px) {
    .edj-int__grid { grid-template-columns: 1fr; }
    .edj-int__head .dtag { margin-left: 0; }
    .edj-logos { gap: 18px 30px; }
}