/* Кабинет: вход — форма, коды, QR, SMS/Telegram-каналы. */

@layer pages {

    .cab-login-bg {
        --cab-login-glow-x: 22vw;
        --cab-login-glow-y: 22vh;
        position: fixed;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .cab-login-bg::before,
    .cab-login-bg::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .cab-login-bg::before {
        top: 0;
        left: 0;
        width: 44vmax;
        height: 44vmax;
        background: radial-gradient(
            circle,
            rgba(var(--accent-rgb), .22) 0,
            rgba(var(--accent-rgb), .09) 38%,
            rgba(var(--accent-rgb), 0) 72%
        );
        transform: translate3d(
            calc(var(--cab-login-glow-x) - 50%),
            calc(var(--cab-login-glow-y) - 50%),
            0
        );
        transition: transform .38s cubic-bezier(.22, .7, .2, 1);
    }

    .cab-login-bg::after {
        right: -12vmax;
        bottom: -16vmax;
        width: 46vmax;
        height: 46vmax;
        background: radial-gradient(
            circle,
            rgba(var(--success-rgb), .13) 0,
            rgba(var(--accent-rgb), .06) 40%,
            rgba(var(--accent-rgb), 0) 72%
        );
        animation: cab-login-bg-drift 11s ease-in-out infinite alternate;
    }

    .cab-login__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .cab-login__copy {
        display: grid;
        gap: 6px;
        text-align: center;
    }

    .cab-login__guide {
        min-height: 42px;
        padding: 7px 10px;
        border-radius: 8px;
    }

    .cab-login__guide--changed {
        animation: cab-login-guide-change .55s ease-out;
    }

    .cab-login__channels {
        width: min(300px, 100%);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--card-muted);
    }

    .cab-login__channel {
        min-width: 0;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: 6px;
        color: var(--text-muted);
        background: transparent;
        cursor: pointer;
        font: inherit;
        font-weight: 650;
    }

    .cab-login__channel:hover,
    .cab-login__channel:focus-visible {
        color: var(--accent-dark);
        background: var(--accent-surface);
    }

    .cab-login__channel--active {
        color: var(--on-color);
        background: var(--accent);
        box-shadow: var(--shadow-sm), 0 0 0 1px rgba(var(--accent-rgb), .2);
    }

    .cab-login__channel--active:hover,
    .cab-login__channel--active:focus-visible {
        color: var(--on-color);
        background: var(--accent-dark);
    }

    .cab-login__sms-targets {
        width: 100%;
        display: grid;
        justify-items: center;
        gap: 8px;
    }

    .cab-login__sms-targets-label {
        color: var(--text);
        font-size: 13px;
        font-weight: 750;
    }

    .cab-login__sms-target-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .cab-login__sms-target {
        min-height: 38px;
        flex: 1 1 116px;
        min-width: fit-content;
        padding: 7px 9px;
        border: 1px solid var(--border);
        border-radius: 7px;
        color: var(--text);
        background: var(--card);
        cursor: pointer;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .cab-login__sms-target:hover,
    .cab-login__sms-target:focus-visible {
        color: var(--accent-dark);
        border-color: rgba(var(--accent-rgb), .5);
        background: var(--accent-surface);
    }

    .cab-login__sms-target--active {
        color: var(--on-color);
        border-color: var(--accent);
        background: var(--accent);
        box-shadow: var(--shadow-sm), 0 0 0 1px rgba(var(--accent-rgb), .2);
    }

    .cab-login__sms-target--active:hover,
    .cab-login__sms-target--active:focus-visible {
        color: var(--on-color);
        border-color: var(--accent-dark);
        background: var(--accent-dark);
    }

    .cab-login__sms-copy {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 9px;
        border: 0;
        border-radius: 6px;
        color: var(--text-muted);
        background: transparent;
        cursor: pointer;
        font: inherit;
        font-size: 11.5px;
        font-weight: 600;
    }

    .cab-login__sms-copy:hover,
    .cab-login__sms-copy:focus-visible {
        color: var(--accent-dark);
        background: var(--accent-surface);
    }

    .cab-login__sms-copy:disabled {
        cursor: default;
        opacity: .45;
    }

    .cab-login__sms-copy .material-symbols-rounded {
        font-size: 17px;
    }

    .cab-login__code {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 32px;
        color: var(--text-muted);
        font-size: 13px;
    }

    .cab-login__code-label {
        font-weight: 650;
    }

    .cab-login__code-copy {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 8px 0 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text);
        background: var(--card);
        cursor: pointer;
        font: inherit;
        font-weight: 800;
        box-shadow: var(--shadow-sm);
        transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .cab-login__code-copy:hover,
    .cab-login__code-copy:focus-visible {
        color: var(--accent-dark);
        border-color: rgba(var(--accent-rgb), .36);
        background: var(--accent-surface);
    }

    .cab-login__code-copy:active {
        transform: scale(.98);
    }

    .cab-login__code-text {
        font-family: ui-monospace, "SF Mono", Consolas, monospace;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0;
    }

    .cab-login__code-copy .material-symbols-rounded {
        font-size: 18px;
    }

    .cab-login__actions {
        justify-content: center;
    }

    .cab-login__status {
        min-height: 20px;
        color: var(--text-muted);
        font-size: 13px;
        text-align: center;
        font-weight: 500;
    }

    .cab-login__status[data-tone="error"] {
        color: #d9534f;
    }

    .cab-login__qr {
        display: grid;
        justify-items: center;
        gap: 11px;
    }

    .cab-login__details {
        width: 100%;
        height: var(--cab-login-details-height, 0);
        overflow: clip;
        visibility: hidden;
        pointer-events: none;
        transition:
            height .56s cubic-bezier(.22, .72, .18, 1),
            visibility 0s linear .56s;
    }

    .cab-login__details-inner {
        display: grid;
        justify-items: center;
        gap: 11px;
        min-height: 0;
        opacity: 0;
        transform: translateY(-9px) scale(.985);
        transform-origin: center top;
        transition:
            opacity .28s ease,
            transform .42s cubic-bezier(.22, .72, .18, 1);
    }

    .cab-login[data-cab-login-selected="true"] .cab-login__details {
        visibility: visible;
        pointer-events: auto;
        transition:
            height .56s cubic-bezier(.22, .72, .18, 1),
            visibility 0s;
    }

    .cab-login[data-cab-login-selected="true"] .cab-login__details-inner {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: .14s;
    }

    .cab-login__sms-targets:not([hidden]),
    .cab-login__qr-link:not([hidden]),
    .cab-login__remind:not([hidden]),
    .cab-login__code:not([hidden]) {
        animation: cab-login-item-in .38s cubic-bezier(.22, .72, .18, 1);
    }

    .cab-login__qr-link {
        display: block;
        border-radius: 8px;
        text-decoration: none;
    }

    .cab-login__qr-link:focus-visible {
        outline: 3px solid rgba(var(--accent-rgb), .35);
        outline-offset: 4px;
    }

    .cab-login__qr-code {
        width: 220px;
        height: 220px;
        display: grid;
        place-items: center;
        padding: 10px;
        border-radius: 8px;
        background: #fff;
    }

    .cab-login__qr-code canvas,
    .cab-login__qr-code img,
    .cab-login__qr-code svg {
        width: 200px !important;
        height: 200px !important;
        display: block;
    }

    .cab-login__steps,
    .cab-login__timer {
        max-width: 320px;
        text-align: center;
    }

    .cab-login__steps {
        min-height: 45px;
        display: grid;
        align-content: center;
        gap: 4px;
        justify-items: center;
        color: var(--text-muted);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
    }

    .cab-login__timer {
        min-height: 18px;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 500;
    }

    .cab-login__copy .cab-login__lead {
        color: var(--text);
        font-size: 17px;
        font-weight: 750;
    }

    .cab-login__actions {
        display: none;
    }

    .cab-login__nowrap {
        white-space: nowrap;
    }

    .cab-login__cta {
        width: 100%;
        min-height: 50px;
        font-size: 15.5px;
        box-shadow: var(--shadow-sm), 0 6px 18px rgba(var(--accent-rgb), .26);
    }

    .cab-login__cta .material-symbols-rounded {
        font-size: 20px;
    }

    .cab-login__cta-hint {
        margin: 0;
        text-align: center;
        font-size: 13.5px;
        line-height: 1.4;
        color: var(--text);
    }

    .cab-login__cta-hint strong {
        font-weight: 800;
        color: var(--accent-dark);
    }

    .cab-login__flow {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px 2px;
    }

    .cab-login__flow-step {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--card-muted);
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        color: var(--text-muted);
    }

    .cab-login__flow-step:not(:last-child)::after {
        content: "\2192";
        margin-left: 2px;
        color: var(--text-muted);
        font-weight: 700;
    }

    .cab-login__flow-step--key {
        border-color: rgba(var(--accent-rgb), .35);
        background: var(--accent-surface);
        color: var(--accent-dark);
        cursor: pointer;
        transition: background .16s ease, border-color .16s ease, transform .12s ease;
    }

    .cab-login__flow-step--key:hover,
    .cab-login__flow-step--key:focus-visible {
        background: rgba(var(--accent-rgb), .14);
        border-color: rgba(var(--accent-rgb), .5);
    }

    .cab-login__flow-step--key:active {
        transform: scale(.97);
    }

    /* До прихода токена — «Готовим…»: не кликабельна, курсор не обещает действие. */
    .cab-login__flow-step--loading {
        cursor: default;
        pointer-events: none;
    }

    /* Индикатор ожидания входящего от юзера («ждём, что вы отправите код») — три точки-пинг,
       как «печатает…» в мессенджере. Живут всё время ожидания подтверждения входа. */
    .cab-login__remind-wait {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin-top: 3px;
        color: var(--accent-dark);
        font-size: 12px;
        font-weight: 600;
    }
    .cab-login__waiting-dots {
        display: inline-flex;
        gap: 3px;
        margin-left: 3px;
    }
    .cab-login__waiting-dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        opacity: .35;
        animation: cab-login-wait-dot 1.3s ease-in-out infinite;
    }
    .cab-login__waiting-dots i:nth-child(2) { animation-delay: .18s; }
    .cab-login__waiting-dots i:nth-child(3) { animation-delay: .36s; }

    .cab-login__flow-icon {
        font-size: 16px;
        color: var(--text-muted);
    }

    .cab-login__flow-step--key .cab-login__flow-icon {
        color: var(--accent);
    }

    .cab-login__qr-hint {
        margin: 0;
        text-align: center;
        font-size: 12.5px;
        color: var(--text-muted);
    }

    .cab-login__code-target {
        max-width: 100%;
        text-align: center;
        font-size: 12px;
        line-height: 1.35;
        color: var(--text-muted);
    }

    .cab-login__remind {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--warning);
        border-radius: 8px;
        background: var(--warning-surface);
        text-align: left;
        cursor: pointer;
        transition: border-color .16s ease, box-shadow .16s ease;
    }

    .cab-login__remind:hover,
    .cab-login__remind:focus-visible {
        box-shadow: 0 0 0 1px var(--warning);
    }

    .cab-login__remind-icon {
        flex-shrink: 0;
        font-size: 22px;
        color: var(--warning);
    }

    .cab-login__remind-body {
        display: grid;
        gap: 2px;
        font-size: 13px;
        line-height: 1.4;
        color: var(--text);
    }

    .cab-login__remind-body strong {
        font-weight: 750;
    }

    .cab-login__manual {
        display: grid;
        justify-items: center;
        gap: 8px;
    }

    .cab-login__manual-toggle {
        border: 0;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        font: inherit;
        font-size: 11.5px;
        font-weight: 400;
        text-decoration: underline;
        text-underline-offset: 2px;
        opacity: .6;
    }

    .cab-login__manual-toggle:hover,
    .cab-login__manual-toggle:focus-visible {
        color: var(--accent-dark);
    }

    .cab-login[data-cab-login-device="mobile"] [data-cab-auth-qr-link],
    .cab-login[data-cab-login-device="mobile"] .cab-login__qr-hint,
    .cab-login[data-cab-login-device="mobile"] .cab-login__timer {
        display: none;
    }

    @media (max-width: 600px) {
        .cab-login [data-cab-auth-qr-link],
        .cab-login__qr-hint,
        .cab-login__timer {
            display: none;
        }
    }

    @media (max-width: 430px) {
        .cab-login__channel {
            padding: 0 4px;
            font-size: 13px;
        }

        .cab-login__code-copy {
            font-size: 12px;
        }
    }
}