/* ═══════════════════════════════════════════════════════════════════════════
   JLCasino — přihlášení a registrace

   Jeden sloupec, 440 px, žádný postranní panel. Kdo tohle okno otevřel, už
   se rozhodl; přesvědčovat ho vedle vyplňování bere šířku formuláři i klid
   textu. Důvod, proč mít účet, zůstal jedinou větou nad poli.

   Pole jsou vysoká 48 px a popisek stojí nad nimi. Plovoucí popisky uvnitř
   pole vypadají chytře, ale ve chvíli, kdy se do pole píše, není vidět, co
   se do něj vlastně vyplňuje.

   Zelená je i tady vyhrazená akci: jediné zelené místo v okně je odesílací
   tlačítko. Splněná podmínka hesla je zelená taky, ale to je stav, ne akce —
   a stojí daleko od tlačítka.

   CO JE ÚDAJ, TO JE STROJOPIS. Popisky polí, štítky podmínek hesla, hodnocení
   síly, počítadlo znaků a odznak 18+ jedou var(--font-code) drobnými
   verzálkami — stejně jako mřížka parametrů na kartě nabídky (.nb-terms dt
   v nabidka.css). Čtené věty zůstávají v Inter Tight, nadpisy a částky
   v Archivu.

   Soubor se načítá v header.php jako jeden z posledních (ř. 301), takže drží
   i formulářovou skořápku /nastaveni (.login-field, .login-submit, .acc-*).
   Ty třídy leží ve zdroji v navbar.css, který patří jinému okruhu; přepsat je
   odsud znamená přebít je bez jediného !important. Čistší by bylo opravit je
   u zdroje — viz oddíl na konci souboru.
   ═══════════════════════════════════════════════════════════════════════════ */

.au-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(16px, 6vh, 64px) 16px 32px;
    background: var(--bg-overlay);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.login-modal.au {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    padding: 0;
    background: var(--panel);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-card);
    box-shadow: var(--lift-hi);
    overflow: hidden;
}

/* ── Hlavička ────────────────────────────────────────────────────────────── */

.au-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--rail);
}

.au-brand {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--go);
}
.au-brand b { font-weight: 900; color: var(--paper); }

.au-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-chip);
    color: var(--paper-2);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.au-x:hover { color: var(--paper); border-color: var(--rail-2); }

/* ── Přepínač ────────────────────────────────────────────────────────────── */

/* Segment: v obou stavech je vidět, kde člověk je i kam se dá přepnout.
   Dva odkazy vedle sebe to nedokázaly — aktivní byl jen o odstín světlejší. */
.au-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 14px 18px 0;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
}

/* Přepínač je ovládací štítek, ne nadpis — proto strojopis. */
.au-tab {
    padding: 11px 8px;
    background: none;
    border: 0;
    border-radius: var(--r-chip);
    font-family: var(--font-code);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-3);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.au-tab:hover { color: var(--paper-2); }
.au-tab.active {
    background: var(--raise);
    color: var(--paper);
    box-shadow: inset 0 0 0 1px var(--rail-2);
}

/* ── Tělo ────────────────────────────────────────────────────────────────── */

.au-body { padding: 18px; }

.au-lead {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--paper-2);
}
.au-lead b { color: var(--paper); font-weight: 700; }

/* ── Pole ────────────────────────────────────────────────────────────────── */

.au-field { margin-bottom: 14px; }

/* Popisek pole je údaj o poli, ne věta — drobné strojopisné verzálky.
   Stejný tvar jako .nb-terms dt na kartě nabídky, takže se formulář čte
   jako mřížka parametrů. Platí i pro /nastaveni: pole tam mají třídu
   .login-field, ale je to tentýž formulář a nemá důvod sázet jinak. */
