@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* --- Reset & Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    overflow-x: hidden;
    position: relative;
    transition: background 0.4s ease, color 0.3s ease;
}

/* --- Public Container --- */
.links-container {
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    padding: 0 0 35px 0; /* padding bottom only, top is cover image */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out;
}

/* --- Profile Cover Image Header --- */
.cover-wrapper {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #4f46e5, #ec4899);
    position: relative;
    overflow: hidden;
}

.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Profile Header --- */
.profile-header {
    margin-top: -48px; /* pull avatar up to overlap cover */
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 25px;
    width: 100%;
}

.avatar-wrapper {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    padding: 3px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.profile-bio {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.8;
    max-width: 320px;
}

/* --- Social Icons Row --- */
.social-links-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    animation: fadeIn 1s ease-out;
    padding: 0 25px;
    width: 100%;
}

.social-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-btn:hover {
    transform: scale(1.15) rotate(5deg);
}

/* --- Custom Links Stack --- */
.links-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 25px;
}

.link-card {
    width: 100%;
    padding: 16px 20px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.link-icon-container {
    width: 24px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.link-text-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-right: 24px; /* balance the left icon spacing */
}

.link-title {
    font-size: 15px;
    font-weight: 600;
}

.link-desc {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 4px;
    font-weight: 400;
}

/* --- Footer Brand --- */
.footer-brand {
    margin-top: 40px;
    font-size: 11px;
    opacity: 0.5;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}
.footer-brand:hover {
    opacity: 0.9;
}

/* --- Aurora Background Blobs --- */
.aurora-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 25s ease infinite alternate;
}

.bubble-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: #6366f1;
}

.bubble-2 {
    bottom: -15%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: #ec4899;
    animation-delay: -5s;
}

.bubble-3 {
    top: 40%;
    left: 50%;
    width: 35vw;
    height: 35vw;
    background: #14b8a6;
    animation-delay: -10s;
}


/* =============================================================
   15 READY-MADE MODERN PREMIUM THEMES
   ============================================================= */

