/* =============================================
   PALLEGRAM — Dark Premium Blue/Cyan Design
   Linear/Vercel Style
   (c) 2026 Palle Systems
   ============================================= */

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

:root {
    /* Pallegram's own night palette: ink, periwinkle and ice. */
    --bg:       #090a10;
    --surface:  #111219;
    --surface2: #171923;
    --surface3: #1e202c;
    --border:   rgba(255, 255, 255, 0.075);

    --text:     #ffffff;
    --muted:    #a1a1aa;
    --subtle:   #52525b;
    --link:     #a5b4fc;

    --like:     #ff3040;
    --p1:       #818cf8;
    --p2:       #67e8f9;
    --p3:       #a78bfa;

    --glow:     rgba(129, 140, 248, 0.18);
    --glass:    rgba(15, 16, 23, 0.82);

    --story-grad: linear-gradient(135deg, #67e8f9 0%, #818cf8 48%, #c084fc 100%);

    /* Safe Area Insets for Mobile / PWA */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    min-height: 100%;
    animation: fadeIn 0.4s ease-out;
}

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

/* ── Glassmorphism Core ── */
.glass {
    background: var(--glass);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--border);
}

.glass-premium {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ── Admin Specifics ── */
.admin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-card:hover {
    border-color: var(--subtle);
    background: var(--surface2);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.5);
}

.badge-pulse {
    position: relative;
}
.badge-pulse::after {
    content: '';
    position: absolute;
    top: 0; right: 0; width: 8px; height: 8px;
    background: var(--p2);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

/* ── Logo Text (animated gradient) ── */
.logo-text {
    background: linear-gradient(135deg, var(--p2), var(--p1), var(--p2));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    animation: logoGrad 3s ease infinite;
    letter-spacing: -0.5px;
}

@keyframes logoGrad {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ── Glass Header (sticky nav top) ── */
.glass-header {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

/* ── Nav Links (Instagram Bar) ── */
.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #a1a1aa;
    font-size: 1.35rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}
.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}
.nav-link:active {
    transform: scale(0.88);
}
.nav-link.active {
    color: #ffffff;
}

/* ── Glass Card (elevated surfaces) ── */
.glass-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Story Ring (blue/cyan gradient) ── */
.story-ring {
    background: var(--story-grad);
    padding: 2px;
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
}

.story-ring-inner {
    background: var(--bg);
    border-radius: 50%;
    padding: 2px;
    display: flex;
}

/* ── Post Component ── */
.post-wrap {
    border-bottom: 1px solid var(--border);
}

/* ── Login Background & Card ── */
.login-bg {
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px 40px 24px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Inputs ── */
.pg-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.pg-input:focus {
    border-color: var(--p2);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
}

.pg-input::placeholder {
    color: var(--muted);
    font-size: 13px;
}

/* ── Buttons ── */
.pg-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--p1), var(--p2));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.pg-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.pg-btn:active {
    transform: translateY(0);
    opacity: 0.85;
}

/* ── Bottom Navigation Upload Button ── */
.nav-upload-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--p1), var(--p2));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(34, 211, 238, 0.25);
}

.nav-upload-btn:active {
    transform: scale(0.9);
}

/* ── Nav Icon Wrapper ── */
.nav-icon-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 62px;
    position: relative;
    transition: transform 0.15s ease, background-color 0.2s ease; /* Added background-color transition */
    border-radius: 8px; /* Added for subtle background on hover */
}

.nav-icon-wrap:active {
    transform: scale(0.9);
}

.nav-icon-wrap:hover:not(.nav-active) { /* Only apply hover to inactive items */
    background-color: rgba(255, 255, 255, 0.05); /* Subtle background on hover */
}

/* ── Nav Active State ── */
.nav-active {
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); /* Subtle glow for active item */
    background-color: rgba(34, 211, 238, 0.1); /* Slightly more prominent active background */
}

.nav-active .nav-dot {
    opacity: 1;
    background: var(--p2);
}

.nav-dot {
    position: absolute;
    bottom: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    transition: opacity 0.2s, background 0.2s;
}

/* ── Badge / Notification Dot ── */
.dot-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: var(--like);
    border-radius: 50%;
    border: 1.5px solid var(--bg);
}

/* ── Scrollbar ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Shimmer (skeleton loading) ── */
.shimmer {
    background: linear-gradient(110deg, var(--surface) 25%, var(--surface2) 45%, var(--surface) 65%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}

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

/* ── Article Reveal (fade-in on scroll) ── */
.article-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.article-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Double-tap Heart ── */
.big-heart {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    filter: drop-shadow(0 2px 8px rgba(244, 63, 94, 0.8));
    color: var(--like);
}

.animate-heart {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.2) !important;
}

/* ── Animated Orbs (login background) ── */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: rgba(59, 130, 246, 0.3);
    animation: orbFloat 15s ease-in-out infinite;
}

.orb-2 {
    width: 250px;
    height: 250px;
    background: rgba(34, 211, 238, 0.25);
    animation: orbFloatAlt 18s ease-in-out infinite;
}

.orb-3 {
    width: 200px;
    height: 200px;
    background: rgba(139, 92, 246, 0.2);
    animation: orbFloat 20s ease-in-out infinite reverse;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(30px, -30px); }
    50% { transform: translate(-20px, 20px); }
    75% { transform: translate(40px, 10px); }
}

@keyframes orbFloatAlt {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-30px, 30px); }
    50% { transform: translate(20px, -20px); }
    75% { transform: translate(-40px, -10px); }
}

/* ── Floating Particles ── */
.pg-particle {
    position: absolute;
    border-radius: 50%;
    animation: particleFloat 12s infinite ease-in;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(1);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) translateX(100px) scale(0.5);
    }
}

