.auth-page {
    background: radial-gradient(circle at top right, var(--accent-surface), transparent 45%), var(--surface-sunken);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 12vh;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    padding-bottom: var(--sp-4);
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}

.login-card {
    background: var(--surface);
    padding: var(--sp-5);
    border-radius: var(--radius-control);
    box-shadow: var(--sh-3);
    width: 400px;
    min-height: 400px;
    height: auto;
    flex: none; /* Prevent shrinking/stretching on any viewport */
    border: 1px solid var(--border);
    animation: slideUp 0.5s var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Premium Form Layouts on Auth screens */
.auth-page .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    text-align: center; /* Horizontally center label */
    align-items: center; /* Center nested elements horizontally */
    width: 100%;
}

.auth-page .form-group.form-group-lg {
    margin-bottom: var(--sp-5);
}

.auth-page .form-group label {
    font-size: var(--fs-2);
    font-weight: var(--fw-600);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    width: 100%;
}

.auth-page input,
.auth-page select {
    width: 100%;
}

.auth-page input[type="email"] {
    text-align: left;
}

.auth-page .btn {
    width: 100%;
    margin-top: var(--sp-2);
}

@keyframes slideUp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.otp-input {
    font-family: var(--font-mono);
    font-size: var(--fs-5);
    letter-spacing: 0.4em;
    text-align: center;
    font-weight: var(--fw-700);
    color: var(--surface-dark);
    padding-left: calc(var(--sp-4) + 0.2em); /* Align letter-spacing */
}

/* Remote code specialized input */
.remote-code-input {
    font-family: var(--font-mono);
    font-size: var(--fs-5);
    letter-spacing: 0.3em;
    text-align: center;
    font-weight: var(--fw-700);
    padding-left: calc(var(--sp-4) + 0.15em);
}

.metadata-card {
    background: var(--surface-sunken);
    border: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-950) 4%, transparent);
    border-radius: var(--radius-control);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
    text-align: left;
    width: 100%;
}
.metadata-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-2);
    margin-bottom: var(--sp-2);
}
.metadata-row:last-child { margin-bottom: 0; }
.metadata-row.meta-column {
    flex-direction: column;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
}
.metadata-label { color: var(--text-muted); font-weight: var(--fw-500); }
.metadata-value { color: var(--text); font-weight: var(--fw-600); font-family: var(--font-mono); }
.metadata-value-ua {
    font-size: var(--fs-1);
    white-space: pre-wrap;
    line-height: 1.4;
    font-family: var(--font-sans);
}

.waiting-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    font-size: var(--fs-2);
    color: var(--text-muted);
    font-weight: var(--fw-500);
}

.pulse {
    width: 10px; height: 10px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 1.8s infinite;
}
.pulse.pulse-large {
    width: 60px;
    height: 60px;
    animation-duration: 1.5s;
}
@keyframes pulse {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 var(--accent-surface); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px transparent; }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 transparent; }
}

.footer {
    text-align: center;
    font-size: var(--fs-1);
    color: var(--text-muted);
    font-weight: var(--fw-500);
}

.back-link {
    display: block;
    margin-top: var(--sp-4);
    text-align: center;
    font-size: var(--fs-2);
    color: var(--accent);
    text-decoration: none;
    font-weight: var(--fw-600);
    transition: var(--transition);
}
.back-link:hover { color: var(--accent); text-decoration: underline; }

.back-link.back-link-accent {
    margin-top: var(--sp-4);
    color: var(--accent);
    font-weight: var(--fw-600);
}

.big-icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-4);
}
.big-icon-container.big-icon-container-xl {
    margin: var(--sp-5) 0;
}
.big-icon-container svg {
    width: 48px;
    height: 48px;
}

.remote-code-details {
    margin-top: var(--sp-5);
    width: 100%;
    display: block;
}

.remote-code-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4) var(--sp-4);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    font-size: var(--fs-2);
    font-weight: var(--fw-600);
    cursor: pointer;
    list-style: none;
    transition: all var(--transition, 0.2s ease);
    user-select: none;
    outline: none;
}
.remote-code-summary::-webkit-details-marker {
    display: none;
}
.remote-code-summary::after {
    content: '▼';
    font-size: var(--fs-1);
    margin-left: var(--sp-2);
    transition: transform 0.2s ease;
    color: var(--accent);
}
details[open] .remote-code-summary::after {
    transform: rotate(180deg);
}
.remote-code-summary:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-surface), 0 0 0 4px var(--accent);
}
.remote-code-summary:hover {
    background: var(--accent-surface);
}