.au-field label,
.login-field label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    font-family: var(--font-code);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.au-field input[type="text"],
.au-field input[type="email"],
.au-field input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--paper);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.au-field input:focus {
    background: var(--panel-hi);
    border-color: var(--rail-2);
    outline: none;
}
.au-field input::placeholder { color: var(--paper-3); }

/* Oko u hesla sedí uvnitř pole, takže si text drží celou šířku. */
.au-pw { position: relative; }
.au-pw input { padding-right: 46px; }
.au-eye {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--r-chip);
    color: var(--paper-3);
    cursor: pointer;
    transition: color var(--t-fast);
}
.au-eye:hover { color: var(--paper); }

.au-counter {
    font-family: var(--font-num);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--paper-3);
}

.au-hint {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--coin);
}

.au-match { font-weight: 800; color: var(--go); }

/* ── Síla hesla ──────────────────────────────────────────────────────────── */

.au-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.au-bar {
    flex: 1 1 auto;
    height: 4px;
    background: var(--raise);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.au-bar-fill {
    width: 0;
    height: 100%;
    background: var(--paper-3);
    border-radius: var(--r-pill);
    transition: width var(--t-base), background var(--t-base);
}
/* Barva sleduje šířku: dokud je pruh krátký, není co chválit.
   Skript v includes/header-scripts.php (ř. 1718) nastavuje jen inline šířku
   v krocích 0/20/40/60/80/100 % a žádnou třídu nepřidává, takže se stav čte
   přímo z té inline hodnoty. Je to úzké hrdlo — kdyby se krok změnil, barva
   zmizí a pruh zůstane šedý, což je bezpečný pád. */
.au-bar-fill[style*="width: 20%"],
.au-bar-fill[style*="width: 40%"] { background: var(--live); }
.au-bar-fill[style*="width: 60%"],
.au-bar-fill[style*="width: 80%"] { background: var(--coin); }
.au-bar-fill[style*="width: 100%"] { background: var(--go); }

.au-strength-txt {
    min-width: 66px;
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-3);
    white-space: nowrap;
}

/* ── Podmínky hesla ──────────────────────────────────────────────────────── */

.au-reqs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.au-reqs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-pill);
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--paper-3);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.au-req-ico {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.au-reqs li.pw-req-ok {
    background: rgba(var(--go-rgb), .1);
    border-color: rgba(var(--go-rgb), .38);
    color: var(--go);
}
.au-reqs li.pw-req-bad {
    border-color: rgba(var(--live-rgb), .32);
    color: var(--live-hi);
}

/* ── Řádek pod heslem ────────────────────────────────────────────────────── */

.au-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.au-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--paper-2);
    cursor: pointer;
}
.au-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--go);
    cursor: pointer;
}

.au-link {
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--paper-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--t-fast);
}
.au-link:hover { color: var(--go); }

.au-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
    text-decoration: none;
}

/* ── Odeslání ────────────────────────────────────────────────────────────── */

.au-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 0 18px;
    background: var(--go);
    border: 0;
    border-radius: var(--r-btn);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--go-ink);
    cursor: pointer;
    transition: background var(--t-fast);
}
.au-submit:hover { background: var(--go-hi); }
.au-submit[disabled] { opacity: .6; cursor: not-allowed; }

.au-alt {
    margin: 14px 0 0;
    font-size: 13.5px;
    text-align: center;
    color: var(--paper-3);
}

/* ── Hlášky ──────────────────────────────────────────────────────────────── */

/* Chyba říká, co se stalo a co s tím — neomlouvá se a nevysvětluje obecně. */
.au-error {
    margin-bottom: 14px;
    padding: 11px 13px;
    background: rgba(var(--live-rgb), .1);
    border: 1px solid rgba(var(--live-rgb), .34);
    border-radius: var(--r-chip);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--live-hi);
}
.au-ok {
    margin-bottom: 14px;
    padding: 11px 13px;
    background: rgba(var(--go-rgb), .1);
    border: 1px solid rgba(var(--go-rgb), .34);
    border-radius: var(--r-chip);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--go);
}