/* 1. Dark Theme */
body.theme-dark {
    background: #0c0c0e;
    color: #e4e4e7;
}
body.theme-dark .avatar-wrapper { background: #6366f1; }
body.theme-dark .links-container {
    background: #121214;
    border: 1px solid #222226;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
body.theme-dark .link-card {
    background: #1a1a1e;
    border: 1px solid #27272a;
    color: #e4e4e7;
}
body.theme-dark .link-card:hover {
    background: #27272a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
body.theme-dark .social-btn {
    background: #1a1a1e;
    color: #a1a1aa;
    border: 1px solid #27272a;
}
body.theme-dark .social-btn:hover {
    background: #6366f1;
    color: #ffffff;
}

/* 2. Light Theme */
body.theme-light {
    background: #f3f4f6;
    color: #1f2937;
}
body.theme-light .avatar-wrapper { background: #4f46e5; }
body.theme-light .links-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
body.theme-light .link-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #1f2937;
}
body.theme-light .link-card:hover {
    background: #ffffff;
    border-color: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(79, 70, 229, 0.1);
}
body.theme-light .social-btn {
    background: #f9fafb;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}
body.theme-light .social-btn:hover {
    background: #4f46e5;
    color: #ffffff;
}

/* 3. Aurora Theme */
body.theme-aurora {
    background: linear-gradient(135deg, #090d16, #111827);
    color: #f1f5f9;
}
body.theme-aurora .avatar-wrapper { background: linear-gradient(135deg, #6366f1, #14b8a6); }
body.theme-aurora .links-container {
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
body.theme-aurora .link-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}
body.theme-aurora .link-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}
body.theme-aurora .social-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
body.theme-aurora .social-btn:hover {
    background: #6366f1;
    color: #ffffff;
}

/* 4. Neon Theme */
body.theme-neon {
    background: #030303;
    color: #00ffcc;
}
body.theme-neon .avatar-wrapper { background: #ff007f; }
body.theme-neon .links-container {
    background: #09090b;
    border: 2px solid #ff007f;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.3);
}
body.theme-neon .link-card {
    background: #000000;
    border: 1px solid #00ffcc;
    color: #00ffcc;
}
body.theme-neon .link-card:hover {
    background: #00ffcc;
    color: #000000;
    box-shadow: 0 0 15px #00ffcc;
    transform: scale(1.02);
}
body.theme-neon .social-btn {
    background: #000000;
    color: #ff007f;
    border: 1px solid #ff007f;
}
body.theme-neon .social-btn:hover {
    background: #ff007f;
    color: #ffffff;
    box-shadow: 0 0 15px #ff007f;
}

/* 5. Ocean Theme */
body.theme-ocean {
    background: linear-gradient(135deg, #0f172a, #0369a1);
    color: #e0f2fe;
}
body.theme-ocean .avatar-wrapper { background: #38bdf8; }
body.theme-ocean .links-container {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
body.theme-ocean .link-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.15);
    color: #e0f2fe;
}
body.theme-ocean .link-card:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
}
body.theme-ocean .social-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.1);
}
body.theme-ocean .social-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

/* 6. Purple Theme */
body.theme-purple {
    background: linear-gradient(135deg, #2e1065, #4d1d95);
    color: #f5f3ff;
}
body.theme-purple .avatar-wrapper { background: #a78bfa; }
body.theme-purple .links-container {
    background: rgba(46, 16, 101, 0.5);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(167, 139, 250, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-purple .link-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(167, 139, 250, 0.15);
    color: #f5f3ff;
}
body.theme-purple .link-card:hover {
    background: rgba(167, 139, 250, 0.25);
    border-color: #c084fc;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(167, 139, 250, 0.3);
}
body.theme-purple .social-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.1);
}
body.theme-purple .social-btn:hover {
    background: #a78bfa;
    color: #1e1b4b;
}

/* 7. Emerald Theme */
body.theme-emerald {
    background: linear-gradient(135deg, #e6fffa, #e6fcf5);
    color: #064e3b;
}
body.theme-emerald .avatar-wrapper { background: #10b981; }
body.theme-emerald .links-container {
    background: #ffffff;
    border: 1px solid #d1fae5;
    box-shadow: 0 10px 30px rgba(6, 78, 59, 0.05);
}
body.theme-emerald .link-card {
    background: #f0fdf4;
    border: 1px solid #d1fae5;
    color: #064e3b;
}
body.theme-emerald .link-card:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}
body.theme-emerald .social-btn {
    background: #f0fdf4;
    color: #059669;
    border: 1px solid #d1fae5;
}
body.theme-emerald .social-btn:hover {
    background: #10b981;
    color: #ffffff;
}

/* 8. Sunset Theme */
body.theme-sunset {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #7c2d12;
}
body.theme-sunset .avatar-wrapper { background: #ea580c; }
body.theme-sunset .links-container {
    background: #ffffff;
    border: 1px solid #ffedd5;
    box-shadow: 0 10px 30px rgba(124, 45, 18, 0.05);
}
body.theme-sunset .link-card {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #7c2d12;
}
body.theme-sunset .link-card:hover {
    background: #ea580c;
    color: #ffffff;
    border-color: #ea580c;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.2);
}
body.theme-sunset .social-btn {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}
body.theme-sunset .social-btn:hover {
    background: #ea580c;
    color: #ffffff;
}

/* 9. Black Theme */
body.theme-black {
    background: #000000;
    color: #ffffff;
}
body.theme-black .avatar-wrapper { background: #27272a; }
body.theme-black .links-container {
    background: #121212;
    border: 1px solid #1c1c1c;
    box-shadow: none;
}
body.theme-black .link-card {
    background: #000000;
    border: 1px solid #222222;
    color: #ffffff;
}
body.theme-black .link-card:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}
body.theme-black .social-btn {
    background: #000000;
    color: #a1a1aa;
    border: 1px solid #222222;
}
body.theme-black .social-btn:hover {
    background: #ffffff;
    color: #000000;
}

/* 10. White Theme */
body.theme-white {
    background: #ffffff;
    color: #000000;
}
body.theme-white .avatar-wrapper { background: #e4e4e7; }
body.theme-white .links-container {
    background: #ffffff;
    border: 1px solid #ededed;
    box-shadow: none;
}
body.theme-white .link-card {
    background: #f7f7f7;
    border: 1px solid #eeeeee;
    color: #000000;
}
body.theme-white .link-card:hover {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
body.theme-white .social-btn {
    background: #f7f7f7;
    color: #52525b;
    border: 1px solid #eeeeee;
}
body.theme-white .social-btn:hover {
    background: #000000;
    color: #ffffff;
}

/* 11. Gradient Theme */
body.theme-gradient {
    background: linear-gradient(135deg, #8A2387, #E94057, #F27121);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: #ffffff;
}
body.theme-gradient .avatar-wrapper { background: #ffffff; }
body.theme-gradient .links-container {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
body.theme-gradient .link-card {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
body.theme-gradient .link-card:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
body.theme-gradient .social-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
body.theme-gradient .social-btn:hover {
    background: #ffffff;
    color: #E94057;
}

/* 12. Minimal Theme */
body.theme-minimal {
    background: #f7f5f0;
    color: #2b2927;
}
body.theme-minimal .avatar-wrapper { background: #4a4744; }
body.theme-minimal .links-container {
    background: #f7f5f0;
    border: none;
    box-shadow: none;
}
body.theme-minimal .link-card {
    background: transparent;
    border-bottom: 2px solid #2b2927;
    border-radius: 0;
    padding: 12px 0;
    color: #2b2927;
}
body.theme-minimal .link-card:hover {
    padding-left: 8px;
    border-bottom-color: #6e6761;
}
body.theme-minimal .social-btn {
    background: transparent;
    color: #2b2927;
    border: none;
}
body.theme-minimal .social-btn:hover {
    transform: scale(1.2);
}

/* 13. Glass Theme */
body.theme-glass {
    background: linear-gradient(135deg, #1e3a8a, #4c1d95, #0f172a);
    color: #ffffff;
}
body.theme-glass .avatar-wrapper { background: #ffffff; }
body.theme-glass .links-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
body.theme-glass .link-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
body.theme-glass .link-card:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,255,255,0.1);
}
body.theme-glass .social-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
body.theme-glass .social-btn:hover {
    background: #ffffff;
    color: #1e3a8a;
}

/* 14. Blue Theme */
body.theme-blue {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: #ffffff;
}
body.theme-blue .avatar-wrapper { background: #93c5fd; }
body.theme-blue .links-container {
    background: rgba(30, 58, 138, 0.7);
    border: 1px solid rgba(147, 197, 253, 0.3);
}
body.theme-blue .link-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
body.theme-blue .link-card:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #93c5fd;
    transform: translateY(-2px);
}
body.theme-blue .social-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #93c5fd;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
body.theme-blue .social-btn:hover {
    background: #93c5fd;
    color: #1e3a8a;
}

/* 15. Premium Gold Theme (Luxury Black & Gold) */
body.theme-premium-gold {
    background: #050505;
    color: #d4af37; /* Metallic Gold */
}
body.theme-premium-gold .avatar-wrapper { background: #d4af37; }
body.theme-premium-gold .links-container {
    background: #0d0d0d;
    border: 2px solid #d4af37;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.25);
}
body.theme-premium-gold .link-card {
    background: #151515;
    border: 1px solid #d4af37;
    color: #d4af37;
    text-shadow: 0 0 2px rgba(212, 175, 55, 0.2);
}
body.theme-premium-gold .link-card:hover {
    background: #d4af37;
    color: #000000;
    box-shadow: 0 0 15px #d4af37;
    transform: translateY(-3px);
}
body.theme-premium-gold .social-btn {
    background: #151515;
    color: #d4af37;
    border: 1px solid #d4af37;
}
body.theme-premium-gold .social-btn:hover {
    background: #d4af37;
    color: #000000;
}


/* --- CSS Variables & Transitions --- */
:root {
    --transition-speed: 0.3s;
}

/* --- Responsive Layout & Mobile First --- */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    .links-container {
        border-radius: 16px;
    }
    .cover-wrapper {
        height: 110px;
    }
}

/* --- QR Code Popup Modal (Glassmorphic) --- */
.qr-popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.qr-popup-card {
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    color: #ffffff;
    position: relative;
    animation: fadeInUp 0.4s ease-out;
}

body.theme-light .qr-popup-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1f2937;
}

body.theme-white .qr-popup-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #000000;
}

.qr-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.qr-popup-close:hover {
    opacity: 1;
}

.qr-popup-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.qr-popup-message {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.8;
}

.qr-popup-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: #4f46e5;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: background 0.2s;
}

.qr-popup-btn:hover {
    background: #6366f1;
}