/* ================================================
   AUTH PAGE - Dark theme cover layout
   Vuexy-inspired, dark-only
   ================================================ */

/* ---- Dark palette ---- */
:root {
    --auth-bg:        #25293c;
    --auth-paper:     #2f3349;
    --auth-border:    #444860;
    --auth-primary:   #7367f0;
    --auth-primary-h: #6356d8;
    --auth-text:      #acabc1;
    --auth-heading:   #e7e3fc;
    --auth-muted:     #acabc1;
    --auth-input-bg:  #373b5a;
    --auth-danger:    #ff4c51;
}

html, body {
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    background-color: var(--auth-bg);
    color: var(--auth-text);
}

/* ================================================
   WRAPPER
   ================================================ */
.authentication-wrapper {
    display: flex;
    flex-basis: 100%;
    width: 100%;
    min-height: 100vh;
}

.authentication-wrapper.authentication-cover {
    align-items: stretch;
    position: relative;
}

/* ================================================
   BRAND LOGO - absolute top-left
   ================================================ */
.auth-cover-brand {
    position: absolute;
    z-index: 10;
    top: 1.75rem;
    left: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.auth-cover-brand .auth-logo {
    height: 80px;
    width: auto;
}

.auth-cover-brand .auth-brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

/* ================================================
   LEFT COVER PANEL
   ================================================ */
.auth-cover-left {
    position: relative;
}

.auth-cover-bg {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #1b1f33;
    display: flex;
    align-items: flex-end;
    padding: 3.5rem;
}

.auth-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.auth-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        150deg,
        rgba(115, 103, 240, 0.25) 0%,
        rgba(37, 41, 60, 0.55) 50%,
        rgba(27, 31, 51, 0.97) 100%
    );
}

.auth-cover-content {
    position: relative;
    z-index: 2;
}

.auth-cover-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.auth-cover-content p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    margin-bottom: 0;
}

/* Subtle decorative line at top */
.auth-cover-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--auth-primary), #9b8df5);
    z-index: 10;
}

/* ================================================
   RIGHT FORM PANEL
   ================================================ */
