/* ═══════════════════════════════════════════════════════════════════════════
   70, COINY A IKONY ROZHRANÍ (mimo obchod)
   ───────────────────────────────────────────────────────────────────────────
   Oblast: components/daily-win-popup.php, includes/components/tokyo-sticky.php,
   pages/account.php.

   PROČ vůbec: tyhle tři kusy si přinesly z původní šablony stejné návyky,
   podle kterých je pozná i laik. Emoji místo ikon (💰 🎰 🎁 🏅 🎉), gradientní
   text v nadpisu, rozostřené sklo pod modálem, záře kolem tlačítek a šest
   různých barev pro šest odznaků. Tenhle partial to nepřebarvuje, ale mění
   stavbu: mince dostala jeden pevný znak, výčty se ze štítků v řadě staly
   výpisem řádků, a v peněžence i v přehledu vede číslo, ne obrázek.

   PROČ TENHLE SOUBOR NEJEDE PŘES --kt-*: karty.css si v :root sráží --kt-green
   zpátky na Kickovou #00e701 (a s ní --kt-live, --kt-warn, --kt-coin) a
   core/skin.css, který se načítá po něm, vrací jen plochy, linky, text, stín
   a rádiusy — akcentní barvy v jeho :root nejsou. Most --kt-* je tedy u barev
   děravý a všechno, co přes něj jelo, renderovalo ve staré paletě. Proto se tu
   sahá rovnou na systémové tokeny z variables.css (--go, --coin, --panel,
   --rail, --paper, --r-card…). Nový odstín tu nevzniká.

   Sazba se řídí pravidlem „co je údaj, to je strojopis": popisky, štítky a
   stavy jedou var(--font-code) drobnými verzálkami, čísla var(--font-num)
   s tabulkovými číslicemi, nadpisy a částky var(--font-display), čtený text
   var(--font-text). Předlohou je karta nabídky (.nb-terms v nabidka.css).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1) SPOLEČNÁ IKONOVÁ TŘÍDA
   Jedna třída pro všechna inline SVG v této oblasti. Velikost je v em, aby
   ikona rostla s textem, do kterého je vsazená, a barvu bere z currentColor,
   takže se nikde neurčuje barva ikony zvlášť. Tím je vyloučené, že by ikona
   zavedla druhý akcent.
   ───────────────────────────────────────────────────────────────────────── */
.jl-ico {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.2em;   /* optické zarovnání na účaří textu */
    fill: none;
    stroke: currentColor;
    color: inherit;
    overflow: visible;
}
.jl-ico--sm { width: 1em;   height: 1em; }
.jl-ico--lg { width: 1.5em; height: 1.5em; }

/* Ikona ve čtvercovém poli: plocha vyvýšeného tónu, tenká linka, malý rádius.
   Žádné podbarvení akcentem, aby se ikona nechovala jako druhé tlačítko. */
.jl-ico-box {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--r-btn);
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--go);
}
.jl-ico-box .jl-ico { width: 20px; height: 20px; vertical-align: middle; }


/* ═══════════════════════════════════════════════════════════════════════════
   2) DENNÍ POPUP (components/daily-win-popup.php)
   ───────────────────────────────────────────────────────────────────────────
   Bylo: vycentrovaný sloupec, verzálkový nadpis přes tři řádky s gradientním
   slovem, tři pilulky s emoji, obří gradientní tlačítko, pod tím poznámka.
   Čte se to jako plakát a je to přesně ta skladba, co má původní web.

   Je: dva sloupce. Vlevo sdělení a jediná akce, vpravo výpis cen jako řádky,
   kde každá cena má i větu, k čemu je. Nadpis je věta v běžné sazbě, ne
   verzálky. Zarovnání vlevo, protože jde o oznámení, ne o billboard.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pozadí: plná tmavá plocha. Rozostření se ruší, protože je to nejviditelnější
   znak původní šablony a na slabších strojích stojí výkon. */
