/* Invoay ERP — sign-in and account pages (Views/Account). Loaded after invoay-tokens.css and invoay.css. */

html, body {
    margin: 0;
    min-height: 100%;
}

/* A soft, light page with a few faint diagonal shapes behind a centred card. */
.iv-auth {
    position: relative;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
}

.iv-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, 0.85) 30% 52%, transparent 52%),
        linear-gradient(62deg, transparent 0 62%, rgba(11, 103, 163, 0.05) 62% 82%, transparent 82%);
}

.iv-auth-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-4);
}

.iv-auth-card {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.06), 0 16px 48px -8px rgba(15, 23, 41, 0.14);
    overflow: hidden;
}

/* ---------- Form side ---------- */
.iv-auth-main {
    display: flex;
    flex-direction: column;
    padding: var(--space-12);
}

.iv-auth-logo {
    height: 72px;
    width: auto;
    align-self: flex-start;
}

/* The page body (_AuthLayout's RenderBody) sits under the logo. */
.iv-auth-content {
    width: 100%;
    max-width: 400px;
    margin: var(--space-6) 0 0;
    animation: iv-auth-in var(--dur-slow) var(--ease-out) both;
}

.iv-auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
}

@keyframes iv-auth-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.iv-auth-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
}

.iv-auth-sub {
    color: var(--ink-muted);
    margin: 4px 0 var(--space-2);
}

.iv-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.iv-auth-label-row a,
.iv-auth-alt a {
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.iv-auth-label-row a:hover,
.iv-auth-alt a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.iv-auth-form .iv-btn {
    width: 100%;
    margin-top: var(--space-2);
}

/* A second full-width button sits close under the first. */
.iv-auth-form .iv-btn + .iv-btn {
    margin-top: calc(-1 * var(--space-2));
}

.iv-auth-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    justify-content: center;
    color: var(--ink-muted);
    font-size: 13px;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.iv-auth-alt a {
    font-size: 13px;
}

.iv-auth-apps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.iv-auth-apps img {
    height: 40px;
    width: auto;
    display: block;
}

.iv-auth-foot {
    color: var(--ink-subtle);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
}

.iv-auth-foot a {
    color: inherit;
    text-decoration: none;
}

.iv-auth-foot a:hover {
    color: var(--ink);
}

/* jquery.validate.unobtrusive + server ModelState messages. Calm, not alarming: a warm amber hint and
   border (always with words), never red. */
.iv-field .field-validation-error {
    color: var(--warning);
    font-size: 13px;
    line-height: 18px;
}

.iv-field .field-validation-valid {
    display: none;
}

.iv-auth .iv-field.is-invalid .iv-control,
.iv-auth .iv-field:has(.input-validation-error) .iv-control,
.iv-auth .iv-field:has(.field-validation-error) .iv-control {
    border-color: #d9a45b;
}

.iv-auth .iv-field.is-invalid .iv-control:focus-within,
.iv-auth .iv-field:has(.input-validation-error) .iv-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.iv-auth .iv-field.is-invalid .iv-hint {
    color: var(--warning);
}

/* ---------- Status icon above a page title ---------- */
.iv-auth-status {
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    animation: iv-auth-pop var(--dur-slow) var(--ease-spring) both;
}

.iv-auth-status-info { background: var(--primary-soft); color: var(--primary); }
.iv-auth-status-success { background: var(--success-soft); color: var(--success); }
.iv-auth-status-warning { background: var(--warning-soft); color: var(--warning); }
.iv-auth-status-danger { background: var(--danger-soft); color: var(--danger); }

@keyframes iv-auth-pop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: none; }
}

.iv-auth-sub strong {
    color: var(--ink);
    font-weight: 600;
}

.iv-auth-mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ---------- Two-factor: delivery choice cards ---------- */
.iv-auth-choices {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

    .iv-auth-choices legend {
        margin-bottom: 6px;
        border: 0;
        padding: 0;
    }

.iv-auth-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}

    .iv-auth-choice:hover {
        border-color: var(--control-border);
    }

    /* The radio stays focusable and readable by screen readers; the card is its visual. */
    .iv-auth-choice input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
    }

    .iv-auth-choice:has(input:checked) {
        border-color: var(--primary);
        background: var(--primary-soft);
    }

    .iv-auth-choice:has(input:focus-visible) {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }

