/* ─── THEME: GLASSMORPHISM (HIGH-REFRACTION GLASS - CREATIVE STYLE) ─── */
body.theme-glassmorphism,
.preview-phone-frame.theme-glassmorphism {
    background-color: #0b0512 !important; /* Deep cosmic purple */
    color: #ffffff !important;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

/* Background gradient nodes */
body.theme-glassmorphism .glass-bg,
.preview-phone-frame.theme-glassmorphism .glass-bg {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 60% 70% at 15% 25%, rgba(var(--accent-1-rgb, 168, 85, 247), 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 55% 50% at 85% 75%, rgba(var(--accent-2-rgb, 236, 72, 153), 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 10%, rgba(59, 130, 246, 0.35) 0%, transparent 50%);
}

.preview-phone-frame.theme-glassmorphism .glass-bg {
    position: absolute; inset: 0; z-index: 0;
}

/* Floating blur spheres */
body.theme-glassmorphism .glass-orb-1 {
    position: fixed; width: 450px; height: 450px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-1-rgb, 168, 85, 247), 0.3) 0%, transparent 70%);
    top: -100px; left: -100px; filter: blur(50px);
    animation: drift1 15s ease-in-out infinite; pointer-events: none; z-index: -1;
}

.preview-phone-frame.theme-glassmorphism .glass-orb-1 {
    position: absolute; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-1-rgb, 168, 85, 247), 0.35) 0%, transparent 70%);
    top: -50px; left: -50px; filter: blur(25px);
    animation: drift1 12s ease-in-out infinite; pointer-events: none; z-index: 0;
}

body.theme-glassmorphism .glass-orb-2 {
    position: fixed; width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-2-rgb, 236, 72, 153), 0.25) 0%, transparent 70%);
    bottom: -80px; right: -80px; filter: blur(45px);
    animation: drift2 12s ease-in-out infinite; pointer-events: none; z-index: -1;
}

.preview-phone-frame.theme-glassmorphism .glass-orb-2 {
    position: absolute; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-2-rgb, 236, 72, 153), 0.3) 0%, transparent 70%);
    bottom: -40px; right: -40px; filter: blur(20px);
    animation: drift2 10s ease-in-out infinite; pointer-events: none; z-index: 0;
}

/* Card Container */
body.theme-glassmorphism .bio-page-card,
.preview-phone-frame.theme-glassmorphism .bio-page-card {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 2rem !important; /* 32px - Soft fluid curves */
    backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 30px 60px -15px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 1;
}

/* Avatar Halo */
body.theme-glassmorphism .avatar-ring,
.preview-phone-frame.theme-glassmorphism .avatar-ring {
    background: conic-gradient(from 0deg, var(--accent-1, #a855f7), var(--accent-2, #ec4899), #3b82f6, var(--accent-1, #a855f7));
    animation: rotateHalo 6s linear infinite;
}

/* Typography */
body.theme-glassmorphism .bio-title,
.preview-phone-frame.theme-glassmorphism .bio-title {
    font-weight: 850; 
    color: #ffffff;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(var(--accent-1-rgb, 168, 85, 247), 0.35);
}

body.theme-glassmorphism .bio-desc,
.preview-phone-frame.theme-glassmorphism .bio-desc {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 450;
}

body.theme-glassmorphism .bio-desc {
    line-height: 1.6;
}

/* Buttons */
body.theme-glassmorphism .bio-btn,
.preview-phone-frame.theme-glassmorphism .bio-btn {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: var(--custom-color, #ffffff) !important;
    border-radius: 9999px !important; /* Fully rounded pill buttons */
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 24px -6px rgba(var(--accent-1-rgb, 168, 85, 247), 0.2);
}

body.theme-glassmorphism .bio-btn {
    font-size: 0.875rem;
}

.preview-phone-frame.theme-glassmorphism .bio-btn {
    font-size: 0.75rem;
}

body.theme-glassmorphism .bio-btn:hover,
.preview-phone-frame.theme-glassmorphism .bio-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 14px 28px -4px rgba(var(--accent-1-rgb, 168, 85, 247), 0.35);
}

/* Plugin Cards */
body.theme-glassmorphism .bio-plugin-card,
.preview-phone-frame.theme-glassmorphism .bio-plugin-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 1.25rem !important; /* 20px - Semi-rounded fluid corners */
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

body.theme-glassmorphism .bio-plugin-card .widget-media-wrapper,
.preview-phone-frame.theme-glassmorphism .bio-plugin-card .widget-media-wrapper {
    border-radius: 0.875rem !important;
}

/* Social Buttons */
body.theme-glassmorphism .social-icon-btn,
.preview-phone-frame.theme-glassmorphism .social-icon-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.theme-glassmorphism .social-icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%; /* Perfect circles to match pill buttons */
}

.preview-phone-frame.theme-glassmorphism .social-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
}

body.theme-glassmorphism .social-icon-btn:hover,
.preview-phone-frame.theme-glassmorphism .social-icon-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    transform: translateY(-2px) rotate(-4deg);
    box-shadow: 0 4px 12px rgba(var(--accent-1-rgb, 168, 85, 247), 0.25);
}

/* Footer Section */
body.theme-glassmorphism .bio-footer-btn,
.preview-phone-frame.theme-glassmorphism .bio-footer-btn {
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

body.theme-glassmorphism .bio-footer-btn {
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.preview-phone-frame.theme-glassmorphism .bio-footer-btn {
    gap: 0.4rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.65rem;
    font-weight: 700;
}

body.theme-glassmorphism .bio-footer-btn:hover,
.preview-phone-frame.theme-glassmorphism .bio-footer-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: translateY(-1px);
}

body.theme-glassmorphism .bio-footer-btn .footer-dot,
.preview-phone-frame.theme-glassmorphism .bio-footer-btn .footer-dot {
    width: 5px;
    height: 5px;
    background: linear-gradient(135deg, var(--accent-1, #a855f7), var(--accent-2, #ec4899));
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(var(--accent-1-rgb, 168, 85, 247), 0.7);
}