.dwp-overlay.dwp2-ov {
    background: var(--bg-overlay) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Karta: neprůhledná, tenká linka, 10px. Bez mlhy, bez záře, bez měřítkové
   animace při otevření (zbyde jen prolnutí průhlednosti na overlayi). */
.dwp-box.dwp2 {
    width: min(880px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    padding: 0 !important;
    text-align: left !important;
    border-radius: var(--r-card) !important;
    border: 1px solid var(--rail) !important;
    background: var(--panel) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.dwp2-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;   /* pevné dva sloupce, obsah je známý */
    align-items: stretch;
}

/* ── Levý sloupec ── */
.dwp2-lead {
    padding: 30px 30px 26px;
    min-width: 0;
}

/* Štítek: obdélníček s linkou, ne pilulka s pulzující tečkou. Tečka blikala
   pořád dokola a nic neoznamovala, takže je pryč. */
.dwp2-tag {
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 14px;
    border-radius: var(--r-btn);
    border: 1px solid var(--rail-2);
    background: var(--raise);
    font-family: var(--font-code);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.dwp2-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;   /* verzálky byly hlavní znak původního nadpisu */
    color: var(--paper);
    margin: 0 0 12px;
}

.dwp2-sub {
    font-family: var(--font-text);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--paper-2);
    margin: 0 0 22px;
    max-width: 42ch;
}

/* Tlačítko: plná zelená, tmavý text, žádný přechod ani záře. */
.dwp2-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border: 1px solid var(--go);
    border-radius: var(--r-btn);
    background: var(--go);
    background-image: none;
    box-shadow: none;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none;
    color: var(--go-ink);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dwp2-cta:hover {
    background: var(--go-hi);
    border-color: var(--go-hi);
    color: var(--go-ink);
}
.dwp2-cta .jl-ico { stroke-width: 2; }

.dwp2-note {
    font-family: var(--font-text);
    font-size: 0.84rem;
    color: var(--paper-3);
    margin: 14px 0 0;
    line-height: 1.5;
}
.dwp2-reg {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--go);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dwp2-reg:hover { color: var(--go-hi); }

/* ── Pravý sloupec: výpis cen ──
   Řádky jsou oddělené jednou linkou, ne rámečkem kolem každé položky. Blok má
   vlastní plochu o stupeň výš, aby se dvojice sloupců vizuálně rozdělila. */
.dwp2-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--rail);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dwp2-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--rail);
}
.dwp2-row:last-child { border-bottom: none; }
/* První řádek uhne zavíracímu tlačítku v pravém horním rohu karty. */
.dwp2-row:first-child { padding-right: 60px; }

.dwp2-row-ico {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-btn);
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--go);
}
.dwp2-row-ico .jl-ico { width: 19px; height: 19px; vertical-align: middle; }

.dwp2-row-txt { display: block; min-width: 0; }
.dwp2-row-txt b {
    display: block;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--paper);
    line-height: 1.25;
}
.dwp2-row-txt span {
    display: block;
    font-family: var(--font-text);
    font-size: 0.8rem;
    color: var(--paper-3);
    line-height: 1.45;
    margin-top: 3px;
}

/* Zavření: čtvereček s linkou a SVG křížkem. Původní kolečko se při najetí
   otáčelo o 90°, což je efekt bez funkce. */
.dwp-close.dwp2-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-btn) !important;
    border: 1px solid var(--rail) !important;
    background: var(--raise) !important;
    color: var(--paper-3) !important;
    font-size: 0 !important;   /* zbytek po textovém × */
    transition: border-color 0.15s ease, color 0.15s ease !important;
    transform: none !important;
    z-index: 2;
}
.dwp-close.dwp2-close:hover {
    border-color: var(--rail-2) !important;
    color: var(--paper) !important;
    background: var(--raise) !important;
    transform: none !important;
}
.dwp2-close .jl-ico { width: 16px; height: 16px; vertical-align: middle; }

/* Mobil: sloupce pod sebe, výpis se z bočního panelu stane spodní částí karty,
   takže dělicí linka přeskočí z levé strany nahoru. */
@media (max-width: 1000px) {
    .dwp2-grid { grid-template-columns: 1fr; }
    .dwp2-list {
        border-left: none;
        border-top: 1px solid var(--rail);
    }
}
@media (max-width: 640px) {
    .dwp-overlay.dwp2-ov { padding: 12px; }
    .dwp2-lead { padding: 24px 18px 20px; }
    .dwp2-row  { padding: 14px 18px; gap: 11px; }
    .dwp2-cta  { width: 100%; justify-content: center; }   /* palec dosáhne všude */
    .dwp2-sub  { margin-bottom: 18px; }
    .dwp2-row-ico { width: 30px; height: 30px; }
    .dwp2-row-ico .jl-ico { width: 17px; height: 17px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3) SPODNÍ PROMO LIŠTA (includes/components/tokyo-sticky.php)
   ───────────────────────────────────────────────────────────────────────────
   Bylo: logo, vedle něj název a pod ním drobným písmem částka, pak zářící
   gradientní tlačítko a kolečko s ×. Lišta prodávala značku, ne nabídku.

   Je: lišta rozdělená svislými linkami na pole jako řádek tabulky. První pole
   je částka velkým písmem, druhé je značka s ověřovacím štítkem, třetí akce.
   Pořadí čtení je tedy kolik → za co → od koho.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Lišta plave NAD stránkou, tak musí být vidět, že nad ní plave. Dřív měla
   plochu var(--bg), tedy přesně barvu stránky, a box-shadow: none — na
   screenshotu i v provozu vypadala jako díra proříznutá obsahem, ne jako
   vrstva. Bere si proto plochu hlavičky a patičky (--head, tmavší než
   stránka) a černý stín směrem vzhůru. Stín je v oboru standard.

   Selektory s ID a !important odsud odešly spolu s vrstvami, které je
   vyvolávaly (karty.css a core/shared.css lištu přemalovávaly). */
/* Deska, ne pruh od okraje k okraji: drží šířku obsahové lišty a visí kousek
   nad dolní hranou, zrcadlově k plovoucí liště nahoře. Skrytý stav musí ujet
   o výšku PLUS tu mezeru, jinak by nahoře zůstal viditelný proužek. Pravidlo
   .rtb.rtb-in ze shared.css má stejnou specificitu a tenhle soubor se načítá
   později, proto tu zobrazený stav stojí ještě jednou. */
.rtb.rtb2 {
    left: 0; right: 0;
    bottom: 12px;
    width: min(var(--rail-w), calc(100% - 32px));
    margin-inline: auto;
    background: var(--head);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-card);
    box-shadow: var(--lift-hi);
    overflow: hidden;
    transform: translateY(calc(100% + 14px));
}
.rtb.rtb2.rtb-in { transform: translateY(0); }
@media (max-width: 560px) {
    .rtb.rtb2 { bottom: 8px; width: calc(100% - 16px); }
}