/* ── Safe Area Helpers ── */
.pb-nav {
    padding-bottom: calc(62px + var(--safe-bottom) + 8px);
}

.pt-safe {
    padding-top: calc(var(--safe-top) + 10px);
}

/* ── Bottom Navigation ── */
.ig-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(6, 11, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: var(--safe-bottom);
    max-width: 540px;
    margin: 0 auto;
}

.ig-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 62px;
    padding: 0 4px;
}

.ig-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: transform 0.15s ease;
}

.ig-nav-item:active {
    transform: scale(0.85);
}

.ig-nav-item svg,
.ig-nav-item img {
    display: block;
}

/* ── Post Component ── */
.ig-post {
    border-bottom: 1px solid var(--border);
}

.ig-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
}

.ig-avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface2);
    flex-shrink: 0;
}

.ig-media {
    width: 100%;
    background: var(--surface);
    display: block;
    position: relative;
}

.ig-media img,
.ig-media video {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.ig-actions {
    padding: 8px 12px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ig-action-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ig-action-btn {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 6px;
    margin: -6px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    display: flex;
    align-items: center;
}

.ig-action-btn:active {
    transform: scale(0.85);
}

.ig-action-btn:hover {
    opacity: 0.6;
}

.ig-meta {
    padding: 0 12px 10px;
}

/* ── Divider ── */
.ig-login-divider {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 18px 0;
}

.ig-login-divider::before,
.ig-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.ig-login-divider span {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 1px;
}

/* ── Follow Button ── */
.ig-follow-btn {
    background: linear-gradient(135deg, var(--p1), var(--p2));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
}

.ig-follow-btn:hover {
    opacity: 0.9;
}

.ig-follow-btn.following {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
}

/* ── Badge Colors ── */
.badge-blue {
    color: var(--p1);
}

.badge-gold {
    color: #f8d477;
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, .42));
}

.og-member-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8d477 !important;
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, .42));
}

.og-member-check::after {
    position: absolute;
    top: -.38em;
    right: -.52em;
    color: #fff0b3;
    content: "✦";
    font-family: Georgia, serif;
    font-size: .58em;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(251, 191, 36, .7));
}

.supporter-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(251, 113, 133, .45);
    border-radius: 999px;
    padding: 3px 7px;
    background: linear-gradient(110deg, rgba(190, 24, 93, .28), rgba(124, 58, 237, .28));
    color: #fecdd3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 0 16px rgba(244, 63, 94, .14);
}

.supporter-profile-ribbon {
    position: absolute;
    left: 50%;
    bottom: -5px;
    z-index: 2;
    white-space: nowrap;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    padding: 4px 9px;
    background: linear-gradient(100deg, #9f1239, #e11d48 48%, #7c3aed);
    color: #fff1f2;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .025em;
    box-shadow: 0 4px 14px rgba(190, 24, 93, .4);
}

.admin-profile-page {
    background:
        radial-gradient(ellipse at 50% 170px, rgba(99, 102, 241, .12), transparent 360px),
        var(--bg);
}

.admin-profile-banner {
    position: relative;
    overflow: hidden;
    margin: 12px 16px 0;
    border: 1px solid rgba(165, 180, 252, .25);
    border-radius: 22px;
    background:
        linear-gradient(115deg, rgba(30, 27, 75, .94), rgba(15, 23, 42, .96) 54%, rgba(49, 22, 65, .94));
    box-shadow: 0 14px 36px rgba(30, 27, 75, .22), inset 0 1px rgba(255,255,255,.07);
}

.admin-profile-banner::after {
    position: absolute;
    right: -45px;
    bottom: -90px;
    width: 220px;
    height: 170px;
    border: 1px solid rgba(196, 181, 253, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(196, 181, 253, .035), 0 0 0 38px rgba(196, 181, 253, .025);
    content: "";
}

.admin-profile-banner-orb {
    position: absolute;
    top: -70px;
    left: 30%;
    width: 170px;
    height: 130px;
    border-radius: 50%;
    background: rgba(99, 102, 241, .2);
    filter: blur(45px);
    pointer-events: none;
}

.admin-profile-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 100px;
    padding: 17px;
}

.admin-profile-emblem {
    display: grid;
    width: 48px;
    height: 48px;
    flex: none;
    place-items: center;
    border: 1px solid rgba(224, 231, 255, .3);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(129, 140, 248, .35), rgba(168, 85, 247, .24));
    color: #e0e7ff;
    font-size: 20px;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .22), inset 0 1px rgba(255,255,255,.16);
}

.admin-profile-eyebrow {
    margin: 0 0 3px;
    color: #c7d2fe;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .19em;
}

.admin-profile-title {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.025em;
}

.admin-profile-subtitle {
    margin: 3px 0 0;
    color: rgba(224, 231, 255, .7);
    font-size: 10px;
    font-weight: 600;
}

.admin-profile-stamp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 6px 8px;
    border: 1px solid rgba(196, 181, 253, .25);
    border-radius: 999px;
    background: rgba(99, 102, 241, .13);
    color: #ddd6fe;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
    white-space: nowrap;
}

.admin-profile-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    border: 1px solid rgba(165, 180, 252, .22);
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(99, 102, 241, .1);
    color: #c7d2fe;
    font-size: 9px;
    font-weight: 800;
}

.admin-profile-details {
    padding-top: 22px;
}

.supporter-profile-banner {
    position: relative;
    overflow: hidden;
    margin: 12px 16px 0;
    border: 1px solid rgba(251, 113, 133, .3);
    border-radius: 22px;
    background:
        linear-gradient(115deg, rgba(76, 5, 25, .94), rgba(49, 16, 48, .96) 54%, rgba(46, 16, 76, .94));
    box-shadow: 0 14px 36px rgba(159, 18, 57, .19), inset 0 1px rgba(255,255,255,.08);
}