.iv-auth-choice-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    flex: none;
    background: var(--surface-sunken);
    color: var(--ink-muted);
}

.iv-auth-choice:has(input:checked) .iv-auth-choice-icon {
    background: var(--surface);
    color: var(--primary);
}

.iv-auth-choice-text {
    flex: 1;
}

.iv-auth-choice-tick {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--control-border);
    color: transparent;
    transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.iv-auth-choice:has(input:checked) .iv-auth-choice-tick {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* ---------- Two-factor: the code field ---------- */
.iv-auth-otp {
    height: 56px;
}

    .iv-auth-otp .iv-input {
        font-family: var(--font-mono);
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.5em;
        text-indent: 0.5em;
        text-align: center;
    }

        .iv-auth-otp .iv-input::placeholder {
            color: var(--line-strong);
        }

/* ---------- Password reveal button inside an iv-control ---------- */
.iv-auth-reveal {
    flex: none;
    width: 34px;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-subtle);
    cursor: pointer;
    transition: color var(--dur-fast);
}

    .iv-auth-reveal:hover {
        color: var(--ink);
    }

    .iv-auth-reveal:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: -4px;
        border-radius: var(--radius-sm);
    }

/* ---------- Small print under a form ---------- */
.iv-auth-back,
.iv-auth-resend {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
}

    .iv-auth-back a,
    .iv-auth-resend a {
        color: var(--primary);
        font-weight: 500;
        text-decoration: none;
    }

    .iv-auth-back a {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        color: var(--ink-muted);
    }

        .iv-auth-back a:hover {
            color: var(--ink);
        }

        .iv-auth-resend a:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

.iv-auth-wait {
    font-variant-numeric: tabular-nums;
}

.iv-auth-tips {
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-3) 32px;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 20px;
}

.iv-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

    .iv-auth-form .iv-auth-actions .iv-btn {
        flex: 1 1 140px;
        margin-top: 0;
    }

/* Html.ValidationSummary renders .validation-summary-valid when there's nothing to say. When there is,
   it reads as a gentle note (soft blue, an info icon, a friendly title), not an error alarm. */
.iv-auth-errors.validation-summary-valid,
/* MVC adds a hidden empty <li> when only field errors exist; that is not a message. */
.iv-auth-errors:not(:has(li:not([style*="none"]))) {
    display: none;
}

.iv-auth-errors.validation-summary-errors {
    position: relative;
    padding: var(--space-3) var(--space-4) var(--space-3) 46px;
    background: var(--info-soft);
    border: 1px solid #cfe0f7;
    color: var(--ink);
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 20px;
    animation: iv-auth-in var(--dur-slow) var(--ease-out) both;
}

    .iv-auth-errors.validation-summary-errors::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 14px;
        width: 20px;
        height: 20px;
        background: var(--info);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .iv-auth-errors.validation-summary-errors > span {
        display: block;
        margin-bottom: 2px;
        font-weight: 600;
    }

    .iv-auth-errors ul {
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--ink-muted);
    }

/* The ways out, shown with a message: reset the password, get help, ask for a new link. */
.iv-auth-recover {
    margin: var(--space-2) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--space-4);
}

    .iv-auth-recover a {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        color: var(--primary);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
    }

        .iv-auth-recover a:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .iv-auth-recover a:focus-visible {
            outline: 2px solid var(--focus-ring);
            outline-offset: 2px;
            border-radius: var(--radius-xs);
        }

.iv-auth-recover-solo { margin: 0; }

/* ---------- Centred variant (ViewBag.AuthCentered): one narrow card, no side panel ---------- */
.iv-auth.iv-auth-centered .iv-auth-card {
    grid-template-columns: 1fr;
    max-width: 460px;
}

    .iv-auth.iv-auth-centered .iv-auth-main {
        align-items: center;
        padding: var(--space-8);
    }

    .iv-auth.iv-auth-centered .iv-auth-logo {
        align-self: center;
    }

