/* CRM DEDE: ekrany konta (logowanie, kod, hasło, urządzenia). Te same barwy co panel. */

:root {
    --grunt: oklch(98.5% .002 264);
    --powierzchnia: #fff;
    --linia: oklch(92.8% .004 264);
    --linia-mocna: oklch(87.2% .005 264);
    --linia-pola: oklch(60% .006 264);
    --tekst: oklch(18% .005 264);
    --tekst-2: oklch(44.6% .006 264);
    --tekst-3: oklch(55.1% .006 264);
    --akcent: oklch(49% .22 264);
    --akcent-mocny: oklch(43% .2 264);
    --akcent-tekst: oklch(43% .2 264);
    --fokus: oklch(49% .22 264);
    --zaznaczenie: oklch(88% .06 264);
    --blad: #b42318;
    --blad-tlo: #fef3f2;
    --blad-linia: #fecdca;
    --sukces: #067647;
    --sukces-tlo: #ecfdf3;
    --sukces-linia: #abefc6;
    --cel: 44px;
    --promien: 8px;
    --ruch: 160ms cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grunt: oklch(14.5% .004 264);
        --powierzchnia: oklch(18% .005 264);
        --linia: oklch(27.8% .006 264);
        --linia-mocna: oklch(37.3% .006 264);
        --linia-pola: oklch(55.1% .006 264);
        --tekst: oklch(96.7% .003 264);
        --tekst-2: oklch(87.2% .005 264);
        --tekst-3: oklch(70.7% .006 264);
        --akcent-tekst: oklch(80% .1 264);
        --fokus: oklch(70% .15 264);
        --zaznaczenie: oklch(37% .17 264);
        --blad: #fda29b;
        --blad-tlo: rgb(180 35 24 / 0.18);
        --blad-linia: rgb(253 162 155 / 0.35);
        --sukces: #75e0a7;
        --sukces-tlo: rgb(6 118 71 / 0.22);
        --sukces-linia: rgb(117 224 167 / 0.35);
    }
}

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

html {
    scrollbar-color: var(--linia-mocna) transparent;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--grunt);
    color: var(--tekst-2);
    font: 400 15px/1.55 Inter, ui-sans-serif, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--zaznaczenie);
    color: var(--tekst);
}

:focus-visible {
    outline: 2px solid var(--fokus);
    outline-offset: 2px;
}

a {
    color: var(--akcent-tekst);
    text-underline-offset: 3px;
}

.crm-pomin {
    position: absolute;
    left: 12px;
    top: -60px;
    padding: 10px 14px;
    background: var(--powierzchnia);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    z-index: 10;
}

.crm-pomin:focus {
    top: 12px;
}

.crm-konto-naglowek {
    display: flex;
    justify-content: center;
    padding: 40px 16px 20px;
}

.crm-marka {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tekst);
}

.crm-karta {
    width: min(100% - 32px, 440px);
    margin: 0 auto 48px;
    padding: 28px 28px 24px;
    background: var(--powierzchnia);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

@media (max-width: 479px) {
    .crm-konto-naglowek {
        padding-top: 24px;
    }

    .crm-karta {
        padding: 22px 18px 20px;
    }
}

h1 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--tekst);
    text-wrap: balance;
}

h2 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tekst);
}

p {
    margin: 0 0 16px;
    max-width: 65ch;
}

.crm-wstep {
    margin-bottom: 22px;
}

.crm-pomoc,
.crm-powrot {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--tekst-3);
}

.crm-powrot {
    padding-top: 16px;
    border-top: 1px solid var(--linia);
}

hr {
    border: 0;
    border-top: 1px solid var(--linia);
    margin: 20px 0;
}

/* Komunikaty */
.crm-komunikaty {
    margin-bottom: 18px;
}

.crm-komunikat {
    margin: 0 0 8px;
    padding: 10px 12px;
    background: var(--sukces-tlo);
    border: 1px solid var(--sukces-linia);
    border-radius: var(--promien);
    color: var(--tekst);
    font-size: 14px;
}

.crm-komunikat-error,
.crm-komunikat-warning {
    background: var(--blad-tlo);
    border-color: var(--blad-linia);
}

/* Panele na stronie logowania dwuetapowego */
.crm-panel {
    padding: 16px 0;
    border-top: 1px solid var(--linia);
}

.crm-panel p {
    margin-bottom: 10px;
}

.crm-panel .crm-akcje {
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}