.rtb2 .rtb2-inner {
    max-width: var(--rail-w);
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    gap: 0;                       /* pole odděluje linka, ne mezera */
    padding: 0 16px calc(0px + env(safe-area-inset-bottom, 0px));
}

.rtb2 .rtb2-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-left: 1px solid var(--rail);
    min-width: 0;
}
.rtb2 .rtb2-cell:first-child { border-left: none; padding-left: 4px; }

/* Nabídka: částka je hlavní údaj, popisek k ní je vedle, ne pod ní. */
.rtb2 .rtb2-offer { gap: 10px; }
.rtb2 .rtb2-amount {
    font-family: var(--font-num);
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--paper);
    white-space: nowrap;
}
.rtb2 .rtb2-label {
    font-family: var(--font-text);
    font-size: 0.82rem;
    color: var(--paper-2);
    line-height: 1.3;
}

/* Značka: štítek s ověřovací ikonou nad logem, logo bez záře. */
.rtb2 .rtb2-brand { gap: 12px; }
.rtb2 .rtb2-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: var(--r-btn);
    border: 1px solid var(--rail-2);
    background: var(--raise);
    font-family: var(--font-code);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-3);
    white-space: nowrap;
}
.rtb2 .rtb2-tag .jl-ico { width: 13px; height: 13px; color: var(--go); }
.rtb2 .rtb2-logo {
    height: 24px;
    width: auto;
    display: block;
    /* zelený svit pod logem odešel ve zdrojovém pravidle (.rtb-logo) */
}

/* Akce: plná zelená, tmavý text, bez přechodu a bez posunu šipky. */
.rtb2 .rtb2-cta {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--go);
    border-radius: var(--r-btn);
    background: var(--go);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--go-ink);
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.rtb2 .rtb2-cta:hover { background: var(--go-hi); }
.rtb2 .rtb2-cta .jl-ico { stroke-width: 2; }

.rtb2 .rtb2-close {
    align-self: center;
    margin-left: 10px;
    /* Jediné ovládání, které trvalou lištu odstraní, musí jít trefit palcem:
       cíl 42 px, dřív 30. */
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-btn);
    border: 1px solid var(--rail);
    background: var(--raise);
    color: var(--paper-3);
    font-size: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.rtb2 .rtb2-close:hover {
    border-color: var(--rail-2);
    color: var(--paper);
}
.rtb2 .rtb2-close .jl-ico { width: 15px; height: 15px; vertical-align: middle; }

/* Tablet: značka je doplňková informace, logo v liště nikam neposouvá
   rozhodnutí, takže celé pole odchází a zůstane částka a akce. */
@media (max-width: 1000px) {
    .rtb2 .rtb2-brand { display: none; }
    .rtb2 .rtb2-cell  { padding: 9px 14px; }
}
@media (max-width: 640px) {
    .rtb2 .rtb2-inner {
        flex-wrap: wrap;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        align-items: center;
    }
    .rtb2 .rtb2-cell {
        border-left: none;
        padding: 0;
        flex: 1 1 auto;
    }
    .rtb2 .rtb2-offer { flex-direction: column; align-items: flex-start; gap: 1px; }
    .rtb2 .rtb2-amount { font-size: 1.1rem; }
    .rtb2 .rtb2-label  { font-size: 0.72rem; }

    /* Částka, akce i křížek zůstávají na JEDNOM řádku. Dřív šlo CTA na vlastní
       řádek přes celou šířku a lišta si brala 100 px z 844 px displeje, tedy
       osminu obrazovky, natrvalo a na každé stránce. Tlačítko má pořád 44 px
       na výšku, což je cíl pro palec podle WCAG 2.5.5; šířku přes celý displej
       k tomu nepotřebuje. */
    .rtb2 .rtb2-cta {
        flex: 0 0 auto;
        margin: 0 0 0 auto;
        min-height: 44px;
        padding: 10px 15px;
        font-size: 0.82rem;
    }
    .rtb2 .rtb2-close { margin-left: 6px; }
}

