.auth-modal .is-hidden { display: none !important; }
.auth-modal [hidden]   { display: none !important; }

.auth-modal { visibility: hidden; }
.auth-modal.is-open { visibility: visible; }

.auth-backdrop {
    background: rgba(0, 0, 0, 0.78);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.auth-modal.is-open .auth-backdrop { opacity: 1; pointer-events: auto; }

.auth-sheet {
    pointer-events: auto;
    background: var(--cards);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.55);
    transform: translate3d(-50%, 100%, 0);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}
.auth-modal.is-open .auth-sheet { transform: translate3d(-50%, 0, 0); }
.auth-modal.is-dragging .auth-sheet { transition: none; }

.auth-handle-zone { touch-action: none; }
.auth-handle {
    width: 48px;
    height: 5px;
    background: color-mix(in srgb, var(--text) 18%, transparent);
    transition: width 0.2s ease, background 0.2s ease;
}
.auth-modal.is-dragging .auth-handle {
    width: 64px;
    background: color-mix(in srgb, var(--text) 35%, transparent);
}

.auth-close {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}
.auth-close:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }

.auth-content {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text) 15%, transparent) transparent;
}
.auth-content::-webkit-scrollbar { width: 4px; }
.auth-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text) 15%, transparent);
    border-radius: 4px;
}

.auth-view { animation: authViewIn 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes authViewIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-title {
    font-size: 32px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--text);
}

.auth-field {
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
}
.auth-field::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    border-radius: inherit;
    pointer-events: none;
}
.auth-field > * { position: relative; z-index: 1; }
.auth-field:focus-within {
    border-color: color-mix(in srgb, var(--primary) 50%, transparent);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.auth-field-icon {
    color: var(--text);
    opacity: 0.5;
}

.auth-input {
    font-size: 16px;
    color: var(--text);
    font-family: inherit;
}
.auth-input::placeholder {
    color: var(--text);
    opacity: 0.4;
    font-weight: 500;
}

.auth-otp-input {
    font-size: 22px;
    letter-spacing: 0.45em;
    color: var(--text);
    font-family: inherit;
}
.auth-otp-input::placeholder {
    color: var(--text);
    opacity: 0.25;
    letter-spacing: 0.45em;
}

.auth-forgot {
    color: var(--text);
    opacity: 0.7;
}
.auth-forgot:hover { opacity: 1; }

.auth-btn-primary {
    background: var(--primary);
    color: var(--background);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 22%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.auth-btn-primary.is-loading .auth-btn-label::after {
    content: '...';
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: authDots 1.2s steps(4) infinite;
}
@keyframes authDots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
}

.auth-btn-help {
    background: color-mix(in srgb, var(--text) 4%, transparent);
    color: var(--text);
    opacity: 0.7;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.auth-btn-help:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.auth-ref-badge {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
}

.auth-switch {
    color: var(--text);
    opacity: 0.7;
}
.auth-switch-link { color: var(--primary); }
.auth-switch-link:hover { opacity: 0.85; text-decoration: underline; }