/* Auth-Wall + Login-Card */

.auth-wall {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Subtle radial glow mirroring body.css for visual continuity */
    background: var(--color-bg);
    background-image:
        radial-gradient(
            ellipse 80% 60% at 50% 0%,
            hsl(var(--hsl-accent-500) / 0.10) 0%,
            transparent 70%
        );
    z-index: 9999;
    animation: auth-wall-in var(--duration-base) var(--ease-out) both;
}

@keyframes auth-wall-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.auth-card {
    width: 100%;
    max-width: 400px;
    padding: var(--space-8) var(--space-8) var(--space-6);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    animation: auth-card-in var(--duration-slow) var(--ease-spring) both;
    animation-delay: 60ms;
}

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-subtle);
}

.auth-mark {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    background: var(--color-accent);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    letter-spacing: var(--letter-spacing-caps);
}

.auth-title {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.auth-label {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.auth-input {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-family: inherit;
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.auth-input:focus {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.auth-input::placeholder {
    color: var(--color-text-subtle);
}

.auth-error {
    font-size: var(--font-size-micro);
    color: var(--color-phase-abgewandert-text);
    padding: var(--space-2) var(--space-3);
    background: var(--color-phase-abgewandert-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-phase-abgewandert-border);
    line-height: var(--line-height-normal);
}

.auth-btn {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    font-family: inherit;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    letter-spacing: 0.01em;
}

.auth-btn:hover:not(:disabled) {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.auth-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.auth-btn:disabled {
    opacity: .5;
    cursor: default;
}

.auth-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .auth-wall, .auth-card { animation: none; }
    .auth-btn:hover:not(:disabled) { transform: none; box-shadow: none; }
}