/* Nejužší displeje: na jeden řádek se to nevejde, tak CTA sjede pod částku. */
@media (max-width: 360px) {
    .rtb2 .rtb2-inner { flex-wrap: wrap; }
    .rtb2 .rtb2-cta {
        order: 3;
        flex: 1 0 100%;
        margin: 8px 0 0;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4) ÚČET (pages/account.php)
   ───────────────────────────────────────────────────────────────────────────
   Stránka si drží vlastní sadu proměnných --a-*, které opisují barvy původního
   webu (průhledné bílé linky, dva akcenty, 16px rádiusy). Nepřepisujeme každé
   pravidlo zvlášť, jen přemapujeme kořen na tokeny Kicku, a pak doladíme to,
   co je stavbou, ne barvou.

   Selektory jsou zdvojené (.acct-page.acct-page), protože stránka má vlastní
   <style> uvnitř <body>, tedy až za tímto souborem. Zdvojení zvedne váhu bez
   plošného !important.
   ═══════════════════════════════════════════════════════════════════════════ */
.acct-page.acct-page {
    --a-cyan:      var(--go);
    --a-purple:    var(--go-deep);
    --a-ink:       var(--paper);
    --a-dim:       var(--paper-2);
    --a-mut:       var(--paper-3);
    --a-line:      var(--rail);
    --a-line-soft: var(--rail);
    --a-panel:     var(--panel);
    --a-raise:     var(--raise);
    --a-field:     var(--bg);
    font-family: var(--font-text);

    /* nastaveni.php má na dvou tlačítkách (Vypnout 2FA, Smazat účet nevratně)
       inline style s var(--kt-warn). Inline styl z CSS nepřebijeme, ale
       proměnnou, kterou si čte, ano — a ta dnes vede na Kickovou oranžovou
       #ff6b35, což je pátá barva v paletě. Destruktivní akce patří na --error. */
    --kt-warn: var(--error);

}

/* Rádius i stín na jednu hodnotu. Stránka střídala 16 / 14 / 12 / 11 / 9 px
   a karty neměly stín žádný — referenční řádková karta nabídky (.bp-row,
   core/shared.css) má --r-card a černý --lift, takže ho mají i tyhle. */
.acct-page.acct-page .acct-head,
.acct-page.acct-page .acct-level,
.acct-page.acct-page .acct-secret,
.acct-page.acct-page .acct-ref,
.acct-page.acct-page .acct-stats,
.acct-page.acct-page .acct-profile,
.acct-page.acct-page .acct-card,
.acct-page.acct-page .acct-gate-card,
.acct-page.acct-page .acct-loading,
.acct-page.acct-page .acct-empty {
    border-radius: var(--r-card);
    box-shadow: var(--lift);
}

/* ── 4z) Brána pro odhlášeného ──
   Sdílí ji /ucet i /nastaveni. Dokud styly ležely v <style> uvnitř
   pages/account.php, byla brána na /nastaveni bez plochy, bez odsazení
   a bez rádiusu, protože ten soubor se na téhle route vůbec nenačte. */
.acct-page .acct-gate {
    display: flex;
    justify-content: center;
    padding: 40px 0 56px;
}
/* Zarovnání vlevo, ne na střed: vystředěný sloupec uprostřed prázdného pásu
   vypadal jako chybová hláška. Karta je teď panel s hlavičkou jako každý jiný
   blok účtu, jen menší. */
.acct-page .acct-gate-card {
    width: 100%;
    max-width: 460px;
    padding: 26px 26px 24px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--rail);
}
/* Oční linka. Brána nemá žádné záhlaví stránky, takže první řádek musí sám
   říct, v jakém stavu člověk je — a stav je údaj, tedy strojopis. */
.acct-page .acct-gate-card::before {
    content: 'Pouze pro přihlášené';
    display: block;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rail);
    font-family: var(--font-code);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--paper-3);
}
/* Znak v poli s linkou, jako ikony v hlavičkách ostatních bloků účtu. */
.acct-page .acct-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
}
.acct-page .acct-gate-icon svg { width: 22px; height: 22px; }
.acct-page .acct-gate-card h2 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(21px, 2.6vw, 26px);
    font-weight: 800;
    line-height: 1.12;
    text-transform: none;
    letter-spacing: var(--track-tight);
    color: var(--paper);
}
.acct-page .acct-gate-card p {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--paper-2);
}
/* Jediné plné zelené tlačítko na bráně — je to ta jedna akce, kvůli které
   brána existuje. Přes celou šířku karty, aby se dalo trefit i palcem. */
.acct-page .acct-gate-card .btn {
    width: 100%;
    min-height: 48px;
    border-radius: var(--r-btn);
}

/* ── 4a) Peněženka ──
   Tři pole vedle sebe oddělená linkou: znak mince, údaj, akce. Dřív to byl
   sloupec, kde tlačítko viselo pod číslem a celá karta se lepila k pravému
   okraji hlavičky. */
.acct-page.acct-page .acct-wallet {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0;
    padding: 0;
    min-width: 300px;
    text-align: left;
    border-radius: var(--r-card);
    background: var(--bg);
    border: 1px solid var(--rail);
    overflow: hidden;
}
.acct-page.acct-page .acct-wallet-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    align-self: stretch;
    color: var(--coin);
    background: var(--raise);
    border-right: 1px solid var(--rail);
}
.acct-page.acct-page .acct-wallet-mark .jl-ico { width: 24px; height: 24px; vertical-align: middle; }

.acct-page.acct-page .acct-wallet-fig {
    display: block;
    padding: 12px 16px;
    min-width: 0;
}
/* Číslo je první čtené, popisek je pod ním drobný. Opačně než dřív.
   Zůstatek v JL Coinech nese --coin: ta barva má na webu jediný úkol
   a je to právě tenhle (DESIGN-JLCASINO.md, kapitola 2). Zelená zůstává
   vedle stojícímu tlačítku „Denní claim". */
