/* ==========================================================
   MOGALINK — Builder + Viewer + 5 templates animés
   Each template has its own signature animation.
   ========================================================== */

/* ---------- Navbar highlight ---------- */
.nav-mogalink {
    position: relative;
    color: var(--accent-orange) !important;
}

.nav-mogalink::before {
    content: '';
    position: absolute;
    inset: -6px -10px;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.12), rgba(16, 185, 129, 0.12));
    border: 1px solid rgba(255, 87, 34, 0.25);
    border-radius: 8px;
    z-index: -1;
    transition: var(--transition-smooth);
}

.nav-mogalink:hover::before {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(255, 87, 34, 0.5);
}

.nav-mogalink.active::before {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.25), rgba(16, 185, 129, 0.25));
    border-color: var(--accent-orange);
}

/* ==========================================================
   BUILDER PAGE
   ========================================================== */
.mogalink-main {
    padding-top: var(--header-height);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    /* clip (not hidden) so position:sticky descendants keep working */
    overflow-x: clip;
}

.mogalink-hero {
    padding: 80px 0 40px;
    text-align: center;
    position: relative;
}

.mogalink-hero .hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 87, 34, 0.1);
    border: 1px solid rgba(255, 87, 34, 0.25);
    border-radius: 999px;
    color: var(--accent-orange);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.mogalink-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.mogalink-hero .gradient-text {
    background: linear-gradient(135deg, #ff5722, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mogalink-hero-desc {
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

.mogalink-hero-desc code {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--accent-orange);
    font-size: 0.9em;
}

/* Hero en mode compact — utilisateur loggé : cache le marketing, ne garde que le user-strip */
.mogalink-hero.is-compact {
    padding: 24px 0 8px;
    text-align: right;
}
.mogalink-hero.is-compact .hero-badge,
.mogalink-hero.is-compact h1,
.mogalink-hero.is-compact .mogalink-hero-desc {
    display: none;
}
.mogalink-hero.is-compact .hero-user-strip {
    justify-content: flex-end;
}
@media (max-width: 640px) {
    .mogalink-hero.is-compact { padding: 16px 0 6px; text-align: center; }
    .mogalink-hero.is-compact .hero-user-strip { justify-content: center; }
}

.mogalink-builder {
    padding: 40px 0 100px;
}

/* ==========================================================
   SHARE CARD (visible when profile exists)
   ========================================================== */
.share-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
                var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
    animation: shareCardEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Apply preview panel spacing to entire builder container */
.mogalink-builder > .container {
    padding-right: calc(20px + 460px);
    transition: padding-right 0.3s ease;
}

@media (max-width: 1024px) {
    .mogalink-builder > .container {
        padding-right: 20px;
    }
}

.share-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.6), rgba(255, 87, 34, 0.6), transparent);
}

@keyframes shareCardEnter {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.share-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.share-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 12px var(--accent-green);
    animation: shareStatusPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes shareStatusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 12px var(--accent-green); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.35), 0 0 20px var(--accent-green); }
}

.share-header-text h3 {
    margin: 0 0 3px;
    font-size: 1.15rem;
    font-weight: 700;
    background: linear-gradient(180deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.share-header-text p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

.share-grid {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 32px;
    align-items: center;
}

@media (max-width: 720px) {
    .share-grid { grid-template-columns: 1fr; }
    .share-right { justify-self: center; }
}

.share-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* URL box */
.share-url-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.share-url-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.share-url-row {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.share-url-row:focus-within {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.share-url-row input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 14px;
    color: var(--text-main);
    font-family: monospace;
    font-size: 13px;
    min-width: 0;
    outline: none;
}

.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: rgba(255, 87, 34, 0.1);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--accent-orange);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.btn-copy:hover { background: rgba(255, 87, 34, 0.2); }

/* Actions */
.share-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.share-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
}

/* Social share buttons */
.share-socials-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.share-socials-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.share-socials-buttons {
    display: flex;
    gap: 8px;
}

.share-social-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    position: relative;
}

.share-social-btn::before {
    content: '';
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.share-social-btn:hover { transform: translateY(-3px) scale(1.05); }

.share-wa { background: #25d366; }
.share-wa::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 22h-.004a9.87 9.87 0 0 1-5.031-1.378L2.6 22l1.454-4.315a9.87 9.87 0 0 1-1.51-5.26c.002-5.45 4.436-9.884 9.887-9.884a9.83 9.83 0 0 1 6.994 2.9 9.83 9.83 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 22h-.004a9.87 9.87 0 0 1-5.031-1.378L2.6 22l1.454-4.315a9.87 9.87 0 0 1-1.51-5.26c.002-5.45 4.436-9.884 9.887-9.884a9.83 9.83 0 0 1 6.994 2.9 9.83 9.83 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884'/%3E%3C/svg%3E"); }

.share-tw { background: #000; }
.share-tw::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }

.share-fb { background: #1877f2; }
.share-fb::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12'/%3E%3C/svg%3E"); }

.share-li { background: #0a66c2; }
.share-li::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); }

.share-tg { background: #0088cc; }
.share-tg::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E"); }

/* QR code */
.share-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.qr-frame {
    background: white;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qr-frame:hover {
    transform: scale(1.03) rotate(-1deg);
}

.qr-container { display: block; }
.qr-container svg { display: block; border-radius: 4px; }

.qr-hint {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 0;
    text-align: center;
}

/* ==========================================================
   QR CODE CUSTOMIZATION PANEL
   ========================================================== */
.btn-customize-qr {
    margin-top: 10px;
    padding: 8px 16px;
    background: rgba(255, 87, 34, 0.1);
    border: 1px solid rgba(255, 87, 34, 0.3);
    color: var(--accent-orange);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.btn-customize-qr:hover {
    background: rgba(255, 87, 34, 0.2);
    border-color: rgba(255, 87, 34, 0.5);
    transform: translateY(-1px);
}

.qr-custom-panel {
    margin-top: 24px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    animation: qrPanelSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qrPanelSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.qr-custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.qr-custom-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.qr-custom-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.qr-custom-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.qr-custom-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: start;
}

.qr-custom-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    min-height: 200px;
}

.qr-custom-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qr-custom-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qr-custom-field > span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qr-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
}

.qr-color-row input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    padding: 0;
}

.qr-color-row span {
    font-family: 'Monaco', monospace;
    font-size: 12px;
    color: var(--text-main);
    font-weight: 500;
}

.qr-style-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.qr-style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.qr-style-btn:hover {
    background: rgba(255, 87, 34, 0.05);
    border-color: rgba(255, 87, 34, 0.3);
}

.qr-style-btn.selected {
    background: rgba(255, 87, 34, 0.15);
    border-color: var(--accent-orange);
}

.qr-style-preview {
    width: 32px;
    height: 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
}

.qr-style-square span,
.qr-style-rounded span,
.qr-style-dots span {
    background: currentColor;
}

.qr-style-square::before,
.qr-style-square::after,
.qr-style-rounded::before,
.qr-style-rounded::after,
.qr-style-dots::before,
.qr-style-dots::after {
    content: '';
    background: currentColor;
}

.qr-style-square {
    background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%);
    background-size: 8px 8px;
    background-position: 0 0;
}

.qr-style-rounded {
    background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%);
    background-size: 8px 8px;
    border-radius: 4px;
    mask-image: repeating-linear-gradient(45deg, black 0 4px, transparent 4px 6px);
}

.qr-style-dots {
    background-image: radial-gradient(circle, currentColor 30%, transparent 35%);
    background-size: 8px 8px;
}

.qr-logo-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.qr-custom-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .qr-custom-body {
        grid-template-columns: 1fr;
    }
    .qr-custom-preview {
        max-width: 200px;
        margin: 0 auto;
    }
}

/* Modal QR variant */
.modal-qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 20px 0 24px;
}

.modal-qr-frame {
    background: white;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
    display: inline-block;
    animation: qrEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qrEnter {
    from { opacity: 0; transform: scale(0.85) rotate(-3deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .share-status-dot, .qr-frame, .modal-qr-frame, .share-card, .share-social-btn { animation: none !important; transition: none !important; }
}

/* ---------- Hero user strip (email + logout) ---------- */
.hero-user-strip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 6px 6px 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-muted);
}

.hero-user-strip span {
    color: var(--text-main);
}

.btn-ghost-small {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.btn-ghost-small:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* ==========================================================
   AUTH LANDING — Split-screen: value prop + form
   Shown when user is NOT logged in. Full landing experience.
   ========================================================== */
.auth-landing {
    position: relative;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
    padding: 60px 0 80px;
    overflow: hidden;
    isolation: isolate;
}

.auth-landing-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255, 87, 34, 0.12), transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(16, 185, 129, 0.12), transparent 50%);
    z-index: -2;
}

.auth-landing-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    animation: authGlowFloat 20s ease-in-out infinite alternate;
}

.auth-landing-glow-1 {
    background: var(--accent-orange);
    top: -100px; left: -150px;
}

.auth-landing-glow-2 {
    background: var(--accent-green);
    bottom: -150px; right: -100px;
    animation-delay: -10s;
}

@keyframes authGlowFloat {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(60px, 30px) scale(1.15); }
    100% { transform: translate(-40px, -20px) scale(0.9); }
}

.auth-landing-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .auth-landing-grid { grid-template-columns: 1fr; gap: 40px; }
    .auth-landing-left { text-align: center; }
    .auth-landing-features { display: inline-block; text-align: left; }
    .auth-landing-templates { justify-content: center; }
}

/* ---------- Left: value prop ---------- */
.auth-landing-left { animation: fadeInLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.auth-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 87, 34, 0.1);
    border: 1px solid rgba(255, 87, 34, 0.25);
    border-radius: 999px;
    color: var(--accent-orange);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

.auth-landing-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: var(--text-main);
}

.auth-landing-title .gradient-text {
    background: linear-gradient(135deg, #ff5722, #ff8a50);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-landing-title .gradient-text-green {
    background: linear-gradient(135deg, #10b981, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-landing-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 480px;
    margin: 0 0 24px;
}

.auth-landing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-landing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--text-main);
}

