/* Authentication modal: a light glass surface that matches the shared top bar. */
#auth-modal {
    background: rgba(15, 23, 42, 0.32) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#auth-modal .auth-modal-card {
    position: relative;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22),
        0 8px 24px rgba(15, 23, 42, 0.08) !important;
    animation: auth-modal-enter 180ms ease-out both;
}

#auth-modal .auth-modal-card::before {
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #ff9a3d, transparent);
    content: "";
    opacity: 0.85;
}

#auth-modal .auth-modal-header {
    border-color: #edf0f3 !important;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(255, 255, 255, 0.5));
}

#auth-modal .auth-modal-mark {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 130, 0, 0.25);
    border-radius: 12px;
    background: linear-gradient(145deg, #fff7ed, #ffedd5);
    color: #ea7200;
    font-size: 20px;
    box-shadow: 0 5px 12px rgba(234, 114, 0, 0.1);
}

#auth-modal-title {
    letter-spacing: -0.02em;
}

#auth-modal .auth-close-button {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    transition: transform 180ms ease, color 180ms ease, background 180ms ease,
        border-color 180ms ease;
}

#auth-modal .auth-close-button:hover {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c !important;
    transform: rotate(90deg);
}

#auth-modal .auth-tab {
    flex: 1;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 650;
    transition: transform 180ms ease, color 180ms ease, background 180ms ease,
        border-color 180ms ease, box-shadow 180ms ease;
}

#auth-modal .auth-tab:hover {
    transform: translateY(-1px);
}

#auth-modal .auth-tab-active {
    border-color: rgba(255, 130, 0, 0.34);
    background: linear-gradient(135deg, #ff9a3d, #ff8200);
    color: #fff;
    box-shadow: 0 7px 16px rgba(255, 130, 0, 0.2);
}

#auth-modal .auth-tab-inactive {
    border-color: #e5e7eb;
    background: rgba(248, 250, 252, 0.78);
    color: #64748b;
}

#auth-modal .auth-tab-inactive:hover {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

#auth-modal .auth-field {
    border: 1px solid #dbe1e8 !important;
    border-radius: 12px !important;
    background: rgba(248, 250, 252, 0.82);
    color: #1f2937;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease,
        transform 180ms ease;
}

#auth-modal .auth-field:hover {
    border-color: #cbd5e1 !important;
    background: #fff;
}

#auth-modal .auth-field:focus {
    border-color: rgba(255, 130, 0, 0.72) !important;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 130, 0, 0.11) !important;
    transform: translateY(-1px);
}

#auth-modal .auth-primary-button,
#auth-modal .auth-secondary-button,
#auth-modal .auth-dark-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 12px !important;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease,
        background 180ms ease, border-color 180ms ease;
}

#auth-modal .auth-primary-button {
    border: 1px solid rgba(255, 130, 0, 0.42) !important;
    background: linear-gradient(135deg, #ff9a3d, #ff8200) !important;
    color: #fff !important;
    box-shadow: 0 9px 18px rgba(255, 130, 0, 0.2);
}

#auth-modal .auth-primary-button:hover:not(:disabled) {
    box-shadow: 0 12px 23px rgba(255, 130, 0, 0.28);
    filter: saturate(1.08);
    transform: translateY(-2px);
}

#auth-modal .auth-primary-button:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
}

#auth-modal .auth-secondary-button {
    min-height: 36px;
    border: 1px solid #fed7aa !important;
    background: rgba(255, 247, 237, 0.78) !important;
    color: #c2410c !important;
}

#auth-modal .auth-secondary-button:hover {
    border-color: #fb923c !important;
    background: #fff7ed !important;
    transform: translateY(-1px);
}

#auth-modal .auth-dark-button {
    border: 1px solid #334155 !important;
    background: #1f2937 !important;
    color: #fff !important;
    box-shadow: 0 7px 15px rgba(15, 23, 42, 0.14);
}

#auth-modal .auth-dark-button:hover {
    background: #111827 !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
    transform: translateY(-1px);
}

#auth-modal #auth-key-panel,
#auth-modal #auth-account-panel {
    border-color: #fed7aa !important;
    background: linear-gradient(145deg, rgba(255, 247, 237, 0.96), rgba(255, 251, 235, 0.72)) !important;
}

#auth-modal input[type="checkbox"] {
    accent-color: #f97316;
}

@keyframes auth-modal-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    #auth-modal .auth-modal-body,
    #auth-modal .auth-modal-header {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}