.acct-page.acct-page .acct-coins-val {
    display: block;
    font-family: var(--font-num);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--coin);
}
.acct-page.acct-page .acct-coins-label {
    display: block;
    margin-top: 2px;
    font-family: var(--font-code);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-3);
}

/* Claim je vlastní pole u pravé hrany, ne třetí řádek uvnitř údaje. */
.acct-page.acct-page .acct-claim-btn {
    margin: 0;
    width: auto;
    align-self: stretch;
    padding: 0 20px;
    border: none;
    border-left: 1px solid var(--rail);
    border-radius: 0;
    background: var(--go);
    background-image: none;
    box-shadow: none;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--go-ink);
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.acct-page.acct-page .acct-claim-btn:hover:not(:disabled) {
    background: var(--go-hi);
    transform: none;
    box-shadow: none;
}
.acct-page.acct-page .acct-claim-btn:disabled {
    background: var(--raise);
    color: var(--paper-3);
    opacity: 1;
    box-shadow: none;
}

/* ── 4b) Rychlý přehled ──
   Hodnota vlevo, ikona doprava jako tichá značka. Ikona už nemá podbarvené
   zelené pole, jinak by čtyři segmenty vypadaly jako čtyři tlačítka.

   Mřížka místo flexu, a dělí ji vlasová linka z mezery 1 px nad barvou pozadí
   (stejný idiom jako .nb-terms v nabidka.css): buňka nemá jediný border, takže
   se nikde nezdvojí a nemusí se dopočítávat, která je první v řádku. Auto-fit
   navíc drží segment na rozumné šířce i tehdy, když jsou při vypnutých coinech
   a obchodu na pásu jen dva — dřív si každý vzal půl obrazovky. */
.acct-page.acct-page .acct-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--rail);
    border: 1px solid var(--rail);
    overflow: hidden;
}
.acct-page.acct-page .acct-stat {
    background: var(--panel);
    border-left: none;
    padding: 18px 20px;
}
.acct-page.acct-page .acct-stat:hover { background: var(--panel-hi); }

.acct-page.acct-page .acct-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.acct-page.acct-page .acct-stat-ico {
    width: 30px;
    height: 30px;
    border-radius: var(--r-btn);
    background: transparent;
    border: 1px solid var(--rail);
    color: var(--paper-3);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.acct-page.acct-page .acct-stat-ico .jl-ico { width: 17px; height: 17px; vertical-align: middle; }
.acct-page.acct-page .acct-stat:hover .acct-stat-ico {
    color: var(--go);
    border-color: var(--rail-2);
}
.acct-page.acct-page .acct-stat-num {
    font-family: var(--font-num);
    font-size: 1.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--paper);
}
/* Segment, který jen odkazuje jinam, nemá co počítat. Samotná šipka v místě
   čísla se ale četla jako prázdná, rozbitá buňka, takže tam místo ní stojí
   slovo — a stejně jako číslo vedle je to strojopis. Šipka není akce, takže
   není zelená; zůstává vpravo u značky segmentu. */
.acct-page.acct-page .acct-stat-go {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper-2);
}
.acct-page.acct-page .acct-stat-go .jl-ico { display: none; }
.acct-page.acct-page .acct-stat-go::before { content: 'Otevřít'; }
.acct-page.acct-page .acct-stat-lbl {
    margin-top: 10px;
    font-family: var(--font-code);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--paper-3);
}

/* Upozorňovací počty: linka místo záře. */
.acct-page.acct-page .acct-stat-badge {
    background: var(--go);
    color: var(--go-ink);
    border-radius: var(--r-btn);
    box-shadow: none;
}
.acct-page.acct-page .acct-head-badge {
    background: var(--raise);
    border: 1px solid var(--rail-2);
    color: var(--go);
    border-radius: var(--r-btn);
}
.acct-page.acct-page .acct-unread-dot {
    background: var(--go);
    color: var(--go-ink);
    border-radius: var(--r-btn);
    box-shadow: none;
}

/* ── 4c) Ikony v hlavičkách bloků ──
   Tajný kód, referral a odměna za level měly každá jiné podbarvení. Sjednoceno
   na jedno pole s linkou. */
.acct-page.acct-page .acct-secret-ico,
.acct-page.acct-page .acct-ref-ico,
.acct-page.acct-page .acct-gate-icon {
    border-radius: var(--r-btn);
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--paper-3);
}
.acct-page.acct-page .acct-lvl-reward-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--r-btn);
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--go);
    font-size: 0;               /* zbytek po emoji 🎁 */
}
.acct-page.acct-page .acct-lvl-reward-ico .jl-ico { width: 16px; height: 16px; vertical-align: middle; }

/* Odměna se počítá v coinech, takže její znak nese barvu mince. */
.acct-page.acct-page .acct-lvl-reward-ico { color: var(--coin); }

/* ── 4d) Coiny v referralu ──
   Znak mince těsně u čísla, aby se pole „Coinů z pozvání" poznalo i bez čtení
   popisku. Obě pole přehledu jsou zarovnaná vlevo, ne na střed. */