/* ---------- Side panel: the product slideshow shown beside every account form ---------- */
.iv-auth-art {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f3f8fd 0%, #e9f1f9 100%);
    color: var(--ink);
    justify-content: center;
    align-items: center;
    padding: var(--space-8);
    border-left: 1px solid var(--line);
}

.iv-auth-intro {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}

/* Every slide sits in the same grid cell, so the panel is as tall as the tallest slide and never jumps. */
.iv-auth-slides {
    width: 100%;
    display: grid;
}

.iv-auth-slide {
    --accent: #0b67a3;
    --accent-soft: #e3f1fb;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    opacity: 0;
    visibility: hidden;
    transform: translateX(16px);
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), visibility 0s linear 400ms;
}

.iv-auth-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.iv-auth-slide-bo { --accent: #0b67a3; --accent-soft: #e3f1fb; }
.iv-auth-slide-pos { --accent: #c02a74; --accent-soft: #fbe3ee; }
.iv-auth-slide-wa { --accent: #1c7a4f; --accent-soft: #dff3e8; }

.iv-auth-illus {
    width: 100%;
    max-width: 300px;
    margin-bottom: var(--space-2);
}

.iv-auth-illus svg {
    display: block;
    width: 100%;
    height: auto;
}

.iv-auth-illus .bg { fill: #dde9f5; }
.iv-auth-illus .w { fill: #ffffff; }
.iv-auth-illus .pa { fill: #f3f6fa; }
.iv-auth-illus .ln { fill: #dde3ec; }
.iv-auth-illus .ink { fill: #0f1729; }
.iv-auth-illus .b { fill: #239fd9; }
.iv-auth-illus .bs { fill: #d6edf9; }
.iv-auth-illus .m { fill: #e6408f; }
.iv-auth-illus .ms { fill: #fbdbe9; }
.iv-auth-illus .v { fill: #7b4bb0; }
.iv-auth-illus .vs { fill: #e6dcf2; }
.iv-auth-illus .g { fill: #43c083; }
.iv-auth-illus .gs { fill: #c9ecd9; }
.iv-auth-illus .gsoft { fill: #e6f6ee; }
.iv-auth-illus .sh { filter: drop-shadow(0 4px 10px rgba(15, 23, 41, 0.12)); }
.iv-auth-illus .mline { fill: none; stroke: #e6408f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.iv-auth-illus .tick, .iv-auth-illus .chat { fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.iv-auth-tag {
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 2px 12px 2px 8px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

.iv-auth-tag i { display: inline-flex; }

.iv-auth-tag span {
    font-weight: 500;
    color: var(--ink-muted);
}

.iv-auth-tag span::before {
    content: "\00b7";
    margin-right: 6px;
}

.iv-auth-slide h2 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.iv-auth-slide p:not(.iv-auth-tag) {
    margin: 0;
    max-width: 340px;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 22px;
}

.iv-auth-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: var(--space-1);
    padding: 0 20px;
    border-radius: var(--radius-full);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.iv-auth-more:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
}

.iv-auth-more:focus-visible,
.iv-auth-dot:focus-visible,
.iv-auth-pause:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.iv-auth-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.iv-auth-dots {
    display: flex;
    align-items: center;
}

/* The dot looks small, but the button around it is 24px for easy tapping. */
.iv-auth-dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: var(--radius-full);
}

.iv-auth-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #b9c6d6;
    transition: width var(--dur-fast), background-color var(--dur-fast);
}

.iv-auth-dot:hover::before { background: #8a9bb0; }

.iv-auth-dot.is-active::before {
    width: 22px;
    background: var(--primary);
}

.iv-auth-pause {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: #ffffff;
    color: var(--ink-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.iv-auth-pause:hover { color: var(--ink); border-color: var(--control-border); }
.iv-auth-pause svg { fill: currentColor; }
.iv-auth-pause .i-play { display: none; }
.is-paused .iv-auth-pause .i-pause { display: none; }
.is-paused .iv-auth-pause .i-play { display: block; }

/* Wabixo offer: benefits and a clear primary action. */
.iv-auth-points {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 20px;
}

.iv-auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.iv-auth-points i {
    flex: none;
    display: inline-flex;
    margin-top: 1px;
    color: var(--accent);
}

.iv-auth-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.iv-auth-cta-row .iv-auth-more { margin-top: 0; }

.iv-auth-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.12);
    transition: filter var(--dur-fast), box-shadow var(--dur-fast);
}

.iv-auth-cta:hover { filter: brightness(1.08); box-shadow: 0 4px 12px -2px rgba(28, 122, 79, 0.4); }

.iv-auth-cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Wabixo is the featured slide: it tints the whole panel, and its text and button are larger. */
.iv-auth-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f0faf5 0%, #dcf2e6 100%);
    opacity: 0;
    transition: opacity 500ms var(--ease-out);
    pointer-events: none;
}

.iv-auth-art.is-featured::before { opacity: 1; }
.iv-auth-art.is-featured .iv-auth-dot.is-active::before { background: #1c7a4f; }

.iv-auth-intro { position: relative; }

.iv-auth-slide[data-featured] .iv-auth-illus { max-width: 330px; }

.iv-auth-slide[data-featured] h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.iv-auth-slide[data-featured] .iv-auth-cta {
    min-height: 46px;
    padding: 0 28px;
    font-size: 15px;
    box-shadow: 0 0 0 4px rgba(67, 192, 131, 0.28), 0 2px 6px rgba(15, 23, 41, 0.14);
}

.iv-auth-slide[data-featured] .iv-auth-more { min-height: 46px; }

.iv-auth-slide p.iv-auth-fine {
    margin: 0;
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 16px;
}

/* A compact Wabixo card under the form. Shown only where the slideshow sits below the fold. */
.iv-auth-promo {
    display: none;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid #bfe5d1;
    border-radius: var(--radius-lg);
    background: #effaf4;
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}

.iv-auth-promo:hover { border-color: #43c083; background: #e6f7ee; }
.iv-auth-promo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.iv-auth-promo-icon {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: #c9ecd9;
    color: #1c7a4f;
}

.iv-auth-promo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iv-auth-promo-text strong { font-size: 14px; line-height: 20px; font-weight: 600; }
.iv-auth-promo-text span { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.iv-auth-promo > i { flex: none; display: inline-flex; color: #1c7a4f; }

/* Text for screen readers only. */
.iv-auth-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
    .iv-auth-main { padding: var(--space-8); }
    .iv-auth-art { padding: var(--space-8); }
}

@media (max-width: 820px) {
    /* One column: the form first, the product slideshow underneath. */
    .iv-auth-card { grid-template-columns: 1fr; max-width: 520px; }
    .iv-auth-content { max-width: none; }
    .iv-auth-art { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-8) var(--space-6); }

    .iv-auth-promo { display: flex; }

    /* Comfortable touch targets, and 16px text so iOS does not zoom into the field. */
    .iv-auth .iv-control { height: 44px; }
    .iv-auth .iv-input { font-size: 16px; }
    .iv-auth .iv-auth-reveal { width: 44px; }
    .iv-auth-label-row a { padding: 8px 0; margin: -8px 0; }
    .iv-auth-form .iv-btn { --h: 44px; }
    .iv-auth-alt a { padding: 6px 0; }
}

@media (max-width: 520px) {
    /* Phones: the card fills the screen, like a plain page. */
    .iv-auth { background: var(--surface); }
    .iv-auth::before { display: none; }
    .iv-auth-shell { padding: 0; justify-content: flex-start; gap: 0; }
    .iv-auth-card { flex: 1 0 auto; max-width: none; border-radius: 0; box-shadow: none; align-content: start; }
    .iv-auth-main { padding: var(--space-4) var(--space-4) var(--space-6); }
    .iv-auth-logo { height: 64px; }
    .iv-auth-content { margin-top: var(--space-4); }
    .iv-auth-art { padding: var(--space-6) var(--space-4); }
    .iv-auth-foot { padding: var(--space-5) var(--space-4); justify-content: center; background: var(--bg); width: 100%; }
    .iv-auth.iv-auth-centered .iv-auth-main { padding: var(--space-6) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
    .iv-auth-content, .iv-auth-status { animation: none; opacity: 1; }
    .iv-auth-slide { transition: none; transform: none; }
}