.authentication-bg {
    background-color: var(--auth-paper);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.auth-form-wrapper {
    width: 100%;
    max-width: 400px;
}

.auth-form-wrapper h4 {
    color: var(--auth-heading);
    font-size: 1.375rem;
}

.auth-form-wrapper .auth-subtitle {
    color: var(--auth-muted);
    font-size: 0.9375rem;
}

/* ================================================
   FORM CONTROLS - dark
   ================================================ */
.authentication-bg .form-label {
    color: var(--auth-text);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.authentication-bg .form-control {
    background-color: var(--auth-input-bg);
    border: 1px solid var(--auth-border);
    color: var(--auth-heading);
    border-radius: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.authentication-bg .form-control::placeholder {
    color: var(--auth-muted);
    letter-spacing: 0.08em;
}

.authentication-bg .form-control:focus {
    background-color: var(--auth-input-bg);
    border-color: var(--auth-primary);
    color: var(--auth-heading);
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.2);
    outline: none;
}

/* Input group - password toggle */
.authentication-bg .input-group-merge .form-control {
    border-right: none;
    border-radius: 0.375rem 0 0 0.375rem;
}

.authentication-bg .input-group-merge .form-control:focus {
    border-right: none;
}

.authentication-bg .input-group-text {
    background-color: var(--auth-input-bg);
    border: 1px solid var(--auth-border);
    border-left: none;
    color: var(--auth-muted);
    border-radius: 0 0.375rem 0.375rem 0;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.2s ease;
    padding: 0 0.875rem;
}

.authentication-bg .input-group-text:hover {
    color: var(--auth-heading);
}

.authentication-bg .input-group-merge:focus-within .input-group-text {
    border-color: var(--auth-primary);
}

/* Checkbox */
.authentication-bg .form-check-input {
    background-color: var(--auth-input-bg);
    border-color: var(--auth-border);
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
}

.authentication-bg .form-check-input:checked {
    background-color: var(--auth-primary);
    border-color: var(--auth-primary);
}

.authentication-bg .form-check-label {
    color: var(--auth-text);
    font-size: 0.875rem;
}

/* ================================================
   BUTTON
   ================================================ */
.authentication-bg .btn-primary {
    background-color: var(--auth-primary);
    border-color: var(--auth-primary);
    color: #fff;
    font-weight: 500;
    padding: 0.5625rem 1.25rem;
    font-size: 0.9375rem;
    border-radius: 0.375rem;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.authentication-bg .btn-primary:hover,
.authentication-bg .btn-primary:focus {
    background-color: var(--auth-primary-h);
    border-color: var(--auth-primary-h);
    box-shadow: 0 4px 14px rgba(115, 103, 240, 0.45);
}

/* ================================================
   ALERTS
   ================================================ */
.authentication-bg .alert-danger {
    background-color: rgba(255, 76, 81, 0.1);
    border-color: rgba(255, 76, 81, 0.25);
    color: #ff7b7f;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.text-danger {
    color: var(--auth-danger) !important;
    font-size: 0.8125rem;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1199.98px) {
    .authentication-bg {
        background-color: var(--auth-bg);
        padding: 3rem 2rem;
    }

    .auth-cover-brand {
        top: 1.25rem;
        left: 1.25rem;
    }

    .auth-form-wrapper {
        padding-top: 3rem;
    }
}

@media (max-width: 575.98px) {
    .auth-form-wrapper {
        max-width: 100%;
    }

    .authentication-bg {
        padding: 2rem 1.25rem;
    }
}

/* ================================================
   LOGIN - centered brand card (klogin-*)
   Grid-free and sized off the viewport (vw), so the card can never be wider than the
   screen. Text inputs are 16px on purpose: below that, iOS Safari and Samsung Internet
   auto-zoom the page when a field is focused, which is what made the old login "spill"
   off the right edge on phones.
   ================================================ */
.klogin-page {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
    overflow-x: hidden;
    background-color: var(--auth-bg);
}

/* Soft branded glows behind the card */
.klogin-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 560px at 12% -12%, rgba(115, 103, 240, 0.20), transparent 60%),
        radial-gradient(900px 520px at 112% 115%, rgba(245, 166, 35, 0.10), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.klogin-card {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    /* Viewport-based, not %-based: 1rem gutter each side, capped at 420px on wide screens. */
    width: min(420px, calc(100vw - 2rem));
    max-width: 100%;
    background-color: var(--auth-paper);
    border: 1px solid var(--auth-border);
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    padding: clamp(1.5rem, 5vw, 2.5rem);
}

.klogin-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.klogin-logo {
    height: 44px;
    width: auto;
    max-width: 100%;
}

.klogin-title {
    color: var(--auth-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    margin: 0 0 0.375rem;
}

.klogin-subtitle {
    color: var(--auth-muted);
    font-size: 0.9375rem;
    text-align: center;
    overflow-wrap: anywhere;
    margin: 0 0 1.75rem;
}

.klogin-field {
    margin-bottom: 1.125rem;
}

.klogin-card .form-label {
    color: var(--auth-text);
    font-size: 0.875rem;
    font-weight: 500;
    /* site.css uppercases every .form-label; sentence case reads calmer on the sign-in card. */
    text-transform: none;
    margin-bottom: 0.375rem;
}

.klogin-card .form-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background-color: var(--auth-input-bg);
    border: 1px solid var(--auth-border);
    color: var(--auth-heading);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    /* 16px minimum - anything smaller makes mobile browsers zoom in on focus. */
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Browser autofill paints saved fields pale blue with dark text, which glares on the dark card.
   The background can't be overridden directly, so cover it with an inset shadow in the input colour. */
.klogin-card .form-control:-webkit-autofill,
.klogin-card .form-control:-webkit-autofill:hover,
.klogin-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-heading);
    caret-color: var(--auth-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset;
    box-shadow: 0 0 0 1000px var(--auth-input-bg) inset;
    transition: background-color 9999s ease-out 0s;
}

.klogin-card .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset, 0 0 0 0.2rem rgba(115, 103, 240, 0.2);
    box-shadow: 0 0 0 1000px var(--auth-input-bg) inset, 0 0 0 0.2rem rgba(115, 103, 240, 0.2);
}

.klogin-card .form-control::placeholder {
    color: var(--auth-muted);
}

.klogin-card .form-control:focus {
    background-color: var(--auth-input-bg);
    border-color: var(--auth-primary);
    color: var(--auth-heading);
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.2);
    outline: none;
}

/* Row under the password field: "Remember me" left, "Forgot password?" right.
   Wraps onto two lines on very narrow screens instead of ever overflowing. */
.klogin-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.125rem 0 1.5rem;
}

.klogin-forgot {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--auth-primary);
    text-decoration: none;
}

.klogin-forgot:hover {
    color: var(--auth-primary-h);
    text-decoration: underline;
}

/* Password field with inline show/hide toggle */
.klogin-inputgroup {
    position: relative;
}

.klogin-inputgroup .form-control {
    padding-right: 2.75rem;
}

.klogin-eye {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--auth-muted);
    cursor: pointer;
    border-radius: 0 0.5rem 0.5rem 0;
    transition: color 0.15s ease;
}