.feat-icon {
    display: inline-flex;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255, 87, 34, 0.1);
    border: 1px solid rgba(255, 87, 34, 0.2);
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* Template mini-cards preview */
.auth-landing-templates {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.auth-template-mini {
    width: 56px;
    height: 76px;
    border-radius: 10px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.auth-template-mini:hover { transform: translateY(-4px) scale(1.05); }

.auth-template-mini span:first-child {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.auth-template-mini span:not(:first-child) {
    width: 80%; height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
}

.auth-template-mini.tpl-neon {
    background: radial-gradient(circle at 30% 20%, rgba(255,87,34,0.4), transparent 60%), #07090f;
}
.auth-template-mini.tpl-neon span:first-child { background: linear-gradient(135deg, #ff5722, #10b981); box-shadow: 0 0 8px rgba(255,87,34,0.5); }

.auth-template-mini.tpl-glass {
    background: linear-gradient(135deg, #1e1e3f, #2d1b4e);
}
.auth-template-mini.tpl-glass span:first-child { background: linear-gradient(135deg, #a855f7, #3b82f6); }

.auth-template-mini.tpl-retro {
    background: linear-gradient(180deg, #1a0033 0%, #ff006e 100%);
}
.auth-template-mini.tpl-retro span:first-child { background: linear-gradient(135deg, #ff006e, #00ffff); }

.auth-template-mini.tpl-bento {
    background: #06070c;
}
.auth-template-mini.tpl-bento span:first-child { background: linear-gradient(135deg, #ff5722, #ff8a50); border-radius: 6px; }
.auth-template-mini.tpl-bento span:not(:first-child) { border-radius: 3px; }

.auth-template-mini.tpl-minimalist { background: #0f1116; }
.auth-template-mini.tpl-minimalist span:first-child { background: #f5f5f7; }

.auth-template-mini.tpl-restaurant {
    background:
        radial-gradient(circle at 30% 90%, rgba(230, 182, 118, 0.6), transparent 55%),
        linear-gradient(180deg, #180806, #2b120b);
}
.auth-template-mini.tpl-restaurant span:first-child { background: linear-gradient(135deg, #e6b676, #8b1a1a); box-shadow: 0 0 6px rgba(230, 182, 118, 0.6); }

.auth-template-mini.tpl-immobilier {
    background:
        repeating-linear-gradient(90deg, transparent 0 6px, rgba(212, 175, 55, 0.06) 6px 7px),
        linear-gradient(180deg, #0a1a2e, #051020);
}
.auth-template-mini.tpl-immobilier span:first-child { background: linear-gradient(135deg, #d4af37, #8fa4b8); border-radius: 5px; }

.auth-template-mini.tpl-beaute {
    background: linear-gradient(160deg, #2a1220, #3a1a2e);
}
.auth-template-mini.tpl-beaute span:first-child { background: linear-gradient(135deg, #f4c2c2, #d4a574); box-shadow: 0 0 8px rgba(244, 194, 194, 0.5); }

.auth-template-mini.tpl-fitness {
    background: linear-gradient(160deg, #0a0a0a, #1a0a0a);
    position: relative;
    overflow: hidden;
}
.auth-template-mini.tpl-fitness::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255, 61, 0, 0.5) 0 2px, transparent 2px 8px);
    opacity: 0.6;
}
.auth-template-mini.tpl-fitness span:first-child { background: linear-gradient(135deg, #ff3d00, #eab308); border-radius: 6px; box-shadow: 0 0 6px rgba(255, 61, 0, 0.7); position: relative; z-index: 1; }
.auth-template-mini.tpl-fitness span:not(:first-child) { position: relative; z-index: 1; }

.auth-template-mini.tpl-musique {
    background: linear-gradient(180deg, #0f0819, #1a0a3a);
}
.auth-template-mini.tpl-musique span:first-child { background: linear-gradient(135deg, #e91e63, #00e5ff); box-shadow: 0 0 6px rgba(233, 30, 99, 0.6); }

/* ---------- Right: auth card ---------- */
.auth-landing-right {
    animation: fadeInRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.15s;
    opacity: 0;
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
    margin: 0 auto;
    position: relative;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 34, 0.5), rgba(16, 185, 129, 0.5), transparent);
    border-radius: 20px 20px 0 0;
}

.auth-card-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-card-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text-main);
}

.auth-card-header p {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-landing-glow, .auth-landing-left, .auth-landing-right { animation: none !important; }
    .auth-landing-right { opacity: 1; }
    .auth-template-mini { transition: none; }
}

.auth-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 24px;
    gap: 2px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.auth-tab:hover { color: var(--text-main); }

.auth-tab.active {
    background: var(--gradient-orange);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.35);
}

@media (max-width: 480px) {
    .auth-tab { padding: 9px 6px; font-size: 13px; white-space: nowrap; }
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form .form-field { gap: 6px; }
.auth-form .form-field label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.auth-form .form-field label small {
    color: var(--text-muted);
    font-weight: 400;
    opacity: 0.7;
    margin-left: 4px;
}

.auth-form input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-main);
    font-size: 15px;
    font-family: inherit;
    transition: var(--transition-smooth);
    width: 100%;
}

/* Password field with show/hide toggle */
.password-wrap {
    position: relative;
    display: block;
}
.password-wrap input {
    padding-right: 44px !important;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.password-toggle:hover {
    color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.08);
}
.password-toggle:active { transform: translateY(-50%) scale(0.92); }
.password-toggle .pw-eye[hidden] { display: none !important; }

.auth-form input:focus {
    outline: none;
    border-color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.auth-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 4px;
}

.link-btn {
    background: none;
    border: none;
    color: var(--accent-orange);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-btn:hover { text-decoration: none; }

.form-success-inline {
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    color: #6ee7b7;
    font-size: 14px;
}

.builder-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .builder-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Form ---------- */
.builder-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(20px);
}

.form-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.step-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient-orange);
    color: white;
    font-size: 14px;
    font-weight: 700;
}

/* Template picker (grouped by category) */
.template-categories {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.template-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-category-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}
.template-category-header::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-orange), var(--accent-green));
    border-radius: 2px;
}

.template-category-icon {
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255, 87, 34, 0.35));
}

.template-category-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.template-category-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    opacity: 0.75;
    margin-left: auto;
}

@media (max-width: 500px) {
    .template-category-desc { display: none; }
}

.template-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .template-picker { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
    .template-picker { grid-template-columns: 1fr; }
}

.template-card {
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.template-card:hover {
    border-color: rgba(255, 87, 34, 0.4);
    transform: translateY(-2px);
}

.template-card.selected {
    border-color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.template-card.selected::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gradient-orange);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.template-preview {
    aspect-ratio: 3/4;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 10px;
    overflow: hidden;
    position: relative;
}

.tp-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    flex-shrink: 0;
    z-index: 2;
}

.tp-line {
    width: 60%;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    flex-shrink: 0;
    z-index: 2;
}

.tp-title {
    width: 70%;
    height: 7px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.7);
}

.tp-btn {
    width: 90%;
    height: 14px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    z-index: 2;
}

/* Template preview backgrounds */
.tpl-minimalist { background: #0f1116; }
.tpl-minimalist .tp-avatar { background: #f5f5f7; }
.tpl-minimalist .tp-btn { background: #1a1c22; border: 1px solid rgba(255,255,255,0.08); }

.tpl-neon {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,87,34,0.5), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(16,185,129,0.5), transparent 60%),
        #07090f;
}
.tpl-neon .tp-avatar { background: var(--gradient-orange); box-shadow: 0 0 8px rgba(255,87,34,0.5); }
.tpl-neon .tp-btn {
    background: linear-gradient(135deg, rgba(255,87,34,0.3), rgba(16,185,129,0.2));
    box-shadow: 0 0 6px rgba(255,87,34,0.35);
    border: 1px solid rgba(255,87,34,0.4);
}

.tpl-glass {
    background: linear-gradient(135deg, #1e1e3f 0%, #2d1b4e 50%, #1a1a2e 100%);
}
.tpl-glass::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(147,51,234,0.35), transparent 55%),
                radial-gradient(circle at 70% 80%, rgba(59,130,246,0.3), transparent 55%);
    z-index: 1;
}
.tpl-glass .tp-avatar { background: linear-gradient(135deg, #a855f7, #3b82f6); }
.tpl-glass .tp-btn {
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
}

.tpl-retro {
    background: linear-gradient(180deg, #1a0033 0%, #2d004d 30%, #ff006e 90%);
    overflow: hidden;
}
.tpl-retro::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 200%; height: 45%;
    transform: translateX(-50%) perspective(60px) rotateX(45deg);
    transform-origin: bottom;
    background:
        linear-gradient(90deg, transparent 48%, rgba(255,0,255,0.6) 49%, rgba(255,0,255,0.6) 51%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(0,255,255,0.5) 49%, rgba(0,255,255,0.5) 51%, transparent 52%);
    background-size: 12px 12px;
    z-index: 1;
}
.tpl-retro::after {
    content: '';
    position: absolute;
    top: 20%; left: 50%;
    transform: translateX(-50%);
    width: 50px; height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffde00, #ff006e);
    box-shadow: 0 0 30px rgba(255, 214, 0, 0.5);
    z-index: 0;
}
.tpl-retro .tp-avatar { background: linear-gradient(135deg, #ff006e, #00ffff); box-shadow: 0 0 8px #ff006e; }
.tpl-retro .tp-btn {
    background: rgba(0,0,0,0.4);
    border: 1px solid #ff006e;
    box-shadow: 0 0 6px #ff006e;
}

.tpl-bento {
    background: #06070c;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 26px 18px 18px 18px;
    gap: 4px;
}
.tpl-bento .tp-avatar {
    grid-column: 1 / span 2; grid-row: 1;
    background: linear-gradient(135deg, #ff5722, #ff8a50);
    width: 100% !important; height: 100% !important;
    border-radius: 6px !important;
    margin: 0 !important;
    box-shadow: 0 0 8px rgba(255,87,34,0.4);
}
.tpl-bento .tp-title {
    grid-column: 3; grid-row: 1;
    background: linear-gradient(135deg, #10b981, #34d399);
    width: 100%; height: 100%;
    border-radius: 6px;
    margin: 0;
}
.tpl-bento .tp-btn {
    width: 100% !important; height: 100% !important;
    border-radius: 5px !important;
}
.tpl-bento .tp-btn:nth-of-type(1) { grid-column: 1 / span 2; grid-row: 2; background: linear-gradient(135deg, #a855f7, #ec4899); }
.tpl-bento .tp-btn:nth-of-type(2) { grid-column: 3; grid-row: 2 / span 2; background: linear-gradient(180deg, #3b82f6, #06b6d4); }
.tpl-bento .tp-btn:nth-of-type(3) { grid-column: 1 / span 2; grid-row: 3 / span 2; background: linear-gradient(135deg, #eab308, #f97316); }

/* --- Category theme previews (Restaurant, Immobilier, Beauté, Fitness, Musique) --- */

.tpl-restaurant {
    background:
        radial-gradient(circle at 30% 90%, rgba(230, 182, 118, 0.5), transparent 55%),
        radial-gradient(circle at 70% 90%, rgba(230, 182, 118, 0.35), transparent 50%),
        linear-gradient(180deg, #180806 0%, #2b120b 60%, #1a0a06 100%);
}
.tpl-restaurant::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 20%, rgba(139, 26, 26, 0.35), transparent 55%);
    z-index: 1;
}
.tpl-restaurant .tp-avatar {
    background: linear-gradient(135deg, #e6b676, #8b1a1a);
    box-shadow: 0 0 8px rgba(230, 182, 118, 0.6), inset 0 0 0 1px rgba(245, 230, 201, 0.4);
}
.tpl-restaurant .tp-title { background: linear-gradient(90deg, #f5e6c9, #e6b676); }
.tpl-restaurant .tp-btn {
    background: linear-gradient(135deg, rgba(58, 26, 10, 0.9), rgba(32, 10, 5, 0.9));
    border: 1px solid rgba(230, 182, 118, 0.35);
    box-shadow: inset 3px 0 0 #c9975b;
}

.tpl-immobilier {
    background: linear-gradient(180deg, #0a1a2e 0%, #051020 60%, #030910 100%);
    overflow: hidden;
}
.tpl-immobilier::before {
    content: '';
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 12px, rgba(212, 175, 55, 0.06) 12px 13px),
        repeating-linear-gradient(0deg, transparent 0 12px, rgba(201, 214, 223, 0.05) 12px 13px);
    z-index: 1;
}
.tpl-immobilier::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 32%;
    background:
        linear-gradient(90deg, transparent 0 6%, #0a1a2e 6% 12%, transparent 12% 18%, #122c4c 18% 26%, transparent 26% 32%,
            #0a1a2e 32% 42%, transparent 42% 48%, #122c4c 48% 58%, transparent 58% 64%, #0a1a2e 64% 74%, transparent 74% 82%, #122c4c 82% 92%, transparent 92%);
    -webkit-mask-image: linear-gradient(180deg, transparent, black 60%);
    mask-image: linear-gradient(180deg, transparent, black 60%);
    z-index: 1;
}
.tpl-immobilier .tp-avatar {
    background: linear-gradient(135deg, #d4af37, #8fa4b8);
    border-radius: 6px !important;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.45);
}
.tpl-immobilier .tp-title { background: linear-gradient(90deg, #c9d6df, #d4af37); }
.tpl-immobilier .tp-btn {
    background: linear-gradient(180deg, rgba(18, 44, 76, 0.85), rgba(10, 26, 46, 0.85));
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.tpl-beaute {
    background: linear-gradient(160deg, #2a1220 0%, #3a1a2e 50%, #150810 100%);
    overflow: hidden;
}
.tpl-beaute::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(244, 194, 194, 0.35), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 165, 116, 0.3), transparent 50%);
    z-index: 1;
}
.tpl-beaute::after {
    content: '';
    position: absolute; inset: -10%;
    background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(244, 194, 194, 0.06) 22px 24px);
    z-index: 1;
}
.tpl-beaute .tp-avatar {
    background: linear-gradient(135deg, #f4c2c2, #d4a574);
    box-shadow: 0 0 10px rgba(244, 194, 194, 0.6);
}
.tpl-beaute .tp-title { background: linear-gradient(90deg, #f4c2c2, #d4a574); }
.tpl-beaute .tp-btn {
    background: linear-gradient(135deg, rgba(244, 194, 194, 0.12), rgba(138, 77, 118, 0.2));
    border: 1px solid rgba(244, 194, 194, 0.35);
}

.tpl-fitness {
    background: linear-gradient(160deg, #0a0a0a 0%, #1a0a0a 55%, #050505 100%);
    overflow: hidden;
}
.tpl-fitness::before {
    content: '';
    position: absolute;
    top: -20%; right: -20%;
    width: 80%; height: 80%;
    background: repeating-linear-gradient(45deg,
        rgba(255, 61, 0, 0.6) 0 4px,
        transparent 4px 12px);
    transform: rotate(-8deg);
    z-index: 1;
    opacity: 0.7;
}
.tpl-fitness::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -20%;
    width: 70%; height: 70%;
    background: radial-gradient(circle, rgba(255, 61, 0, 0.35), transparent 60%);
    filter: blur(6px);
    z-index: 0;
}
.tpl-fitness .tp-avatar {
    background: linear-gradient(135deg, #ff3d00, #eab308);
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(255, 61, 0, 0.7);
}
.tpl-fitness .tp-title { background: linear-gradient(90deg, #ff3d00, #eab308); }
.tpl-fitness .tp-btn {
    background: rgba(20, 8, 4, 0.9);
    border: 1px solid rgba(255, 61, 0, 0.4);
    box-shadow: inset 3px 0 0 #ff3d00;
}

.tpl-musique {
    background: linear-gradient(180deg, #0f0819 0%, #1a0a3a 55%, #08040f 100%);
    overflow: hidden;
}
.tpl-musique::before {
    content: '';
    position: absolute;
    top: -30%; left: 50%;
    width: 200%; height: 80%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center top, rgba(124, 58, 237, 0.5), transparent 55%);
    z-index: 0;
}
.tpl-musique::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 6px; right: 6px;
    height: 24%;
    background:
        linear-gradient(90deg,
            #e91e63 0 6%, transparent 6% 10%,
            #7c3aed 10% 16%, transparent 16% 20%,
            #00e5ff 20% 26%, transparent 26% 30%,
            #e91e63 30% 36%, transparent 36% 40%,
            #7c3aed 40% 46%, transparent 46% 50%,
            #00e5ff 50% 56%, transparent 56% 60%,
            #e91e63 60% 66%, transparent 66% 70%,
            #7c3aed 70% 76%, transparent 76% 80%,
            #00e5ff 80% 86%, transparent 86% 90%,
            #e91e63 90% 96%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%);
    mask-image: linear-gradient(180deg, transparent 0%, black 30%);
    border-radius: 3px;
    z-index: 1;
    opacity: 0.85;
}
.tpl-musique .tp-avatar {
    background: linear-gradient(135deg, #e91e63, #00e5ff);
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.6);
}
.tpl-musique .tp-title { background: linear-gradient(90deg, #00e5ff, #e91e63); }
.tpl-musique .tp-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(0, 229, 255, 0.15));
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 0 6px rgba(233, 30, 99, 0.3);
}

/* --- SPORT MINI SWATCHES --- */

/* Basketball — parquet + orange leather ball */
.tpl-basket {
    background: linear-gradient(180deg, #3d2110 0%, #5a2f18 50%, #2c1808 100%);
    overflow: hidden;
}
.tpl-basket::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.02) 0 12px,
        transparent 12px 14px);
    z-index: 0;
}
.tpl-basket::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; height: 60%;
    border: 1.5px solid rgba(242, 140, 40, 0.5);
    border-radius: 50%;
    z-index: 0;
}
.tpl-basket .tp-avatar {
    background: radial-gradient(circle at 35% 35%, #ff9e5c, #d95d18);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.4), 0 0 8px rgba(242, 140, 40, 0.6);
    position: relative;
    z-index: 2;
}
.tpl-basket .tp-title { background: linear-gradient(90deg, #f28c28, #ffb066); }
.tpl-basket .tp-btn {
    background: rgba(20, 8, 4, 0.85);
    border: 1px solid rgba(242, 140, 40, 0.5);
    box-shadow: inset 3px 0 0 #f28c28;
    z-index: 2;
    position: relative;
}

/* Football — grass field + white chalk */
.tpl-football {
    background: repeating-linear-gradient(90deg,
        #0d5e2e 0 18px,
        #0a4a25 18px 36px);
    overflow: hidden;
}
.tpl-football::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 55%; height: 55%;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    z-index: 0;
}
.tpl-football::after {
    content: '';
    position: absolute;
    left: 6px; right: 6px; top: 6px; bottom: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}
.tpl-football .tp-avatar {
    background: radial-gradient(circle at 30% 30%, #ffffff, #d0d0d0);
    box-shadow: 0 0 0 2px #0a0a0a, 0 0 8px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
}
.tpl-football .tp-title { background: #ffffff; }
.tpl-football .tp-btn {
    background: rgba(8, 40, 20, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    box-shadow: none;
    z-index: 2;
    position: relative;
}

/* Combat — red canvas + gold ropes */
.tpl-combat {
    background: linear-gradient(180deg, #1a0000 0%, #4a0a0a 50%, #0a0000 100%);
    overflow: hidden;
}
.tpl-combat::before {
    content: '';
    position: absolute;
    top: 20%; left: -10%; right: -10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #c9a145, transparent);
    box-shadow: 0 20px 0 rgba(201, 161, 69, 0.7), 0 40px 0 rgba(201, 161, 69, 0.5);
    z-index: 0;
}
.tpl-combat::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80%; height: 100%;
    background: radial-gradient(ellipse at top, rgba(201, 161, 69, 0.35), transparent 55%);
    z-index: 0;
}
.tpl-combat .tp-avatar {
    background: linear-gradient(135deg, #c9a145, #7a0000);
    box-shadow: 0 0 0 2px #c9a145, 0 0 12px rgba(201, 161, 69, 0.7);
    border-radius: 50% !important;
    position: relative;
    z-index: 2;
}
.tpl-combat .tp-title { background: linear-gradient(90deg, #c9a145, #f5d78a); }
.tpl-combat .tp-btn {
    background: rgba(20, 4, 4, 0.9);
    border: 1px solid rgba(201, 161, 69, 0.5);
    box-shadow: 0 0 6px rgba(201, 161, 69, 0.3);
    z-index: 2;
    position: relative;
}

/* --- CINEMA MINI SWATCHES --- */

/* Film Noir — pure B&W + spotlight beam + grain */
.tpl-noir {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #050505 100%);
    overflow: hidden;
}
.tpl-noir::before {
    content: '';
    position: absolute;
    top: -20%; left: 50%;
    width: 60%; height: 100%;
    background: linear-gradient(180deg, rgba(232, 232, 232, 0.28), transparent 70%);
    transform: translateX(-50%) skewX(-8deg);
    filter: blur(6px);
    z-index: 0;
}
.tpl-noir::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}
.tpl-noir .tp-avatar {
    background: radial-gradient(circle at 35% 35%, #f5f5f5, #8a8a8a);
    box-shadow: 0 0 0 2px #0a0a0a, 0 0 10px rgba(232, 232, 232, 0.35);
    position: relative;
    z-index: 2;
}
.tpl-noir .tp-title { background: #e8e8e8; }
.tpl-noir .tp-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(232, 232, 232, 0.4);
    color: #e8e8e8;
    z-index: 2;
    position: relative;
}

/* Blockbuster — dark theater + gold marquee lights */
.tpl-blockbuster {
    background: linear-gradient(180deg, #1a0000 0%, #2d0505 60%, #0a0000 100%);
    overflow: hidden;
}
.tpl-blockbuster::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px;
    height: 6px;
    background:
        radial-gradient(circle at 8% 50%, #ffd76a 0 2px, transparent 2.5px),
        radial-gradient(circle at 24% 50%, #ffd76a 0 2px, transparent 2.5px),
        radial-gradient(circle at 40% 50%, #ffd76a 0 2px, transparent 2.5px),
        radial-gradient(circle at 56% 50%, #ffd76a 0 2px, transparent 2.5px),
        radial-gradient(circle at 72% 50%, #ffd76a 0 2px, transparent 2.5px),
        radial-gradient(circle at 88% 50%, #ffd76a 0 2px, transparent 2.5px);
    filter: drop-shadow(0 0 3px rgba(255, 215, 106, 0.85));
    z-index: 3;
}
.tpl-blockbuster::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(180deg, transparent, rgba(139, 0, 0, 0.55) 60%, rgba(201, 161, 69, 0.35));
    z-index: 0;
}
.tpl-blockbuster .tp-avatar {
    background: linear-gradient(135deg, #ffd76a, #c9a145);
    box-shadow: 0 0 0 2px #8b0000, 0 0 12px rgba(255, 215, 106, 0.8);
    position: relative;
    z-index: 2;
}
.tpl-blockbuster .tp-title {
    background: linear-gradient(90deg, #ffd76a, #ffffff, #c9a145);
}
.tpl-blockbuster .tp-btn {
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.8), rgba(60, 0, 0, 0.9));
    border: 1px solid #c9a145;
    box-shadow: inset 0 1px 0 rgba(255, 215, 106, 0.35);
    z-index: 2;
    position: relative;
}

/* Sci-Fi — cyberpunk grid + hologram */
.tpl-scifi {
    background: linear-gradient(180deg, #050510 0%, #0a0a25 55%, #030308 100%);
    overflow: hidden;
}
.tpl-scifi::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.15) 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    z-index: 0;
    opacity: 0.55;
}
.tpl-scifi::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 65%; height: 100%;
    background: radial-gradient(ellipse at top, rgba(0, 229, 255, 0.35), transparent 55%),
                radial-gradient(ellipse at bottom, rgba(124, 77, 255, 0.35), transparent 55%);
    z-index: 0;
}
.tpl-scifi .tp-avatar {
    background: linear-gradient(135deg, #00e5ff, #7c4dff);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.8), 0 0 14px rgba(124, 77, 255, 0.7);
    border-radius: 30% !important;
    position: relative;
    z-index: 2;
}
.tpl-scifi .tp-title { background: linear-gradient(90deg, #00e5ff, #7c4dff); }
.tpl-scifi .tp-btn {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(124, 77, 255, 0.12));
    border: 1px solid rgba(0, 229, 255, 0.6);
    box-shadow: inset 0 0 4px rgba(0, 229, 255, 0.4), 0 0 6px rgba(124, 77, 255, 0.3);
    z-index: 2;
    position: relative;
}

.template-name {
    text-align: center;
    font-size: 13px;
    line-height: 1.35;
}
.template-name strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.template-name small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.65;
}
.template-card.selected .template-name strong { color: var(--text-main); }

/* ---------- Avatar upload ---------- */
.avatar-upload {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    transition: var(--transition-smooth);
}

.avatar-upload:hover {
    border-color: rgba(255, 87, 34, 0.4);
    background: rgba(255, 87, 34, 0.03);
}

.avatar-upload-preview {
    width: 88px;
    height: 88px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1c22, #0d1017);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.avatar-upload-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.avatar-upload-placeholder {
    font-size: 32px;
    font-weight: 700;
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.avatar-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 87, 34, 0.1);
    border: 1px solid rgba(255, 87, 34, 0.35);
    color: var(--accent-orange);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
}

.btn-upload:hover {
    background: rgba(255, 87, 34, 0.18);
    border-color: var(--accent-orange);
    transform: translateY(-1px);
}

.btn-upload-remove {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.btn-upload-remove:hover {
    background: rgba(239, 68, 68, 0.1);
}

.avatar-upload-status {
    font-size: 12px;
    min-height: 16px;
}
.avatar-upload-status.loading { color: var(--text-muted); }
.avatar-upload-status.success { color: var(--accent-green); }
.avatar-upload-status.error { color: #fca5a5; }

/* ---------- Avatar settings (size + position) ---------- */
.avatar-settings {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: end;
}

@media (max-width: 640px) {
    .avatar-settings { grid-template-columns: 1fr; }
}

.avatar-setting-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.avatar-setting-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.segmented-control {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.segmented-control .segment {
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 7px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: var(--transition-smooth);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.segmented-control.small .segment {
    padding: 8px 12px;
    min-width: 40px;
    font-size: 15px;
}

.segmented-control .segment:hover {
    color: var(--text-main);
}

.segmented-control .segment.selected {
    background: var(--gradient-orange);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.35);
}

.segmented-control .segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Form fields */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field span {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.form-field input,
.form-field textarea,
.form-field select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-main);
    font-size: 15px;
    font-family: inherit;
    transition: var(--transition-smooth);
    width: 100%;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.form-field textarea {
    resize: vertical;
    min-height: 60px;
}

.field-hint {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Slug input */
.slug-input {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.slug-input:focus-within {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.slug-prefix {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 14px;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.slug-input input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 14px;
    color: var(--text-main);
    font-size: 15px;
    min-width: 0;
}

/* Color picker */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
}

.color-picker-wrapper input[type="color"] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.color-picker-wrapper input[type="color"]:focus {
    outline: 2px solid var(--accent-orange);
}

.color-value {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    color: var(--text-main);
    font-weight: 500;
    white-space: nowrap;
}

/* Coming Soon toggle */
.coming-soon-toggle-wrapper {
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.06), rgba(16, 185, 129, 0.04));
    border: 1px solid rgba(255, 87, 34, 0.15);
    border-radius: 12px;
    margin-bottom: 12px;
}

.coming-soon-toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
}

.coming-soon-toggle-label input {
    display: none;
}

.coming-soon-toggle-switch {
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    transition: background 0.3s ease;
    flex-shrink: 0;
    margin-top: 3px;
}

.coming-soon-toggle-switch::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.coming-soon-toggle-label input:checked + .coming-soon-toggle-switch {
    background: var(--accent-orange);
}

.coming-soon-toggle-label input:checked + .coming-soon-toggle-switch::after {
    transform: translateX(20px);
}

.coming-soon-toggle-text strong {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    margin-bottom: 2px;
}

.coming-soon-toggle-text small {
    display: block;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

#comingSoonFields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    animation: linkSlideIn 0.4s ease;
}

/* Color mode picker */
.color-mode-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.color-mode-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.color-mode-option:hover {
    background: rgba(255, 87, 34, 0.05);
    border-color: rgba(255, 87, 34, 0.3);
}

.color-mode-option.selected {
    background: rgba(255, 87, 34, 0.1);
    border-color: var(--accent-orange);
}

.color-mode-option input {
    display: none;
}

.color-mode-preview {
    width: 50px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px;
    position: relative;
    overflow: hidden;
}

.color-mode-preview-dark {
    background: #07090f;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-mode-preview-light {
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.color-mode-preview-auto {
    background: linear-gradient(90deg, #07090f 50%, #f5f5f7 50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5722;
}

.cm-line {
    height: 3px;
    width: 24px;
    border-radius: 2px;
}

.color-mode-preview-dark .cm-line { background: rgba(255,255,255,0.2); }
.color-mode-preview-light .cm-line { background: rgba(0,0,0,0.15); }
.color-mode-preview-auto .cm-line {
    background: linear-gradient(90deg, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0.15) 50%);
}

.color-mode-label {
    font-size: 12px;
    color: var(--text-main);
    font-weight: 500;
}

/* Form select */
.form-select {
    appearance: none;
    background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0aec0' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right: 36px;
    background-size: 12px;
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-orange);
    background-color: rgba(255, 87, 34, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.slug-input input:focus {
    outline: none;
    background: transparent;
    box-shadow: none;
}

.slug-status {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 18px;
    font-weight: 700;
    min-width: 40px;
    justify-content: center;
}

.slug-status.ok { color: var(--accent-green); }
.slug-status.ko { color: #ef4444; }
.slug-status.checking { color: var(--text-muted); }

/* Link rows */
.links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-row {
    display: grid;
    grid-template-columns: 120px 1fr 1.4fr auto;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
}

@media (max-width: 640px) {
    .link-row { grid-template-columns: 120px 1fr auto; }
    .link-row .link-url { grid-column: 1 / -1; }
}

.link-row input,
.link-row select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text-main);
    font-size: 14px;
    font-family: inherit;
}

.link-row input:focus,
.link-row select:focus {
    outline: none;
    border-color: var(--accent-orange);
}

.link-remove {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.link-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.1);
}

.btn-add-link {
    align-self: flex-start;
    padding: 10px 18px;
    background: transparent;
    border: 1px dashed rgba(255, 87, 34, 0.4);
    color: var(--accent-orange);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.btn-add-link:hover {
    background: rgba(255, 87, 34, 0.05);
    border-color: var(--accent-orange);
}

/* ---------- Socials grid (builder) ---------- */
.socials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 640px) {
    .socials-grid { grid-template-columns: 1fr; }
}

.social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 6px 12px 6px 10px;
    transition: var(--transition-smooth);
}

.social-row:focus-within {
    border-color: rgba(255, 87, 34, 0.4);
    background: rgba(255, 87, 34, 0.03);
}

.social-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 7px;
    flex-shrink: 0;
    transition: color 0.25s ease;
}

.social-icon svg { width: 16px; height: 16px; }

.social-row:focus-within .social-icon { color: var(--accent-orange); }

.social-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 13px;
    padding: 8px 0;
    font-family: inherit;
    min-width: 0;
}

.social-input:focus {
    outline: none;
    background: transparent;
}

/* Actions */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

.form-actions .btn { align-self: flex-start; min-width: 220px; }
.form-actions .btn:disabled { opacity: 0.6; cursor: not-allowed; }

.form-error {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 14px;
}

/* ---------- Preview panel (device-frame style) ---------- */
.builder-preview {
    position: fixed;
    right: 20px;
    top: 80px;
    width: 420px;
    height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 10;
}

.builder-preview::-webkit-scrollbar {
    width: 6px;
}

.builder-preview::-webkit-scrollbar-track {
    background: transparent;
}

.builder-preview::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.builder-preview::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.preview-frame {
    background: #05070c;
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.02);
    position: relative;
    padding: 40px 6px 6px;
}

.preview-dot {
    position: absolute;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}
.preview-dot:nth-child(1) {
    left: 50%; transform: translateX(-50%);
    width: 60px; height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
}
.preview-dot:nth-child(2), .preview-dot:nth-child(3) { display: none; }

.preview-title {
    position: absolute;
    top: 18px;
    right: 24px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.5;
}

.preview-root {
    height: 620px;
    overflow-y: auto;
    /* Contain scroll on desktop so overshoot doesn't leak to the page */
    overscroll-behavior: contain;
    position: relative;
    border-radius: 34px;
}

.preview-root::-webkit-scrollbar { width: 4px; }
.preview-root::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }

/* Mobile & tablet: mockup grows with content, capped so a huge profile doesn't dominate the page.
   Internal scroll only kicks in past 70vh, and overscroll-behavior stops the touch-trap. */
@media (max-width: 1024px) {
    .preview-root {
        height: auto;
        min-height: 360px;
        max-height: 70vh;
        max-height: 70dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

/* ==========================================================
   SUCCESS MODAL
   ========================================================== */
.mogalink-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInUp 0.3s ease;
}

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

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}

.modal-card {
    position: relative;
    background: linear-gradient(180deg, rgba(20, 22, 30, 0.98), rgba(10, 12, 20, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 87, 34, 0.1);
}

.modal-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--accent-green);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

.modal-card h2 { font-size: 1.6rem; margin-bottom: 8px; }
.modal-card p { color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }

.modal-link { display: flex; gap: 8px; margin-bottom: 20px; }
.modal-link input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    padding: 12px 14px;
    border-radius: 10px;
    font-family: monospace;
    font-size: 13px;
    min-width: 0;
}

.modal-warn {
    padding: 16px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 12px;
    margin: 16px 0;
}
.modal-warn strong { display: block; color: #fbbf24; margin-bottom: 6px; }
.modal-warn p { color: var(--text-muted); font-size: 14px; margin-bottom: 12px; }

.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    transition: var(--transition-smooth);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-main); }

/* ==========================================================
   VIEWER (public page /l/:slug) — SHARED BASE
   ========================================================== */
.mogalink-view-body {
    background: #04060a;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.viewer-root {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.viewer-loading {
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 15px;
}

/* ==========================================================
   SKELETON LOADERS — animated placeholders for public viewer
   ========================================================== */
.viewer-skeleton {
    width: 100%;
    max-width: 600px;
    padding: 60px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    border-radius: 12px;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.skeleton-title {
    width: 200px;
    height: 32px;
    border-radius: 8px;
}

.skeleton-bio {
    width: 280px;
    height: 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.skeleton-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    margin-top: 8px;
}

.skeleton-link {
    height: 56px;
    border-radius: 14px;
    width: 100%;
}

.skeleton-socials {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.skeleton-social {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

/* Fade out when content loads */
.viewer-skeleton.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* ==========================================================
   ONBOARDING TOUR
   ========================================================== */
.onboarding-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    animation: onboardingFadeIn 0.4s ease;
}

@keyframes onboardingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.onboarding-spotlight {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 87, 34, 0.5);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    animation: spotlightPulse 2s ease-in-out infinite;
}

@keyframes spotlightPulse {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 87, 34, 0.4); }
    50% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 87, 34, 0.7); }
}

.onboarding-tooltip {
    position: absolute;
    background: linear-gradient(135deg, #1a1c22, #23252c);
    border: 1px solid rgba(255, 87, 34, 0.4);
    border-radius: 16px;
    padding: 24px;
    max-width: 380px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 87, 34, 0.2);
    animation: tooltipSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tooltipSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.onboarding-step-count {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 87, 34, 0.15);
    border: 1px solid rgba(255, 87, 34, 0.3);
    color: var(--accent-orange);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.onboarding-tooltip h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}

.onboarding-tooltip p {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.onboarding-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.btn-onboarding-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
    font-family: inherit;
}

.btn-onboarding-skip:hover {
    color: var(--text-main);
    text-decoration: underline;
}

.onboarding-nav {
    display: flex;
    gap: 8px;
}

.btn-onboarding-nav,
.btn-onboarding-next {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-onboarding-next {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: white;
}

.btn-onboarding-nav:hover {
    background: rgba(255, 255, 255, 0.08);
}

.btn-onboarding-next:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 87, 34, 0.4);
}

.onboarding-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-orange), var(--accent-green));
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: 20%;
}

/* ==========================================================
   COMING SOON MODE — full-page landing with countdown
   ========================================================== */
.viewer-coming-soon {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.v-cs-content {
    text-align: center;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: csEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes csEnter {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.v-cs-avatar {
    animation: csFloat 4s ease-in-out infinite;
}

@keyframes csFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.v-cs-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

.v-cs-badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.2), rgba(16, 185, 129, 0.15));
    border: 1px solid rgba(255, 87, 34, 0.4);
    color: var(--accent-orange);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    animation: csPulse 3s ease-in-out infinite;
}

@keyframes csPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.3); }
    50% { box-shadow: 0 0 30px 8px rgba(255, 87, 34, 0.15); }
}

.v-cs-message {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 400px;
}

.v-cs-timer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0;
    width: 100%;
}

.v-cs-timer-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    transition: transform 0.3s ease;
}

.v-cs-timer-block:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 87, 34, 0.3);
}

.v-cs-timer-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--accent-orange);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}

.v-cs-timer-lbl {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 8px;
    font-weight: 600;
}

.v-cs-bio {
    margin-top: 10px;
}

@media (max-width: 640px) {
    .v-cs-title { font-size: 2rem; }
    .v-cs-timer { gap: 8px; }
    .v-cs-timer-block { padding: 14px 8px; }
    .v-cs-timer-num { font-size: 26px; }
    .v-cs-timer-lbl { font-size: 10px; }
}

/* ==========================================================
   COUNTDOWN WIDGET — for event/launch pages
   ========================================================== */
.v-link-countdown {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px !important;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(16, 185, 129, 0.1)) !important;
    border: 1px solid rgba(255, 87, 34, 0.3) !important;
    text-align: center;
    animation: countdownPulse 3s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.2); }
    50% { box-shadow: 0 0 20px 4px rgba(255, 87, 34, 0.1); }
}

.v-countdown-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.v-countdown-timer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.v-countdown-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-width: 0;
}

.v-countdown-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-orange);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.v-countdown-lbl {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.v-countdown-cta {
    display: inline-block;
    padding: 8px 16px;
    background: var(--accent-orange);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v-countdown-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 87, 34, 0.4);
}

.v-countdown-ended {
    padding: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.15);
    border-radius: 10px;
}

/* Link tags */
.v-link-tag-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: linkSlideIn 0.4s ease;
}

.v-link-tag-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-orange);
    margin-bottom: 10px;
    display: block;
    text-align: center;
}

/* ==========================================================
   LIGHT MODE — for public viewer (opt-in via .viewer-light)
   ========================================================== */
.viewer-light {
    background: #f5f5f7;
    color: #1a1a1a;
}
.viewer-light .v-bg { opacity: 0.3; filter: brightness(1.5); }
.viewer-light .v-name {
    color: #1a1a1a;
    background: none;
    -webkit-text-fill-color: #1a1a1a;
}
.viewer-light .v-bio { color: #4a4a4a; }
.viewer-light .v-link {
    background: rgba(0, 0, 0, 0.04);
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.08);
}
.viewer-light .v-link:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}
.viewer-light .v-link-icon { color: var(--accent-orange); }
.viewer-light .v-link-title { color: #1a1a1a; }
.viewer-light .v-link-arrow { color: rgba(0, 0, 0, 0.5); }
.viewer-light .v-empty { color: rgba(0, 0, 0, 0.5); }
.viewer-light .v-social {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.1);
}
.viewer-light .v-social:hover {
    background: rgba(0, 0, 0, 0.1);
}
.viewer-light .viewer-footer {
    color: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
.viewer-light .viewer-footer strong { color: #1a1a1a; }
.viewer-light .v-avatar-fallback {
    background: rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
}
.viewer-light .v-avatar {
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Auto mode — respects OS preference */
@media (prefers-color-scheme: light) {
    .viewer-auto {
        background: #f5f5f7;
        color: #1a1a1a;
    }
    .viewer-auto .v-bg { opacity: 0.3; filter: brightness(1.5); }
    .viewer-auto .v-name {
        color: #1a1a1a;
        background: none;
        -webkit-text-fill-color: #1a1a1a;
    }
    .viewer-auto .v-bio { color: #4a4a4a; }
    .viewer-auto .v-link {
        background: rgba(0, 0, 0, 0.04);
        color: #1a1a1a;
        border-color: rgba(0, 0, 0, 0.08);
    }
    .viewer-auto .v-social {
        background: rgba(0, 0, 0, 0.05);
        color: #1a1a1a;
        border-color: rgba(0, 0, 0, 0.1);
    }
}

/* ==========================================================
   MICRO-ANIMATIONS — polish on buttons, cards, interactions
   ========================================================== */

/* Enhanced button press effect */
.btn:active,
button:active:not(:disabled) {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

/* Card lift on hover */
.template-card,
.profile-card {
    will-change: transform, box-shadow;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.template-card:hover:not(.selected) {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.profile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}

/* Copy button success animation */
.btn-copy.copied {
    background: var(--accent-green, #10b981);
    color: white;
    animation: copyPulse 0.6s ease;
}

@keyframes copyPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Link row entrance animation */
.link-row {
    animation: linkSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes linkSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form field focus glow */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.slug-input:focus-within,
.profile-url-box:focus-within {
    animation: focusGlow 0.4s ease;
}

@keyframes focusGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.3); }
    100% { box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15); }
}

/* Ripple effect on primary buttons */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.btn-primary:active::before {
    width: 300px;
    height: 300px;
}

/* Smooth avatar upload preview */
.avatar-upload-preview img,
.profile-avatar-lg img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.avatar-upload-preview:hover img,
.profile-avatar-lg:hover img {
    transform: scale(1.05);
}

/* Segment selection animation */
.segmented-control .segment {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.segmented-control .segment.selected {
    animation: segmentPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes segmentPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Stat number count-up glow */
.profile-stat-value {
    transition: color 0.3s ease, transform 0.3s ease;
}

.profile-stat:hover .profile-stat-value {
    color: var(--accent-orange);
    transform: scale(1.05);
}

/* Icon hover rotate */
.profile-card-icon svg,
.step-num {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.profile-card:hover .profile-card-icon svg {
    transform: rotate(10deg) scale(1.1);
}

/* Toast notification (for future use) */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Smooth page transitions */
.profile-page,
.mogalink-builder,
.auth-screen {
    animation: pageFadeIn 0.4s ease;
}

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.viewer {
    width: 100%;
    max-width: 600px;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    padding: 60px 20px 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.v-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.v-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
    width: 100%;
    animation: viewerFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes viewerFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Avatar size scale (drives all templates) */
.viewer { --avatar-size: 96px; }
.viewer[data-avatar-size="sm"] { --avatar-size: 72px; }
.viewer[data-avatar-size="md"] { --avatar-size: 96px; }
.viewer[data-avatar-size="lg"] { --avatar-size: 130px; }

.v-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.v-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.v-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--avatar-size) * 0.4);
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #ff5722, #10b981);
}

/* Name font-size scales gently with avatar size */
.viewer[data-avatar-size="sm"] .v-name { font-size: 1.35rem; }
.viewer[data-avatar-size="lg"] .v-name { font-size: 1.85rem; }

.v-name {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin: 0;
    position: relative;
}

.v-bio {
    color: var(--text-muted);
    text-align: center;
    max-width: 420px;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 0 12px;
}

.v-links {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.v-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    color: var(--text-main);
    opacity: 0;
    animation: linkEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(0.15s + (var(--i, 0) * 0.07s));
}

@keyframes linkEnter {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

.v-link:hover { transform: translateY(-2px); }
.v-link:active { transform: translateY(0); }

.v-link-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.v-link-icon svg { width: 100%; height: 100%; }

.v-link-title { flex: 1; text-align: center; }

.v-link-arrow { opacity: 0.5; transition: opacity 0.2s, transform 0.25s; }
.v-link:hover .v-link-arrow { opacity: 1; transform: translateX(3px); }

.v-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
    font-size: 14px;
}

/* ==========================================================
   SOCIAL ICONS FOOTER — high-contrast + spring interactions
   Palette per template + brand-color reveal on hover
   Motion: cubic-bezier(0.34, 1.56, 0.64, 1) = spring overshoot
   ========================================================== */
.v-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 20px;
    width: 100%;
    max-width: 460px;
    flex-wrap: wrap;
}

.v-social {
    /* Base — light: white icon on translucent, clear border */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    /* spring-like framer-motion feel */
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.28s ease,
        border-color 0.28s ease,
        color 0.28s ease,
        box-shadow 0.28s ease;
    /* staggered entrance */
    opacity: 0;
    animation: vSocialEnter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(0.5s + (var(--i, 0) * 0.06s));
    will-change: transform;
}

@keyframes vSocialEnter {
    from { opacity: 0; transform: translateY(14px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.v-social svg { width: 20px; height: 20px; }

.v-social:hover {
    transform: translateY(-4px) scale(1.12) rotate(-4deg);
}

.v-social:active {
    transform: translateY(-1px) scale(0.96);
    transition-duration: 0.1s;
}

/* ==========================================================
   TEMPLATE 1: MINIMALIST — icon inverse on hover
   Palette: white icon on #1a1c22 → black icon on white bg
   ========================================================== */
.viewer-minimalist .v-social {
    background: #1a1c22;
    border-color: rgba(255, 255, 255, 0.15);
    color: #f5f5f7;
}
.viewer-minimalist .v-social:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f1116;
    box-shadow: 0 10px 24px -8px rgba(255, 255, 255, 0.2);
}

/* ==========================================================
   TEMPLATE 2: NEON (Moga) — white icon that reveals BRAND colors on hover
   Palette: white on #141821 border orange → per-platform brand
   ========================================================== */
.viewer-neon .v-social {
    background: rgba(20, 24, 33, 0.6);
    border-color: rgba(255, 87, 34, 0.5);
    color: #f0f0f0;
    box-shadow: 0 0 12px rgba(255, 87, 34, 0.2), inset 0 0 1px rgba(255, 87, 34, 0.3);
}
.viewer-neon .v-social:hover {
    box-shadow: 0 10px 30px -6px rgba(255, 87, 34, 0.55), 0 0 0 1px rgba(255, 87, 34, 0.5), inset 0 0 1px rgba(255, 87, 34, 0.3);
    border-color: rgba(255, 87, 34, 0.8);
    background: rgba(20, 24, 33, 0.8);
}

/* ==========================================================
   TEMPLATE 3: AURORA GLASS — frosted glass + purple glow reveal
   ========================================================== */
.viewer-glass .v-social {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}
.viewer-glass .v-social:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 32px -6px rgba(168, 85, 247, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ==========================================================
   TEMPLATE 4: RETRO WAVE — cyan on dark → invert to pink
   ========================================================== */
.viewer-retro .v-social {
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid #ff006e;
    color: #00ffff;
    box-shadow: 0 0 12px rgba(255, 0, 110, 0.4), inset 0 0 12px rgba(255, 0, 110, 0.15);
}
.viewer-retro .v-social:hover {
    background: #00ffff;
    border-color: #00ffff;
    color: #ff006e;
    box-shadow: 0 0 24px #00ffff, 0 0 40px rgba(0, 255, 255, 0.4);
}

/* ==========================================================
   TEMPLATE 5: BENTO — brand colors per platform (real ones)
   ========================================================== */
.viewer-bento .v-social {
    border-radius: 14px;
    background: #12141b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.viewer-bento .v-social:hover {
    border-color: transparent;
    box-shadow: 0 12px 24px -8px rgba(255, 255, 255, 0.15);
}

/* -- Brand hover colors (applied on all templates that want brand reveal on hover) -- */
/* Neon + Bento reveal actual brand colors on hover — provides recognition */
.viewer-neon .v-social-instagram:hover,
.viewer-bento .v-social-instagram:hover {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.viewer-neon .v-social-facebook:hover,
.viewer-bento .v-social-facebook:hover { background: #1877f2; }
.viewer-neon .v-social-twitter:hover,
.viewer-bento .v-social-twitter:hover { background: #000000; box-shadow: 0 8px 20px -4px #000, 0 0 0 1px rgba(255,255,255,0.5); }
.viewer-neon .v-social-tiktok:hover,
.viewer-bento .v-social-tiktok:hover { background: #000000; box-shadow: 0 0 0 1px #ff0050 inset, 0 0 0 3px #00f2ea inset, 0 8px 20px -4px #000; }
.viewer-neon .v-social-youtube:hover,
.viewer-bento .v-social-youtube:hover { background: #ff0000; }
.viewer-neon .v-social-linkedin:hover,
.viewer-bento .v-social-linkedin:hover { background: #0a66c2; }
.viewer-neon .v-social-github:hover,
.viewer-bento .v-social-github:hover { background: #24292e; box-shadow: 0 8px 20px -4px #000; }
.viewer-neon .v-social-whatsapp:hover,
.viewer-bento .v-social-whatsapp:hover { background: #25d366; }
.viewer-neon .v-social-telegram:hover,
.viewer-bento .v-social-telegram:hover { background: #0088cc; }
.viewer-neon .v-social-email:hover,
.viewer-bento .v-social-email:hover { background: linear-gradient(135deg, #ff5722, #ff8a50); }
.viewer-neon .v-social-website:hover,
.viewer-bento .v-social-website:hover { background: linear-gradient(135deg, #10b981, #34d399); }

/* ==========================================================
   CUSTOM SOCIAL ICONS STYLES — user-configurable via settings
   These override template-specific styles with !important
   ========================================================== */

/* Brand style — preserve platform brand colors (default) */
.v-social-style-brand {
    /* Keep existing template styles */
}

/* Monochrome style — single user color */
.v-social-style-monochrome {
    color: var(--icon-color, #ff5722) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.v-social-style-monochrome:hover {
    filter: brightness(0.85);
    transform: scale(1.1);
}

/* Neon glow style — custom color with glow effect */
.v-social-style-neon-glow {
    color: var(--icon-color, #ff5722) !important;
    background: transparent !important;
    box-shadow: 0 0 12px var(--icon-color, rgba(255, 87, 34, 0.3)) !important;
    border-color: var(--icon-color, #ff5722) !important;
}
.v-social-style-neon-glow:hover {
    box-shadow: 0 0 20px var(--icon-color, rgba(255, 87, 34, 0.6)) !important;
    border-color: var(--icon-color, #ff5722) !important;
}

/* Gradient style — gradient background */
.v-social-style-gradient {
    background: linear-gradient(135deg, var(--icon-color, #ff5722) 0%, var(--icon-color, #ff5722) 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.v-social-style-gradient:hover {
    transform: scale(1.08) translateY(-2px);
    filter: brightness(0.9);
}

/* Filled style — solid background */
.v-social-style-filled {
    background: var(--icon-color, #ff5722) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.v-social-style-filled:hover {
    filter: brightness(0.9);
    transform: scale(1.05);
}

/* Outline style — border only */
.v-social-style-outline {
    background: transparent !important;
    color: var(--icon-color, #ff5722) !important;
    border: 2px solid var(--icon-color, #ff5722) !important;
    box-shadow: none !important;
}
.v-social-style-outline:hover {
    background: var(--icon-color, #ff5722) !important;
    color: #ffffff !important;
    transform: scale(1.08);
}

/* Size variants */
.v-social-size-sm {
    width: 36px;
    height: 36px;
}
.v-social-size-md {
    width: 48px;
    height: 48px;
}
.v-social-size-lg {
    width: 56px;
    height: 56px;
}

.v-social-size-sm svg { width: 14px; height: 14px; }
.v-social-size-md svg { width: 18px; height: 18px; }
.v-social-size-lg svg { width: 22px; height: 22px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .v-social { animation: none !important; opacity: 1 !important; transition: none !important; }
    .v-social:hover { transform: none !important; }
}

/* ==========================================================
   TEMPLATE 1: MINIMALIST — subtle underline sweep + fade
   ========================================================== */
.viewer-minimalist {
    background: #0f1116;
    color: #f5f5f7;
}

.viewer-minimalist .v-link {
    background: #1a1c22;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #f5f5f7;
    position: relative;
    overflow: hidden;
}

.viewer-minimalist .v-link::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.viewer-minimalist .v-link:hover {
    background: #23252c;
    border-color: rgba(255, 255, 255, 0.15);
}

.viewer-minimalist .v-link:hover::after {
    transform: scaleX(1);
}

.viewer-minimalist .v-avatar-fallback {
    background: #23252c;
    color: #f5f5f7;
}

.viewer-minimalist .v-social {
    background: #1a1c22;
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}
.viewer-minimalist .v-social:hover {
    background: #23252c;
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================
   TEMPLATE 2: NEON (Moga) — pulse glow + drifting particles
   ========================================================== */
.viewer-neon {
    background: #07090f;
    color: var(--text-main);
}

.viewer-neon .v-bg {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 87, 34, 0.25), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.22), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 87, 34, 0.05), transparent 60%);
}

.viewer-neon::before,
.viewer-neon::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    z-index: 0;
    animation: neonDrift 18s ease-in-out infinite alternate;
}
.viewer-neon::before {
    background: var(--accent-orange);
    top: -100px; left: -100px;
}
.viewer-neon::after {
    background: var(--accent-green);
    bottom: -100px; right: -100px;
    animation-delay: -9s;
}

@keyframes neonDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(50px, 30px) scale(1.15); }
    100% { transform: translate(-30px, -20px) scale(0.9); }
}

.viewer-neon .v-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-orange);
    box-shadow: 0 0 10px var(--accent-orange);
    z-index: 0;
    animation: particleFloat 8s ease-in-out infinite;
}
.viewer-neon .v-particle:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.viewer-neon .v-particle:nth-child(2) { top: 60%; left: 80%; animation-delay: -2s; background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); }
.viewer-neon .v-particle:nth-child(3) { top: 40%; left: 65%; animation-delay: -4s; width: 4px; height: 4px; }
.viewer-neon .v-particle:nth-child(4) { top: 80%; left: 30%; animation-delay: -6s; background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); width: 5px; height: 5px; }
.viewer-neon .v-particle:nth-child(5) { top: 25%; left: 85%; animation-delay: -3s; width: 3px; height: 3px; }

@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0); opacity: 0.6; }
    50%      { transform: translate(20px, -30px); opacity: 1; }
}

.viewer-neon .v-name {
    background: linear-gradient(135deg, #fff 0%, #ff8a50 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.viewer-neon .v-avatar {
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.3), 0 0 40px rgba(255, 87, 34, 0.4);
    animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.3), 0 0 40px rgba(255, 87, 34, 0.4); }
    50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.4), 0 0 60px rgba(16, 185, 129, 0.5); }
}

.viewer-neon .v-link {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(255, 87, 34, 0.3);
    box-shadow: 0 4px 20px rgba(255, 87, 34, 0.08);
    color: var(--text-main);
}

.viewer-neon .v-link:hover {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.25), rgba(16, 185, 129, 0.18));
    border-color: var(--accent-orange);
    box-shadow: 0 8px 30px rgba(255, 87, 34, 0.25), 0 0 0 1px rgba(255, 87, 34, 0.5);
    transform: translateY(-3px);
}

.viewer-neon .v-link-icon { color: var(--accent-orange); }

.viewer-neon .v-social {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.1), rgba(16, 185, 129, 0.06));
    border-color: rgba(255, 87, 34, 0.3);
    color: var(--accent-orange);
}
.viewer-neon .v-social:hover {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.3), rgba(16, 185, 129, 0.2));
    color: #fff;
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.4), 0 0 0 1px rgba(255, 87, 34, 0.5);
}

/* ==========================================================
   TEMPLATE 3: AURORA GLASS — animated aurora + glass tilt
   ========================================================== */
.viewer-glass {
    background: linear-gradient(135deg, #0f0d20 0%, #1a1240 50%, #0d0a2a 100%);
    color: #fff;
}

.viewer-glass .v-bg {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(147, 51, 234, 0.3), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.3), transparent 50%);
}

.viewer-glass .v-aurora {
    position: absolute;
    inset: -20%;
    background:
        conic-gradient(from 0deg at 30% 40%, transparent 0deg, rgba(168, 85, 247, 0.4) 60deg, transparent 120deg),
        conic-gradient(from 180deg at 70% 60%, transparent 0deg, rgba(59, 130, 246, 0.35) 60deg, transparent 120deg),
        conic-gradient(from 90deg at 50% 20%, transparent 0deg, rgba(236, 72, 153, 0.25) 60deg, transparent 120deg);
    filter: blur(60px);
    animation: auroraFlow 20s linear infinite;
}

@keyframes auroraFlow {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

.viewer-glass .v-link {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #fff;
}

.viewer-glass .v-link:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 40px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px) rotateX(3deg);
}

.viewer-glass .v-avatar {
    box-shadow: 0 8px 32px rgba(147, 51, 234, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: glassFloat 6s ease-in-out infinite;
}

@keyframes glassFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.viewer-glass .v-avatar-fallback {
    background: linear-gradient(135deg, #a855f7, #3b82f6);
}

.viewer-glass .v-social {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.viewer-glass .v-social:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 24px rgba(147, 51, 234, 0.35);
}

/* ==========================================================
   TEMPLATE 4: RETRO WAVE — 80s vaporwave, perspective grid
   ========================================================== */
.viewer-retro {
    background: linear-gradient(180deg, #0d0025 0%, #1a0044 30%, #380066 60%, #ff006e 100%);
    color: #fff;
    overflow: hidden;
}

.viewer-retro .v-retro-sun {
    position: absolute;
    bottom: 35%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffde00 0%, #ff006e 60%, transparent 100%);
    box-shadow: 0 0 100px rgba(255, 214, 0, 0.4);
    z-index: 0;
    animation: sunPulse 4s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% { box-shadow: 0 0 100px rgba(255, 214, 0, 0.4); }
    50%      { box-shadow: 0 0 140px rgba(255, 0, 110, 0.6); }
}

.viewer-retro .v-retro-grid {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) perspective(400px) rotateX(60deg);
    transform-origin: bottom center;
    width: 200%;
    height: 60%;
    background:
        linear-gradient(90deg, transparent 49%, #ff00ff 49.5%, #ff00ff 50.5%, transparent 51%),
        linear-gradient(0deg, transparent 49%, #00ffff 49.5%, #00ffff 50.5%, transparent 51%);
    background-size: 60px 60px;
    animation: gridScroll 4s linear infinite;
    z-index: 0;
    opacity: 0.7;
}

@keyframes gridScroll {
    from { background-position: 0 0; }
    to   { background-position: 0 60px; }
}

.viewer-retro .v-avatar {
    box-shadow: 0 0 0 3px #ff006e, 0 0 30px #ff006e, 0 0 60px rgba(0, 255, 255, 0.5);
    animation: retroPulse 2s ease-in-out infinite alternate;
}

@keyframes retroPulse {
    from { box-shadow: 0 0 0 3px #ff006e, 0 0 30px #ff006e, 0 0 60px rgba(0, 255, 255, 0.5); }
    to   { box-shadow: 0 0 0 3px #00ffff, 0 0 30px #00ffff, 0 0 60px rgba(255, 0, 110, 0.5); }
}

.viewer-retro .v-avatar-fallback {
    background: linear-gradient(135deg, #ff006e 0%, #00ffff 100%);
}

.viewer-retro .v-name {
    font-weight: 800;
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    text-shadow:
        2px 0 #ff006e,
        -2px 0 #00ffff,
        0 0 20px rgba(255, 0, 110, 0.5);
    animation: retroGlitch 4s ease-in-out infinite;
}

@keyframes retroGlitch {
    0%, 90%, 100% {
        text-shadow: 2px 0 #ff006e, -2px 0 #00ffff, 0 0 20px rgba(255, 0, 110, 0.5);
    }
    92% { text-shadow: 4px 0 #ff006e, -4px 0 #00ffff, 0 0 20px rgba(255, 0, 110, 0.5); }
    94% { text-shadow: -3px 0 #ff006e, 3px 0 #00ffff, 0 0 20px rgba(255, 0, 110, 0.5); }
    96% { text-shadow: 2px 0 #ff006e, -2px 0 #00ffff, 0 0 20px rgba(255, 0, 110, 0.5); }
}

.viewer-retro .v-bio {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.viewer-retro .v-link {
    background: rgba(13, 0, 37, 0.6);
    backdrop-filter: blur(6px);
    border: 1px solid #ff006e;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(255, 0, 110, 0.3), inset 0 0 20px rgba(255, 0, 110, 0.1);
    transition: all 0.3s ease;
}

.viewer-retro .v-link:hover {
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.2);
    background: rgba(0, 255, 255, 0.1);
    transform: translateY(-3px);
}

.viewer-retro .v-link-icon { color: #00ffff; }

.viewer-retro .v-social {
    background: rgba(13, 0, 37, 0.7);
    border-color: #ff006e;
    color: #00ffff;
    box-shadow: 0 0 10px rgba(255, 0, 110, 0.3), inset 0 0 10px rgba(255, 0, 110, 0.1);
}
.viewer-retro .v-social:hover {
    border-color: #00ffff;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), inset 0 0 15px rgba(0, 255, 255, 0.2);
}

/* ==========================================================
   TEMPLATE 5: BENTO — modern grid of colored cards
   ========================================================== */
.viewer-bento {
    background: #06070c;
    color: #fff;
    padding-top: 40px;
}

.viewer-bento .v-bento-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 80%);
    z-index: 0;
}

.viewer-bento .v-inner { gap: 16px; }

.viewer-bento .v-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: calc(var(--avatar-size) * 0.25);
    box-shadow: 0 20px 40px -20px rgba(255, 87, 34, 0.6);
    animation: bentoFloat 5s ease-in-out infinite;
    overflow: hidden;
}

@keyframes bentoFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

.viewer-bento .v-avatar-fallback,
.viewer-bento .v-avatar-img {
    border-radius: calc(var(--avatar-size) * 0.25);
}

.viewer-bento .v-avatar-fallback {
    background: linear-gradient(135deg, #ff5722, #ff8a50);
}

.viewer-bento .v-name {
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.viewer-bento .v-bio { color: #94a3b8; }

.viewer-bento .v-links { gap: 10px; }

.viewer-bento .v-link {
    padding: 18px 22px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0d1017;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.viewer-bento .v-link::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.85;
    z-index: 0;
    transition: opacity 0.3s;
}

.viewer-bento .v-link:nth-child(6n+1)::before { background: linear-gradient(135deg, #ff5722, #ff8a50); }
.viewer-bento .v-link:nth-child(6n+2)::before { background: linear-gradient(135deg, #10b981, #34d399); }
.viewer-bento .v-link:nth-child(6n+3)::before { background: linear-gradient(135deg, #a855f7, #ec4899); }
.viewer-bento .v-link:nth-child(6n+4)::before { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.viewer-bento .v-link:nth-child(6n+5)::before { background: linear-gradient(135deg, #eab308, #f97316); }
.viewer-bento .v-link:nth-child(6n)::before   { background: linear-gradient(135deg, #ec4899, #a855f7); }

.viewer-bento .v-link > * { position: relative; z-index: 1; }

.viewer-bento .v-link-title {
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.viewer-bento .v-link:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px -10px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.viewer-bento .v-link:hover::before { opacity: 1; }

.viewer-bento .v-link-icon {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.viewer-bento .v-social {
    border-radius: 14px;
    background: #0d1017;
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.viewer-bento .v-social::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.viewer-bento .v-social:nth-child(6n+1)::before { background: linear-gradient(135deg, #ff5722, #ff8a50); }
.viewer-bento .v-social:nth-child(6n+2)::before { background: linear-gradient(135deg, #10b981, #34d399); }
.viewer-bento .v-social:nth-child(6n+3)::before { background: linear-gradient(135deg, #a855f7, #ec4899); }
.viewer-bento .v-social:nth-child(6n+4)::before { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.viewer-bento .v-social:nth-child(6n+5)::before { background: linear-gradient(135deg, #eab308, #f97316); }
.viewer-bento .v-social:nth-child(6n)::before   { background: linear-gradient(135deg, #ec4899, #a855f7); }

.viewer-bento .v-social svg { position: relative; z-index: 1; }

.viewer-bento .v-social:hover {
    transform: translateY(-4px) scale(1.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.viewer-bento .v-social:hover::before { opacity: 1; }

/* ==========================================================
   TEMPLATE 6: RESTAURANT — bordeaux + gold + candlelight
   ========================================================== */
.viewer-restaurant {
    background:
        linear-gradient(180deg, rgba(15, 5, 3, 0.85) 0%, rgba(24, 8, 6, 0.7) 40%, rgba(15, 5, 3, 0.92) 100%),
        url('assets/templates/restaurant.jpg') center / cover no-repeat;
    color: #f5e6c9;
    font-family: 'Outfit', system-ui, sans-serif;
}

.viewer-restaurant .v-bg {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(139, 26, 26, 0.25), transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(201, 151, 91, 0.18), transparent 55%);
}

.viewer-restaurant .v-resto-grain {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(245, 230, 201, 0.08) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.viewer-restaurant .v-resto-candle {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    z-index: 0;
    animation: restoCandleFlicker 4s ease-in-out infinite;
}
.viewer-restaurant .v-resto-candle-1 {
    background: #e6b676;
    bottom: 10%; left: -60px;
}
.viewer-restaurant .v-resto-candle-2 {
    background: #c9975b;
    bottom: 20%; right: -60px;
    animation-delay: -2s;
}

@keyframes restoCandleFlicker {
    0%, 100% { opacity: 0.5; transform: translateY(0) scale(1); }
    45%      { opacity: 0.7; transform: translateY(-6px) scale(1.05); }
    55%      { opacity: 0.45; transform: translateY(-2px) scale(0.98); }
}

.viewer-restaurant .v-resto-steam {
    position: absolute;
    top: 15%; left: 50%;
    width: 3px; height: 200px;
    background: linear-gradient(180deg, transparent, rgba(245, 230, 201, 0.15), transparent);
    filter: blur(6px);
    transform-origin: bottom center;
    animation: restoSteam 8s ease-in-out infinite;
    z-index: 0;
}

@keyframes restoSteam {
    0%   { transform: translateX(-50%) translateY(30px) rotate(0deg); opacity: 0; }
    30%  { opacity: 0.8; }
    100% { transform: translateX(-50%) translateY(-120px) rotate(4deg); opacity: 0; }
}

.viewer-restaurant .v-name {
    background: linear-gradient(135deg, #f5e6c9, #e6b676);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.01em;
}

.viewer-restaurant .v-bio { color: rgba(245, 230, 201, 0.75); }

.viewer-restaurant .v-avatar {
    box-shadow: 0 0 0 3px rgba(201, 151, 91, 0.5), 0 0 40px rgba(230, 182, 118, 0.5);
}

.viewer-restaurant .v-avatar-fallback {
    background: linear-gradient(135deg, #8b1a1a, #c9975b);
    color: #f5e6c9;
}

.viewer-restaurant .v-link {
    background: linear-gradient(135deg, rgba(58, 26, 10, 0.85), rgba(24, 8, 6, 0.85));
    border: 1px solid rgba(201, 151, 91, 0.35);
    color: #f5e6c9;
    box-shadow: inset 4px 0 0 #c9975b, 0 4px 20px rgba(0, 0, 0, 0.4);
}
.viewer-restaurant .v-link:hover {
    background: linear-gradient(135deg, rgba(90, 40, 20, 0.95), rgba(40, 15, 10, 0.95));
    border-color: #e6b676;
    box-shadow: inset 4px 0 0 #e6b676, 0 8px 30px rgba(201, 151, 91, 0.3);
    transform: translateY(-3px);
}
.viewer-restaurant .v-link-icon { color: #e6b676; }

.viewer-restaurant .v-social {
    background: rgba(58, 26, 10, 0.6);
    border: 1px solid rgba(201, 151, 91, 0.35);
    color: #e6b676;
}
.viewer-restaurant .v-social:hover {
    background: linear-gradient(135deg, #c9975b, #8b1a1a);
    color: #f5e6c9;
    border-color: #e6b676;
    box-shadow: 0 6px 20px rgba(201, 151, 91, 0.4);
}

/* ==========================================================
   TEMPLATE 7: IMMOBILIER — navy + steel + gold blueprint
   ========================================================== */
.viewer-immobilier {
    background:
        linear-gradient(180deg, rgba(3, 9, 16, 0.85) 0%, rgba(10, 26, 46, 0.65) 40%, rgba(3, 9, 16, 0.92) 100%),
        url('assets/templates/immobilier.jpg') center / cover no-repeat;
    color: #e6ecf2;
}

.viewer-immobilier .v-bg {
    background:
        radial-gradient(ellipse at 20% 15%, rgba(74, 144, 226, 0.18), transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(212, 175, 55, 0.12), transparent 55%);
}

.viewer-immobilier .v-immo-blueprint {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(201, 214, 223, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 214, 223, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    animation: immoBlueprintFade 12s ease-in-out infinite;
}

@keyframes immoBlueprintFade {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.viewer-immobilier .v-immo-skyline {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 22%;
    background:
        linear-gradient(90deg,
            transparent 0 4%,
            #0a1a2e 4% 10%, transparent 10% 14%,
            #122c4c 14% 22%, transparent 22% 26%,
            #0a1a2e 26% 38%, transparent 38% 42%,
            #122c4c 42% 52%, transparent 52% 56%,
            #0a1a2e 56% 66%, transparent 66% 70%,
            #122c4c 70% 82%, transparent 82% 86%,
            #0a1a2e 86% 96%, transparent 96% 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent, black 60%);
    mask-image: linear-gradient(180deg, transparent, black 60%);
    z-index: 0;
    opacity: 0.9;
}

.viewer-immobilier .v-immo-glow {
    position: absolute;
    top: -40%; left: 50%;
    transform: translateX(-50%);
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent 60%);
    z-index: 0;
    animation: immoGlowPulse 6s ease-in-out infinite;
}

@keyframes immoGlowPulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.7; transform: translateX(-50%) scale(1.15); }
}

.viewer-immobilier .v-name {
    background: linear-gradient(135deg, #ffffff 0%, #c9d6df 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.02em;
    font-weight: 700;
}

.viewer-immobilier .v-bio { color: rgba(201, 214, 223, 0.75); }

.viewer-immobilier .v-avatar {
    border-radius: 14px;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5), 0 8px 30px rgba(74, 144, 226, 0.3);
}
.viewer-immobilier .v-avatar-img { border-radius: 12px; }

.viewer-immobilier .v-avatar-fallback {
    background: linear-gradient(135deg, #122c4c, #4a90e2);
    color: #d4af37;
    border-radius: 12px;
}

.viewer-immobilier .v-link {
    background: linear-gradient(180deg, rgba(18, 44, 76, 0.9), rgba(10, 26, 46, 0.9));
    border: 1px solid rgba(201, 214, 223, 0.2);
    color: #e6ecf2;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.viewer-immobilier .v-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #d4af37, #4a90e2);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.viewer-immobilier .v-link:hover {
    background: linear-gradient(180deg, rgba(26, 60, 100, 0.95), rgba(18, 44, 76, 0.95));
    border-color: #d4af37;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.25);
}
.viewer-immobilier .v-link:hover::before { opacity: 1; }
.viewer-immobilier .v-link-icon { color: #d4af37; }

.viewer-immobilier .v-social {
    background: rgba(18, 44, 76, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #c9d6df;
    border-radius: 8px;
}
.viewer-immobilier .v-social:hover {
    background: linear-gradient(135deg, #4a90e2, #122c4c);
    color: #d4af37;
    border-color: #d4af37;
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

/* ==========================================================
   TEMPLATE 8: BEAUTÉ — rose gold + plum + silk sparkle
   ========================================================== */
.viewer-beaute {
    background:
        linear-gradient(160deg, rgba(21, 8, 16, 0.82) 0%, rgba(42, 18, 32, 0.65) 40%, rgba(21, 8, 16, 0.9) 100%),
        url('assets/templates/beaute.jpg') center / cover no-repeat;
    color: #f5e6ea;
}

.viewer-beaute .v-bg {
    background:
        radial-gradient(ellipse at 15% 15%, rgba(244, 194, 194, 0.22), transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(212, 165, 116, 0.18), transparent 55%);
}

.viewer-beaute .v-beaute-silk {
    position: absolute; inset: -10%;
    background:
        repeating-linear-gradient(135deg,
            transparent 0 60px,
            rgba(244, 194, 194, 0.05) 60px 62px,
            transparent 62px 110px,
            rgba(212, 165, 116, 0.04) 110px 112px);
    z-index: 0;
    animation: beauteSilkDrift 20s linear infinite;
}

@keyframes beauteSilkDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(120px, 60px); }
}

.viewer-beaute .v-beaute-sparkle {
    position: absolute;
    width: 6px; height: 6px;
    background: #f5e6ea;
    border-radius: 50%;
    box-shadow: 0 0 12px #f4c2c2, 0 0 20px rgba(244, 194, 194, 0.6);
    z-index: 0;
    animation: beauteSparkle 3.5s ease-in-out infinite;
}
.viewer-beaute .v-beaute-sparkle:nth-child(1) { top: 12%; left: 15%; animation-delay: 0s; }
.viewer-beaute .v-beaute-sparkle:nth-child(2) { top: 30%; right: 20%; animation-delay: -1.2s; width: 4px; height: 4px; }
.viewer-beaute .v-beaute-sparkle:nth-child(3) { bottom: 25%; left: 10%; animation-delay: -2.4s; width: 5px; height: 5px; }
.viewer-beaute .v-beaute-sparkle:nth-child(4) { bottom: 15%; right: 15%; animation-delay: -1.8s; width: 4px; height: 4px; }

@keyframes beauteSparkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1.4); }
}

.viewer-beaute .v-name {
    background: linear-gradient(135deg, #f4c2c2 0%, #d4a574 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.005em;
}

.viewer-beaute .v-bio { color: rgba(244, 194, 194, 0.8); }

.viewer-beaute .v-avatar {
    box-shadow: 0 0 0 3px rgba(244, 194, 194, 0.5), 0 0 40px rgba(212, 165, 116, 0.5);
    animation: beauteAvatarPulse 4s ease-in-out infinite;
}

@keyframes beauteAvatarPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(244, 194, 194, 0.4), 0 0 40px rgba(212, 165, 116, 0.4); }
    50%      { box-shadow: 0 0 0 5px rgba(244, 194, 194, 0.55), 0 0 60px rgba(212, 165, 116, 0.6); }
}

.viewer-beaute .v-avatar-fallback {
    background: linear-gradient(135deg, #f4c2c2, #8a4d76);
    color: #f5e6ea;
}

.viewer-beaute .v-link {
    background: linear-gradient(135deg, rgba(244, 194, 194, 0.1), rgba(138, 77, 118, 0.2));
    border: 1px solid rgba(244, 194, 194, 0.3);
    color: #f5e6ea;
    backdrop-filter: blur(6px);
}
.viewer-beaute .v-link:hover {
    background: linear-gradient(135deg, rgba(244, 194, 194, 0.25), rgba(138, 77, 118, 0.35));
    border-color: #f4c2c2;
    box-shadow: 0 8px 30px rgba(244, 194, 194, 0.3);
    transform: translateY(-3px);
}
.viewer-beaute .v-link-icon { color: #d4a574; }

.viewer-beaute .v-social {
    background: rgba(244, 194, 194, 0.08);
    border: 1px solid rgba(244, 194, 194, 0.35);
    color: #f4c2c2;
}
.viewer-beaute .v-social:hover {
    background: linear-gradient(135deg, #f4c2c2, #d4a574);
    color: #2a1220;
    border-color: #f4c2c2;
    box-shadow: 0 6px 20px rgba(244, 194, 194, 0.5);
}

/* ==========================================================
   TEMPLATE 9: FITNESS — black + fire + power stripes
   ========================================================== */
.viewer-fitness {
    background: linear-gradient(160deg, #0a0a0a 0%, #1a0a0a 55%, #050505 100%);
    color: #f5f5f5;
}

.viewer-fitness .v-bg {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255, 61, 0, 0.25), transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(234, 179, 8, 0.15), transparent 55%);
}

.viewer-fitness .v-fit-stripes {
    position: absolute;
    top: -20%; right: -25%;
    width: 90%; height: 70%;
    background: repeating-linear-gradient(45deg,
        rgba(255, 61, 0, 0.55) 0 6px,
        transparent 6px 16px);
    transform: rotate(-8deg);
    z-index: 0;
    opacity: 0.7;
    animation: fitStripesSlide 12s linear infinite;
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}

@keyframes fitStripesSlide {
    from { background-position: 0 0; }
    to   { background-position: 60px 60px; }
}

.viewer-fitness .v-fit-pulse {
    position: absolute;
    bottom: -20%; left: -20%;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 61, 0, 0.4), transparent 60%);
    filter: blur(40px);
    z-index: 0;
    animation: fitPulse 3s ease-in-out infinite;
}

@keyframes fitPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 0.9; transform: scale(1.15); }
}

.viewer-fitness .v-name {
    background: linear-gradient(135deg, #ff3d00 0%, #eab308 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
}

.viewer-fitness .v-bio { color: rgba(245, 245, 245, 0.75); font-weight: 500; }

.viewer-fitness .v-avatar {
    border-radius: 16px;
    box-shadow: 0 0 0 3px rgba(255, 61, 0, 0.6), 0 0 40px rgba(255, 61, 0, 0.5);
    animation: fitAvatarPunch 2s ease-in-out infinite;
}
.viewer-fitness .v-avatar-img { border-radius: 14px; }

@keyframes fitAvatarPunch {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

.viewer-fitness .v-avatar-fallback {
    background: linear-gradient(135deg, #ff3d00, #eab308);
    color: #0a0a0a;
    border-radius: 14px;
    font-weight: 800;
}

.viewer-fitness .v-link {
    background: rgba(20, 8, 4, 0.9);
    border: 1px solid rgba(255, 61, 0, 0.35);
    color: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    box-shadow: inset 4px 0 0 #ff3d00, 0 4px 20px rgba(0, 0, 0, 0.5);
}
.viewer-fitness .v-link:hover {
    background: linear-gradient(90deg, rgba(255, 61, 0, 0.25), rgba(20, 8, 4, 0.9));
    border-color: #ff3d00;
    box-shadow: inset 4px 0 0 #eab308, 0 8px 30px rgba(255, 61, 0, 0.4);
    transform: translateX(4px);
}
.viewer-fitness .v-link-icon { color: #ff3d00; }
.viewer-fitness .v-link-arrow { color: #eab308; }

.viewer-fitness .v-social {
    background: rgba(20, 8, 4, 0.8);
    border: 1px solid rgba(255, 61, 0, 0.4);
    color: #ff3d00;
    border-radius: 8px;
}
.viewer-fitness .v-social:hover {
    background: linear-gradient(135deg, #ff3d00, #eab308);
    color: #0a0a0a;
    border-color: #eab308;
    box-shadow: 0 6px 20px rgba(255, 61, 0, 0.6);
}

/* ==========================================================
   TEMPLATE 10: MUSIQUE — midnight + neon EQ + DJ vibes
   ========================================================== */
.viewer-musique {
    background: linear-gradient(180deg, #0f0819 0%, #1a0a3a 55%, #08040f 100%);
    color: #f5f0ff;
}

.viewer-musique .v-bg {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(233, 30, 99, 0.25), transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(0, 229, 255, 0.22), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, 0.3), transparent 55%);
}

.viewer-musique .v-music-spot {
    position: absolute;
    top: -30%; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 500px;
    background: radial-gradient(ellipse at center top, rgba(124, 58, 237, 0.35), transparent 60%);
    z-index: 0;
    animation: musicSpotSway 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes musicSpotSway {
    0%, 100% { transform: translateX(-50%) rotate(-3deg); }
    50%      { transform: translateX(-50%) rotate(3deg); }
}

.viewer-musique .v-music-eq {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 12px;
    gap: 4px;
    z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, black 30%);
    mask-image: linear-gradient(180deg, transparent, black 30%);
    opacity: 0.7;
}

.viewer-musique .v-music-eq span {
    flex: 1;
    max-width: 14px;
    height: 20px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #00e5ff, #7c3aed);
    animation: musicEqBar 1.2s ease-in-out infinite;
    transform-origin: bottom;
}

.viewer-musique .v-music-eq span:nth-child(1)  { animation-delay: -0.0s;  background: linear-gradient(180deg, #e91e63, #7c3aed); }
.viewer-musique .v-music-eq span:nth-child(2)  { animation-delay: -0.15s; }
.viewer-musique .v-music-eq span:nth-child(3)  { animation-delay: -0.3s;  background: linear-gradient(180deg, #e91e63, #7c3aed); }
.viewer-musique .v-music-eq span:nth-child(4)  { animation-delay: -0.45s; }
.viewer-musique .v-music-eq span:nth-child(5)  { animation-delay: -0.6s;  background: linear-gradient(180deg, #e91e63, #7c3aed); }
.viewer-musique .v-music-eq span:nth-child(6)  { animation-delay: -0.75s; }
.viewer-musique .v-music-eq span:nth-child(7)  { animation-delay: -0.9s;  background: linear-gradient(180deg, #e91e63, #7c3aed); }
.viewer-musique .v-music-eq span:nth-child(8)  { animation-delay: -1.05s; }
.viewer-musique .v-music-eq span:nth-child(9)  { animation-delay: -1.2s;  background: linear-gradient(180deg, #e91e63, #7c3aed); }
.viewer-musique .v-music-eq span:nth-child(10) { animation-delay: -0.35s; }
.viewer-musique .v-music-eq span:nth-child(11) { animation-delay: -0.55s; background: linear-gradient(180deg, #e91e63, #7c3aed); }
.viewer-musique .v-music-eq span:nth-child(12) { animation-delay: -0.8s;  }

@keyframes musicEqBar {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1); }
}

.viewer-musique .v-name {
    background: linear-gradient(135deg, #00e5ff 0%, #e91e63 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

.viewer-musique .v-bio { color: rgba(245, 240, 255, 0.75); }

.viewer-musique .v-avatar {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.5), 0 0 30px rgba(233, 30, 99, 0.4), 0 0 60px rgba(0, 229, 255, 0.35);
    animation: musicAvatarRing 3s ease-in-out infinite;
}

@keyframes musicAvatarRing {
    0%, 100% { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.5), 0 0 30px rgba(233, 30, 99, 0.4), 0 0 60px rgba(0, 229, 255, 0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(0, 229, 255, 0.55), 0 0 40px rgba(124, 58, 237, 0.55), 0 0 70px rgba(233, 30, 99, 0.45); }
}

.viewer-musique .v-avatar-fallback {
    background: linear-gradient(135deg, #7c3aed, #e91e63);
    color: #f5f0ff;
}

.viewer-musique .v-link {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(0, 229, 255, 0.12));
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: #f5f0ff;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
}
.viewer-musique .v-link:hover {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.25), rgba(0, 229, 255, 0.22));
    border-color: #00e5ff;
    box-shadow: 0 0 30px rgba(233, 30, 99, 0.4), 0 0 0 1px #00e5ff;
    transform: translateY(-3px);
}
.viewer-musique .v-link-icon { color: #00e5ff; }
.viewer-musique .v-link-arrow { color: #e91e63; }

.viewer-musique .v-social {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(233, 30, 99, 0.1));
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: #00e5ff;
}
.viewer-musique .v-social:hover {
    background: linear-gradient(135deg, #7c3aed, #e91e63);
    color: #f5f0ff;
    border-color: #00e5ff;
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4), 0 0 0 1px rgba(0, 229, 255, 0.5);
}

/* ==========================================================
   VIEWER FOOTER + ERROR (shared)
   ========================================================== */
.viewer-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
    z-index: 5;
    position: relative;
}

.viewer-footer:hover { color: rgba(255, 255, 255, 0.7); }
.viewer-footer strong { color: var(--accent-orange); font-weight: 600; }

.viewer-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-orange);
    box-shadow: 0 0 8px var(--accent-orange);
    animation: footerPulse 2s ease-in-out infinite;
}

@keyframes footerPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.viewer-error {
    padding: 80px 20px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.viewer-error-code {
    font-size: 5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ff5722, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.viewer-error h1 { font-size: 1.5rem; margin-bottom: 12px; color: var(--text-main); }
.viewer-error p { color: var(--text-muted); }
.viewer-error a { color: var(--accent-orange); text-decoration: none; font-weight: 500; }
.viewer-error a:hover { text-decoration: underline; }

.preview-root.viewer {
    min-height: 100%;
    padding: 40px 20px;
}

/* ==========================================================
   Respect reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .viewer-neon::before,
    .viewer-neon::after,
    .viewer-neon .v-particle,
    .viewer-neon .v-avatar,
    .viewer-glass .v-aurora,
    .viewer-glass .v-avatar,
    .viewer-retro .v-retro-grid,
    .viewer-retro .v-retro-sun,
    .viewer-retro .v-avatar,
    .viewer-retro .v-name,
    .viewer-bento .v-avatar,
    .viewer-restaurant .v-resto-candle,
    .viewer-restaurant .v-resto-steam,
    .viewer-immobilier .v-immo-blueprint,
    .viewer-immobilier .v-immo-glow,
    .viewer-beaute .v-beaute-silk,
    .viewer-beaute .v-beaute-sparkle,
    .viewer-beaute .v-avatar,
    .viewer-fitness .v-fit-stripes,
    .viewer-fitness .v-fit-pulse,
    .viewer-fitness .v-avatar,
    .viewer-musique .v-music-spot,
    .viewer-musique .v-music-eq span,
    .viewer-musique .v-avatar,
    .viewer-musique .v-social::before,
    .viewer-beaute .v-social::before,
    .viewer-basket .v-basket-ball,
    .viewer-football .v-foot-ball,
    .viewer-combat .v-combat-spot,
    .viewer-combat .v-avatar,
    .viewer-noir .v-noir-spot,
    .viewer-noir .v-noir-grain,
    .viewer-blockbuster .v-bb-marquee,
    .viewer-blockbuster .v-bb-spot,
    .viewer-scifi .v-sci-grid,
    .viewer-scifi .v-sci-scan,
    .viewer-scifi .v-sci-particle,
    .viewer-scifi .v-avatar,
    .viewer-scifi .v-avatar::after,
    .viewer-scifi .v-name,
    .viewer-footer-dot,
    .v-link,
    .v-inner {
        animation: none !important;
    }
}

/* ==========================================================
   PER-THEME ICON IDENTITY — differentiated social + link icons
   ========================================================== */

/* --- RESTAURANT — Engraved gold plaque icons --- */
.viewer-restaurant .v-social {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(180deg, #3a1a0a, #1a0a05);
    border: 1px solid rgba(201, 151, 91, 0.55);
    color: #e6b676;
    box-shadow:
        inset 0 0 0 1px rgba(230, 182, 118, 0.18),
        inset 0 -3px 6px rgba(0, 0, 0, 0.55),
        0 4px 14px rgba(0, 0, 0, 0.45);
}
.viewer-restaurant .v-social:hover {
    background: linear-gradient(180deg, #d4a06a, #8b1a1a);
    color: #f5e6c9;
    border-color: #f5e6c9;
    box-shadow:
        inset 0 0 0 1px rgba(245, 230, 201, 0.35),
        0 8px 28px rgba(201, 151, 91, 0.55);
    transform: translateY(-4px) scale(1.08);
}
.viewer-restaurant .v-link-icon {
    width: 34px; height: 34px;
    padding: 7px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(201, 151, 91, 0.18), rgba(58, 26, 10, 0.55));
    border: 1px solid rgba(201, 151, 91, 0.45);
    box-shadow: inset 0 0 0 1px rgba(230, 182, 118, 0.1);
    color: #e6b676;
}

/* --- IMMOBILIER — Sharp architectural badge (square + gold underline) --- */
.viewer-immobilier .v-social {
    width: 46px; height: 46px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(18, 44, 76, 0.85), rgba(10, 26, 46, 0.95));
    border: 1px solid rgba(201, 214, 223, 0.25);
    color: #c9d6df;
    position: relative;
    overflow: hidden;
}
.viewer-immobilier .v-social::after {
    content: '';
    position: absolute;
    bottom: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    opacity: 0.7;
    transition: opacity 0.3s ease, left 0.3s ease, right 0.3s ease;
}
.viewer-immobilier .v-social:hover {
    background: linear-gradient(180deg, #1a3d68, #0a1a2e);
    color: #d4af37;
    border-color: #d4af37;
    box-shadow: 0 8px 24px rgba(74, 144, 226, 0.35);
    transform: translateY(-3px);
}
.viewer-immobilier .v-social:hover::after { left: 0; right: 0; opacity: 1; }
.viewer-immobilier .v-link-icon {
    width: 32px; height: 32px;
    padding: 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(18, 44, 76, 0.85), rgba(10, 26, 46, 0.95));
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
    position: relative;
}
.viewer-immobilier .v-link-icon::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 3px; right: 3px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

/* --- BEAUTÉ — Double concentric ring, rose-gold halo --- */
.viewer-beaute .v-social {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(244, 194, 194, 0.15), rgba(138, 77, 118, 0.25));
    border: 1px solid rgba(244, 194, 194, 0.5);
    color: #f4c2c2;
    position: relative;
    box-shadow:
        inset 0 0 0 3px rgba(21, 8, 16, 0.6),
        inset 0 0 0 4px rgba(212, 165, 116, 0.3);
}
.viewer-beaute .v-social::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(244, 194, 194, 0.35), transparent, rgba(212, 165, 116, 0.3), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: beauteRingSpin 6s linear infinite;
}
.viewer-beaute .v-social:hover {
    background: linear-gradient(135deg, #f4c2c2, #d4a574);
    color: #2a1220;
    border-color: #ffffff;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.15),
        0 8px 28px rgba(244, 194, 194, 0.5);
    transform: translateY(-4px) scale(1.1);
}
.viewer-beaute .v-social:hover::before { opacity: 1; }

@keyframes beauteRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.viewer-beaute .v-link-icon {
    width: 32px; height: 32px;
    padding: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 194, 194, 0.2), rgba(138, 77, 118, 0.3));
    border: 1px solid rgba(244, 194, 194, 0.5);
    box-shadow: inset 0 0 0 2px rgba(21, 8, 16, 0.5);
    color: #d4a574;
}

/* --- FITNESS — Angular dog-tag badge, orange power stripe --- */
.viewer-fitness .v-social {
    width: 46px; height: 46px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0a0a0a, #1a0a0a);
    border: 1px solid rgba(255, 61, 0, 0.5);
    color: #ff3d00;
    position: relative;
    overflow: hidden;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    box-shadow:
        inset 3px 0 0 #ff3d00,
        0 4px 14px rgba(0, 0, 0, 0.5);
}
.viewer-fitness .v-social:hover {
    background: linear-gradient(135deg, #ff3d00, #eab308);
    color: #0a0a0a;
    box-shadow:
        inset 3px 0 0 #eab308,
        0 8px 28px rgba(255, 61, 0, 0.6);
    transform: translateY(-4px) scale(1.1) rotate(-3deg);
}
.viewer-fitness .v-link-icon {
    width: 32px; height: 32px;
    padding: 6px;
    border-radius: 6px;
    background: linear-gradient(135deg, #0a0a0a, #1a0a0a);
    border: 1px solid rgba(255, 61, 0, 0.5);
    box-shadow: inset 3px 0 0 #ff3d00;
    color: #ff3d00;
}

/* --- MUSIQUE — Vinyl ring with rotating neon conic border --- */
.viewer-musique .v-social {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #1a0a3a 0%, #08040f 70%);
    border: none;
    color: #00e5ff;
    position: relative;
    isolation: isolate;
    box-shadow: inset 0 0 0 1.5px rgba(0, 229, 255, 0.5);
}
.viewer-musique .v-social::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #e91e63, #7c3aed, #00e5ff, #e91e63);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s ease;
    animation: musicVinylSpin 4s linear infinite;
}
.viewer-musique .v-social::after {
    content: '';
    position: absolute;
    inset: 40%;
    border-radius: 50%;
    background: radial-gradient(circle, #e91e63 30%, transparent 70%);
    opacity: 0.4;
    z-index: 0;
}
.viewer-musique .v-social svg { position: relative; z-index: 1; }
.viewer-musique .v-social:hover {
    color: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), 0 0 30px rgba(233, 30, 99, 0.6);
    transform: translateY(-4px) scale(1.12);
}
.viewer-musique .v-social:hover::before { opacity: 1; }
.viewer-musique .v-social:hover::after { opacity: 0.7; }

@keyframes musicVinylSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.viewer-musique .v-link-icon {
    width: 32px; height: 32px;
    padding: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #1a0a3a 0%, #08040f 70%);
    border: 1.5px solid rgba(0, 229, 255, 0.55);
    color: #00e5ff;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.35);
}

/* ==========================================================
   VIEWER FOOTER — "Créé par Mogalink" polish
   ========================================================== */
.viewer-footer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 40px auto 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.25s ease;
    z-index: 5;
    position: relative;
    backdrop-filter: blur(6px);
    align-self: center;
}

.viewer-footer:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.viewer-footer strong {
    font-weight: 700;
    background: linear-gradient(135deg, #ff5722, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Per-theme footer accents (blend with each viewer) */
.viewer-restaurant .viewer-footer { background: rgba(58, 26, 10, 0.4); border-color: rgba(201, 151, 91, 0.3); }
.viewer-restaurant .viewer-footer strong { background: linear-gradient(135deg, #e6b676, #c9975b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-restaurant .viewer-footer-dot { background: #e6b676; box-shadow: 0 0 8px #e6b676; }

.viewer-immobilier .viewer-footer { background: rgba(18, 44, 76, 0.4); border-color: rgba(212, 175, 55, 0.25); }
.viewer-immobilier .viewer-footer strong { background: linear-gradient(135deg, #d4af37, #4a90e2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-immobilier .viewer-footer-dot { background: #d4af37; box-shadow: 0 0 8px #d4af37; }

.viewer-beaute .viewer-footer { background: rgba(138, 77, 118, 0.3); border-color: rgba(244, 194, 194, 0.3); }
.viewer-beaute .viewer-footer strong { background: linear-gradient(135deg, #f4c2c2, #d4a574); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-beaute .viewer-footer-dot { background: #f4c2c2; box-shadow: 0 0 8px #f4c2c2; }

.viewer-fitness .viewer-footer { background: rgba(20, 8, 4, 0.6); border-color: rgba(255, 61, 0, 0.35); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; }
.viewer-fitness .viewer-footer strong { background: linear-gradient(135deg, #ff3d00, #eab308); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-fitness .viewer-footer-dot { background: #ff3d00; box-shadow: 0 0 8px #ff3d00; }

.viewer-musique .viewer-footer { background: rgba(26, 10, 58, 0.5); border-color: rgba(0, 229, 255, 0.3); }
.viewer-musique .viewer-footer strong { background: linear-gradient(135deg, #00e5ff, #e91e63); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-musique .viewer-footer-dot { background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }

/* ==========================================================
   TEMPLATE 11: BASKETBALL — parquet, hoop & orange leather
   ========================================================== */
.viewer-basket {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(242, 140, 40, 0.15), transparent 60%),
        linear-gradient(180deg, #3d2110 0%, #2c1808 60%, #1a0e04 100%);
    color: #fff5eb;
}
.viewer-basket .v-bg {
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.025) 0 46px,
            transparent 46px 48px),
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15) 0 92px,
            transparent 92px 94px);
}
.viewer-basket .v-basket-court {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; max-width: 380px;
    aspect-ratio: 1;
    border: 2px solid rgba(242, 140, 40, 0.35);
    border-radius: 50%;
    z-index: 0;
    box-shadow: 0 0 60px rgba(242, 140, 40, 0.2);
}
.viewer-basket .v-basket-court::after {
    content: '';
    position: absolute;
    inset: 15%;
    border: 2px solid rgba(242, 140, 40, 0.25);
    border-radius: 50%;
}
.viewer-basket .v-basket-hoop {
    position: absolute;
    top: 30px; right: 20px;
    width: 46px; height: 46px;
    border: 3px solid #f28c28;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(242, 140, 40, 0.6), inset 0 0 8px rgba(242, 140, 40, 0.4);
    z-index: 0;
    opacity: 0.55;
}
.viewer-basket .v-basket-hoop::before {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 30px; height: 22px;
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.35) 0 1px,
        transparent 1px 3px);
    -webkit-mask-image: linear-gradient(180deg, black, transparent);
    mask-image: linear-gradient(180deg, black, transparent);
}
.viewer-basket .v-basket-ball {
    position: absolute;
    top: 12%; left: 20px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff9e5c, #d95d18 60%, #8a3a0f);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55), inset -4px -4px 6px rgba(0, 0, 0, 0.3);
    z-index: 0;
    animation: basketBounce 3.5s cubic-bezier(0.36, 0, 0.66, 1) infinite;
}
.viewer-basket .v-basket-ball::before,
.viewer-basket .v-basket-ball::after {
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, 0.55);
}
.viewer-basket .v-basket-ball::before {
    top: 0; left: 50%;
    width: 1.5px; height: 100%;
    transform: translateX(-50%);
}
.viewer-basket .v-basket-ball::after {
    left: 0; top: 50%;
    height: 1.5px; width: 100%;
    transform: translateY(-50%);
}
@keyframes basketBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35%      { transform: translateY(30px) rotate(120deg); }
    50%      { transform: translateY(0) rotate(180deg); }
    85%      { transform: translateY(30px) rotate(300deg); }
}

.viewer-basket .v-name {
    background: linear-gradient(135deg, #f28c28 0%, #ffb066 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(242, 140, 40, 0.3);
}
.viewer-basket .v-bio { color: rgba(255, 245, 235, 0.75); font-style: italic; }
.viewer-basket .v-avatar {
    border-radius: 50%;
    box-shadow: 0 0 0 3px #f28c28, 0 0 0 6px rgba(0, 0, 0, 0.7), 0 0 30px rgba(242, 140, 40, 0.5);
    background: radial-gradient(circle at 35% 30%, #ff9e5c, #d95d18);
    position: relative;
}
.viewer-basket .v-avatar::before,
.viewer-basket .v-avatar::after {
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, 0.35);
    z-index: 3;
    pointer-events: none;
}
.viewer-basket .v-avatar::before {
    top: 0; left: 50%;
    width: 2px; height: 100%;
    transform: translateX(-50%);
}
.viewer-basket .v-avatar::after {
    left: 0; top: 50%;
    height: 2px; width: 100%;
    transform: translateY(-50%);
}
.viewer-basket .v-avatar-img { border-radius: 50%; position: relative; z-index: 2; }
.viewer-basket .v-avatar-fallback {
    background: linear-gradient(135deg, #f28c28, #d95d18);
    color: #1a0e04;
    font-weight: 800;
}

.viewer-basket .v-link {
    background: rgba(20, 8, 4, 0.88);
    border: 1px solid rgba(242, 140, 40, 0.4);
    color: #fff5eb;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    box-shadow: inset 4px 0 0 #f28c28, 0 6px 20px rgba(0, 0, 0, 0.5);
}
.viewer-basket .v-link:hover {
    background: linear-gradient(90deg, rgba(242, 140, 40, 0.25), rgba(20, 8, 4, 0.9));
    border-color: #f28c28;
    box-shadow: inset 4px 0 0 #ffb066, 0 8px 28px rgba(242, 140, 40, 0.45);
    transform: translateX(4px);
}
.viewer-basket .v-link-icon { color: #f28c28; }
.viewer-basket .v-link-arrow { color: #ffb066; }

.viewer-basket .v-social {
    background: rgba(20, 8, 4, 0.85);
    border: 1px solid rgba(242, 140, 40, 0.5);
    color: #f28c28;
    border-radius: 50%;
    position: relative;
}
.viewer-basket .v-social::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 49%, rgba(0, 0, 0, 0.25) 49% 51%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(0, 0, 0, 0.25) 49% 51%, transparent 51%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}
.viewer-basket .v-social svg { position: relative; z-index: 1; }
.viewer-basket .v-social:hover {
    background: radial-gradient(circle at 35% 30%, #ff9e5c, #d95d18);
    color: #1a0e04;
    border-color: #ffb066;
    box-shadow: 0 8px 24px rgba(242, 140, 40, 0.6);
    transform: translateY(-3px);
}

.viewer-basket .viewer-footer { background: rgba(20, 8, 4, 0.6); border-color: rgba(242, 140, 40, 0.35); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; }
.viewer-basket .viewer-footer strong { background: linear-gradient(135deg, #f28c28, #ffb066); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-basket .viewer-footer-dot { background: #f28c28; box-shadow: 0 0 8px #f28c28; }

/* ==========================================================
   TEMPLATE 12: FOOTBALL — grass field, chalk lines, stadium
   ========================================================== */
.viewer-football {
    background:
        repeating-linear-gradient(90deg,
            #0d5e2e 0 40px,
            #0a4a25 40px 80px);
    color: #ffffff;
    position: relative;
}
.viewer-football .v-bg {
    background:
        radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, 0.25), transparent 50%),
        radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.55), transparent 55%);
}
.viewer-football .v-foot-grass {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.03) 0 1px, transparent 1.5px),
        radial-gradient(circle at 75% 40%, rgba(0, 0, 0, 0.15) 0 1px, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1.5px);
    background-size: 40px 40px, 60px 60px, 50px 50px;
    z-index: 0;
    opacity: 0.7;
}
.viewer-football .v-foot-circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; max-width: 320px;
    aspect-ratio: 1;
    border: 2.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    z-index: 0;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
}
.viewer-football .v-foot-circle::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
.viewer-football .v-foot-line {
    position: absolute;
    left: 12px; right: 12px; top: 40px; bottom: 40px;
    border: 2.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    z-index: 0;
}
.viewer-football .v-foot-line::before,
.viewer-football .v-foot-line::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 40%;
    height: 60px;
    border: 2.5px solid rgba(255, 255, 255, 0.5);
    transform: translateX(-50%);
}
.viewer-football .v-foot-line::before { top: -2px; border-top: none; border-radius: 0 0 6px 6px; }
.viewer-football .v-foot-line::after { bottom: -2px; border-bottom: none; border-radius: 6px 6px 0 0; }

.viewer-football .v-foot-ball {
    position: absolute;
    top: 15%; right: 18px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #ffffff, #d0d0d0 65%, #8a8a8a);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), inset -3px -3px 5px rgba(0, 0, 0, 0.25);
    z-index: 0;
    animation: footBallSpin 6s linear infinite;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.85) 4px, transparent 5px),
        radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.55) 3px, transparent 4px),
        radial-gradient(circle at 80% 30%, rgba(0, 0, 0, 0.55) 3px, transparent 4px),
        radial-gradient(circle at 20% 70%, rgba(0, 0, 0, 0.55) 3px, transparent 4px),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.55) 3px, transparent 4px);
}
@keyframes footBallSpin {
    from { transform: rotate(0deg) translateY(0); }
    50%  { transform: rotate(180deg) translateY(-8px); }
    to   { transform: rotate(360deg) translateY(0); }
}

.viewer-football .v-name {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
    font-family: 'Impact', 'Bebas Neue', 'Outfit', sans-serif;
}
.viewer-football .v-bio { color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.viewer-football .v-avatar {
    border-radius: 50%;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px rgba(0, 0, 0, 0.75), 0 10px 30px rgba(0, 0, 0, 0.6);
    background: linear-gradient(135deg, #0d5e2e, #0a4a25);
}
.viewer-football .v-avatar-fallback {
    background: linear-gradient(135deg, #ffffff, #f0f0f0);
    color: #0d5e2e;
    font-weight: 800;
}

.viewer-football .v-link {
    background: rgba(8, 40, 20, 0.88);
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}
.viewer-football .v-link:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #0d5e2e;
    border-color: #ffffff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}
.viewer-football .v-link-icon { color: #ffffff; }
.viewer-football .v-link:hover .v-link-icon,
.viewer-football .v-link:hover .v-link-arrow { color: #0d5e2e; }
.viewer-football .v-link-arrow { color: rgba(255, 255, 255, 0.75); }

.viewer-football .v-social {
    background: rgba(8, 40, 20, 0.85);
    border: 2px solid #ffffff;
    color: #ffffff;
    border-radius: 8px;
}
.viewer-football .v-social:hover {
    background: #ffffff;
    color: #0d5e2e;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px) scale(1.05);
}

.viewer-football .viewer-footer { background: rgba(8, 40, 20, 0.65); border-color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; }
.viewer-football .viewer-footer strong { color: #ffffff; }
.viewer-football .viewer-footer-dot { background: #ffffff; box-shadow: 0 0 8px #ffffff; }

/* ==========================================================
   TEMPLATE 13: COMBAT — boxing ring, red canvas, gold ropes
   ========================================================== */
.viewer-combat {
    background:
        radial-gradient(ellipse at 50% 20%, rgba(201, 161, 69, 0.2), transparent 55%),
        linear-gradient(180deg, #1a0000 0%, #4a0a0a 50%, #0a0000 100%);
    color: #f5e6c9;
}
.viewer-combat .v-bg {
    background:
        radial-gradient(ellipse at 30% 60%, rgba(122, 0, 0, 0.35), transparent 55%),
        radial-gradient(ellipse at 70% 40%, rgba(201, 161, 69, 0.15), transparent 55%);
}
.viewer-combat .v-combat-canvas {
    position: absolute;
    inset: 12px;
    border: 3px solid rgba(201, 161, 69, 0.35);
    border-radius: 6px;
    box-shadow:
        inset 0 0 30px rgba(122, 0, 0, 0.55),
        0 0 0 1px rgba(201, 161, 69, 0.2),
        0 0 60px rgba(201, 161, 69, 0.15);
    z-index: 0;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(255, 100, 100, 0.06) 0 8px, transparent 10px),
        radial-gradient(circle at 85% 25%, rgba(255, 100, 100, 0.05) 0 6px, transparent 9px),
        radial-gradient(circle at 40% 85%, rgba(255, 100, 100, 0.05) 0 10px, transparent 12px);
}
.viewer-combat .v-combat-rope {
    position: absolute;
    left: -15%; right: -15%;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 5%,
        #c9a145 15%,
        #f5d78a 50%,
        #c9a145 85%,
        transparent 95%);
    box-shadow: 0 0 12px rgba(201, 161, 69, 0.75), 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
}
.viewer-combat .v-combat-rope-1 { top: 22%; }
.viewer-combat .v-combat-rope-2 { top: 42%; }
.viewer-combat .v-combat-rope-3 { top: 62%; }
.viewer-combat .v-combat-spot {
    position: absolute;
    top: -20%; left: 50%;
    transform: translateX(-50%);
    width: 90%; height: 60%;
    background: radial-gradient(ellipse at center top, rgba(255, 220, 130, 0.35), transparent 55%);
    filter: blur(6px);
    z-index: 0;
    animation: combatSpotFlicker 4s ease-in-out infinite;
}
@keyframes combatSpotFlicker {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

.viewer-combat .v-name {
    background: linear-gradient(135deg, #ffd76a 0%, #c9a145 50%, #f5d78a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    font-family: 'Impact', 'Bebas Neue', 'Outfit', sans-serif;
    text-shadow: 0 4px 12px rgba(201, 161, 69, 0.35);
}
.viewer-combat .v-bio { color: rgba(245, 230, 201, 0.8); font-style: italic; letter-spacing: 0.02em; }
.viewer-combat .v-avatar {
    border-radius: 50%;
    box-shadow:
        0 0 0 3px #c9a145,
        0 0 0 6px rgba(20, 4, 4, 0.9),
        0 0 0 8px #c9a145,
        0 0 40px rgba(201, 161, 69, 0.5);
    background: linear-gradient(135deg, #7a0000, #4a0000);
    animation: combatPunch 2.5s cubic-bezier(0.36, 0, 0.66, 1) infinite;
}
@keyframes combatPunch {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.viewer-combat .v-avatar-fallback {
    background: linear-gradient(135deg, #c9a145, #7a0000);
    color: #f5e6c9;
    font-weight: 800;
}

.viewer-combat .v-link {
    background: linear-gradient(180deg, rgba(45, 5, 5, 0.9), rgba(20, 0, 0, 0.95));
    border: 1px solid rgba(201, 161, 69, 0.5);
    color: #f5e6c9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(201, 161, 69, 0.25),
        inset 0 -3px 0 rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.6);
}
.viewer-combat .v-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ffd76a, #c9a145);
    box-shadow: 0 0 8px rgba(201, 161, 69, 0.7);
}
.viewer-combat .v-link:hover {
    background: linear-gradient(180deg, #7a0000, #4a0000);
    border-color: #c9a145;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 106, 0.35),
        0 10px 28px rgba(122, 0, 0, 0.7),
        0 0 20px rgba(201, 161, 69, 0.35);
    transform: translateY(-2px);
}
.viewer-combat .v-link-icon { color: #c9a145; }
.viewer-combat .v-link-arrow { color: #ffd76a; }

.viewer-combat .v-social {
    background: linear-gradient(180deg, #2d0505, #1a0000);
    border: 1px solid rgba(201, 161, 69, 0.55);
    color: #c9a145;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(201, 161, 69, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.viewer-combat .v-social:hover {
    background: linear-gradient(135deg, #c9a145, #7a0000);
    color: #f5e6c9;
    border-color: #ffd76a;
    box-shadow: 0 8px 24px rgba(201, 161, 69, 0.55), 0 0 0 2px rgba(122, 0, 0, 0.5);
    transform: translateY(-3px) scale(1.06);
}

.viewer-combat .viewer-footer { background: rgba(20, 0, 0, 0.6); border-color: rgba(201, 161, 69, 0.35); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }
.viewer-combat .viewer-footer strong { background: linear-gradient(135deg, #ffd76a, #c9a145); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-combat .viewer-footer-dot { background: #c9a145; box-shadow: 0 0 8px #c9a145; }

/* ==========================================================
   TEMPLATE 14: FILM NOIR — B&W, spotlight beam, 35mm grain
   ========================================================== */
.viewer-noir {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #050505 100%);
    color: #e8e8e8;
    font-family: 'Georgia', 'Playfair Display', serif;
}
.viewer-noir .v-bg {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(232, 232, 232, 0.12), transparent 55%),
        radial-gradient(ellipse at 20% 100%, rgba(255, 255, 255, 0.04), transparent 60%);
}
.viewer-noir .v-noir-spot {
    position: absolute;
    top: -20%; left: 50%;
    width: 45%; height: 130%;
    background: linear-gradient(180deg,
        rgba(232, 232, 232, 0.28) 0%,
        rgba(232, 232, 232, 0.06) 40%,
        transparent 75%);
    transform: translateX(-50%) skewX(-6deg);
    filter: blur(20px);
    z-index: 0;
    animation: noirSpotSway 8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes noirSpotSway {
    0%, 100% { transform: translateX(-52%) skewX(-6deg); opacity: 0.85; }
    50%      { transform: translateX(-48%) skewX(-3deg); opacity: 1; }
}
.viewer-noir .v-noir-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.14;
    mix-blend-mode: overlay;
    z-index: 4;
    pointer-events: none;
    animation: noirGrain 0.6s steps(3) infinite;
}
@keyframes noirGrain {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-4px, 3px); }
    66%  { transform: translate(3px, -4px); }
    100% { transform: translate(0, 0); }
}
.viewer-noir .v-noir-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
        rgba(0, 0, 0, 0.3) 0 1px,
        transparent 1px 4px);
    opacity: 0.35;
    z-index: 3;
    pointer-events: none;
}

.viewer-noir .v-name {
    color: #f5f5f5;
    font-family: inherit;
    font-style: italic;
    letter-spacing: 0.02em;
    font-weight: 700;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8), 0 0 20px rgba(232, 232, 232, 0.2);
}
.viewer-noir .v-bio { color: rgba(232, 232, 232, 0.72); font-style: italic; font-family: inherit; }
.viewer-noir .v-avatar {
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(232, 232, 232, 0.8), 0 0 0 5px #0a0a0a, 0 12px 40px rgba(0, 0, 0, 0.85);
    filter: grayscale(1) contrast(1.1);
    background: linear-gradient(135deg, #2a2a2a, #0a0a0a);
}
.viewer-noir .v-avatar-fallback {
    background: linear-gradient(135deg, #e8e8e8, #8a8a8a);
    color: #0a0a0a;
    font-weight: 800;
}

.viewer-noir .v-link {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 232, 232, 0.35);
    color: #e8e8e8;
    font-family: 'Georgia', serif;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
}
.viewer-noir .v-link:hover {
    background: rgba(232, 232, 232, 0.9);
    color: #0a0a0a;
    border-color: #ffffff;
    box-shadow: 0 8px 28px rgba(232, 232, 232, 0.3), 0 0 0 2px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}
.viewer-noir .v-link-icon { color: rgba(232, 232, 232, 0.7); }
.viewer-noir .v-link-arrow { color: rgba(232, 232, 232, 0.5); }
.viewer-noir .v-link:hover .v-link-icon,
.viewer-noir .v-link:hover .v-link-arrow { color: #0a0a0a; }

.viewer-noir .v-social {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(232, 232, 232, 0.4);
    color: #e8e8e8;
    border-radius: 50%;
    filter: grayscale(1);
}
.viewer-noir .v-social:hover {
    background: rgba(232, 232, 232, 0.9);
    color: #0a0a0a;
    border-color: #ffffff;
    box-shadow: 0 8px 22px rgba(232, 232, 232, 0.3);
    transform: translateY(-3px);
    filter: grayscale(0);
}

.viewer-noir .viewer-footer { background: rgba(0, 0, 0, 0.6); border-color: rgba(232, 232, 232, 0.2); font-family: inherit; letter-spacing: 0.08em; font-size: 11.5px; text-transform: uppercase; }
.viewer-noir .viewer-footer strong { color: #f5f5f5; font-style: italic; }
.viewer-noir .viewer-footer-dot { background: #e8e8e8; box-shadow: 0 0 8px rgba(232, 232, 232, 0.8); }

/* ==========================================================
   TEMPLATE 15: BLOCKBUSTER — Hollywood premiere, marquee
   ========================================================== */
.viewer-blockbuster {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(139, 0, 0, 0.4), transparent 60%),
        linear-gradient(180deg, #1a0000 0%, #2d0505 55%, #0a0000 100%);
    color: #f5e6c9;
}
.viewer-blockbuster .v-bg {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(201, 161, 69, 0.2), transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(255, 215, 106, 0.15), transparent 55%);
}
.viewer-blockbuster .v-bb-curtain {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(139, 0, 0, 0.45) 0 4%,
            rgba(70, 0, 0, 0.45) 4% 8%,
            rgba(139, 0, 0, 0.45) 8% 12%,
            rgba(70, 0, 0, 0.45) 12% 16%,
            rgba(139, 0, 0, 0.45) 16% 20%);
    background-size: 20% 100%;
    z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 30%, black 60%);
    mask-image: linear-gradient(180deg, transparent 30%, black 60%);
    opacity: 0.5;
}
.viewer-blockbuster .v-bb-marquee {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    height: 10px;
    background:
        radial-gradient(circle at 5% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 15% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 25% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 35% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 45% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 55% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 65% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 75% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 85% 50%, #ffd76a 0 3px, transparent 4px),
        radial-gradient(circle at 95% 50%, #ffd76a 0 3px, transparent 4px);
    filter: drop-shadow(0 0 4px rgba(255, 215, 106, 0.9));
    z-index: 3;
    animation: bbMarqueeBlink 2s ease-in-out infinite;
}
@keyframes bbMarqueeBlink {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 215, 106, 0.9)); }
    50%      { opacity: 0.65; filter: drop-shadow(0 0 8px rgba(255, 215, 106, 0.7)); }
}
.viewer-blockbuster .v-bb-spot {
    position: absolute;
    width: 60%; height: 130%;
    top: -20%;
    background: linear-gradient(180deg,
        rgba(255, 215, 106, 0.3),
        transparent 60%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}
.viewer-blockbuster .v-bb-spot-1 { left: -10%; transform: skewX(15deg); animation: bbSpotSweep 8s ease-in-out infinite; }
.viewer-blockbuster .v-bb-spot-2 { right: -10%; transform: skewX(-15deg); animation: bbSpotSweep 8s ease-in-out infinite reverse; }
@keyframes bbSpotSweep {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.viewer-blockbuster .v-name {
    background: linear-gradient(135deg, #ffd76a 0%, #ffffff 50%, #c9a145 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 900;
    font-family: 'Impact', 'Bebas Neue', 'Outfit', sans-serif;
    text-shadow: 0 4px 20px rgba(255, 215, 106, 0.35);
    padding: 0 8px;
}
.viewer-blockbuster .v-bio { color: rgba(245, 230, 201, 0.85); letter-spacing: 0.03em; }
.viewer-blockbuster .v-avatar {
    border-radius: 50%;
    box-shadow:
        0 0 0 4px #c9a145,
        0 0 0 7px #8b0000,
        0 0 0 10px #c9a145,
        0 0 50px rgba(255, 215, 106, 0.6);
    background: linear-gradient(135deg, #8b0000, #4a0000);
}
.viewer-blockbuster .v-avatar-fallback {
    background: linear-gradient(135deg, #ffd76a, #c9a145);
    color: #1a0000;
    font-weight: 800;
}

.viewer-blockbuster .v-link {
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.75), rgba(60, 0, 0, 0.9));
    border: 2px solid #c9a145;
    color: #f5e6c9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    box-shadow:
        inset 0 2px 0 rgba(255, 215, 106, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.5),
        0 8px 26px rgba(139, 0, 0, 0.6),
        0 0 0 1px rgba(201, 161, 69, 0.5);
}
.viewer-blockbuster .v-link:hover {
    background: linear-gradient(180deg, #c9a145, #8b0000);
    color: #fff8e6;
    border-color: #ffd76a;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        0 12px 32px rgba(255, 215, 106, 0.45),
        0 0 24px rgba(201, 161, 69, 0.5);
    transform: translateY(-3px);
}
.viewer-blockbuster .v-link-icon { color: #ffd76a; }
.viewer-blockbuster .v-link-arrow { color: #ffd76a; }

.viewer-blockbuster .v-social {
    background: linear-gradient(180deg, #4a0000, #1a0000);
    border: 2px solid #c9a145;
    color: #ffd76a;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 106, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.6);
}
.viewer-blockbuster .v-social:hover {
    background: linear-gradient(135deg, #ffd76a, #c9a145);
    color: #1a0000;
    border-color: #ffffff;
    box-shadow:
        0 10px 28px rgba(255, 215, 106, 0.6),
        0 0 0 2px rgba(139, 0, 0, 0.5);
    transform: translateY(-4px) scale(1.08);
}

.viewer-blockbuster .viewer-footer { background: rgba(20, 0, 0, 0.65); border-color: rgba(201, 161, 69, 0.4); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.viewer-blockbuster .viewer-footer strong { background: linear-gradient(135deg, #ffd76a, #ffffff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-blockbuster .viewer-footer-dot { background: #ffd76a; box-shadow: 0 0 10px #ffd76a; }

/* ==========================================================
   TEMPLATE 16: SCI-FI — cyberpunk HUD, hologram, scanlines
   ========================================================== */
.viewer-scifi {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, 0.15), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(124, 77, 255, 0.2), transparent 60%),
        linear-gradient(180deg, #050510 0%, #0a0a25 55%, #030308 100%);
    color: #e0f7ff;
}
.viewer-scifi .v-bg {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(0, 229, 255, 0.18), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(124, 77, 255, 0.2), transparent 55%);
}
.viewer-scifi .v-sci-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.14) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    z-index: 0;
    animation: sciGridPulse 6s ease-in-out infinite;
}
@keyframes sciGridPulse {
    0%, 100% { opacity: 0.5; background-position: 0 0; }
    50%      { opacity: 0.8; background-position: 4px 4px; }
}
.viewer-scifi .v-sci-hud {
    position: absolute;
    top: 20px; left: 20px; right: 20px;
    height: 45px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 6px;
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}
.viewer-scifi .v-sci-hud::before,
.viewer-scifi .v-sci-hud::after {
    content: '';
    position: absolute;
    background: #00e5ff;
    box-shadow: 0 0 6px #00e5ff;
}
.viewer-scifi .v-sci-hud::before {
    top: -1px; left: -1px;
    width: 12px; height: 12px;
    border-radius: 6px 0 0 0;
    background: linear-gradient(135deg, #00e5ff 40%, transparent 40%);
    box-shadow: none;
}
.viewer-scifi .v-sci-hud::after {
    bottom: -1px; right: -1px;
    width: 12px; height: 12px;
    border-radius: 0 0 6px 0;
    background: linear-gradient(315deg, #00e5ff 40%, transparent 40%);
    box-shadow: none;
}
.viewer-scifi .v-sci-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent,
        rgba(0, 229, 255, 0.06) 50%,
        transparent);
    z-index: 2;
    pointer-events: none;
    animation: sciScan 4s linear infinite;
    -webkit-mask-image: linear-gradient(180deg, black 0 20%, transparent 22%);
    mask-image: linear-gradient(180deg, black 0 20%, transparent 22%);
}
@keyframes sciScan {
    from { transform: translateY(-100%); }
    to   { transform: translateY(100%); }
}
.viewer-scifi .v-sci-particle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff;
    z-index: 1;
    animation: sciParticleFloat 8s ease-in-out infinite;
}
.viewer-scifi .v-sci-particle:nth-child(1) { top: 20%; left: 12%; animation-delay: 0s; }
.viewer-scifi .v-sci-particle:nth-child(2) { top: 60%; right: 15%; background: #7c4dff; box-shadow: 0 0 8px #7c4dff; animation-delay: -2.5s; }
.viewer-scifi .v-sci-particle:nth-child(3) { top: 80%; left: 30%; animation-delay: -5s; }
@keyframes sciParticleFloat {
    0%, 100% { transform: translate(0, 0); opacity: 0.6; }
    50%      { transform: translate(10px, -20px); opacity: 1; }
}

.viewer-scifi .v-name {
    background: linear-gradient(135deg, #00e5ff 0%, #7c4dff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    font-family: 'Orbitron', 'Rajdhani', 'Outfit', monospace;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
    animation: sciNameGlow 3s ease-in-out infinite;
}
@keyframes sciNameGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4)); }
    50%      { filter: drop-shadow(0 0 12px rgba(124, 77, 255, 0.6)); }
}
.viewer-scifi .v-bio { color: rgba(224, 247, 255, 0.75); letter-spacing: 0.02em; font-family: 'Rajdhani', 'Outfit', monospace; }
.viewer-scifi .v-avatar {
    border-radius: 22%;
    box-shadow:
        0 0 0 2px rgba(0, 229, 255, 0.9),
        0 0 0 5px rgba(0, 229, 255, 0.15),
        0 0 40px rgba(0, 229, 255, 0.6),
        0 0 80px rgba(124, 77, 255, 0.35);
    background: linear-gradient(135deg, #0a0a25, #050510);
    animation: sciAvatarPulse 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.viewer-scifi .v-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 229, 255, 0.15) 45%,
        rgba(0, 229, 255, 0.35) 50%,
        rgba(0, 229, 255, 0.15) 55%,
        transparent 100%);
    animation: sciAvatarScan 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}
@keyframes sciAvatarPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.9), 0 0 40px rgba(0, 229, 255, 0.6), 0 0 80px rgba(124, 77, 255, 0.35); }
    50%      { box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.9), 0 0 50px rgba(124, 77, 255, 0.7), 0 0 90px rgba(0, 229, 255, 0.4); }
}
@keyframes sciAvatarScan {
    from { transform: translateY(-100%); }
    to   { transform: translateY(100%); }
}
.viewer-scifi .v-avatar-img { border-radius: 20%; position: relative; z-index: 2; }
.viewer-scifi .v-avatar-fallback {
    background: linear-gradient(135deg, #00e5ff, #7c4dff);
    color: #050510;
    font-weight: 800;
    font-family: 'Orbitron', 'Outfit', monospace;
}

.viewer-scifi .v-link {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(124, 77, 255, 0.08));
    border: 1px solid rgba(0, 229, 255, 0.5);
    color: #e0f7ff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-family: 'Rajdhani', 'Outfit', monospace;
    box-shadow:
        inset 0 0 12px rgba(0, 229, 255, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}
.viewer-scifi .v-link::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.2), transparent);
    transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.viewer-scifi .v-link:hover::before { left: 200%; }
.viewer-scifi .v-link:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(124, 77, 255, 0.2));
    border-color: #00e5ff;
    color: #ffffff;
    box-shadow:
        inset 0 0 20px rgba(0, 229, 255, 0.35),
        0 8px 28px rgba(0, 229, 255, 0.4),
        0 0 0 1px #00e5ff;
    transform: translateY(-2px);
}
.viewer-scifi .v-link-icon { color: #00e5ff; }
.viewer-scifi .v-link-arrow { color: #7c4dff; }

.viewer-scifi .v-social {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(124, 77, 255, 0.08));
    border: 1px solid rgba(0, 229, 255, 0.55);
    color: #00e5ff;
    border-radius: 10px;
    box-shadow:
        inset 0 0 8px rgba(0, 229, 255, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.viewer-scifi .v-social:hover {
    background: linear-gradient(135deg, #00e5ff, #7c4dff);
    color: #050510;
    border-color: #ffffff;
    box-shadow:
        0 10px 28px rgba(0, 229, 255, 0.55),
        0 0 0 2px rgba(124, 77, 255, 0.5);
    transform: translateY(-3px) scale(1.08);
}

.viewer-scifi .viewer-footer { background: rgba(5, 5, 20, 0.65); border-color: rgba(0, 229, 255, 0.3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-family: 'Rajdhani', 'Outfit', monospace; }
.viewer-scifi .viewer-footer strong { background: linear-gradient(135deg, #00e5ff, #7c4dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.viewer-scifi .viewer-footer-dot { background: #00e5ff; box-shadow: 0 0 10px #00e5ff; }

/* Push footer to the very bottom of .v-inner (flex column) — fallback when no socials-bottom */
.v-inner .viewer-footer { margin: auto auto 0; }

/* Position variants for social icons block */
/* BOTTOM: pinned right above the "Créé par Mogalink" footer */
.v-inner .v-socials-bottom { margin-top: auto; padding-top: 22px; }
.v-inner .v-socials-bottom + .viewer-footer { margin: 14px auto 0; }
/* TOP: sits directly under bio (or name if no bio), before the links */
.v-inner .v-socials-top { margin-top: 4px; padding-top: 0; margin-bottom: 6px; }

/* ==========================================================
   LINK ROW ADDITIONS — drag handle, featured checkbox, embed badge
   ========================================================== */
.link-row {
    /* Extend the existing grid: drag | icon | title | url | actions */
    grid-template-columns: 24px 120px 1fr 1.4fr auto !important;
}

.link-drag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: grab;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
}
.link-drag:hover {
    color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.08);
}
.link-drag:active { cursor: grabbing; }

.link-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.link-featured-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 15px;
    filter: grayscale(1);
    opacity: 0.55;
}
.link-featured-toggle:hover {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    opacity: 0.9;
}
.link-featured-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.link-featured-toggle input:checked ~ span {
    filter: none;
    text-shadow: 0 0 12px rgba(255, 193, 7, 0.7);
}
.link-row .link-featured:checked + span,
.link-row.is-featured .link-featured-toggle {
    filter: none;
    opacity: 1;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.18), rgba(255, 152, 0, 0.15));
    border-color: rgba(255, 193, 7, 0.5);
}

/* Product toggle - shopping cart icon */
.link-product-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 15px;
    filter: grayscale(1);
    opacity: 0.55;
}
.link-product-toggle:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    opacity: 0.9;
}
.link-product-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.link-product-toggle input:checked + span { filter: none; }
.link-product-toggle:has(input:checked) {
    filter: none;
    opacity: 1;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(34, 197, 94, 0.15));
    border-color: rgba(16, 185, 129, 0.5);
}

/* Product fields */
.link-product-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px 12px;
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 10px;
    margin-top: 8px;
}

.link-product-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.link-product-field.link-product-image-field,
.link-product-field.link-product-desc-field {
    grid-column: 1 / -1;
}

.link-product-field span {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.link-product-field input,
.link-product-field select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--text-main);
    font-size: 13px;
    font-family: inherit;
}

.link-product-field input:focus,
.link-product-field select:focus {
    outline: none;
    border-color: var(--accent-green);
}

/* Product widget in viewer */
.v-link-product {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-link-product:hover {
    border-color: var(--accent-green) !important;
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -12px rgba(16, 185, 129, 0.35);
}

.v-product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.v-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.v-link-product:hover .v-product-image img {
    transform: scale(1.05);
}

.v-product-info {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v-product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.v-product-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
    min-width: 0;
}

.v-product-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.12);
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.v-product-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.v-product-cta {
    margin-top: 6px;
}

.v-product-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--accent-green);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: transform 0.2s ease;
}

.v-link-product:hover .v-product-btn {
    transform: translateX(4px);
}

/* Countdown toggle - clone of featured toggle styling */
.link-countdown-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 15px;
    filter: grayscale(1);
    opacity: 0.55;
}
.link-countdown-toggle:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    opacity: 0.9;
}
.link-countdown-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.link-countdown-toggle input:checked + span {
    filter: none;
}
.link-countdown-toggle:has(input:checked) {
    filter: none;
    opacity: 1;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.15));
    border-color: rgba(59, 130, 246, 0.5);
}

/* Link row extras (countdown date + tag) */
.link-row-extras {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    padding-top: 8px;
    flex-wrap: wrap;
}

.link-countdown-date-field,
.link-tag-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}

.link-countdown-date-field span,
.link-tag-field span {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.link-countdown-date-field input,
.link-tag-field input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text-main);
    font-size: 13px;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.link-countdown-date-field input:focus,
.link-tag-field input:focus {
    outline: none;
    border-color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.05);
}

.link-row.is-featured {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.06), rgba(255, 87, 34, 0.04));
    border-color: rgba(255, 193, 7, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.15), 0 4px 20px rgba(255, 193, 7, 0.06);
}

.link-embed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.14), rgba(29, 185, 84, 0.14));
    border: 1px solid rgba(29, 185, 84, 0.35);
    color: #1db954;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.link-embed-badge[data-type="youtube"] {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.4);
    color: #ff4d4d;
}

/* Sortable.js visual states */
.link-row-ghost {
    opacity: 0.35;
    background: rgba(255, 87, 34, 0.05) !important;
    border-style: dashed !important;
    border-color: rgba(255, 87, 34, 0.4) !important;
}
.link-row-chosen { cursor: grabbing; }
.link-row-drag {
    background: rgba(20, 22, 30, 0.95) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 87, 34, 0.4);
    transform: rotate(-1deg);
}

/* ==========================================================
   VIEWER — Featured link (shimmer + bigger) + Embed (YT/Spotify)
   ========================================================== */
.v-link-featured {
    position: relative;
    padding: 18px 22px;
    border-width: 2px !important;
    background-size: 200% 200%;
    animation: linkEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both, featuredShine 4s ease-in-out infinite;
    box-shadow: 0 8px 30px rgba(255, 193, 7, 0.2), 0 0 0 1px rgba(255, 193, 7, 0.4);
    font-weight: 600;
    order: -1; /* Pin to top of the flex column */
}

.v-link-featured::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    background-size: 300% 100%;
    animation: featuredShimmer 3s linear infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 0;
}

.v-link-featured > * { position: relative; z-index: 1; }

.v-link-star {
    position: absolute;
    top: -8px; right: -8px;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #1a0f00;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.15);
    animation: starPulse 2.5s ease-in-out infinite;
}

@keyframes featuredShine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes featuredShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}
@keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* Rich embed (YouTube / Spotify) */
.v-link-embed {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}
.v-link-embed:hover {
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}
.v-embed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 500;
    font-size: 14px;
}
.v-embed-header .v-link-title { text-align: left; }
.v-embed-header .v-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    opacity: 1;
    transition: background 0.2s ease;
}
.v-embed-header .v-link-arrow:hover { background: rgba(255, 255, 255, 0.15); }
.v-embed-frame {
    position: relative;
    height: var(--h, 210px);
    background: #000;
}
.v-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.v-link-embed-youtube { background: #0a0a0a; }
.v-link-embed-spotify { background: #191414; border-color: rgba(29, 185, 84, 0.3); }
.v-link-embed-spotify .v-embed-header { border-bottom-color: rgba(29, 185, 84, 0.2); }

/* ==========================================================
   PROFILE ANALYTICS CARD
   ========================================================== */
.profile-analytics-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.profile-stat-big {
    padding: 14px 12px;
}

.profile-analytics-chart {
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 16px;
}

.profile-analytics-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.profile-analytics-chart-title {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-analytics-chart-total {
    font-size: 13px;
    color: var(--accent-orange);
    font-weight: 700;
}

.profile-sparkline {
    height: 180px;
    position: relative;
    padding: 8px 0;
}

.profile-sparkline canvas {
    max-height: 100%;
    max-width: 100%;
}

.profile-analytics-chart-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Period picker */
.chart-period-picker {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.chart-period-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.chart-period-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.chart-period-btn.selected {
    background: var(--accent-orange);
    color: white;
}

/* Top clicked links */
.profile-top-links {
    padding-top: 4px;
}
.profile-top-links-header {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.profile-top-links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-top-links-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 12px;
    opacity: 0.7;
}
.profile-top-link {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.profile-top-link-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.profile-top-link-title {
    font-size: 13.5px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}
.profile-top-link-count {
    font-size: 12px;
    color: var(--accent-orange);
    font-weight: 600;
    flex-shrink: 0;
}
.profile-top-link-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.profile-top-link-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-orange), var(--accent-green));
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Heatmap-style link ranking */
.profile-top-link {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 8px;
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.profile-top-link.heat-hot {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}
.profile-top-link.heat-hot .profile-top-link-bar-fill {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.profile-top-link.heat-warm {
    background: rgba(255, 87, 34, 0.06);
    border-color: rgba(255, 87, 34, 0.2);
}
.profile-top-link.heat-warm .profile-top-link-bar-fill {
    background: linear-gradient(90deg, #f97316, #eab308);
}

.profile-top-link.heat-cool {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.15);
}
.profile-top-link.heat-cool .profile-top-link-bar-fill {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.profile-top-link.heat-cold {
    background: rgba(100, 116, 139, 0.05);
    border-color: rgba(100, 116, 139, 0.15);
}
.profile-top-link.heat-cold .profile-top-link-bar-fill {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

.profile-top-link-medal {
    font-size: 20px;
    grid-row: 1 / -1;
}

.profile-top-link-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    grid-column: 2;
}

.profile-top-link-pct {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
}

.profile-top-link-bar {
    grid-column: 2;
}

/* Traffic sources */
.profile-traffic-sources {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-traffic-sources-header {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.profile-traffic-sources-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-traffic-sources-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px 12px;
    opacity: 0.7;
}

.profile-traffic-source {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.25s ease;
}

.profile-traffic-source:hover {
    background: rgba(255, 87, 34, 0.05);
    border-color: rgba(255, 87, 34, 0.2);
}

.profile-traffic-source-icon {
    font-size: 20px;
    text-align: center;
    grid-row: 1 / -1;
}

.profile-traffic-source-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 2;
}

.profile-traffic-source-name {
    font-size: 13.5px;
    color: var(--text-main);
    font-weight: 500;
}

.profile-traffic-source-count {
    font-size: 12px;
    color: var(--accent-orange);
    font-weight: 600;
}

.profile-traffic-source-bar {
    grid-column: 2;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.profile-traffic-source-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-orange), var(--accent-green));
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive: analytics summary stacks + link-row 2-row grid on phone */
@media (max-width: 640px) {
    .profile-analytics-summary { grid-template-columns: 1fr 1fr; }
    .profile-analytics-summary .profile-stat:nth-child(3) { grid-column: 1 / -1; }
    .link-row {
        grid-template-columns: 20px 96px 1fr auto !important;
        grid-template-areas:
            "drag icon title actions"
            "url  url  url   url" !important;
        row-gap: 6px;
    }
    .link-row .link-drag { grid-area: drag; }
    .link-row .link-icon { grid-area: icon; }
    .link-row .link-title { grid-area: title; }
    .link-row .link-url { grid-area: url; }
    .link-row .link-row-actions { grid-area: actions; justify-content: flex-end; }
    .link-embed-badge { font-size: 9.5px; padding: 3px 6px; }
}

/* ==========================================================
   HEADER PROFILE BUTTON (avatar chip, visible when logged-in)
   ========================================================== */
.header-profile-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(16, 185, 129, 0.15));
    border: 1.5px solid rgba(255, 87, 34, 0.4);
    color: #fff;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s, box-shadow 0.25s;
    margin-right: 10px;
    font-family: inherit;
}
.header-profile-btn:hover {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 4px rgba(255, 87, 34, 0.15);
    transform: translateY(-1px) scale(1.05);
}
.header-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff5722, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-text-fill-color: initial;
}
.header-profile-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--accent-green);
    border: 2px solid #0a0c14;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

/* ==========================================================
   PROFILE PAGE (dashboard) — cards, identity, danger zone
   ========================================================== */
.profile-page {
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 80px;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

.profile-breadcrumb {
    margin-bottom: 20px;
}

.profile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition-smooth);
}
.profile-back-btn:hover {
    background: rgba(255, 87, 34, 0.08);
    border-color: rgba(255, 87, 34, 0.35);
    color: var(--accent-orange);
    transform: translateX(-2px);
}

/* Identity card (top hero) */
.profile-identity-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 32px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    overflow: hidden;
    margin-bottom: 24px;
    animation: profileCardEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes profileCardEnter {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.profile-identity-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 34, 0.6), rgba(16, 185, 129, 0.6), transparent);
}

.profile-identity-glow {
    position: absolute;
    top: -50%; right: -20%;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 87, 34, 0.18), transparent 60%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
    animation: identityGlowFloat 15s ease-in-out infinite alternate;
}

@keyframes identityGlowFloat {
    from { transform: translate(0, 0); }
    to   { transform: translate(-40px, 20px); }
}

.profile-avatar-lg {
    position: relative;
    z-index: 1;
    width: 112px; height: 112px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1c22, #0d1017);
    border: 3px solid rgba(255, 87, 34, 0.4);
    box-shadow: 0 8px 30px rgba(255, 87, 34, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.profile-avatar-lg img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.profile-avatar-fallback {
    font-size: 44px;
    font-weight: 800;
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-identity-info {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0 0 4px;
    background: linear-gradient(180deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.01em;
}

.profile-email {
    font-family: monospace;
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 14px;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}
.profile-meta-chip svg { opacity: 0.7; }

/* Grid of cards — reorganized hierarchy (2026 revamp)
   Row 1: Mogalink (full width, hero)
   Row 2: Analytics 3/4 + Contenu stats 1/4
   Row 3: Account | 2FA | History | Backup (4 equal cards)
   Row 4: Danger zone (full width, separated)
*/
.profile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "mogalink  mogalink  mogalink  mogalink"
        "analytics analytics analytics stats"
        "account   twofa     history   backup"
        "danger    danger    danger    danger";
    gap: 20px;
}

.profile-card-mogalink  { grid-area: mogalink; }
.profile-card-analytics { grid-area: analytics; }
.profile-card-stats     { grid-area: stats; }
.profile-card-account   { grid-area: account; }
.profile-card-2fa       { grid-area: twofa; }
.profile-card-history   { grid-area: history; }
.profile-card-backup    { grid-area: backup; }
.profile-card-danger    {
    grid-area: danger;
    margin-top: 28px;
    opacity: 0.75;
    transition: opacity 0.3s;
}
.profile-card-danger:hover { opacity: 1; }
.profile-card-danger::before {
    content: '⚠ Zone dangereuse — actions irréversibles';
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #ef4444;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: -8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(239, 68, 68, 0.3);
    opacity: 0.6;
}

/* Tablet: collapse to 2 columns */
@media (max-width: 1024px) {
    .profile-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "mogalink  mogalink"
            "analytics analytics"
            "stats     history"
            "account   twofa"
            "backup    backup"
            "danger    danger";
    }
}

/* Mobile: single column */
@media (max-width: 640px) {
    .profile-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "mogalink"
            "analytics"
            "stats"
            "account"
            "twofa"
            "history"
            "backup"
            "danger";
        gap: 14px;
    }
}

/* 2FA card */
.profile-2fa-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

.profile-2fa-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.profile-2fa-status.is-enabled {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--accent-green);
}

.profile-2fa-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-2fa-desc {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.profile-2fa-actions {
    display: flex;
    gap: 10px;
}

.profile-2fa-setup {
    padding: 20px;
    background: rgba(255, 87, 34, 0.05);
    border: 1px solid rgba(255, 87, 34, 0.2);
    border-radius: 12px;
    margin-top: 12px;
    animation: linkSlideIn 0.4s ease;
}

.profile-2fa-setup h4 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.profile-2fa-steps {
    padding-left: 20px;
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.profile-2fa-steps strong {
    color: var(--text-main);
}

.profile-2fa-qr {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: white;
    border-radius: 12px;
    max-width: 220px;
    margin: 0 auto 12px;
}

.profile-2fa-qr svg {
    display: block;
    width: 180px;
    height: 180px;
}

.profile-2fa-secret-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 0 0 14px;
}

.profile-2fa-secret-text code {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    font-family: 'Monaco', monospace;
    color: var(--accent-orange);
    user-select: all;
    font-size: 12px;
}

.profile-2fa-verify {
    display: flex;
    gap: 10px;
    align-items: center;
}

.profile-2fa-verify input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-main);
    font-family: 'Monaco', monospace;
    font-size: 20px;
    letter-spacing: 0.15em;
    text-align: center;
    font-weight: 700;
}

.profile-2fa-verify input:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.profile-2fa-error {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 13px;
}

/* Login history */
.profile-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.profile-history-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
    font-size: 14px;
    opacity: 0.7;
}

.profile-history-item {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.25s ease;
}

.profile-history-item:hover {
    background: rgba(255, 87, 34, 0.04);
    border-color: rgba(255, 87, 34, 0.15);
}

.profile-history-item.is-recent {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.2);
}

.profile-history-icon {
    font-size: 18px;
    text-align: center;
}

.profile-history-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-history-time {
    font-size: 13.5px;
    color: var(--text-main);
    font-weight: 500;
}

.profile-history-device {
    font-size: 12px;
    color: var(--text-muted);
}

.profile-history-ip {
    font-family: 'Monaco', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .profile-history-item {
        grid-template-columns: 24px 1fr;
    }
    .profile-history-ip {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }
}

.profile-backup-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.profile-backup-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}
.profile-backup-body .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-import-status {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-main);
}

.profile-import-status.is-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--accent-green);
}

.profile-import-status.is-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.profile-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 24px;
    backdrop-filter: blur(20px);
    transition: border-color 0.3s ease, transform 0.3s ease;
    animation: profileCardEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.1s;
}
.profile-card:hover {
    border-color: rgba(255, 87, 34, 0.25);
    transform: translateY(-2px);
}
.profile-card-danger:hover {
    border-color: rgba(239, 68, 68, 0.3);
}

.profile-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.profile-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(16, 185, 129, 0.12));
    border: 1px solid rgba(255, 87, 34, 0.25);
    color: var(--accent-orange);
    flex-shrink: 0;
}
.profile-card-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.profile-card-header h3 {
    margin: 0 0 3px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}
.profile-card-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* Mogalink card body */
.profile-mogalink-body {
    position: relative;
}
.profile-mogalink-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 30px 10px;
    text-align: center;
}
.profile-mogalink-empty p {
    color: var(--text-muted);
    font-size: 14.5px;
}
.profile-mogalink-live {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.profile-mogalink-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-mogalink-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-url-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-url-box {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.profile-url-box:focus-within {
    border-color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.profile-url-box input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 16px;
    color: var(--text-main);
    font-family: 'Monaco', monospace;
    font-size: 14px;
    min-width: 0;
    outline: none;
}

.profile-mogalink-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-mogalink-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
}

/* QR Section */
.profile-mogalink-qr-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.profile-qr-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.profile-qr-mini {
    background: white;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.profile-qr-mini:hover {
    transform: scale(1.08) rotateZ(-1deg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.profile-qr-mini svg {
    display: block;
    width: 180px;
    height: 180px;
}

.profile-qr-hint {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Stats card */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.profile-stat {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-align: center;
    transition: var(--transition-smooth);
}
.profile-stat:hover {
    background: rgba(255, 87, 34, 0.05);
    border-color: rgba(255, 87, 34, 0.2);
}
.profile-stat-value {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ff5722, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 4px;
}
.profile-stat-value-text {
    font-size: 1.1rem;
    text-transform: capitalize;
}
.profile-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Account card */
.profile-account-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.profile-field-label {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.profile-field-value {
    color: var(--text-main);
    font-size: 14px;
    font-family: monospace;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-block { width: 100%; justify-content: center; }

/* Danger zone */
.profile-card-danger {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.01)), var(--glass-bg);
    border-color: rgba(239, 68, 68, 0.2);
}
.profile-danger-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
}
.profile-danger-row strong {
    display: block;
    color: #fca5a5;
    font-size: 14px;
    margin-bottom: 3px;
}
.profile-danger-row p {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 0;
    line-height: 1.4;
}
.btn-danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    transition: var(--transition-smooth);
    white-space: nowrap;
}
.btn-danger:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}
.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Small buttons variant */
.btn-sm {
    padding: 8px 14px !important;
    font-size: 13px !important;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .profile-grid { grid-template-columns: 1fr; }
    .profile-identity-card { flex-direction: column; text-align: center; padding: 28px 22px; gap: 18px; }
    .profile-meta { justify-content: center; }
    .profile-mogalink-live { grid-template-columns: 1fr; }
    .profile-mogalink-right { justify-self: center; }
}

@media (max-width: 640px) {
    .profile-page { padding-top: calc(var(--header-height) + 24px); padding-bottom: 60px; }
    .profile-identity-card { padding: 22px 18px; }
    .profile-avatar-lg { width: 92px; height: 92px; }
    .profile-avatar-fallback { font-size: 36px; }
    .profile-name { font-size: 1.5rem; }
    .profile-card { padding: 20px 16px; border-radius: 14px; }
    .profile-card-header h3 { font-size: 1rem; }
    .profile-stats-grid { grid-template-columns: 1fr; }
    .profile-danger-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .btn-danger { width: 100%; text-align: center; }
    .header-profile-btn { margin-right: 6px; }
}

/* ==========================================================
   RESPONSIVE — Builder & Auth polish for tablet + phone
   ========================================================== */

/* Tablet: preview panel stops being fixed once it stacks under form */
@media (max-width: 1024px) {
    .builder-preview {
        position: static;
        right: auto;
        top: auto;
        width: 100%;
        height: auto;
        overflow: visible;
    }
    /* .preview-root height handled in unified rule (auto on mobile so page scroll isn't trapped) */
    .builder-form { padding: 26px; }
}

/* ≤ 768px : tighter cards + hero/auth padding */
@media (max-width: 768px) {
    .mogalink-builder { padding: 28px 0 70px; }
    .mogalink-hero { padding: 50px 0 24px; }
    .auth-landing { padding: 40px 0 60px; }
    .share-card { padding: 22px; margin-bottom: 24px; }
    .share-grid { gap: 24px; }
    .builder-form { padding: 22px; gap: 28px; border-radius: 18px; }
    .modal-card { padding: 28px 22px; }
}

/* ≤ 640px : phone-first layout adjustments */
@media (max-width: 640px) {
    /* Hero + builder shell */
    .mogalink-hero { padding: 40px 0 16px; }
    .mogalink-hero-desc { font-size: 1rem; }
    .mogalink-builder { padding: 20px 0 60px; }
    .hero-user-strip { flex-wrap: wrap; justify-content: center; gap: 8px; }

    /* Share card */
    .share-card { padding: 18px 16px; border-radius: 16px; margin-bottom: 20px; }
    .share-header { gap: 10px; margin-bottom: 16px; }
    .share-header-text h3 { font-size: 1rem; }
    .share-header-text p { font-size: 12.5px; }
    .share-url-row input { font-size: 12.5px; padding: 11px 12px; }
    .btn-copy { padding: 0 12px; font-size: 12.5px; }
    .btn-copy span { display: none; }
    .share-actions { gap: 8px; }
    .share-actions .btn { flex: 1 1 auto; justify-content: center; padding: 10px 14px; font-size: 13.5px; min-width: 0; }
    .share-socials-row { gap: 10px; flex-direction: column; align-items: flex-start; }
    .share-socials-buttons { flex-wrap: wrap; gap: 10px; }
    .share-social-btn { width: 42px; height: 42px; }
    .qr-frame { padding: 12px; }

    /* Builder form */
    .builder-form { padding: 20px 16px; gap: 24px; border-radius: 16px; }
    .step-label { font-size: 1rem; gap: 10px; }
    .step-num { width: 26px; height: 26px; font-size: 13px; }

    /* Template picker card polish */
    .template-card { padding: 10px; gap: 8px; }
    .template-name strong { font-size: 13.5px; }
    .template-name small { font-size: 11.5px; line-height: 1.3; display: block; }

    /* Avatar */
    .avatar-upload { gap: 14px; padding: 14px; }
    .avatar-upload-preview { width: 72px; height: 72px; }
    .avatar-upload-placeholder { font-size: 26px; }
    .btn-upload { padding: 9px 14px; font-size: 13px; }
    .segmented-control .segment { padding: 8px 10px; min-width: 44px; font-size: 12.5px; }
    .segmented-control.small .segment { padding: 8px 10px; min-width: 36px; font-size: 14px; }

    /* Slug — stack prefix above input so URL field has real width */
    .slug-input { flex-wrap: wrap; }
    .slug-prefix {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 8px 12px;
        font-size: 12.5px;
    }
    .slug-input input { flex: 1 1 0; padding: 11px 12px; font-size: 14px; min-width: 0; }
    .slug-status { flex: 0 0 auto; padding: 0 12px; min-width: 34px; font-size: 16px; }

    /* Form action button — full width on phone */
    .form-actions { padding-top: 4px; }
    .form-actions .btn {
        min-width: 0;
        width: 100%;
        align-self: stretch;
        justify-content: center;
        text-align: center;
    }

    /* Preview frame — more compact */
    .preview-frame { border-radius: 30px; padding: 34px 5px 5px; }
    .preview-root { border-radius: 26px; }

    /* Auth landing */
    .auth-landing { padding: 30px 0 50px; }
    .auth-landing-grid { gap: 28px; }
    .auth-landing-title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
    .auth-landing-desc { font-size: 0.98rem; }
    .auth-landing-features li { font-size: 13.5px; gap: 10px; }
    .feat-icon { width: 26px; height: 26px; font-size: 14px; }
    .auth-landing-templates { gap: 8px; }
    .auth-template-mini { width: 48px; height: 66px; padding: 7px 5px; }
    .auth-card { padding: 24px 20px; border-radius: 16px; }
    .auth-card-header h2 { font-size: 1.35rem; }

    /* Success modal */
    .mogalink-modal { padding: 14px; }
    .modal-card { padding: 24px 20px; border-radius: 18px; max-height: calc(100vh - 28px); }
    .modal-card h2 { font-size: 1.35rem; }
    .modal-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .modal-actions .btn { width: 100%; justify-content: center; text-align: center; }
    .modal-link input { font-size: 12.5px; padding: 11px 12px; }
    .modal-qr-frame { padding: 12px; }
}

/* Profile page responsive improvements */
@media (max-width: 900px) {
    .profile-mogalink-live {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .profile-mogalink-qr-section {
        padding: 20px;
    }
    .profile-qr-mini svg {
        width: 160px;
        height: 160px;
    }
    .profile-mogalink-actions {
        gap: 10px;
    }
    .profile-mogalink-actions .btn {
        flex: 1;
        padding: 10px 12px;
        font-size: 13px;
    }
    .profile-mogalink-left,
    .profile-mogalink-main {
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .profile-mogalink-actions {
        flex-direction: column;
    }
    .profile-mogalink-actions .btn {
        width: 100%;
        padding: 11px 14px;
    }
    .profile-qr-mini svg {
        width: 140px;
        height: 140px;
    }
    .profile-mogalink-qr-section {
        padding: 16px;
    }
}

/* ≤ 480px : phone squeeze */
@media (max-width: 480px) {
    .builder-form { padding: 18px 14px; gap: 22px; border-radius: 14px; }
    .share-card { padding: 16px 14px; border-radius: 14px; }
    .share-header-text h3 { font-size: 0.95rem; }
    .share-actions .btn { padding: 10px 10px; font-size: 13px; }
    .share-social-btn { width: 40px; height: 40px; }

    /* Link row — compress category column and let title breathe */
    .link-row { grid-template-columns: 96px 1fr auto; gap: 6px; padding: 8px; }
    .link-row .link-icon { font-size: 12.5px; padding: 8px 6px; }
    .link-row .link-title,
    .link-row .link-url { font-size: 13px; padding: 8px 10px; }

    /* Avatar */
    .avatar-upload { padding: 12px; gap: 12px; }
    .avatar-upload-preview { width: 64px; height: 64px; }
    .avatar-upload-placeholder { font-size: 22px; }

    /* Auth glow orbs contained (avoid horizontal scroll on tiny viewports) */
    .auth-landing-glow { width: 340px; height: 340px; filter: blur(90px); }

    /* Modal actions stay stacked; buttons a touch smaller */
    .modal-card { padding: 22px 16px; }
    .modal-card h2 { font-size: 1.25rem; }
    .modal-link { flex-direction: column; gap: 8px; }
    .modal-link .btn { width: 100%; justify-content: center; }
}

/* ≤ 380px : very small phones */
@media (max-width: 380px) {
    .builder-form { padding: 16px 12px; gap: 20px; }
    .share-card { padding: 14px 12px; }
    .share-actions { flex-direction: column; }
    .share-actions .btn { width: 100%; }
    .link-row { grid-template-columns: 1fr auto; }
    .link-row .link-icon { grid-column: 1 / -1; }
    .avatar-upload { flex-direction: column; align-items: flex-start; gap: 12px; }
    .avatar-upload-actions { align-items: stretch; width: 100%; }
    .btn-upload { justify-content: center; }
    .template-picker { gap: 10px; }
    .modal-card { padding: 20px 14px; }
}

/* ==========================================================
   MOBILE OVERFLOW SAFEGUARD — prevent long URLs / inputs from
   pushing the builder wider than the viewport (grid children
   default to min-width: auto, which lets inputs grow with
   their content and blows out horizontal layout).
   ========================================================== */

/* Universal: any input/select/textarea in the builder must never
   exceed its container, regardless of its value length. */
.builder-form input,
.builder-form select,
.builder-form textarea,
.profile-mogalink input,
.profile-mogalink select,
.profile-mogalink textarea {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Grid/flex containers used by the link + social builder should
   isolate their overflow so a runaway child cannot bubble up. */
.builder-form,
.form-step,
.links-list,
.socials-grid,
.link-row,
.social-row,
.link-row-extras,
.link-row-actions,
.link-product-fields {
    min-width: 0;
}

/* Explicitly force width on inputs in link + social rows */
.link-row .link-title,
.link-row .link-url,
.link-row .link-icon,
.link-row-extras input,
.link-product-fields input,
.link-product-fields select,
.social-input {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Prevent the actions column from being wider than the viewport
   allows: on narrow phones the 3 toggles + badge + remove need
   to wrap onto the next row instead of squeezing the title track. */
.link-row-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

/* ≤ 640px — repack the link-row so title + URL each own a full
   width row and actions sit on their own row. This eliminates
   any chance of horizontal overflow. */
@media (max-width: 640px) {
    .link-row {
        grid-template-columns: 32px 96px 1fr !important;
        grid-template-areas:
            "drag icon title"
            "url  url  url"
            "actions actions actions" !important;
        row-gap: 6px;
    }
    .link-row .link-drag { grid-area: drag; }
    .link-row .link-icon { grid-area: icon; min-width: 0; max-width: 100%; }
    .link-row .link-title { grid-area: title; min-width: 0; }
    .link-row .link-url { grid-area: url; min-width: 0; }
    .link-row .link-row-actions {
        grid-area: actions;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }
    .link-embed-badge {
        font-size: 9.5px;
        padding: 3px 6px;
        white-space: nowrap;
    }

    /* Social rows: keep icon + input on one line, hint below */
    .social-row { flex-wrap: wrap; }
    .social-input { flex: 1 1 100%; min-width: 0; }
    .social-hint { flex: 1 1 100%; margin-left: 0 !important; }
}

/* ≤ 480px : further squeeze — smaller icon column */
@media (max-width: 480px) {
    .link-row {
        grid-template-columns: 28px 82px 1fr !important;
        gap: 6px;
        padding: 8px;
    }
    .link-row .link-icon { font-size: 12px; padding: 8px 4px; }
    .link-row .link-title,
    .link-row .link-url { font-size: 13px; padding: 8px 10px; }
    /* Extras: product/countdown fields stack fully */
    .link-product-fields { grid-template-columns: 1fr; }
    .link-countdown-date-field,
    .link-tag-field { min-width: 0; flex: 1 1 100%; }
}

/* Global page-level safety: any wrapper that could receive an
   overflowing child gets clipped horizontally on mobile. */
@media (max-width: 900px) {
    .mogalink-main,
    .mogalink-builder,
    .profile-page,
    .profile-mogalink,
    .container {
        max-width: 100%;
        overflow-x: clip;
    }
}

/* ==========================================================
   THEME LIVE PREVIEW — mobile centering + phone-mockup shape
   Without a max-width, .preview-frame stretches to 100% of the
   builder column on mobile and looks like a wide rectangle
   instead of a phone. Constrain it so the theme is centered
   and clearly framed as a device mockup on every screen size.
   ========================================================== */
.builder-preview {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.preview-frame {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Tablet ≤ 1024px : preview stops being fixed, center it */
@media (max-width: 1024px) {
    .builder-preview {
        width: 100%;
        padding: 0 12px;
        margin-top: 24px;
        box-sizing: border-box;
    }
    .preview-frame { max-width: 380px; }
}

/* Phone ≤ 640px : shrink the mockup and its inner scroll area */
@media (max-width: 640px) {
    .builder-preview { padding: 0 8px; margin-top: 20px; }
    .preview-frame {
        max-width: 340px;
        border-radius: 32px;
        padding: 30px 5px 5px;
    }
    .preview-root {
        border-radius: 27px;
        max-width: 100%;
    }
    /* Viewer inside the preview never wider than its frame */
    .preview-root .viewer {
        max-width: 100%;
        padding: 40px 16px 30px;
    }
}

/* Very small phones ≤ 380px : even tighter phone mockup */
@media (max-width: 380px) {
    .preview-frame {
        max-width: 300px;
        border-radius: 28px;
        padding: 26px 4px 4px;
    }
    .preview-root { border-radius: 24px; }
    .preview-root .viewer { padding: 36px 12px 24px; }
}

/* ============================================================
   PROFILE SWITCHER — dropdown (jusqu'à 4 profils par compte)
   ============================================================ */
.profile-switcher {
    position: sticky;
    top: calc(var(--header-height) + 8px);
    z-index: 40;
    background: linear-gradient(135deg, rgba(20, 22, 28, 0.92), rgba(15, 17, 22, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.profile-switcher-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Dropdown container */
.profile-dropdown {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 380px;
}
.profile-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
}
.profile-dropdown-trigger:hover {
    border-color: rgba(255, 87, 34, 0.35);
    background: rgba(255, 87, 34, 0.05);
}
.profile-dropdown.is-open .profile-dropdown-trigger {
    border-color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.12);
}
.profile-dropdown-current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-dropdown-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.12);
    border: 1px solid rgba(255, 87, 34, 0.22);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.profile-dropdown-chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform .2s ease;
}
.profile-dropdown.is-open .profile-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--accent-orange);
}

/* Menu */
.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #16181e, #1c1e25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
    z-index: 50;
    padding: 6px;
    overflow: hidden;
    animation: dropdownFadeIn .18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.profile-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    color: var(--text-muted);
}
.profile-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
}
.profile-dropdown-item.active {
    background: rgba(255, 87, 34, 0.1);
    color: var(--text-main);
}
.profile-dropdown-item-check {
    flex: 0 0 16px;
    color: var(--accent-orange);
    font-weight: 700;
    text-align: center;
}
.profile-dropdown-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.profile-dropdown-item-label {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-dropdown-item-slug {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-dropdown-item-delete {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    opacity: 0.4;
    transition: opacity .15s, color .15s, background .15s;
    border-radius: 6px;
}
.profile-dropdown-item:hover .profile-dropdown-item-delete { opacity: 0.7; }
.profile-dropdown-item-delete:hover {
    opacity: 1 !important;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}
.profile-dropdown-new {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--accent-orange);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    border-radius: 0 0 8px 8px;
    text-align: left;
}
.profile-dropdown-new:hover:not(:disabled) {
    background: rgba(255, 87, 34, 0.08);
}
.profile-dropdown-new:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.profile-dropdown-new-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 87, 34, 0.15);
    border: 1px dashed rgba(255, 87, 34, 0.5);
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
}
.profile-dropdown-new-hint {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--text-muted);
    opacity: 0.7;
    font-weight: 500;
}

/* Mobile ≤640px : le titre passe à côté, dropdown prend toute la largeur */
@media (max-width: 640px) {
    .profile-switcher { padding: 9px 10px; gap: 8px; border-radius: 12px; }
    .profile-switcher-title { font-size: 11.5px; }
    .profile-dropdown { max-width: none; }
    .profile-dropdown-trigger { padding: 7px 10px; font-size: 12.5px; gap: 8px; }
    .profile-dropdown-current { font-size: 12.5px; }
    .profile-dropdown-count { font-size: 10.5px; padding: 2px 7px; }
    .profile-dropdown-item { padding: 8px; }
    .profile-dropdown-item-label { font-size: 12.5px; }
    .profile-dropdown-item-slug { font-size: 10.5px; }
    .profile-dropdown-new { font-size: 12.5px; padding: 9px; }
}
@media (max-width: 380px) {
    .profile-switcher-title { display: none; }
    .profile-dropdown-trigger .profile-dropdown-count { display: none; }
}

/* ============================================================
   TEMPLATE VIEW TOGGLE (list ↔ grid)
   ============================================================ */
.template-view-toggle {
    display: inline-flex;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex: 0 0 auto;
    max-width: 100%;
}
.tpl-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .template-view-toggle { margin-left: 0; }
    .tpl-view-btn { padding: 5px 9px; font-size: 11.5px; }
    .tpl-view-btn svg { width: 12px; height: 12px; }
}
.tpl-view-btn:hover { color: var(--text-main); }
.tpl-view-btn.is-active {
    background: var(--gradient-orange);
    color: #fff;
}
/* .step-label base rules live at line 1145 — this file no longer overrides them. */

/* ============================================================
   TEMPLATE PICKER — COMPACT LIST MODE
   ============================================================ */
.template-categories.is-compact .template-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.template-categories.is-compact .template-card {
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;
    gap: 12px;
    border-radius: 10px;
}
.template-categories.is-compact .template-card:hover {
    transform: none;
    background: rgba(255, 87, 34, 0.04);
}
.template-categories.is-compact .template-preview {
    aspect-ratio: 1 / 1;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 6px 4px;
    gap: 2px;
    border-radius: 8px;
}
.template-categories.is-compact .template-preview .tp-avatar {
    width: 14px !important;
    height: 14px !important;
    margin-top: 0;
}
.template-categories.is-compact .template-preview .tp-line,
.template-categories.is-compact .template-preview .tp-btn {
    height: 3px !important;
    min-height: 3px !important;
    border-radius: 2px !important;
    margin: 0 !important;
}
.template-categories.is-compact .template-preview .tp-title { width: 60% !important; }
.template-categories.is-compact .template-preview .tp-btn { width: 75% !important; }
.template-categories.is-compact .template-preview .tp-btn:nth-of-type(3) { display: none; }
.template-categories.is-compact .template-name {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.template-categories.is-compact .template-name strong {
    font-size: 13.5px;
    line-height: 1.2;
}
.template-categories.is-compact .template-name small {
    font-size: 11px;
    line-height: 1.25;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.template-categories.is-compact .template-card.selected::after {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    font-size: 10px;
}
.template-categories.is-compact .template-category { gap: 6px; }
.template-categories.is-compact .template-category-header { padding: 4px 8px 6px; }


/* ==========================================================
   MARKETING LANDING (visible only when user is not logged in)
   ========================================================== */

/* Hidden by default — shown only when body is in auth mode */
.ml-marketing { display: none; }
body.mogalink-auth-mode .ml-marketing { display: block; }

/* When marketing is visible, un-fix the auth section so it flows below */
body.mogalink-auth-mode .auth-landing {
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 60px;
}

.ml-marketing {
    position: relative;
    z-index: 1;
    color: var(--text-main);
}

.ml-gradient {
    background: linear-gradient(135deg, #ff5722 0%, #ff8a50 40%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ml-gradient-green {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ml-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    background: rgba(255, 87, 34, 0.08);
    border: 1px solid rgba(255, 87, 34, 0.2);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.ml-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.ml-section-head h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.ml-section-head p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* Shared button */
.ml-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    white-space: nowrap;
}
.ml-btn-primary {
    background: linear-gradient(135deg, #ff5722, #ff7a4a);
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(255, 87, 34, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.ml-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(255, 87, 34, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.ml-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}
.ml-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.ml-btn-lg { padding: 18px 34px; font-size: 16px; }
.ml-btn-block { width: 100%; padding: 16px 24px; }

/* ==========================================================
   1. HERO
   ========================================================== */
.ml-hero {
    position: relative;
    padding: 80px 0 100px;
    overflow: hidden;
}
.ml-hero::before {
    content: '';
    position: absolute;
    top: 15%; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 900px;
    max-width: 120vw; max-height: 120vw;
    background: radial-gradient(circle at 30% 40%, rgba(255, 87, 34, 0.15), transparent 60%),
                radial-gradient(circle at 70% 60%, rgba(16, 185, 129, 0.12), transparent 60%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
}
.ml-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}
.ml-hero-copy {
    max-width: 620px;
}
.ml-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #34d399;
    margin-bottom: 24px;
}
.ml-badge-pulse {
    width: 8px; height: 8px;
    background: var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
    animation: mlPulse 2s ease-in-out infinite;
}
@keyframes mlPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
    50%      { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.05); }
}

.ml-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
}
.ml-hero-desc {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 36px;
    max-width: 560px;
}
.ml-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 44px;
}
.ml-hero-trust {
    display: flex;
    align-items: center;
    gap: 18px;
}
.ml-trust-avatars {
    display: flex;
}
.ml-trust-av {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
    margin-left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.ml-trust-av:first-child { margin-left: 0; }
.ml-trust-av-plus {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #94a3b8;
    border-color: rgba(255, 87, 34, 0.4);
}
.ml-trust-text {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.4;
}
.ml-trust-text strong { color: var(--text-main); font-weight: 700; }
.ml-trust-text span { color: var(--text-muted); }

/* Phone mockup */
.ml-hero-mockup {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 560px;
}
.ml-mockup-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, rgba(255, 87, 34, 0.25), transparent 60%);
    filter: blur(60px);
    z-index: 0;
    animation: mlGlowPulse 4s ease-in-out infinite;
}
@keyframes mlGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.1); opacity: 1; }
}
.ml-phone {
    position: relative;
    width: 280px;
    height: 560px;
    background: linear-gradient(180deg, #1a1f2e, #0d1117);
    border-radius: 40px;
    padding: 12px;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 0 2px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 1;
    animation: mlPhoneFloat 6s ease-in-out infinite;
}
@keyframes mlPhoneFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-12px) rotate(0deg); }
}
.ml-phone-notch {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 22px;
    background: #000;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.ml-phone-screen {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #0a0e1a 0%, #131a2e 100%);
    border-radius: 30px;
    padding: 50px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    position: relative;
}
.ml-phone-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: radial-gradient(ellipse at top, rgba(255, 87, 34, 0.2), transparent 70%);
    pointer-events: none;
}
.ml-mp-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background:
        linear-gradient(135deg, #ff5722, #10b981),
        linear-gradient(135deg, #ff5722, #10b981);
    border: 3px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(255, 87, 34, 0.4);
    margin-top: 8px;
    position: relative;
    z-index: 1;
}
.ml-mp-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.ml-mp-bio {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}
.ml-mp-socials {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.ml-mp-so {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: block;
}
.ml-mp-ig { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.ml-mp-tt { background: linear-gradient(135deg, #25f4ee, #000, #fe2c55); }
.ml-mp-yt { background: #ff0000; }
.ml-mp-wa { background: #25d366; }

.ml-mp-link {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #e2e8f0;
    text-align: center;
    animation: mlLinkFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    position: relative;
    z-index: 1;
}
.ml-mp-link-1 { animation-delay: 0.2s; }
.ml-mp-link-2 { animation-delay: 0.4s; }
.ml-mp-link-3 { animation-delay: 0.6s; }
.ml-mp-link-4 { animation-delay: 0.8s; }
@keyframes mlLinkFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Floating badges */
.ml-floaty {
    position: absolute;
    padding: 10px 16px;
    background: rgba(20, 25, 40, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    z-index: 2;
}
.ml-floaty-1 {
    top: 20%; right: -10px;
    color: #34d399;
    animation: mlFloaty1 5s ease-in-out infinite;
}
.ml-floaty-2 {
    top: 50%; left: -20px;
    color: #ff5722;
    animation: mlFloaty2 5s ease-in-out infinite 1s;
}
.ml-floaty-3 {
    bottom: 15%; right: -20px;
    color: #60a5fa;
    animation: mlFloaty1 5s ease-in-out infinite 2s;
}
@keyframes mlFloaty1 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes mlFloaty2 {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-6px) translateX(4px); }
}

/* ==========================================================
   2. LOGOS STRIP
   ========================================================== */
.ml-logos {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.015);
}
.ml-logos-title {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 24px;
}
.ml-logos-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    align-items: center;
}
.ml-logo-item {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    transition: all 0.3s;
}
.ml-logo-item:hover {
    color: var(--text-main);
    border-color: rgba(255, 87, 34, 0.3);
    background: rgba(255, 87, 34, 0.05);
    transform: translateY(-2px);
}

/* ==========================================================
   3. FEATURES GRID
   ========================================================== */
.ml-features {
    padding: 100px 0;
}
.ml-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.ml-feat {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px 26px;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ml-feat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 34, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.ml-feat:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 87, 34, 0.25);
    background: linear-gradient(180deg, rgba(255, 87, 34, 0.05), rgba(255, 255, 255, 0.01));
}
.ml-feat:hover::before { opacity: 1; }
.ml-feat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(255, 87, 34, 0.05));
    border: 1px solid rgba(255, 87, 34, 0.2);
}
.ml-feat-icon-2 { background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(96, 165, 250, 0.05)); border-color: rgba(96, 165, 250, 0.2); }
.ml-feat-icon-3 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)); border-color: rgba(16, 185, 129, 0.2); }
.ml-feat-icon-4 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05)); border-color: rgba(251, 191, 36, 0.2); }
.ml-feat-icon-5 { background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.05)); border-color: rgba(236, 72, 153, 0.2); }
.ml-feat-icon-6 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); border-color: rgba(139, 92, 246, 0.2); }

.ml-feat h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-main);
}
.ml-feat p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* ==========================================================
   4. SHOWCASE TEMPLATES
   ========================================================== */
.ml-showcase {
    padding: 100px 0;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015), transparent);
}
.ml-showcase-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}
.ml-sc-tab {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
    font-family: inherit;
}
.ml-sc-tab:hover {
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.15);
}
.ml-sc-tab.is-active {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(16, 185, 129, 0.1));
    border-color: rgba(255, 87, 34, 0.4);
    color: #fff;
}

.ml-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}
.ml-sc-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.ml-sc-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 87, 34, 0.35);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.ml-sc-preview {
    aspect-ratio: 9/16;
    max-height: 240px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.ml-sc-ava {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 4px;
}
.ml-sc-title {
    width: 70%; height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.25);
    margin-bottom: 8px;
}
.ml-sc-btn {
    width: 90%; height: 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ml-sc-name {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ml-sc-name span {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Template-specific visual styles */
.ml-sc-neon .ml-sc-preview { background: radial-gradient(circle at 50% 40%, #ff5722 0%, #1a0a04 60%); }
.ml-sc-neon .ml-sc-btn { background: rgba(255, 87, 34, 0.3); border-color: rgba(255, 87, 34, 0.6); box-shadow: 0 0 12px rgba(255, 87, 34, 0.5); }
.ml-sc-neon .ml-sc-ava { border-color: #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.6); }

.ml-sc-glass .ml-sc-preview { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #ec4899 100%); }
.ml-sc-glass .ml-sc-btn { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, 0.25); }

.ml-sc-retro .ml-sc-preview { background: linear-gradient(180deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%); }
.ml-sc-retro .ml-sc-btn { background: rgba(0, 0, 0, 0.4); border-color: #ec4899; }

.ml-sc-bento .ml-sc-preview { background: #0f172a; }
.ml-sc-bento .ml-sc-btn:nth-child(3) { background: linear-gradient(135deg, #ff5722, #f97316); }
.ml-sc-bento .ml-sc-btn:nth-child(4) { background: linear-gradient(135deg, #10b981, #059669); }
.ml-sc-bento .ml-sc-btn:nth-child(5) { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

.ml-sc-minimalist .ml-sc-preview { background: #fafafa; }
.ml-sc-minimalist .ml-sc-ava { background: #171717; border-color: #e5e5e5; }
.ml-sc-minimalist .ml-sc-title { background: #171717; }
.ml-sc-minimalist .ml-sc-btn { background: #fff; border: 1px solid #171717; }

.ml-sc-restaurant .ml-sc-preview { background: linear-gradient(180deg, #7c2d12 0%, #431407 100%); }
.ml-sc-restaurant .ml-sc-btn { background: rgba(251, 191, 36, 0.15); border-color: #fbbf24; }
.ml-sc-restaurant .ml-sc-ava { border-color: #fbbf24; }

.ml-sc-immobilier .ml-sc-preview { background: linear-gradient(180deg, #1e3a8a 0%, #0c1e4a 100%); }
.ml-sc-immobilier .ml-sc-btn { background: rgba(96, 165, 250, 0.15); border-color: #60a5fa; }

.ml-sc-beaute .ml-sc-preview { background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 50%, #fef3c7 100%); }
.ml-sc-beaute .ml-sc-ava { background: #831843; border-color: #fbbf24; }
.ml-sc-beaute .ml-sc-title { background: #831843; }
.ml-sc-beaute .ml-sc-btn { background: rgba(255, 255, 255, 0.6); border-color: #831843; }

.ml-sc-fitness .ml-sc-preview { background: linear-gradient(180deg, #000 0%, #7f1d1d 100%); }
.ml-sc-fitness .ml-sc-btn { background: linear-gradient(90deg, #ef4444, #f97316); border-color: transparent; }

.ml-sc-basket .ml-sc-preview { background: linear-gradient(180deg, #713f12 0%, #431407 100%); }
.ml-sc-basket .ml-sc-btn { background: rgba(249, 115, 22, 0.25); border-color: #f97316; }

.ml-sc-football .ml-sc-preview { background: linear-gradient(180deg, #14532d 0%, #052e16 100%); }
.ml-sc-football .ml-sc-btn { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

.ml-sc-combat .ml-sc-preview { background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%); }
.ml-sc-combat .ml-sc-btn { background: rgba(251, 191, 36, 0.15); border-color: #fbbf24; }

.ml-sc-musique .ml-sc-preview { background: linear-gradient(135deg, #581c87 0%, #0891b2 100%); }
.ml-sc-musique .ml-sc-btn { background: rgba(6, 182, 212, 0.2); border-color: #06b6d4; box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); }

.ml-sc-noir .ml-sc-preview { background: linear-gradient(180deg, #171717 0%, #000 100%); }
.ml-sc-noir .ml-sc-ava { background: #fff; }
.ml-sc-noir .ml-sc-title { background: #fff; }
.ml-sc-noir .ml-sc-btn { background: transparent; border: 1px solid #fff; }

.ml-sc-blockbuster .ml-sc-preview { background: linear-gradient(180deg, #000 0%, #7f1d1d 100%); }
.ml-sc-blockbuster .ml-sc-btn { background: linear-gradient(90deg, #fbbf24, #f59e0b); border-color: #fbbf24; }

.ml-sc-scifi .ml-sc-preview { background: linear-gradient(135deg, #0c1e4a 0%, #4c1d95 100%); }
.ml-sc-scifi .ml-sc-btn { background: rgba(6, 182, 212, 0.1); border: 1px solid #06b6d4; box-shadow: 0 0 8px rgba(6, 182, 212, 0.4); }

/* ==========================================================
   5. USE CASES
   ========================================================== */
.ml-usecases {
    padding: 100px 0;
}
.ml-usecases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.ml-uc {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 32px 28px;
    position: relative;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ml-uc:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 87, 34, 0.25);
}
.ml-uc-featured {
    background: linear-gradient(180deg, rgba(255, 87, 34, 0.08), rgba(16, 185, 129, 0.03));
    border-color: rgba(255, 87, 34, 0.3);
    box-shadow: 0 20px 40px -20px rgba(255, 87, 34, 0.3);
}
.ml-uc-badge {
    position: absolute;
    top: -12px; right: 24px;
    background: linear-gradient(135deg, #ff5722, #10b981);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ml-uc-icon {
    font-size: 40px;
    margin-bottom: 16px;
}
.ml-uc h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.ml-uc p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 20px;
}
.ml-uc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ml-uc-list li {
    font-size: 13px;
    color: var(--text-main);
    padding-left: 22px;
    position: relative;
}
.ml-uc-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-weight: 700;
}

/* ==========================================================
   6. COMPARISON TABLE
   ========================================================== */
.ml-compare {
    padding: 100px 0;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015), transparent);
}
.ml-compare-table-wrap {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 8px;
}
.ml-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ml-compare-table th,
.ml-compare-table td {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ml-compare-table th:first-child,
.ml-compare-table td:first-child {
    text-align: left;
    color: var(--text-main);
    font-weight: 500;
}
.ml-compare-table thead th {
    padding-top: 24px;
    padding-bottom: 24px;
    font-weight: 600;
    color: var(--text-muted);
}
.ml-th-us {
    background: linear-gradient(180deg, rgba(255, 87, 34, 0.08), transparent);
    border-radius: 14px 14px 0 0;
    position: relative;
}
.ml-th-us::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff5722, #10b981);
    border-radius: 14px 14px 0 0;
}
.ml-th-brand {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 4px;
}
.ml-th-brand-muted { color: var(--text-muted); }
.ml-th-price {
    display: block;
    font-size: 12px;
    color: var(--accent-green);
    font-weight: 600;
}
.ml-th-price-muted { color: var(--text-muted); }

.ml-compare-table td.yes {
    color: var(--accent-green);
    font-weight: 700;
    font-size: 18px;
}
.ml-compare-table td.no {
    color: #64748b;
    font-weight: 500;
}
.ml-compare-table td.paid {
    color: #fbbf24;
    font-size: 12px;
    font-weight: 600;
}
.ml-compare-table td.partial {
    color: #94a3b8;
    font-size: 12px;
}
.ml-compare-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.ml-compare-table tbody tr:last-child td { border-bottom: none; }

/* ==========================================================
   7. PRICING
   ========================================================== */
.ml-pricing {
    padding: 100px 0;
}
.ml-pricing-card {
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 87, 34, 0.3);
    border-radius: 24px;
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(255, 87, 34, 0.4);
}
.ml-pricing-glow {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 87, 34, 0.15), transparent 40%),
                radial-gradient(circle at 70% 80%, rgba(16, 185, 129, 0.12), transparent 40%);
    pointer-events: none;
    z-index: 0;
}
.ml-pricing-card > * { position: relative; z-index: 1; }
.ml-pricing-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ml-pricing-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 999px;
    color: #34d399;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ml-pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ml-price-num {
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ff5722, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
}
.ml-price-per {
    color: var(--text-muted);
    font-size: 14px;
}
.ml-pricing-tag {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}
.ml-pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    gap: 12px;
}
.ml-pricing-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-main);
}
.ml-check {
    width: 22px; height: 22px;
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.ml-pricing-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 16px 0 0;
}

/* ==========================================================
   8. FAQ
   ========================================================== */
.ml-faq {
    padding: 100px 0;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015), transparent);
}
.ml-faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ml-faq-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s;
}
.ml-faq-item[open] { border-color: rgba(255, 87, 34, 0.3); }
.ml-faq-item summary {
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    transition: color 0.2s;
}
.ml-faq-item summary::-webkit-details-marker { display: none; }
.ml-faq-item summary::after {
    content: '+';
    font-size: 24px;
    font-weight: 300;
    color: var(--text-muted);
    transition: transform 0.3s;
    flex-shrink: 0;
}
.ml-faq-item[open] summary::after {
    transform: rotate(45deg);
    color: var(--accent-orange);
}
.ml-faq-item summary:hover { color: var(--accent-orange); }
.ml-faq-item p {
    padding: 0 24px 22px;
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
}
.ml-faq-item code {
    background: rgba(255, 87, 34, 0.1);
    color: var(--accent-orange);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.9em;
    border: 1px solid rgba(255, 87, 34, 0.2);
}

/* ==========================================================
   9. FINAL CTA
   ========================================================== */
.ml-final-cta {
    padding: 80px 0 100px;
}
.ml-cta-card {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.12), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(255, 87, 34, 0.3);
    border-radius: 28px;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ml-cta-glow {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 87, 34, 0.15), transparent 40%);
    animation: mlGlowRotate 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes mlGlowRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ml-cta-card > * { position: relative; z-index: 1; }
.ml-cta-card h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.ml-cta-card p {
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto 32px;
    font-size: 1.05rem;
    line-height: 1.6;
}
.ml-cta-note {
    color: var(--text-muted);
    font-size: 13px;
    margin: 20px 0 0;
}

/* ==========================================================
   RESPONSIVE — Marketing Landing
   ========================================================== */
@media (max-width: 968px) {
    .ml-hero { padding: 40px 0 60px; }
    .ml-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .ml-hero-copy { max-width: 100%; margin: 0 auto; }
    .ml-hero-cta { justify-content: center; }
    .ml-hero-trust { justify-content: center; }
    .ml-hero-desc { margin-left: auto; margin-right: auto; }

    .ml-features-grid { grid-template-columns: repeat(2, 1fr); }
    .ml-usecases-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .ml-hero { padding: 30px 0 50px; }
    .ml-hero-title { font-size: clamp(2rem, 8vw, 3rem); }
    .ml-hero-desc { font-size: 15px; }
    .ml-hero-mockup { min-height: 460px; }
    .ml-phone { width: 220px; height: 440px; padding: 8px; }
    .ml-phone-screen { padding: 40px 14px 18px; border-radius: 24px; }
    .ml-phone-notch { width: 80px; height: 18px; }
    .ml-mp-avatar { width: 56px; height: 56px; }
    .ml-mp-name { font-size: 13px; }
    .ml-mp-bio { font-size: 10px; }
    .ml-mp-link { padding: 9px 12px; font-size: 11px; }
    .ml-floaty { font-size: 10px; padding: 6px 12px; }
    .ml-floaty-1 { right: -5px; top: 15%; }
    .ml-floaty-2 { left: -8px; top: 45%; }
    .ml-floaty-3 { right: -8px; bottom: 12%; }

    .ml-features, .ml-showcase, .ml-usecases, .ml-compare, .ml-pricing, .ml-faq { padding: 60px 0; }
    .ml-final-cta { padding: 50px 0 70px; }
    .ml-section-head { margin-bottom: 36px; }

    .ml-features-grid { grid-template-columns: 1fr; gap: 14px; }
    .ml-feat { padding: 22px 20px; }

    .ml-showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ml-sc-preview { padding: 14px 10px; }
    .ml-sc-name { padding: 10px 12px; font-size: 12px; }

    .ml-compare-table th, .ml-compare-table td { padding: 12px 8px; font-size: 12px; }
    .ml-th-brand { font-size: 14px; }
    .ml-th-price { font-size: 10px; }

    .ml-pricing-card { padding: 32px 24px; border-radius: 20px; }
    .ml-price-num { font-size: 3rem; }

    .ml-cta-card { padding: 40px 24px; border-radius: 22px; }

    .ml-btn { padding: 12px 20px; font-size: 14px; }
    .ml-btn-lg { padding: 15px 26px; font-size: 15px; }
}

@media (max-width: 400px) {
    .ml-hero-cta { flex-direction: column; align-items: stretch; }
    .ml-hero-cta .ml-btn { width: 100%; }
    .ml-hero-trust { flex-direction: column; text-align: center; gap: 12px; }
    .ml-hero-trust .ml-trust-text { align-items: center; }
}

/* ==========================================================
   FOOTER — Mogalink additions
   ========================================================== */
.ml-footer {
    position: relative;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
}
.ml-footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 34, 0.4), rgba(16, 185, 129, 0.4), transparent);
}
.ml-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 40px;
}
.ml-footer-tag {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 300px;
    margin: 12px 0 20px;
}
.ml-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ml-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}
.ml-footer-col h4 {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ml-footer-col a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 0;
    font-size: 14px;
    transition: color 0.2s, transform 0.2s;
}
.ml-footer-col a:hover {
    color: var(--accent-orange);
    transform: translateX(4px);
}
.ml-footer-bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.ml-footer-bottom p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}
.ml-footer-bottom strong { color: var(--text-main); }
.ml-footer-legal {
    font-size: 12px !important;
    opacity: 0.7;
}

@media (max-width: 968px) {
    .ml-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    .ml-footer-brand { grid-column: 1 / -1; }
    .ml-footer-tag { max-width: 100%; }
}
@media (max-width: 560px) {
    .ml-footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: left; }
    .ml-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

/* ==========================================================
   BUILDER PROGRESS BAR (sticky, 6 steps)
   ========================================================== */
.builder-progress {
    position: sticky;
    top: calc(var(--header-height, 80px) + 8px);
    z-index: 30;
    margin: 0 0 32px;
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(12, 18, 30, 0.85), rgba(8, 14, 26, 0.85));
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.builder-progress-track {
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
}
.builder-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, #ff5722, #ff8a50, #10b981);
    border-radius: 2px;
    width: 16.66%;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(255, 87, 34, 0.6);
}
.builder-progress-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}
.bp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-muted);
    transition: color 0.25s;
}
.bp-step:hover { color: var(--text-main); }
.bp-dot {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}
.bp-step.is-active .bp-dot {
    background: linear-gradient(135deg, #ff5722, #ff8a50);
    border-color: #ff5722;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 87, 34, 0.5), 0 0 0 4px rgba(255, 87, 34, 0.15);
    transform: scale(1.1);
}
.bp-step.is-done .bp-dot {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
}
.bp-step.is-done .bp-dot::before {
    content: '✓';
    font-size: 14px;
}
.bp-step.is-done .bp-dot { font-size: 0; }
.bp-step.is-done .bp-dot::before { font-size: 14px; }

.bp-label {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.bp-step.is-active .bp-label {
    color: var(--text-main);
    font-weight: 700;
}

@media (max-width: 720px) {
    .builder-progress {
        padding: 14px 12px;
        border-radius: 12px;
        top: calc(var(--header-height, 80px) + 4px);
    }
    .bp-dot { width: 26px; height: 26px; font-size: 11px; }
    .bp-label { display: none; }
    .bp-step.is-active .bp-label {
        display: block;
        position: absolute;
        top: -22px;
        background: #0a0f1a;
        padding: 4px 10px;
        border-radius: 6px;
        border: 1px solid rgba(255, 87, 34, 0.35);
        font-size: 11px;
    }
    .bp-step { position: relative; }
    .builder-progress-steps { gap: 8px; }
}

/* ==========================================================
   POLISH — Modern segmented controls (Vercel/Linear style)
   ========================================================== */
.segmented-control {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.segmented-control .segment {
    transition: color 0.2s ease, background 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
    position: relative;
}
.segmented-control .segment.selected {
    background: linear-gradient(180deg, #ff6b3d 0%, #ff5722 100%) !important;
    color: #fff !important;
    box-shadow:
        0 4px 12px -2px rgba(255, 87, 34, 0.5),
        0 0 0 1px rgba(255, 87, 34, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

/* ==========================================================
   POLISH — Colored social icons (via CSS :has selector)
   ========================================================== */
.social-row:has(input[data-platform="instagram"]) .social-icon {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 40%, #fcb045 100%);
    color: #fff;
    border: 1px solid rgba(253, 29, 29, 0.4);
}
.social-row:has(input[data-platform="tiktok"]) .social-icon {
    background: #000;
    color: #fff;
    border: 1px solid #25f4ee;
    box-shadow: 1px 0 0 #fe2c55, -1px 0 0 #25f4ee;
}
.social-row:has(input[data-platform="whatsapp"]) .social-icon {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
}
.social-row:has(input[data-platform="facebook"]) .social-icon {
    background: linear-gradient(135deg, #1877f2 0%, #0d5db8 100%);
    color: #fff;
}
.social-row:has(input[data-platform="youtube"]) .social-icon,
.social-row:has(input[data-platform="youtub"]) .social-icon {
    background: #ff0000;
    color: #fff;
}
.social-row:has(input[data-platform="twitter"]) .social-icon,
.social-row:has(input[data-platform="x"]) .social-icon {
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.social-row:has(input[data-platform="linkedin"]) .social-icon {
    background: #0a66c2;
    color: #fff;
}
.social-row:has(input[data-platform="snapchat"]) .social-icon {
    background: #fffc00;
    color: #000;
}
.social-row:has(input[data-platform="pinterest"]) .social-icon {
    background: #e60023;
    color: #fff;
}
.social-row:has(input[data-platform="telegram"]) .social-icon {
    background: linear-gradient(135deg, #37bbfe 0%, #007dbb 100%);
    color: #fff;
}
.social-row:has(input[data-platform="discord"]) .social-icon {
    background: #5865f2;
    color: #fff;
}
.social-row:has(input[data-platform="twitch"]) .social-icon {
    background: #9146ff;
    color: #fff;
}
.social-row:has(input[data-platform="spotify"]) .social-icon {
    background: linear-gradient(135deg, #1ed760 0%, #169c46 100%);
    color: #fff;
}
.social-row:has(input[data-platform="soundcloud"]) .social-icon {
    background: linear-gradient(135deg, #ff8800 0%, #ff5500 100%);
    color: #fff;
}
.social-row:has(input[data-platform="apple-music"]) .social-icon,
.social-row:has(input[data-platform="apple_music"]) .social-icon,
.social-row:has(input[data-platform="applemusic"]) .social-icon {
    background: linear-gradient(135deg, #fa233b 0%, #fb5c74 100%);
    color: #fff;
}
.social-row:has(input[data-platform="github"]) .social-icon {
    background: #181717;
    color: #fff;
}
.social-row:has(input[data-platform="behance"]) .social-icon {
    background: #1769ff;
    color: #fff;
}
.social-row:has(input[data-platform="dribbble"]) .social-icon {
    background: #ea4c89;
    color: #fff;
}
.social-row:has(input[data-platform="email"]) .social-icon {
    background: linear-gradient(135deg, #ea4335 0%, #b31412 100%);
    color: #fff;
}
.social-row:has(input[data-platform="website"]) .social-icon {
    background: linear-gradient(135deg, #ff5722 0%, #10b981 100%);
    color: #fff;
}
.social-row:has(input[data-platform="phone"]) .social-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

/* Enhanced hover state on the whole row */
.social-row {
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}
.social-row:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.12);
    transform: translateY(-1px);
}
.social-row .social-icon {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-row:hover .social-icon,
.social-row:focus-within .social-icon {
    transform: scale(1.08);
}

/* ==========================================================
   POLISH — Enhanced hover on link items and buttons
   ========================================================== */
.template-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.template-card:hover {
    transform: translateY(-3px);
}

/* Better focus rings across the builder */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
    outline: 2px solid rgba(255, 87, 34, 0.45);
    outline-offset: 2px;
}