/* ============================================================
   style.css — Link-in-bio page styles
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --card-bg:     rgba(15, 3, 3, 0.712);
    --card-border: rgba(255, 255, 255, 0.10);
    --text-main:   #f0ede8;
    --text-muted:  rgba(240, 237, 232, 0.50);
    --radius:      20px;
    --row-bg:      rgba(255, 255, 255, 0.05);
    --row-hover:   rgba(255, 255, 255, 0.11);
}

html, body {
    height: 100%;
    font-family: 'DM Sans', sans-serif;
}

/* ── Background ── */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 2rem 1rem;

    background: linear-gradient(135deg, #f00000, #fe6a00, #f00000);
    /* background-size: cover; */
    /* background-position: center; */
    /* background-attachment: fixed; */

    transition: background .6s ease;
}

/* Subtle dark vignette over the image */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #f00000, #fe6a00, #f00000);
    opacity: 1;
    transition: opacity .6s ease;
    pointer-events: none;
    z-index: 1;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, #0f3460 0%, #1a1a2e 60%, #16213e 100%);
    pointer-events: none;
    z-index: 0;
}


/* ── Card ── */
.card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: var(--card-bg);
    border: 4px solid rgb(255, 129, 129);
    border-radius: var(--radius);
    padding: 2.5rem 2rem 2rem;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
    transition: border-color .5s ease, transform .5s ease;

    
}

.card:hover {
    border-color: rgb(255, 94, 94);
    transform: scale(1.02);
}

.card.rise {
    animation: rise .6s .08s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ── Profile header ── */
.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border);
    box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

.avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 2px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder svg { opacity: .35; }

.profile-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.55rem;
    color: var(--text-main);
    letter-spacing: .01em;
}

.profile-handle {
    font-size: .85rem;
    color: var(--text-muted);
    font-weight: 300;
    letter-spacing: .04em;
}

.profile-description {
    font-size: .85rem;
    color: rgb(255, 255, 255);
    font-weight: 300;
    letter-spacing: .04em;
}



/* ── Hover over profile handle ── */
a.profile-handle {
    text-decoration: none;
    color: var(--text-muted);
    transition: color .18s ease;
}

a.profile-handle:hover {
    color: var(--text-main);
}



/* ── Divider ── */
.divider {
    height: 1px;
    background: var(--card-border);
    margin-bottom: 1.4rem;
}

/* ── Social rows ── */
.socials { display: flex; flex-direction: column; gap: .65rem; }

