.auth-page .auth-grid.single-card {
        grid-template-columns: min(640px, 100%);
        max-width: 640px;
        margin-inline: auto;
    }
    .auth-page .auth-card {
        padding: 36px 32px;
        border-radius: 22px;
        box-shadow: var(--shadow-md);
    }
    .inline-otp-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 115px;
        gap: 8px;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }
    .inline-input-main {
        width: 100% !important;
        min-width: 0;
        height: 46px;
        margin: 0;
        box-sizing: border-box;
        transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .field-input-invalid {
        border-color: #ef4444 !important;
        background-color: hsl(4 80% 98%) !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
    }
    .field-input-valid {
        border-color: #10b981 !important;
        background-color: hsl(158 45% 99%) !important;
    }
    .btn-inline-otp {
        height: 46px;
        min-height: 46px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 700;
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
        box-sizing: border-box;
        cursor: pointer;
        background: hsl(var(--secondary));
        color: hsl(var(--secondary-foreground));
        border: 1px solid hsl(var(--border));
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    .btn-inline-otp:hover:not(:disabled) {
        background: hsl(var(--primary));
        color: hsl(var(--primary-foreground));
        border-color: hsl(var(--primary));
    }
    .btn-inline-otp:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        background: hsl(var(--muted) / 0.6) !important;
        border-color: hsl(var(--border) / 0.8) !important;
        color: hsl(var(--muted-foreground) / 0.8) !important;
    }
    .btn-inline-otp.btn-otp-verified {
        background: hsl(158 45% 92%) !important;
        color: #065f46 !important;
        border-color: #10b981 !important;
        opacity: 1 !important;
        cursor: default;
        pointer-events: none;
    }
    .inline-input-otp {
        width: 100% !important;
        height: 46px;
        min-height: 46px;
        text-align: center;
        font-weight: 700;
        font-size: 16px;
        font-family: var(--app-font-mono), 'Space Mono', monospace;
        letter-spacing: 4px;
        padding-left: 4px; /* Counter-balances letter-spacing so text is optically dead center */
        padding-right: 0;
        background: hsl(var(--card));
        border: 1.5px solid hsl(var(--border));
        border-radius: 11px;
        box-sizing: border-box;
        margin: 0;
        transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }
    .inline-input-otp:disabled {
        background: hsl(var(--muted) / 0.5) !important;
        border-color: hsl(var(--border) / 0.7) !important;
        color: hsl(var(--muted-foreground) / 0.5) !important;
        opacity: 0.65;
        cursor: not-allowed;
        letter-spacing: 3px;
        padding-left: 3px;
    }
    .inline-input-otp::placeholder {
        color: hsl(var(--muted-foreground));
        opacity: 0.55;
        font-weight: 500;
        letter-spacing: 1.5px;
        font-size: 13px;
        font-family: var(--app-font-sans), sans-serif;
    }
    .inline-input-otp:focus:not(:disabled) {
        border-color: hsl(var(--primary));
        box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
    }
    
    /* Animations & Live Verification States */
    @keyframes otpSuccessPop {
        0% { transform: scale(0.95); }
        50% { transform: scale(1.04); }
        100% { transform: scale(1); }
    }
    @keyframes otpShake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-6px); }
        40% { transform: translateX(6px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(4px); }
    }
    @keyframes otpPulseGlow {
        0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
        70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
        100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    .inline-input-otp.is-valid {
        border-color: #10b981 !important;
        background-color: hsl(158 45% 96%) !important;
        color: #065f46 !important;
        animation: otpSuccessPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), otpPulseGlow 1.2s ease-out;
    }
    .inline-input-otp.is-invalid {
        border-color: #ef4444 !important;
        background-color: hsl(4 80% 96%) !important;
        color: #991b1b !important;
        animation: otpShake 0.42s ease-in-out;
    }
    .inline-input-otp.is-checking {
        border-color: hsl(var(--primary)) !important;
        background-color: hsl(var(--background)) !important;
    }

    .form-row-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 18px;
    }
    @media (max-width: 580px) {
        .auth-page .auth-card {
            padding: 24px 16px;
        }
        .form-row-2col {
            grid-template-columns: 1fr !important;
            gap: 14px;
        }
        .inline-otp-group {
            grid-template-columns: 1fr 115px;
            gap: 10px;
        }
        .inline-input-main {
            grid-column: 1 / -1;
        }
        .btn-inline-otp {
            width: 100%;
            padding: 0 10px;
        }
        .inline-input-otp {
            width: 100% !important;
        }
    }

    #registerAlertBox.error-box,
    #registerAlertBox.success-box,
    .auth-card .error-box,
    .auth-card .success-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    #registerAlertBox.error-box svg,
    #registerAlertBox.success-box svg,
    .auth-card .error-box svg,
    .auth-card .success-box svg {
        margin-top: 0;
        flex-shrink: 0;
    }