details[open] .remote-code-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--accent-surface);
}

.remote-code-box {
    padding: var(--sp-4);
    background: var(--accent-surface);
    border: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: var(--radius-control);
    text-align: center;
    animation: pulseSubtle 2.5s infinite ease-in-out;
}
.remote-code-label {
    font-size: var(--fs-1);
    color: var(--accent);
    font-weight: var(--fw-700);
    margin-bottom: var(--sp-1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.remote-code-value {
    font-size: var(--fs-5);
    font-weight: var(--fw-700);
    color: var(--surface-dark);
    letter-spacing: 0.2em;
    font-family: var(--font-mono);
}
details[open] .remote-code-box {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

@keyframes pulseSubtle {
    0% { border-color: var(--accent-surface); }
    50% { border-color: var(--accent); }
    100% { border-color: var(--accent-surface); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}
.shake { animation: shake 0.4s ease-in-out; }

@keyframes scaleUpSpring {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.scale-up-spring { animation: scaleUpSpring 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes fillBar {
    from { width: 0%; }
    to { width: 100%; }
}
.edge-loader-bar {
    height: 100%;
    background: var(--success);
    border-radius: 0;
    animation: fillBar 1.0s linear forwards;
}
.edge-loader-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border-radius: 0;
    overflow: hidden;
    margin: 0;
}

.same-device-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: slideUp 0.5s var(--transition);
}

.fade-transition {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.fade-hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.login-card.state-success {
    background: var(--surface-raised);
    border: none;
    box-shadow: var(--sh-success-card);
}
.login-card.state-error {
    background: var(--surface-raised);
    border: none;
    box-shadow: var(--sh-danger-card);
}

/* Executive borderless-glowing feedback and structure overrides */
.pulse-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: var(--sp-4);
    transition: var(--transition);
    border: none;
}
.pulse-icon-container.state-success {
    background: var(--surface-raised);
    color: var(--success);
    box-shadow: var(--sh-success-glow);
}
.pulse-icon-container.state-error {
    background: var(--surface-raised);
    color: var(--danger);
    box-shadow: var(--sh-danger-glow);
}
.pulse-icon-container.state-pending {
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    color: var(--warning);
    box-shadow: 0 0 20px color-mix(in srgb, var(--warning) 18%, transparent);
}


.login-card-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: auto 0;
}

.login-card h1 {
    font-size: var(--fs-5);
    margin-top: 0;
    margin-bottom: var(--sp-2);
    font-weight: var(--fw-700);
    color: var(--surface-dark);
    text-align: center;
    line-height: 1.25;
}
.login-card h1.state-title-success {
    color: var(--success);
}
.login-card h1.state-title-error {
    color: var(--danger);
}
.login-card p {
    color: var(--text-muted);
    font-size: var(--fs-3);
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: var(--sp-4);
    text-align: center;
}
.login-card .state-desc-tight {
    margin-bottom: 0;
}

.auth-actions-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    width: 100%;
}
.auth-actions-stack .btn {
    text-decoration: none;
    width: 100%;
}
.auth-actions-stack form {
    width: 100%;
}

/* Isolated login-page brand rules */
.brand.brand-isolated {
    color: var(--text);
    align-items: center;
    justify-content: center;
    text-align: center;
}
.brand.brand-isolated .brand-logo-row {
    justify-content: center;
    width: auto;
}
.brand.brand-isolated .brand-logo-container {
    justify-content: center;
    /* Login/auth brand stands alone, so it can be larger than the 36px nav logo. */
    max-width: 220px;
    max-height: 64px;
}
.brand.brand-isolated .brand-logo,
.brand.brand-isolated .default-logo {
    max-width: 220px;
    max-height: 64px;
}
.brand.brand-isolated .brand-name-row {
    justify-content: center;
    width: auto;
}
.brand.brand-isolated .brand-name-text {
    color: var(--text);
    text-align: center;
}
.brand.brand-isolated .default-logo {
    color: var(--accent);
}

/* State 1 (email login): brand moves inside the card, so hide the one above it. */
.login-step-default .brand.brand-isolated:not(.brand-incard) {
    display: none;
}
.brand.brand-isolated.brand-incard {
    margin-bottom: var(--sp-4);
    cursor: default;
}
.js-hidden {
    display: none;
}