.supporter-profile-banner::after {
    position: absolute;
    right: -45px;
    bottom: -90px;
    width: 220px;
    height: 170px;
    border: 1px solid rgba(253, 164, 175, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(253, 164, 175, .035), 0 0 0 38px rgba(253, 164, 175, .025);
    content: "";
}

.supporter-profile-banner-orb {
    position: absolute;
    top: -70px;
    left: 30%;
    width: 170px;
    height: 130px;
    border-radius: 50%;
    background: rgba(225, 29, 72, .2);
    filter: blur(45px);
    pointer-events: none;
}

.supporter-profile-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 100px;
    padding: 17px;
}

.supporter-profile-emblem {
    display: grid;
    width: 48px;
    height: 48px;
    flex: none;
    place-items: center;
    border: 1px solid rgba(255, 228, 230, .3);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(244, 63, 94, .36), rgba(168, 85, 247, .26));
    color: #ffe4e6;
    font-size: 19px;
    box-shadow: 0 8px 24px rgba(225, 29, 72, .23), inset 0 1px rgba(255,255,255,.16);
}

.supporter-profile-eyebrow {
    margin: 0 0 3px;
    color: #fecdd3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .19em;
}

.supporter-profile-title {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.025em;
}

.supporter-profile-subtitle {
    margin: 3px 0 0;
    color: rgba(255, 228, 230, .72);
    font-size: 10px;
    font-weight: 600;
}

.supporter-profile-stamp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 6px 8px;
    border: 1px solid rgba(253, 164, 175, .26);
    border-radius: 999px;
    background: rgba(225, 29, 72, .13);
    color: #ffe4e6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
    white-space: nowrap;
}

.supporter-event-modal {
    position: fixed;
    inset: 0;
    width: min(92vw, 430px);
    max-width: 430px;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(251, 113, 133, .32);
    border-radius: 28px;
    background: #100d18;
    color: #fff;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .75), 0 0 70px rgba(190, 24, 93, .18);
}

.supporter-event-modal::backdrop {
    background: rgba(3, 3, 8, .82);
    backdrop-filter: blur(12px);
}

.supporter-event-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    width: 260px;
    height: 220px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(225, 29, 72, .23);
    filter: blur(55px);
    pointer-events: none;
}

.supporter-event-content {
    position: relative;
    padding: 30px 24px 24px;
    text-align: center;
}

.supporter-event-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 17px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 20px;
    background: linear-gradient(135deg, #e11d48, #7c3aed);
    color: white;
    font-size: 25px;
    box-shadow: 0 10px 35px rgba(190, 24, 93, .35);
}

.supporter-event-eyebrow {
    margin: 0 0 8px;
    color: #fda4af;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
}

.supporter-event-content h2 {
    margin: 0;
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 900;
    letter-spacing: -.04em;
}

.supporter-event-copy {
    margin: 12px 0 17px;
    color: #d4d4d8;
    font-size: 13px;
    line-height: 1.65;
}

.supporter-event-timer {
    margin: 0 0 19px;
    color: #a1a1aa;
    font-size: 11px;
}

.supporter-event-timer strong {
    color: #fda4af;
    font-variant-numeric: tabular-nums;
}

.supporter-event-actions {
    display: grid;
    gap: 9px;
}

.supporter-event-actions button {
    min-height: 46px;
    border-radius: 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.supporter-event-yes {
    border: 0;
    background: linear-gradient(100deg, #e11d48, #be185d 54%, #7c3aed);
    color: white;
    box-shadow: 0 8px 24px rgba(190, 24, 93, .28);
}

.supporter-event-no {
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .04);
    color: #a1a1aa;
}

.supporter-event-actions button:disabled {
    cursor: wait;
    opacity: .65;
}

.supporter-event-feedback {
    min-height: 16px;
    margin: 10px 0 0;
    color: #fda4af;
    font-size: 11px;
}

.halloween-egg {
    position: fixed;
    inset: 0;
    width: min(90vw, 390px);
    max-width: 390px;
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: #fff;
}

.halloween-egg::backdrop {
    background: rgba(8, 5, 14, .82);
    backdrop-filter: blur(9px);
}

.halloween-egg-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

.halloween-egg-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 32px 24px 25px;
    border: 1px solid rgba(251, 146, 60, .35);
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(124, 45, 18, .42), transparent 65%),
        linear-gradient(145deg, #17111c, #0b0b12 75%);
    text-align: center;
    box-shadow: 0 26px 90px rgba(0, 0, 0, .7), 0 0 55px rgba(249, 115, 22, .16);
    animation: halloweenEggPop .35s cubic-bezier(.2, .8, .2, 1) both;
}

.halloween-egg-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: #d4d4d8;
    font-size: 23px;
    line-height: 1;
}

.halloween-egg-decor {
    display: flex;
    justify-content: space-between;
    margin: -9px 22px 4px;
    font-size: 22px;
    opacity: .85;
}

.halloween-egg-decor span:first-child { animation: halloweenBat 2.8s ease-in-out infinite; }
.halloween-egg-decor span:last-child { animation: halloweenBat 3.2s ease-in-out infinite reverse; }

.halloween-egg-pumpkin {
    margin: 0 auto 10px;
    font-size: 70px;
    line-height: 1.1;
    filter: drop-shadow(0 8px 22px rgba(249, 115, 22, .28));
    animation: halloweenPumpkin 2.2s ease-in-out infinite;
}

.halloween-egg-kicker {
    margin: 0 0 6px;
    color: #fdba74;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
}