.acct-page.acct-page .acct-ref-stat {
    text-align: left;
    border-radius: var(--r-btn);
    background: var(--bg);
    border: 1px solid var(--rail);
}
.acct-page.acct-page .acct-ref-stat-num {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--paper);
    font-size: 1.4rem;
}
.acct-page.acct-page .acct-ref-stat-num--coin .jl-ico {
    width: 20px;
    height: 20px;
    color: var(--coin);
    vertical-align: middle;
}
.acct-page.acct-page .acct-ref-stat-lbl { color: var(--paper-3); }

/* ── 4e) Level a odznaky ──
   Rám levelu měl vnitřní zelený svit a barva celé sekce se měnila podle
   hodnosti. Odznaky navíc měly každý vlastní barvu, tedy šest odstínů v jedné
   řadě. Zůstává jedna zelená a rozdíl získáno/zamčeno nese linka a sytost. */
.acct-page.acct-page .acct-level { --lvl-accent: var(--go); }
/* Zelený pruh u levé hrany je zbytek po starém systému (rádius 0, hranu nese
   3px pruh). Nový systém drží kartu rádiusem a linkou, a hlavně: v téhle
   kartě už zelená jednou je — výplň pruhu postupu. Druhá by ten význam
   rozmělnila. */
.acct-page.acct-page .acct-level::before { display: none; }
.acct-page.acct-page .acct-lvl-badge {
    border-radius: var(--r-card);
    border: 1px solid var(--rail-2);
    background: var(--bg);
    box-shadow: none;
}
.acct-page.acct-page .acct-lvl-bar,
.acct-page.acct-page .acct-lvl-bar-fill { border-radius: var(--r-btn); }
.acct-page.acct-page .acct-lvl-chip { border-radius: var(--r-btn); }

.acct-page.acct-page .acct-lvl-badge-chip {
    border-radius: var(--r-btn);
    background: var(--bg);
    border: 1px solid var(--rail);
}
.acct-page.acct-page .acct-lvl-badge-chip.earned {
    border-color: var(--rail-2);
    background: var(--raise);
}
.acct-page.acct-page .acct-lvl-badge-ico {
    width: 32px;
    height: 32px;
    border-radius: var(--r-btn);
    background: transparent;
    border: 1px solid var(--rail);
    color: var(--paper-3);
    box-shadow: none;
    filter: none;
    font-size: 0;               /* zbytek po emoji odznaků */
}
.acct-page.acct-page .acct-lvl-badge-ico .jl-ico { width: 18px; height: 18px; vertical-align: middle; }
.acct-page.acct-page .acct-lvl-badge-chip.earned .acct-lvl-badge-ico {
    color: var(--go);
    border-color: var(--rail-2);
    box-shadow: none;
}
.acct-page.acct-page .acct-lvl-badge-chip.locked .acct-lvl-badge-ico {
    filter: none;               /* dřív šedý filtr, teď stačí tlumená barva */
    color: var(--paper-3);
    opacity: 0.55;
}
.acct-page.acct-page .acct-lvl-badge-chip.earned .acct-lvl-badge-lv { color: var(--go); }
/* Hodnost je nadpis karty, ne akce ani číslo — sází se písmem, ne barvou. */
.acct-page.acct-page .acct-lvl-rank {
    font-family: var(--font-display);
    letter-spacing: var(--track-tight);
    color: var(--paper);
}

/* ── 4f) Stavy objednávek ──
   Čtyři stavy měly čtyři barvy (oranžová, modrá, zelená, červená). Vedle sebe
   z toho byla duha. Základ je neutrální štítek, zelená značí jen dokončeno. */
.acct-page.acct-page .acct-badge {
    border-radius: var(--r-btn);
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--paper-2);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.68rem;
}
.acct-page.acct-page .acct-badge--completed {
    background: var(--raise);
    border-color: var(--rail-2);
    color: var(--go);
}
.acct-page.acct-page .acct-badge--cancelled {
    background: var(--raise);
    border-color: var(--rail);
    color: var(--paper-3);
}

/* Karty výher a objednávek: hover mění jen linku. */
.acct-page.acct-page .acct-card { transition: border-color 0.15s ease; }
.acct-page.acct-page .acct-card:hover { border-color: var(--rail-2); }
.acct-page.acct-page .acct-card-action {
    border-radius: var(--r-btn);
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--paper-2);
}
.acct-page.acct-page .acct-card-action:hover {
    border-color: var(--rail-2);
    background: var(--raise);
    color: var(--paper);
}

/* Pole formulářů: bez zeleného obrysu při zaostření, jen výraznější linka. */
.acct-page.acct-page .acct-secret-form input,
.acct-page.acct-page .acct-ref-input {
    border-radius: var(--r-btn);
    background: var(--bg);
    border: 1px solid var(--rail);
}
.acct-page.acct-page .acct-secret-form input:focus,
.acct-page.acct-page .acct-ref-input:focus {
    border-color: var(--go);
    box-shadow: none;
    outline: none;
}
.acct-page.acct-page .acct-secret-msg.ok  { color: var(--go); }
/* Chyba je chyba, ne varování: --warn vede přes karty.css na Kickovou oranžovou
   a byl by to pátý odstín na stránce. */
