/* ─── Auth Modal ──────────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-content {
    background: var(--panel-solid, #0e0e16); border: 1px solid var(--border2, rgba(255,255,255,0.08));
    border-radius: 20px; padding: 40px; max-width: 420px; width: 90%; position: relative;
}
.modal-close {
    position: absolute; top: 16px; right: 16px; background: none; border: none;
    color: var(--text3, #55556a); font-size: 18px; cursor: pointer;
}
.modal-close:hover { color: var(--text, #eee); }

.auth-modal h2 {
    font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 700;
    text-align: center; margin-bottom: 4px;
}
.auth-subtitle {
    text-align: center; color: var(--text3, #55556a); font-size: 14px; margin-bottom: 24px;
}

/* Google Button */
.auth-google-btn {
    width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border2, rgba(255,255,255,0.08));
    background: var(--glass, rgba(255,255,255,0.02)); color: var(--text, #eee);
    font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.2s;
}
.auth-google-btn:hover { border-color: var(--accent, #a855f7); background: rgba(168,85,247,0.05); }

/* Divider */
.auth-divider {
    display: flex; align-items: center; gap: 12px; margin: 20px 0;
    color: var(--text3, #55556a); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border, rgba(255,255,255,0.05));
}

/* Form */
.auth-input {
    width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border2, rgba(255,255,255,0.08));
    background: var(--bg2, #0d0d14); color: var(--text, #eee);
    font-family: inherit; font-size: 14px; margin-bottom: 12px; outline: none;
    transition: border-color 0.2s;
}
.auth-input:focus { border-color: var(--accent, #a855f7); }

.auth-submit-btn {
    width: 100%; padding: 12px; border-radius: 12px; border: none;
    background: var(--gradient, linear-gradient(135deg, #a855f7, #ec4899));
    color: white; font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: all 0.2s; margin-top: 4px;
}
.auth-submit-btn:hover { box-shadow: 0 8px 30px rgba(168,85,247,0.3); }
.auth-submit-btn:disabled { opacity: 0.5; cursor: wait; }

.auth-switch {
    text-align: center; margin-top: 16px; font-size: 13px; color: var(--text3, #55556a);
}
.auth-switch a { color: var(--accent, #a855f7); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

.auth-credits-info {
    text-align: center; margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.05));
    font-size: 13px; color: var(--text2, #8a8a9a);
}

/* ─── Credits Badge ──────────────────────────────── */
#creditsBadge {
    display: none; align-items: center; gap: 6px; padding: 6px 12px;
    background: var(--glass, rgba(255,255,255,0.02));
    border: 1px solid var(--border, rgba(255,255,255,0.05));
    border-radius: 8px; font-size: 13px;
}
#creditsCount { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; }
#creditsCount.low { color: #f59e0b; }
#creditsCount.zero { color: #ef4444; }

/* ─── User Menu ──────────────────────────────────── */
.user-menu {
    position: absolute; top: 100%; right: 0; margin-top: 8px;
    background: var(--panel-solid, #0e0e16); border: 1px solid var(--border2, rgba(255,255,255,0.08));
    border-radius: 12px; padding: 16px; min-width: 220px; z-index: 100;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.user-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.user-menu-header strong { font-size: 13px; color: var(--text, #eee); }
.plan-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
    background: var(--gradient, linear-gradient(135deg, #a855f7, #ec4899)); color: white;
}
.user-menu-credits { font-size: 12px; color: var(--text3, #55556a); margin-bottom: 12px; }
.user-menu hr { border: none; border-top: 1px solid var(--border, rgba(255,255,255,0.05)); margin: 8px 0; }
.user-menu button {
    display: block; width: 100%; padding: 8px; background: none; border: none;
    color: var(--text2, #8a8a9a); font-family: inherit; font-size: 13px;
    text-align: left; cursor: pointer; border-radius: 6px;
}
.user-menu button:hover { background: var(--glass, rgba(255,255,255,0.02)); color: var(--text, #eee); }

/* ─── Upgrade Modal ──────────────────────────────── */
.upgrade-modal h2 { font-size: 22px; }
.upgrade-modal > p { text-align: center; color: var(--text2, #8a8a9a); font-size: 14px; margin-bottom: 24px; }

.upgrade-plans { display: flex; flex-direction: column; gap: 12px; }
.upgrade-plan {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; border-radius: 12px;
    border: 1px solid var(--border2, rgba(255,255,255,0.08));
    cursor: pointer; transition: all 0.2s;
}
.upgrade-plan:hover { border-color: var(--accent, #a855f7); transform: translateX(4px); }
.upgrade-plan.popular { border-color: var(--accent, #a855f7); background: rgba(168,85,247,0.05); }
.upgrade-plan strong { font-size: 15px; min-width: 80px; }
.upgrade-plan span { font-size: 13px; color: var(--text2, #8a8a9a); }
.upgrade-price { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--text, #eee) !important; }