/* ── Právní řádek ────────────────────────────────────────────────────────── */

/* Blok, ne flex. Flex z každého odkazu uvnitř věty udělal samostatnou položku,
   takže se „podmínkami použití" a „zpracováním osobních údajů" odtrhly od
   textu a tečka skončila sama na konci řádku. Odstavec je odstavec. */
.au-legal {
    display: block;
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--paper-3);
}
/* Odznak 18+ je údaj, ne nadpis — strojopis a token rádiusu. Stojí na začátku
   odstavce jako značka, takže je inline a text kolem něj plyne. */
.au-age {
    display: inline-block;
    margin-right: 5px;
    padding: 2px 6px;
    border: 1px solid var(--rail-2);
    border-radius: var(--r-chip);
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--paper-2);
}
.au-legal a { color: var(--paper-2); text-decoration: underline; text-underline-offset: 2px; }
.au-legal a:hover { color: var(--paper); }

/* ── Spinner v tlačítku ──────────────────────────────────────────────────── */

.au-submit .btn-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--alpha-black-30);
    border-top-color: var(--go-ink);
    border-radius: 50%;
    animation: au-spin .7s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .au-submit .btn-spinner { animation-duration: 2s; }
}

/* ── Mobil ───────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    /* flex-start, ne stretch — viz nabidka.css: stretch usadí panel na výšku
       okna a delší formulář se vykreslí mimo něj, bez pozadí. */
    .au-overlay { padding: 0; align-items: flex-start; }
    /* min-height: 100% tady bylo, ale krátký přihlašovací formulář pak natáhl
       panel na celou výšku okna a pod posledním řádkem zůstalo přes 380 px
       prázdné plochy. Panel končí tam, kde končí obsah. */
    .login-modal.au {
        max-width: none;
        min-height: auto;
        border: 0;
        border-bottom: 1px solid var(--rail);
        border-radius: 0;
    }
    .au-body { padding: 16px; }
    .au-switch { margin-inline: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NASTAVENÍ ÚČTU (/nastaveni, pages/nastaveni.php)
   ───────────────────────────────────────────────────────────────────────────
   PROČ TO STOJÍ TADY A NE U ZDROJE: skořápku formuláře (.login-field,
   .login-submit, .login-error, .login-success, .login-verify-msg,
   .acc-section-title, .acc-info) drží assets/css/components/navbar.css, který
   patří jinému okruhu. Tenhle soubor se v header.php načítá až za ním (ř. 301
   proti 219), takže ho přebije bez jediného !important a bez sáhnutí do cizího
   souboru. Až se navbar.css přepíše, tenhle oddíl může odejít.

   Selektory jsou schválně zapouzdřené do .acct-page (obal /ucet i /nastaveni).
   Přihlašovací okno v includes/modals.php nese na tlačítku obě třídy naráz
   (.login-submit .au-submit) a leží mimo .acct-page, takže se ho nic z tohohle
   oddílu nedotkne — bez toho zapouzdření by mu tlačítko zúžilo na šířku textu.

   CO SE MĚNÍ:
   1) Pět plných zelených tlačítek přes celou šířku (změřeno 1094 px) pod sebou
      dělalo z nastavení semafor. Tlačítko má šířku svého textu, jako .btn ve
      vzoru, a vedlejší akce (Kopírovat, Zrušit) jsou obrys, ne druhá zelená.
   2) Nadpisy sekcí byly zelené — zelená nese akci a hlavní číslo, ne pět
      nadpisů za sebou. Jsou z nich strojopisné mikropopisky s linkou nad nimi,
      takže sekce odděluje konstrukce, ne barva.
   3) Údaje (Email, Člen od) mají tutéž vlasovou mřížku jako .acct-profile na
      /ucet, aby obě stránky jednoho okruhu ukazovaly údaje stejně.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Údaje o účtu: vlasová mřížka (idiom .nb-terms) ── */