.acct-page.acct-page .acct-secret-msg.err { color: var(--error); }

/* ── 4g) PROFIL A ODZNAKY JAKO MŘÍŽKA ÚDAJŮ ──
   Profil byl seznam tří řádků s border-bottom na každém. Karta nabídky
   (.nb-terms) staví údaje jako mřížku s mezerou 1 px nad barvou linky, kde
   buňka nemá border vůbec. Účet mluví od téhle chvíle stejným jazykem, takže
   se „Uživatelské jméno / E-mail / Účet vytvořen" čte jako výpis parametrů. */
/* Flex, ne grid: mřížka s auto-fit by kvůli řádku akcí přes celou šířku
   nechala vedle posledního údaje prázdné buňky v barvě linky. Flex vytvoří
   jen tolik polí, kolik je údajů. */
.acct-page.acct-page .acct-profile {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding: 0;
    background: var(--rail);
    border: 1px solid var(--rail);
    overflow: hidden;
}
.acct-page.acct-page .acct-profile-row {
    display: block;
    flex: 1 1 190px;
    min-width: 0;
    padding: 13px 16px;
    background: var(--panel);
    border-bottom: none;
}
.acct-page.acct-page .acct-profile-lbl {
    display: block;
    font-family: var(--font-code);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--paper-3);
    white-space: nowrap;
}
.acct-page.acct-page .acct-profile-val {
    display: block;
    margin-top: 4px;
    font-family: var(--font-code);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: left;
    color: var(--paper);
}
/* Řádek akcí je poslední buňka mřížky, ne pruh pod ní — jinak by se mřížka
   po pravé straně nedovřela. */
.acct-page.acct-page .acct-profile-actions {
    flex: 1 1 100%;
    padding: 14px 16px;
    background: var(--panel);
}

/* ── 4h) SAZBA: CO JE ÚDAJ, TO JE STROJOPIS ──
   pages/account.php sází popisky i čísla bezpatkovým písmem, takže se sloupce
   nezarovnají a stránka se čte jako leták. Popisky jdou na var(--font-code)
   drobnými verzálkami, čísla na var(--font-num) s tabulkovými číslicemi —
   ty mají stejnou šířku, takže hodnoty pod sebou začínají na stejném místě. */
.acct-page.acct-page .acct-lvl-badge-lbl,
.acct-page.acct-page .acct-lvl-badges-head > span:first-child,
.acct-page.acct-page .acct-ref-stat-lbl,
.acct-page.acct-page .acct-clip-status,
.acct-page.acct-page .acct-badge {
    font-family: var(--font-code);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.acct-page.acct-page .acct-lvl-barmeta,
.acct-page.acct-page .acct-lvl-chip,
.acct-page.acct-page .acct-lvl-badge-lv,
.acct-page.acct-page .acct-clip-meta,
.acct-page.acct-page .acct-card-meta,
.acct-page.acct-page .acct-lvl-total,
.acct-page.acct-page .acct-lvl-badges-count {
    font-family: var(--font-code);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--paper-3);
}

/* Dvojice údajů pod pruhem postupu („630 / 1 000 XP" vlevo, „Do levelu 8 zbývá
   370 XP" vpravo) zlomí na úzkém displeji celý ŘÁDEK, ne jednotlivá slova.
   Strojopis je proti Inter Tight o poznání širší, takže se na 430 px oba
   údaje do jednoho řádku nevejdou; bez wrapu se lámaly uvnitř sebe a slovo
   „XP" zůstávalo osiřelé na vlastním řádku — u obou zároveň, takže druhý
   řádek vypadal jako „XP    XP". Se zalomením řádku spadne druhý údaj celý
   pod první a oba zůstanou celistvé.

   Jednotku drží u čísla nedělitelná mezera přímo v textu (renderLevel()
   v pages/account.php). CSS `white-space: nowrap` tu být nesmí: pod 360 px
   je druhý údaj širší než sloupec a přetekl by z karty ven. */