.halloween-egg-card h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.04em;
}

.halloween-egg-card p:not(.halloween-egg-kicker) {
    margin: 10px 0 0;
    color: #d4d4d8;
    font-size: 13px;
    line-height: 1.65;
}

.halloween-egg-candles {
    margin-top: 17px;
    color: #fdba74;
    font-size: 20px;
}

@keyframes halloweenEggPop {
    from { transform: translateY(12px) scale(.94); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes halloweenBat {
    0%, 100% { transform: translate(0, 0) rotate(-5deg); }
    50% { transform: translate(3px, -7px) rotate(7deg); }
}

@keyframes halloweenPumpkin {
    0%, 100% { transform: rotate(-2deg) scale(1); }
    50% { transform: rotate(2deg) scale(1.05); }
}

/* ── Legacy Instagram Classes (compatibility) ── */
.ig-logo {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--text);
    letter-spacing: -0.5px;
}

.ig-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(6, 11, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding-top: calc(10px + var(--safe-top));
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ig-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, var(--p1), var(--p2));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    -webkit-appearance: none;
}

.ig-btn-primary:hover {
    opacity: 0.9;
}

.ig-btn-primary:active {
    opacity: 0.85;
}

.ig-btn-ghost {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.ig-btn-ghost:hover {
    background: var(--surface2);
}

.ig-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.ig-input:focus {
    border-color: var(--muted);
}

.ig-input::placeholder {
    color: var(--muted);
    font-size: 13px;
}

.ig-login-wrap {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
}

.ig-login-card {
    width: 100%;
    max-width: 350px;
    border: 1px solid var(--border);
    border-radius: 1px;
    padding: 36px 40px 24px;
    background: var(--bg);
}

.notif-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: var(--like);
    border-radius: 50%;
    border: 1.5px solid var(--bg);
}

/* User's original insta-blur for navigation */
.insta-blur{
    backdrop-filter:blur(20px);
    background:rgba(0,0,0,0.85);
}

:root{
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}
.no-scrollbar::-webkit-scrollbar{display:none;}
.chat-wrap{height:100dvh;} /* better on mobile */