.klogin-eye:hover {
    color: var(--auth-heading);
}

.klogin-eye svg {
    width: 18px;
    height: 18px;
}

.klogin-remember {
    margin: 0;
    min-height: 0;
}

.klogin-card .form-check-input {
    background-color: var(--auth-input-bg);
    border-color: var(--auth-border);
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
    cursor: pointer;
}

.klogin-card .form-check-input:checked {
    background-color: var(--auth-primary);
    border-color: var(--auth-primary);
}

.klogin-card .form-check-input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.2);
}

.klogin-card .form-check-label {
    color: var(--auth-text);
    font-size: 0.875rem;
    cursor: pointer;
}

.klogin-submit {
    width: 100%;
    background-color: var(--auth-primary);
    border: 1px solid var(--auth-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.6875rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.klogin-submit:hover,
.klogin-submit:focus {
    background-color: var(--auth-primary-h);
    border-color: var(--auth-primary-h);
    box-shadow: 0 6px 18px rgba(115, 103, 240, 0.45);
    color: #fff;
    outline: none;
}

/* Sign-in in flight: the button is disabled so a second click/Enter cannot post again. */
.klogin-submit:disabled {
    opacity: 0.75;
    cursor: default;
    box-shadow: none;
}

/* Spinner takes the button's text colour (white on Sign in, primary on the passkey button). */
.klogin-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -0.125rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: klogin-spin 0.7s linear infinite;
}

.klogin-spinner[hidden] {
    display: none;
}

.klogin-submit .klogin-spinner {
    margin-right: 0.5rem;
}

.klogin-passkey .klogin-spinner {
    color: var(--auth-primary);
}

@keyframes klogin-spin {
    to { transform: rotate(360deg); }
}

.klogin-card .alert-danger {
    background-color: rgba(255, 76, 81, 0.1);
    border: 1px solid rgba(255, 76, 81, 0.25);
    color: #ff7b7f;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.klogin-card .alert-danger:empty,
.klogin-card .validation-summary-valid {
    display: none;
}

.klogin-footer {
    position: relative;
    z-index: 1;
    color: var(--auth-muted);
    font-size: 0.8125rem;
    text-align: center;
    margin: 0;
}

/* ---- Shared pieces for the other account pages (reset, 2FA, lockout...) ---- */

/* Round icon above the title on status pages ("Check your inbox", "Account locked"). */
.klogin-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    font-size: 1.625rem;
    background-color: rgba(115, 103, 240, 0.16);
    color: var(--auth-primary);
}

.klogin-status-success {
    background-color: rgba(40, 199, 111, 0.16);
    color: #28c76f;
}

.klogin-status-warning {
    background-color: rgba(255, 159, 67, 0.16);
    color: #ff9f43;
}

.klogin-status-danger {
    background-color: rgba(255, 76, 81, 0.16);
    color: var(--auth-danger);
}

/* Links styled as the primary button (status pages). */
a.klogin-submit {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* Outline companion to .klogin-submit ("I have a code"). */
.klogin-secondary {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid var(--auth-border);
    color: var(--auth-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.6875rem 1rem;
    border-radius: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.klogin-secondary:hover,
.klogin-secondary:focus-visible {
    border-color: var(--auth-primary);
    color: var(--auth-heading);
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.15);
    outline: none;
}

.klogin-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Radio tiles ("How should we send it?" on Forgot password). The native radio is visually hidden but
   stays focusable, so keyboard and screen readers get a real radio group. */
.klogin-fieldset {
    border: 0;
    padding: 0;
    min-width: 0;
}

.klogin-fieldset legend {
    float: none;
    width: auto;
    padding: 0;
}

.klogin-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.klogin-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.klogin-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.klogin-option-body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.625rem;
    align-items: center;
    height: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--auth-border);
    border-radius: 0.625rem;
    background-color: var(--auth-input-bg);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.klogin-option-body .bi {
    grid-row: 1 / span 2;
    font-size: 1.25rem;
    color: var(--auth-muted);
    transition: color 0.15s ease;
}

.klogin-option-title {
    color: var(--auth-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
}

.klogin-option-hint {
    color: var(--auth-muted);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.klogin-option:hover .klogin-option-body {
    border-color: rgba(115, 103, 240, 0.6);
}

.klogin-option input:checked + .klogin-option-body {
    border-color: var(--auth-primary);
    background-color: rgba(115, 103, 240, 0.14);
    box-shadow: inset 0 0 0 1px var(--auth-primary);
}

.klogin-option input:checked + .klogin-option-body .bi {
    color: var(--auth-primary);
}

.klogin-option input:focus-visible + .klogin-option-body {
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.35);
}

/* Text link under the form ("Back to sign in"). */
.klogin-back {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.875rem;
}

.klogin-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--auth-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.klogin-back a:hover,
.klogin-back a:focus-visible {
    color: var(--auth-heading);
}

.klogin-back a .bi {
    transition: transform 0.15s ease;
}

.klogin-back a:hover .bi {
    transform: translateX(-2px);
}

/* ---- Passkey sign-in ---- */
.klogin-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--auth-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.klogin-or::before,
.klogin-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--auth-border);
}

.klogin-passkey {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--auth-border);
    color: var(--auth-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.6875rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.klogin-passkey svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--auth-primary);
}