.acct-page.acct-page .acct-lvl-barmeta {
    flex-wrap: wrap;
    row-gap: 3px;
}
.acct-page.acct-page .acct-lvl-badge-num,
.acct-page.acct-page .acct-ref-stat-num,
.acct-page.acct-page .acct-lvl-total b,
.acct-page.acct-page .acct-lvl-chip b,
.acct-page.acct-page .acct-lvl-badges-count b {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.acct-page.acct-page .acct-lvl-badge-num { color: var(--paper); font-weight: 700; }
.acct-page.acct-page .acct-lvl-total b,
.acct-page.acct-page .acct-lvl-reward b { color: var(--paper); }
.acct-page.acct-page .acct-lvl-chip b { color: var(--paper); font-weight: 600; }

/* ── 4i) CO SI STRÁNKA DRŽÍ NAPEVNO ──
   pages/account.php má vlastní <style> uvnitř <body> s bílým textem, Kickovou
   zelenou v ohraničení a duhou stavů. Přes --a-* se to nespraví, protože ty
   hodnoty tam nestojí přes proměnnou. Zdvojený selektor to přebije bez
   plošného !important. Čistší by bylo ty deklarace ze stránky vyhodit, ale
   pages/account.php patří jinému okruhu. */
.acct-page.acct-page .acct-avatar {
    border: 1px solid rgba(var(--go-rgb), .3);
    background: var(--raise);
    color: var(--go);
    font-family: var(--font-display);
    border-radius: var(--r-btn);
}
/* core/base.css:206 dává h1–h6 verzálky. Na /nastaveni je nadpis věta, na
   /ucet křičel — dvě stránky jednoho okruhu sázely nadpis jinak. */
.acct-page.acct-page .acct-hello,
.acct-page.acct-page .acct-block-head h2 {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: var(--track-tight);
    color: var(--paper);
}
.acct-page.acct-page .acct-hello span { box-shadow: inset 0 -.1em 0 var(--go); }
.acct-page.acct-page .acct-block-head h2 span { color: var(--go); }
.acct-page.acct-page .acct-secret-head > div strong,
.acct-page.acct-page .acct-ref-head strong,
.acct-page.acct-page .acct-lvl-badge-nm,
.acct-page.acct-page .acct-card-title,
.acct-page.acct-page .acct-clip-title { color: var(--paper); }
.acct-page.acct-page .acct-secret-form input,
.acct-page.acct-page .acct-ref-input { color: var(--paper); }
.acct-page.acct-page .acct-secret-form input::placeholder,
.acct-page.acct-page .acct-ref-input::placeholder { color: var(--paper-3); }
.acct-page.acct-page .acct-card-action:hover { color: var(--paper); }
.acct-page.acct-page .acct-card-meta strong { color: var(--paper-2); }
/* Odznak levelu měl zelený rámeček 2 px a vnitřní svit — druhá zelená plocha
   vedle jediné akce na stránce. */
.acct-page.acct-page .acct-lvl-badge {
    border-width: 1px;
    box-shadow: none;
}
.acct-page.acct-page .acct-lvl-badge-chip.earned .acct-lvl-badge-ico { box-shadow: none; }
/* Stavy klipu a objednávky: neutrální štítek je základ, barvu nese jen
   výsledek. Duha #fdba74 / #93c5fd / #86efac / #fca5a5 odchází. */
.acct-page.acct-page .acct-clip-status {
    background: var(--raise);
    color: var(--paper-3);
    border-radius: var(--r-chip);
}
.acct-page.acct-page .acct-clip-status--approved {
    background: rgba(var(--go-rgb), .1);
    color: var(--go);
}
.acct-page.acct-page .acct-clip-status--rejected {
    background: var(--raise);
    color: var(--error);
}
.acct-page.acct-page .acct-clip-reason { color: var(--error); }
.acct-page.acct-page .acct-badge--pending,
.acct-page.acct-page .acct-badge--processing {
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--paper-2);
}
.acct-page.acct-page .acct-clip-likes { color: var(--live); }
.acct-page.acct-page .acct-head-badge {
    background: var(--raise);
    border: 1px solid var(--rail-2);
    color: var(--go);
    font-family: var(--font-code);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* Mobil. Peněženka se z pásu stane sloupcem přes celou šířku hlavičky, claim
   je pod údajem jako plné tlačítko. Přehled jde na dva sloupce, pak na jeden,
   aby žádný segment nezůstal sám na řádku. */
@media (max-width: 1000px) {
    /* Přehled se láme sám (auto-fit), tady jde jen o peněženku. */
    .acct-page.acct-page .acct-wallet { min-width: 0; }
}
@media (max-width: 640px) {
    .acct-page.acct-page .acct-wallet {
        grid-template-columns: auto 1fr;
        width: 100%;
    }
    .acct-page.acct-page .acct-claim-btn {
        grid-column: 1 / -1;
        padding: 13px 16px;
        border-left: none;
        border-top: 1px solid var(--rail);
        font-size: 0.82rem;
    }
    .acct-page.acct-page .acct-stats { grid-template-columns: 1fr; }
    /* :not() je tu proto, že segment bez čísla nese obě třídy naráz a bez
       výjimky by mu slovo „Otevřít" narostlo na velikost čísla. */
    .acct-page.acct-page .acct-stat-num:not(.acct-stat-go) { font-size: 1.4rem; }
    .acct-page.acct-page .acct-ref-stats { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5) OMEZENÝ POHYB
   Uživatel s nastavením „méně pohybu" nemá dostat žádný přesun ani prolnutí.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .dwp-overlay.dwp2-ov,
    .dwp-box.dwp2,
    .dwp2-cta,
    .dwp-close.dwp2-close,
    .rtb.rtb2,
    .rtb2 .rtb2-cta,
    .rtb2 .rtb2-close,
    .acct-page.acct-page .acct-claim-btn,
    .acct-page.acct-page .acct-stat,
    .acct-page.acct-page .acct-stat-ico,
    .acct-page.acct-page .acct-card,
    .acct-page.acct-page .acct-card-action {
        transition: none !important;
        animation: none !important;
    }
    .acct-page.acct-page .acct-lvl-bar-fill { transition: none !important; }
}