/* Reels Specific Styles */
html.reels-mode, body.reels-mode { 
    background: #000; 
    height: 100vh;
    height: 100dvh;
    overflow: hidden; 
    position: fixed; 
    width: 100%; 
}
.reels-container {
    height: 100vh;
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    touch-action: pan-y;
}
.reels-container::-webkit-scrollbar { display: none; }
.reels-topbar {
    position: fixed;
    top: var(--safe-top);
    left: 0;
    right: 0;
    z-index: 40;
    height: 56px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(rgba(0,0,0,.38), transparent);
    pointer-events: none;
}
.reels-topbar a { color: inherit; pointer-events: auto; }
.reels-brand { font-size: 15px; font-weight: 850; letter-spacing: -.04em; }
.reels-feed-label { font-size: 14px; font-weight: 800; text-shadow: 0 1px 8px #000; }
.reels-feed-active { position: relative; }
.reels-feed-active::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 22px;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #fff;
}
.reels-search { justify-self: end; font-size: 18px; filter: drop-shadow(0 1px 4px #000); }
.reel-item {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.reel-item video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    will-change: transform;
}
.reel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 24%, transparent 56%, rgba(0,0,0,.44));
}
.reel-item > *:not(video) { z-index: 2; }
.reel-item .reel-actions { z-index: 20; }
.reel-item .big-heart { z-index: 30; }
.reel-play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    z-index: 35;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reel-play-indicator.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.reel-ui {
    position: absolute;
    bottom: calc(85px + var(--safe-bottom));
    left: 0; right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 10;
}
.reel-ui * { pointer-events: auto; }
.reel-actions {
    position: absolute;
    right: 12px;
    bottom: calc(120px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    z-index: 20;
}
.action-item { text-align: center; }
.action-item i { font-size: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.action-label { font-size: 11px; font-weight: 900; margin-top: 4px; }
.reel-actions button {
    color: #fff;
    background: transparent;
    border: 0;
    padding: 4px;
}
.reel-actions button:active { transform: scale(.88); }
.reel-ui { padding-left: 18px; padding-right: 84px; }
.reel-follow-button[aria-pressed="true"] { background: rgba(255,255,255,.9); color: #111; }
.reel-comments-open { overflow: hidden !important; }
.reel-comments-sheet {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: inherit;
    border: 0;
    background: transparent;
}
.reel-comments-sheet::backdrop { background: transparent; }
.reel-comments-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(3px);
}
.reel-comments-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    height: min(74dvh, 720px);
    margin: 0 auto;
    padding-bottom: var(--safe-bottom);
    color: #f4f4f5;
    background: #111113;
    border: 1px solid rgba(255,255,255,.08);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    animation: reelSheetIn .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes reelSheetIn { from { transform: translateY(30px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }
.reel-comments-handle { width: 38px; height: 4px; margin: 10px auto 4px; border-radius: 9px; background: rgba(255,255,255,.28); }
.reel-comments-header { display:flex; align-items:center; justify-content:center; min-height:48px; border-bottom:1px solid rgba(255,255,255,.08); }
.reel-comments-header h2 { font-size:14px; font-weight:750; }
.reel-comments-close { position:absolute; right:16px; top:16px; color:#aaa; font-size:25px; line-height:1; background:none; border:0; }
.reel-comments-list { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 16px 22px; }
.reel-comments-loading,.reel-comments-empty { padding:34px 12px; color:#a1a1aa; font-size:13px; text-align:center; }
.reel-comment-row { display:flex; align-items:flex-start; gap:11px; margin-bottom:18px; }
.reel-comment-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.1); }
.reel-comment-author { color:#fff; font-size:12px; font-weight:750; }
.reel-comment-text { margin-top:2px; color:#e4e4e7; font-size:13px; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap; }
.reel-comment-time { display:block; margin-top:5px; color:#71717a; font-size:10px; }
.reel-comments-form { display:flex; gap:10px; align-items:center; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); }
.reel-comments-form input { min-width:0; flex:1; padding:12px 15px; color:#fff; background:#222226; border:1px solid rgba(255,255,255,.08); border-radius:999px; outline:none; font-size:13px; }
.reel-comments-form input:focus { border-color:rgba(34,211,238,.55); }
.reel-comments-form button { padding:10px 4px 10px 8px; color:#67e8f9; background:transparent; border:0; font-size:12px; font-weight:750; }
.reel-comments-form button:disabled { opacity:.45; }

/* Personal settings */
.settings-page { padding-bottom: calc(24px + var(--safe-bottom)); }
.settings-welcome {
    position: relative;
    overflow: hidden;
    padding: 22px 19px 17px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 92% 0%, rgba(99,102,241,.25), transparent 43%),
        radial-gradient(ellipse at 0% 110%, rgba(34,211,238,.13), transparent 45%),
        linear-gradient(145deg, #17171d, #0c0c10 72%);
}
.settings-welcome-copy { position: relative; z-index: 1; }
.settings-eyebrow { color:#a5b4fc; font-size:9px; font-weight:850; letter-spacing:.18em; }
.settings-welcome h2 { margin-top:7px; color:#fff; font-size:23px; font-weight:800; letter-spacing:-.055em; }
.settings-welcome-copy p { margin-top:3px; color:#a1a1aa; font-size:12px; }
.settings-profile-chip {
    display:flex; align-items:center; gap:10px; margin-top:20px; padding:10px 12px;
    color:#fff; border:1px solid rgba(255,255,255,.09); border-radius:16px;
    background:rgba(0,0,0,.27); transition:background .2s ease;
}
.settings-profile-chip:hover { background:rgba(255,255,255,.07); }
.settings-profile-chip img { width:38px; height:38px; flex:none; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.settings-profile-chip span { display:grid; min-width:0; }
.settings-profile-chip strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.settings-profile-chip small { color:#a1a1aa; font-size:10px; }
.settings-profile-chip > i { margin-left:auto; color:#71717a; font-size:12px; }
.settings-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.settings-shortcuts a {
    display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px;
    color:#d4d4d8; border:1px solid rgba(255,255,255,.08); border-radius:14px;
    background:rgba(255,255,255,.035); font-size:10px; font-weight:700; transition:all .2s ease;
}
.settings-shortcuts a:hover { color:#fff; border-color:rgba(165,180,252,.35); background:rgba(99,102,241,.1); }
.settings-shortcuts i { color:#a5b4fc; font-size:12px; }
.settings-section { scroll-margin-top:84px; }
.settings-section-heading { display:flex; align-items:center; gap:11px; margin:0 2px 12px; }
.settings-section-heading h2 { color:#f4f4f5; font-size:14px; font-weight:750; letter-spacing:-.02em; }
.settings-section-heading p { margin-top:2px; color:#71717a; font-size:10px; }
.settings-section-icon { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:13px; font-size:14px; }
.settings-icon-violet { color:#c4b5fd; background:rgba(139,92,246,.14); }
.settings-icon-cyan { color:#67e8f9; background:rgba(34,211,238,.12); }
.settings-icon-blue { color:#93c5fd; background:rgba(59,130,246,.14); }
.settings-section .glass-card { border:1px solid rgba(255,255,255,.07); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); }
.settings-section .glass-card h2 { display:none; }
.settings-section .pg-input { border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(0,0,0,.23); transition:border-color .18s ease, box-shadow .18s ease; }
.settings-section .pg-input:focus { border-color:rgba(103,232,249,.5); box-shadow:0 0 0 3px rgba(34,211,238,.08); outline:none; }
.settings-options-card { overflow:hidden; border:1px solid rgba(255,255,255,.075); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.018)); }
.settings-option,.settings-link-row { display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 14px; }
.settings-option + .settings-option,.settings-link-row + .settings-link-row { border-top:1px solid rgba(255,255,255,.055); }
.settings-option-icon { display:grid; place-items:center; width:36px; height:36px; flex:none; color:#a5b4fc; border-radius:13px; background:rgba(129,140,248,.11); font-size:13px; }
.settings-option-copy { display:grid; min-width:0; gap:3px; }
.settings-option-copy strong { color:#f4f4f5; font-size:11px; font-weight:700; }
.settings-option-copy small { color:#85858f; font-size:9px; line-height:1.4; }
.settings-switch { position:relative; display:block; width:42px; height:25px; flex:none; margin-left:auto; cursor:pointer; }
.settings-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.settings-switch span { position:absolute; inset:0; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:#2a2a30; transition:background .2s ease,border-color .2s ease; }
.settings-switch span::after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#b4b4bd; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s ease; }
.settings-switch input:checked + span { border-color:rgba(103,232,249,.65); background:linear-gradient(120deg,#0891b2,#6366f1); }
.settings-switch input:checked + span::after { transform:translateX(17px); background:#fff; }
.settings-switch input:focus-visible + span { outline:2px solid #67e8f9; outline-offset:3px; }
.settings-device-note { display:flex; align-items:center; gap:7px; padding:10px 14px 12px; color:#71717a; font-size:9px; }
.settings-device-note i { color:#a1a1aa; }
.settings-link-row { color:inherit; transition:background .18s ease; }
.settings-link-row:hover { background:rgba(255,255,255,.04); }
.settings-chevron { margin-left:auto; color:#52525b; font-size:10px; }
.settings-link-danger .settings-option-icon { color:#fb7185; background:rgba(244,63,94,.1); }
.settings-link-danger .settings-option-copy strong { color:#fda4af; }
.settings-character-count { color:#71717a; font-size:10px; font-variant-numeric:tabular-nums; }
.settings-save-button { min-height:46px; border-radius:14px; box-shadow:0 8px 24px rgba(34,211,238,.12); }
.settings-feedback { border-radius:16px; }
.settings-logout { border-radius:16px; }
.settings-toast { position:fixed; left:50%; bottom:calc(78px + var(--safe-bottom)); z-index:2000; max-width:calc(100vw - 32px); padding:11px 16px; color:#e4e4e7; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(24,24,27,.96); box-shadow:0 8px 28px rgba(0,0,0,.4); font-size:11px; font-weight:650; opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:opacity .2s ease,transform .2s ease; }
.settings-toast-visible { opacity:1; transform:translate(-50%,0); }
.settings-toast-error { color:#fecdd3; border-color:rgba(244,63,94,.35); }
.pg-reduce-motion *, .pg-reduce-motion *::before, .pg-reduce-motion *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
@media (min-width: 700px) {
    .settings-page { padding-top:28px; }
    .settings-welcome { padding:26px 24px 19px; }
    .settings-welcome h2 { font-size:27px; }
}

/* 60-day community challenge */
.challenge-page { padding-bottom:calc(20px + var(--safe-bottom)); }
.challenge-hero {
    position:relative; overflow:hidden; padding:19px 18px 16px; color:#fff;
    border:1px solid rgba(255,255,255,.11); border-radius:25px;
    background:radial-gradient(ellipse at 100% 4%,rgba(244,114,182,.22),transparent 42%),
               radial-gradient(ellipse at 0% 100%,rgba(99,102,241,.24),transparent 48%),
               linear-gradient(145deg,#1b1924 0%,#0b0b10 75%);
    box-shadow:0 18px 46px rgba(0,0,0,.25);
}
.challenge-hero::after { content:""; position:absolute; width:170px; height:170px; right:-86px; bottom:-110px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 18px rgba(255,255,255,.018),0 0 0 38px rgba(255,255,255,.014); pointer-events:none; }
.challenge-hero-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.challenge-eyebrow { color:#c4b5fd; font-size:8px; font-weight:850; letter-spacing:.16em; }
.challenge-eyebrow i { margin-right:4px; color:#f0abfc; }
.challenge-live { display:flex; align-items:center; gap:6px; color:#bbf7d0; font-size:8px; font-weight:850; letter-spacing:.11em; }
.challenge-live i { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; }
.challenge-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:19px 0 17px; }
.challenge-heading h2 { font-size:28px; line-height:1.02; font-weight:850; letter-spacing:-.06em; }
.challenge-heading h2 span { color:#c4b5fd; }
.challenge-heading p { max-width:255px; margin-top:10px; color:#b4b4bd; font-size:10px; line-height:1.55; }
.challenge-trophy { position:relative; display:grid; place-items:center; width:84px; height:84px; flex:none; color:#fde68a; border:1px solid rgba(253,230,138,.25); border-radius:25px; background:linear-gradient(145deg,rgba(251,191,36,.16),rgba(244,114,182,.1)); transform:rotate(4deg); }
.challenge-trophy i { font-size:34px; filter:drop-shadow(0 5px 14px rgba(251,191,36,.28)); }
.challenge-trophy span { position:absolute; right:8px; bottom:5px; color:rgba(255,255,255,.66); font-size:9px; font-weight:850; }
.challenge-countdown { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 8px 11px; border:1px solid rgba(255,255,255,.075); border-radius:17px; background:rgba(0,0,0,.25); }
.challenge-countdown div { display:grid; justify-items:center; min-width:39px; gap:2px; }
.challenge-countdown strong { font-size:18px; font-variant-numeric:tabular-nums; line-height:1; font-weight:800; }
.challenge-countdown span { color:#777783; font-size:7px; font-weight:800; letter-spacing:.12em; }
.challenge-countdown > b { padding-bottom:7px; color:#777783; font-size:13px; }
.challenge-dates { display:flex; justify-content:space-between; margin-top:10px; color:#777783; font-size:7px; font-weight:800; letter-spacing:.12em; }
.challenge-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:0 2px 12px; }
.challenge-section-kicker { color:#81818d; font-size:7px; font-weight:850; letter-spacing:.14em; }
.challenge-section-heading h2 { margin-top:3px; color:#fafafa; font-size:17px; font-weight:800; letter-spacing:-.035em; }
.challenge-points-pill,.challenge-player-count { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; color:#ddd6fe; border:1px solid rgba(167,139,250,.18); border-radius:999px; background:rgba(139,92,246,.1); font-size:9px; font-weight:800; }
.challenge-points-pill i { color:#fbbf24; }
.challenge-player-count { color:#a1a1aa; border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.035); }
.challenge-missions { display:grid; gap:9px; }
.challenge-task { display:flex; align-items:flex-start; gap:11px; padding:13px 12px; border:1px solid rgba(255,255,255,.075); border-radius:18px; background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); }
.challenge-task-icon { display:grid; place-items:center; width:37px; height:37px; flex:none; color:#c4b5fd; border-radius:13px; background:rgba(139,92,246,.14); font-size:13px; }
.challenge-task-cyan .challenge-task-icon { color:#67e8f9; background:rgba(34,211,238,.12); }
.challenge-task-pink .challenge-task-icon { color:#f9a8d4; background:rgba(236,72,153,.13); }
.challenge-task-main { min-width:0; flex:1; }
.challenge-task-title { display:flex; align-items:center; gap:6px; }
.challenge-task-title h3 { color:#f4f4f5; font-size:10px; font-weight:750; }
.challenge-task-done { color:#4ade80; font-size:11px; }
.challenge-task-main > p { margin-top:3px; color:#85858f; font-size:9px; }
.challenge-progress { height:4px; margin-top:10px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.09); }
.challenge-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8b5cf6,#c084fc); transition:width .35s ease; }
.challenge-task-cyan .challenge-progress span { background:linear-gradient(90deg,#06b6d4,#67e8f9); }
.challenge-task-pink .challenge-progress span { background:linear-gradient(90deg,#db2777,#f9a8d4); }
.challenge-task-meta { display:flex; justify-content:space-between; margin-top:6px; color:#71717a; font-size:8px; }
.challenge-task-meta strong { color:#ddd6fe; }
.challenge-task-cyan .challenge-task-meta strong { color:#a5f3fc; }
.challenge-task-pink .challenge-task-meta strong { color:#fbcfe8; }
.challenge-your-rank,.challenge-nudge { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid rgba(255,255,255,.08); border-radius:17px; background:rgba(255,255,255,.035); color:#fff; }
.challenge-your-rank-icon { display:grid; place-items:center; width:37px; height:37px; color:#c4b5fd; border-radius:13px; background:rgba(139,92,246,.14); }
.challenge-your-rank > span,.challenge-nudge > span { display:grid; gap:2px; }
.challenge-your-rank small { color:#81818d; font-size:7px; font-weight:850; letter-spacing:.13em; }
.challenge-your-rank strong { font-size:12px; font-weight:800; }
.challenge-your-rank strong em { color:#71717a; font-style:normal; }
.challenge-your-rank > i:last-child { margin-left:auto; color:#71717a; font-size:11px; }
.challenge-nudge > i { display:grid; place-items:center; width:37px; height:37px; color:#fde68a; border-radius:13px; background:rgba(251,191,36,.11); }
.challenge-nudge strong { font-size:10px; }
.challenge-nudge small { color:#85858f; font-size:9px; }
.challenge-podium { display:flex; align-items:flex-end; justify-content:center; gap:6px; min-height:163px; padding:18px 7px 13px; border:1px solid rgba(255,255,255,.07); border-radius:22px 22px 0 0; background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,.1),transparent 53%),rgba(255,255,255,.018); }
.challenge-podium-player { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; text-align:center; color:#e4e4e7; }
.challenge-place-1 { order:2; }
.challenge-place-2 { order:1; }
.challenge-place-3 { order:3; }
.challenge-podium-avatar-wrap { position:relative; display:block; width:49px; height:49px; margin:3px 0 7px; }
.challenge-podium-winner .challenge-podium-avatar-wrap { width:59px; height:59px; }
.challenge-podium-avatar-wrap img { width:100%; height:100%; border:2px solid #71717a; border-radius:50%; object-fit:cover; }
.challenge-place-1 .challenge-podium-avatar-wrap img { border-color:#fbbf24; box-shadow:0 0 0 4px rgba(251,191,36,.13); }
.challenge-place-2 .challenge-podium-avatar-wrap img { border-color:#d4d4d8; }
.challenge-place-3 .challenge-podium-avatar-wrap img { border-color:#d18a5b; }
.challenge-podium-avatar-wrap > span { position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; width:18px; height:18px; color:#111; border:2px solid #111; border-radius:50%; background:#d4d4d8; font-size:8px; font-weight:900; }
.challenge-place-1 .challenge-podium-avatar-wrap > span { background:#fbbf24; }
.challenge-place-3 .challenge-podium-avatar-wrap > span { background:#d18a5b; }
.challenge-podium-player > strong { display:flex; align-items:center; justify-content:center; gap:4px; max-width:100%; overflow:hidden; color:#f4f4f5; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.challenge-name-crown { flex:none; color:#d4d4d8; font-size:8px; }
.challenge-place-1 .challenge-name-crown { color:#fbbf24; filter:drop-shadow(0 1px 5px rgba(251,191,36,.45)); }
.challenge-place-3 .challenge-name-crown { color:#d18a5b; }
.challenge-podium-player > small { margin-top:2px; color:#a1a1aa; font-size:8px; font-weight:750; }
.challenge-ranking-list { overflow:hidden; border:1px solid rgba(255,255,255,.07); border-top:0; border-radius:0 0 18px 18px; background:rgba(255,255,255,.018); }
.challenge-ranking-row { display:flex; align-items:center; gap:10px; min-height:54px; padding:8px 13px; color:#fff; }
.challenge-ranking-row + .challenge-ranking-row { border-top:1px solid rgba(255,255,255,.055); }
.challenge-ranking-number { width:19px; color:#85858f; text-align:center; font-size:10px; font-weight:800; }
.challenge-ranking-row > img { width:32px; height:32px; border:1px solid rgba(255,255,255,.11); border-radius:50%; object-fit:cover; }
.challenge-ranking-name { flex:1; overflow:hidden; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.challenge-ranking-name small { color:#a78bfa; font-size:9px; }
.challenge-ranking-row > strong { color:#e9d5ff; font-size:11px; }
.challenge-ranking-row > strong small { color:#a1a1aa; font-size:8px; }
.challenge-ranking-row > i { color:#52525b; font-size:8px; }
.challenge-empty { display:grid; justify-items:center; padding:25px 20px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:rgba(255,255,255,.02); text-align:center; }
.challenge-empty > div { display:grid; place-items:center; width:54px; height:54px; color:#fbbf24; border:1px solid rgba(251,191,36,.17); border-radius:18px; background:rgba(251,191,36,.07); font-size:22px; }
.challenge-empty h3 { margin-top:12px; color:#f4f4f5; font-size:12px; font-weight:800; }
.challenge-empty p { max-width:240px; margin-top:4px; color:#85858f; font-size:9px; }
.challenge-list-note { padding:9px; color:#71717a; font-size:9px; text-align:center; }
.challenge-rules { display:flex; gap:7px; padding:0 2px 12px; color:#71717a; font-size:8px; line-height:1.5; }
.challenge-rules i { margin-top:2px; color:#a78bfa; }

/* Login Page Specifics */
#login-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#login-overlay img {
    width: 280px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(34, 211, 238, 0.3);
}

/* Avatar Sizing Safety Rules */
.chat-avatar, .chat-item img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
}
.notif-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
}
.header-chat-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
}

/* ── Pallegram visual system ── */
html {
    color-scheme: dark;
    background: #090a10;
}

body:not(.reels-page) {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 8% 0%, rgba(99, 102, 241, 0.10), transparent 34rem),
        radial-gradient(ellipse at 100% 28%, rgba(34, 211, 238, 0.055), transparent 30rem),
        #090a10 !important;
    color: var(--text);
}

body.login-bg {
    background:
        radial-gradient(ellipse at 18% 8%, rgba(99, 102, 241, 0.2), transparent 34rem),
        radial-gradient(ellipse at 90% 75%, rgba(34, 211, 238, 0.10), transparent 28rem),
        #090a10 !important;
}

::selection {
    color: #fff;
    background: rgba(129, 140, 248, 0.38);
}

:focus-visible {
    outline: 2px solid rgba(103, 232, 249, 0.85);
    outline-offset: 3px;
}

.glass-card,
.card,
.login-card,
.ig-login-card,
.post-wrap {
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(28, 29, 41, 0.94), rgba(15, 16, 23, 0.96));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.post-wrap {
    overflow: hidden;
    margin: 0 10px 14px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.post-wrap:hover {
    border-color: rgba(165, 180, 252, 0.17);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.ig-post {
    border: 0;
}

.ig-post-header {
    padding: 13px 14px;
}

.ig-post .shimmer {
    background: linear-gradient(110deg, #14151d 8%, #20212c 18%, #14151d 33%);
    background-size: 200% 100%;
}

.ig-meta {
    padding: 4px 14px 14px;
}

.ig-actions {
    padding: 10px 14px 5px;
}

.glass-header,
.glass-top,
.searchbar,
.ig-header,
header.sticky {
    background: rgba(13, 14, 21, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.075) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

.insta-blur,
.ig-nav {
    background: rgba(13, 14, 21, 0.88);
    border-color: rgba(255, 255, 255, 0.09) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.18);
}

.insta-blur {
    padding-top: 5px;
    border-radius: 22px 22px 0 0;
}

.nav-link {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: #a1a1aa;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.nav-link:hover {
    color: #f4f4f5;
    background: rgba(255, 255, 255, 0.06);
}

.nav-link.active {
    color: #c4b5fd;
    background: rgba(129, 140, 248, 0.14);
    box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.08);
}

.pg-input,
.ig-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
textarea,
select {
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.045);
    color: var(--text);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.pg-input,
.ig-input {
    min-height: 46px;
    padding: 12px 14px;
}

.pg-input:focus,
.ig-input:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    border-color: rgba(129, 140, 248, 0.68);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #777987;
}

button,
.ig-action-btn,
.ig-follow-btn,
.ig-btn-primary,
.ig-btn-ghost,
.pg-btn {
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

button:not(:disabled):active,
.ig-action-btn:active,
.ig-follow-btn:active,
.ig-btn-primary:active,
.ig-btn-ghost:active,
.pg-btn:active {
    transform: scale(0.98);
}

.pg-btn,
.ig-btn-primary,
.ig-follow-btn {
    border-radius: 14px;
    background-image: linear-gradient(115deg, #7178f5, #9875ee 58%, #36bfd4);
    box-shadow: 0 9px 24px rgba(110, 103, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pg-btn:hover,
.ig-btn-primary:hover,
.ig-follow-btn:hover {
    filter: brightness(1.09);
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.28);
}

.ig-follow-btn.following,
.ig-btn-ghost {
    border-radius: 14px;
}

.ig-avatar,
.notif-avatar,
.chat-avatar {
    border-color: rgba(255, 255, 255, 0.12);
}

.grid-item,
.tile {
    background: #111219;
}

.grid-item img,
.tile img,
.ig-media img,
.ig-media video {
    transition: filter 220ms ease, transform 350ms ease;
}

.grid-item:hover img,
.tile:hover img {
    filter: brightness(1.06);
    transform: scale(1.025);
}

.empty-state,
.empty-state-card {
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
}

.story-ring {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1), 0 5px 18px rgba(103, 232, 249, 0.08);
}

.logo-text {
    background-image: linear-gradient(105deg, #f5f3ff 4%, #a5b4fc 48%, #67e8f9 96%);
    animation: none;
    letter-spacing: -0.065em;
}

.btn-icon {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: none;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    color: #c4c5d0;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn-icon:hover {
    border-color: rgba(165, 180, 252, 0.2);
    background: rgba(129, 140, 248, 0.1);
    color: #fff;
}

#comment-modal {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: #14151e;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.35);
}

@media (min-width: 700px) {
    .max-w-lg.mx-auto {
        max-width: 680px;
    }

    .max-w-md.mx-auto {
        max-width: 620px;
    }

    .post-wrap {
        margin: 0 0 18px;
        border-radius: 24px;
    }

    .post-wrap .ig-media img,
    .post-wrap .ig-media video {
        max-height: min(72vh, 680px);
        object-fit: contain;
        background: #0b0c12;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}