.klogin-passkey:hover:not(:disabled),
.klogin-passkey:focus-visible {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.15);
    outline: none;
}

.klogin-passkey:disabled {
    opacity: 0.7;
    cursor: default;
}

.klogin-pk-error {
    margin-top: 0.875rem;
    text-align: center;
}

/* ---- Manage passkeys ---- */
.klogin-card-wide {
    width: min(480px, calc(100vw - 2rem));
}

.klogin-pk-add {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.klogin-pk-add .form-control {
    flex: 1;
}

.klogin-pk-add .klogin-submit {
    width: auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.klogin-pk-add .klogin-submit span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.klogin-pk-add .klogin-submit svg {
    width: 16px;
    height: 16px;
}

.klogin-pk-note {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--auth-muted);
}

.klogin-pk-empty {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--auth-muted);
    font-size: 0.875rem;
}

.klogin-pk-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.klogin-pk-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--auth-border);
    border-radius: 0.625rem;
    background-color: var(--auth-input-bg);
}

.klogin-pk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    background-color: rgba(115, 103, 240, 0.15);
    color: var(--auth-primary);
}

.klogin-pk-icon svg {
    width: 20px;
    height: 20px;
}

.klogin-pk-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.klogin-pk-name {
    color: var(--auth-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.klogin-pk-date {
    color: var(--auth-muted);
    font-size: 0.75rem;
}

.klogin-pk-remove {
    margin: 0;
    flex: 0 0 auto;
}

.klogin-pk-removebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--auth-muted);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.375rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.klogin-pk-removebtn svg {
    width: 18px;
    height: 18px;
}

.klogin-pk-removebtn:hover,
.klogin-pk-removebtn:focus-visible {
    color: var(--auth-danger);
    background-color: rgba(255, 76, 81, 0.12);
    outline: none;
}

.klogin-pk-back {
    margin: 1.75rem 0 0;
    text-align: center;
    font-size: 0.875rem;
}

.klogin-pk-back a {
    color: var(--auth-primary);
    text-decoration: none;
}

.klogin-pk-back a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .klogin-pk-add {
        flex-direction: column;
    }

    .klogin-pk-add .klogin-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================
   LOGOUT CONFIRMATION CARD
   Matches Kiko.Web LoggedOut.razor style
   ================================================ */
.logout-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--auth-bg);
}

.logout-card {
    background: var(--auth-paper);
    border-radius: 1rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    padding: 2.75rem 2.5rem;
    width: min(440px, 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logout-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1.5rem;
}

.logout-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--auth-heading);
    margin-bottom: 0.625rem;
}

.logout-subtitle {
    color: var(--auth-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
    max-width: 320px;
}

.logout-countdown {
    font-size: 0.8125rem;
    color: var(--auth-muted);
    margin-bottom: 0.5rem;
}

.logout-countdown strong {
    color: var(--auth-primary);
    font-weight: 700;
}

.logout-progress-track {
    width: 100%;
    height: 3px;
    background-color: rgba(115, 103, 240, 0.18);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.logout-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #7367f0, #00bad1);
    border-radius: 2px;
    transition: width 0.9s linear;
}

.logout-actions {
    display: flex;
    gap: 0.875rem;
    width: 100%;
}

.logout-btn {
    flex: 1;
    padding: 0.6875rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background-color: var(--auth-primary);
    border: 1px solid var(--auth-primary);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.logout-btn:hover,
.logout-btn:focus {
    background-color: var(--auth-primary-h);
    border-color: var(--auth-primary-h);
    box-shadow: 0 4px 14px rgba(115, 103, 240, 0.45);
    color: #fff;
}

.logout-btn-cancel {
    flex: 1;
    padding: 0.6875rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--auth-border);
    color: var(--auth-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.logout-btn-cancel:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--auth-text);
    color: var(--auth-heading);
}

@media (max-width: 480px) {
    .logout-card {
        padding: 2rem 1.5rem;
    }

    .logout-actions {
        flex-direction: column-reverse;
    }
}