.social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.1rem;
    background: var(--row-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 400;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.social-link:hover {
    background: var(--row-hover);
    border-color: rgba(255,255,255,.22);
    transform: translateX(4px);
}

.icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-wrap svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.icon-wrap img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.social-label { flex: 1; }

.arrow {
    opacity: .3;
    font-size: .75rem;
    transition: opacity .18s, transform .18s;
}

.social-link:hover .arrow {
    opacity: .7;
    transform: translateX(3px);
}


/* ── Color Toggle ── */
body.alt-bg {
    background: radial-gradient(ellipse at center, #0f3460 0%, #1a1a2e 60%, #16213e 100%);
}

body.alt-bg .card {
    border: 4px solid #0f3460;
}

body.alt-bg .card:hover {
    border-color: #2b5e9c;
    transform: scale(1.02);
}

body.alt-bg::before {
    opacity: 0;
}

body.alt-bg::after {
    transform: translateX(0%);
}

.theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--row-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: .4rem .6rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background .18s ease;
}

.theme-toggle:hover {
    background: var(--row-hover);
}







        .panels {
            position: relative;
            z-index: 2;
            display: flex;
            gap: 1.25rem;
            width: 100%;
            max-width: 900px;
            align-items: flex-start;
            justify-content: center;
        }
 
        .panel-left  { flex: 0 0 420px; }
 
        /* right panel mirrors card style */
        .panel-right {
    flex: 0 0 340px;
    background: var(--card-bg);
    border: 4px solid rgb(255, 129, 129);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 32px 80px rgba(0,0,0,.55),
                0 0 0 1px rgba(255,255,255,.04) inset;

    transition: transform .5s ease, border-color .5s ease;
}

.panel-right:hover {
    border-color: rgb(255, 94, 94);
    transform: scale(1.02);
}

.panel-right.rise {
    animation: rise .6s .08s cubic-bezier(.22,1,.36,1) forwards;
}

body.alt-bg .panel-right {
    border-color: #0f3460;
}

body.alt-bg .panel-right:hover {
    border-color: #2b5e9c;
    transform: scale(1.02);
}
 
        .panel-right-title {
            font-family: 'DM Serif Display', serif;
            font-size: 1.1rem;
            color: #f0ede8;
            margin-bottom: 1rem;
            letter-spacing: .01em;
            opacity: .7;
        }
 
        /* ── Section bars ── */
        .section-bars { display: flex; flex-direction: column; gap: .55rem; }
 
        .section-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .8rem 1rem;
            background: var(--row-bg);
            border: 1px solid var(--card-border);
            border-radius: 12px;
            cursor: pointer;
            color: var(--text-main);
            font-size: .9rem;
            font-family: 'DM Sans', sans-serif;
            transition: background .18s, border-color .18s, transform .18s;
            user-select: none;
        }
 
        .section-bar:hover {
            background: var(--row-hover);
            border-color: rgba(255,255,255,.22);
            transform: translateX(-4px);
        }
 
        .section-bar .bar-arrow {
            opacity: .35;
            font-size: .75rem;
            transition: opacity .18s, transform .18s;
        }
 
        .section-bar:hover .bar-arrow { opacity: .7; transform: translateX(-3px); }
 
        /* ── Expanded overlay ── */
        .overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 200;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            background: rgba(0,0,0,.6);
            backdrop-filter: none;
            -webkit-backdrop-filter: blur(6px);
            animation: fadeIn .2s ease both;
        }
 
        .overlay.active { display: flex; }
 
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
 
        .expanded-card {
            position: relative;
            width: 100%;
            max-width: 820px;
            background: rgba(44, 5, 5, 0.92);
            border: 4px solid rgb(255, 129, 129);
            border-radius: 20px;
            padding: 2rem 2rem 2.5rem;
            backdrop-filter: blur(10px) saturate(160%);
            -webkit-backdrop-filter: blur(10px) saturate(160%);
            box-shadow: 0 40px 100px rgba(0,0,0,.75);
            animation: popIn .28s cubic-bezier(.22,1,.36,1) both;
            max-height: 90vh;
            overflow-y: auto;
            transition: border-color .5s ease;
        }
 
        body.alt-bg .expanded-card {
            border-color: #0f3460;
            background: rgba(15, 21, 50, 0.95);
        }
 
        @keyframes popIn {
            from { opacity: 0; transform: scale(.94) translateY(20px); }
            to   { opacity: 1; transform: none; }
        }
 
        .close-btn {
            position: absolute;
            top: 1.1rem;
            right: 1.1rem;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.15);
            color: rgba(240,237,232,.6);
            border-radius: 8px;
            width: 32px;
            height: 32px;
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, color .15s;
            line-height: 1;
        }
 
        .close-btn:hover { background: rgba(255,255,255,.18); color: #f0ede8; }
 
        .expanded-name {
            font-family: 'DM Serif Display', serif;
            font-size: 1.5rem;
            color: var(--text-main);
            margin-bottom: 1.4rem;
            padding-right: 2.5rem;
        }
 
        /* tab row */
        .tab-row {
            display: flex;
            gap: .6rem;
            margin-bottom: 1.8rem;
        }
 
        .tab-btn {
            padding: .55rem 1.4rem;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,.15);
            background: rgba(255,255,255,.05);
            color: rgba(240,237,232,.5);
            font-family: 'DM Sans', sans-serif;
            font-size: .88rem;
            cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
        }
 
        .tab-btn:hover {
            background: rgba(255,255,255,.10);
            color: var(--text-main);
        }
 
        .tab-btn.active {
            background: rgba(255, 129, 129, 0.2);
            border-color: rgb(255, 129, 129);
            color: #f0ede8;
            font-weight: 500;
        }
 
        body.alt-bg .tab-btn.active {
            background: rgba(15, 52, 96, 0.4);
            border-color: #2b5e9c;
        }
 
        /* settings table */
        .settings-table {
            width: 100%;
            border-collapse: collapse;
        }
 
        .settings-table tr {
            border-bottom: 1px solid rgba(255,255,255,.07);
        }
 
        .settings-table tr:last-child { border-bottom: none; }
 
        .settings-table td {
            padding: .85rem .5rem;
            font-size: .9rem;
            color: var(--text-main);
            vertical-align: middle;
        }
 
        .settings-table .col-label {
            color: var(--text-muted);
            width: 45%;
        }
 
        .settings-table .col-value {
            font-weight: 500;
            text-align: right;
        }
 
        .settings-table .col-note {
            font-size: .75rem;
            color: rgba(240,237,232,.28);
            text-align: right;
            padding-left: 1rem;
            width: 30%;
        }
 
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }
 
        .expanded-card::-webkit-scrollbar { width: 5px; }
        .expanded-card::-webkit-scrollbar-track { background: transparent; }
        .expanded-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }
 
        /* ── Responsive: stack on mobile ── */
        @media (max-width: 820px) {
            .panels { flex-direction: column; align-items: center; }
            .panel-left, .panel-right { flex: 0 0 auto; width: 100%; max-width: 440px; }
            .section-bar:hover { transform: translateX(4px); }
        }