.acct-page .acc-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin-bottom: 26px;
    padding: 0;
    background: var(--rail);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    overflow: hidden;
}
.acct-page .acc-info-item {
    display: block;
    flex: 1 1 190px;
    min-width: 0;
    padding: 13px 16px;
    background: var(--panel);
    border-bottom: 0;
}
.acct-page .acc-info-item span {
    display: block;
    font-family: var(--font-code);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.acct-page .acc-info-item strong {
    display: block;
    margin-top: 4px;
    font-family: var(--font-code);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--paper);
    overflow-wrap: anywhere;
}

/* ── Nadpis sekce: mikropopisek, sekci dělí linka ── */
.acct-page .acc-section-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 26px 0 14px;
    padding-top: 22px;
    border-top: 1px solid var(--rail);
    font-family: var(--font-code);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--paper-3);
}
.acct-page .acc-changes-left {
    font-family: var(--font-code);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--paper-3);
}

/* ── Pole ── */
.acct-page .login-field { margin-bottom: 14px; }
.acct-page .login-field input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--paper);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.acct-page .login-field input:focus {
    background: var(--panel-hi);
    border-color: var(--go);
    outline: none;
}
.acct-page .login-field input::placeholder { color: var(--paper-3); }
.acct-page .field-counter {
    font-family: var(--font-num);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--paper-3);
}
.acct-page .pw-eye-btn { border-radius: var(--r-chip); }

/* ── Tlačítka ──
   Tvar je shodný s .btn v core/skin.css, aby na /ucet a /nastaveni nestála
   dvě různá tlačítka vedle sebe. Šířku určuje text, ne kontejner. */
.acct-page .login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 46px;
    margin-top: 4px;
    padding: 0 22px;
    background: var(--go);
    border: 1px solid var(--go);
    border-radius: var(--r-btn);
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .005em;
    color: var(--go-ink);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.acct-page .login-submit:hover {
    background: var(--go-hi);
    border-color: var(--go-hi);
    color: var(--go-ink);
}
.acct-page .login-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Vedlejší akce uvnitř pole (Kopírovat u 2FA klíče) je obrys, ne druhá
   zelená vedle té, která právě něco potvrzuje. */
.acct-page .login-field .login-submit {
    background: var(--raise);
    border-color: var(--rail-2);
    color: var(--paper);
}
.acct-page .login-field .login-submit:hover {
    background: var(--panel-hi);
    border-color: var(--rail-2);
    color: var(--paper);
}

/* „Zrušit" má v nastaveni.php inline pozadí rgba(255,255,255,0.08). Pozadí
   z CSS nepřebijeme, ale barvu textu ano — a ta byla tmavá, tedy tmavý text
   na skoro průhledné ploše na tmavém pozadí. Vybírá se podle toho inline
   zápisu, protože jinou záchytku tlačítko nemá. */
.acct-page .login-submit[style*="rgba(255,255,255,0.08)"] {
    border-color: var(--rail-2);
    color: var(--paper);
}

/* ── Hlášky: stejný tvar jako v přihlašovacím okně ── */
.acct-page .login-error,
.acct-page .login-success,
.acct-page .login-verify-msg {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: var(--r-chip);
    border: 1px solid var(--rail);
    background: var(--raise);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--paper-2);
}
.acct-page .login-error {
    background: rgba(var(--live-rgb), .1);
    border-color: rgba(var(--live-rgb), .34);
    color: var(--live-hi);
}
.acct-page .login-success {
    background: rgba(var(--go-rgb), .1);
    border-color: rgba(var(--go-rgb), .34);
    color: var(--go);
}

/* Odkaz „Zpět na přehled účtu" nad nadpisem je oční linka stránky. */
.acct-page .set-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-family: var(--font-code);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--paper-3);
    text-decoration: none;
    transition: color var(--t-fast);
}
.acct-page .set-back:hover { color: var(--paper); }