/*
 * Camspedia v3.0 — Dark Rose Premium Theme
 * Dark-only design: #0a0a0a base, rose/coral (#f43f5e) accents
 * Font: DM Sans
 */

/* ==================== RESET & BASE ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; }

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

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

/* ==================== CSS VARIABLES ==================== */
:root {
    --rose-400: #fb7185;
    --rose-500: #f43f5e;
    --rose-600: #e11d48;
    --surface-0: #0a0a0a;
    --surface-1: #111111;
    --surface-2: #161616;
    --surface-3: #1a1a1a;
    --surface-4: #222222;
    --border-subtle: rgba(255,255,255,0.06);
    --border-medium: rgba(255,255,255,0.10);
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --success: #22c55e;
    --error: #ef4444;
    --warning: #f59e0b;

    /* Neon palette — gender */
    --neon-all: #00ffff;
    --neon-female: #ff2d75;
    --neon-male: #4d8dff;
    --neon-couples: #bf5fff;
    --neon-trans: #00e5a0;

    /* Neon palette — platforms */
    --neon-chaturbate: #ff8c00;
    --neon-stripchat: #ff2e2e;
    --neon-bongacams: #ff00aa;
    --neon-camsoda: #00e6ff;
    --neon-xlovecam: #b43cff;
    --neon-cams: #00ff64;
    --neon-cam4: #ffe600;
    --neon-livejasmin: #ff3250;

    /* Neon palette — categories */
    --neon-age: #ff2d75;
    --neon-ethnicity: #bf5fff;
    --neon-body: #00c8ff;
    --neon-tags: #00ffff;
}

/* ==================== BACK TO TOP ==================== */
.back-to-top {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rose-500);
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(244,63,94,0.3);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(244,63,94,0.4); }
.back-to-top svg { width: 20px; height: 20px; }

/* ==================== HEADER NEON NAV ==================== */
.neon-nav { display: flex; gap: 10px; }
.neon-nav a {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 29px; border-radius: 16px;
    font-size: 22px; font-weight: 500;
    color: #71717a; background: transparent;
    white-space: nowrap; transition: all 0.25s;
    border: 1px solid transparent;
}
.neon-nav a svg { width: 32px; height: 32px; transition: all 0.25s; }
.neon-nav a:hover { background: rgba(255,255,255,0.04); }
.neon-nav a:hover { color: var(--neon); text-shadow: 0 0 8px var(--neon-glow); }
.neon-nav a:hover svg { color: var(--neon); filter: drop-shadow(0 0 6px var(--neon-glow)); }
.neon-nav a.active {
    color: var(--neon);
    background: var(--neon-bg);
    border-color: var(--neon-border);
    text-shadow: 0 0 12px var(--neon-glow);
    box-shadow: 0 0 20px var(--neon-glow-soft), inset 0 0 20px var(--neon-glow-inner);
}
.neon-nav a.active svg { color: var(--neon); filter: drop-shadow(0 0 8px var(--neon-glow)); }

/* Per-gender neon */
.nav-all { --neon: #00ffff; --neon-glow: rgba(0,255,255,0.4); --neon-bg: rgba(0,255,255,0.08); --neon-border: rgba(0,255,255,0.2); --neon-glow-soft: rgba(0,255,255,0.1); --neon-glow-inner: rgba(0,255,255,0.03); }
.nav-female { --neon: #ff2d75; --neon-glow: rgba(255,45,117,0.4); --neon-bg: rgba(255,45,117,0.08); --neon-border: rgba(255,45,117,0.2); --neon-glow-soft: rgba(255,45,117,0.1); --neon-glow-inner: rgba(255,45,117,0.03); }
.nav-male { --neon: #4d8dff; --neon-glow: rgba(77,141,255,0.4); --neon-bg: rgba(77,141,255,0.08); --neon-border: rgba(77,141,255,0.2); --neon-glow-soft: rgba(77,141,255,0.1); --neon-glow-inner: rgba(77,141,255,0.03); }
.nav-couples { --neon: #bf5fff; --neon-glow: rgba(191,95,255,0.4); --neon-bg: rgba(191,95,255,0.08); --neon-border: rgba(191,95,255,0.2); --neon-glow-soft: rgba(191,95,255,0.1); --neon-glow-inner: rgba(191,95,255,0.03); }
.nav-trans { --neon: #00e5a0; --neon-glow: rgba(0,229,160,0.4); --neon-bg: rgba(0,229,160,0.08); --neon-border: rgba(0,229,160,0.2); --neon-glow-soft: rgba(0,229,160,0.1); --neon-glow-inner: rgba(0,229,160,0.03); }

/* Mobile fallback — keep old pills for mobile strip */
.lh-cat-link {
    display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: 8px;
    font-size: 14px; font-weight: 500;
    color: #a1a1aa; white-space: nowrap; transition: all 0.2s;
}
.lh-cat-link:hover { background: rgba(255,255,255,0.06); color: #e4e4e7; }
.lh-cat-active { background: var(--rose-500) !important; color: #fff !important; }

/* ==================== SIDEBAR NEON ==================== */
.neon-link {
    display: flex; align-items: center; gap: 15px;
    padding: 12px 13px; border-radius: 13px;
    color: #a1a1aa; font-size: 20px; font-weight: 400;
    transition: all 0.2s;
}
.neon-link:hover { background: rgba(255,255,255,0.03); color: #d4d4d8; }
.neon-link:hover .neon-icon { box-shadow: 0 0 12px var(--glow); }
.neon-link.active { color: #f4f4f5; font-weight: 500; background: rgba(255,255,255,0.03); }
.neon-link.active .neon-icon { box-shadow: 0 0 14px var(--glow), 0 0 4px var(--glow); }
.neon-link .count { margin-left: auto; font-size: 15px; color: #3f3f46; }

.neon-icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.25s;
}
.neon-icon svg { width: 22px; height: 22px; }

/* Platform neon icon colors */
.neon-plat-chaturbate { background: rgba(255,140,0,0.12); color: #ff8c00; --glow: rgba(255,140,0,0.4); }
.neon-plat-stripchat { background: rgba(255,46,46,0.12); color: #ff2e2e; --glow: rgba(255,46,46,0.4); }
.neon-plat-bongacams { background: rgba(255,0,170,0.12); color: #ff00aa; --glow: rgba(255,0,170,0.4); }
.neon-plat-camsoda { background: rgba(0,230,255,0.12); color: #00e6ff; --glow: rgba(0,230,255,0.4); }
.neon-plat-xlovecam { background: rgba(180,60,255,0.12); color: #b43cff; --glow: rgba(180,60,255,0.4); }
.neon-plat-cams { background: rgba(0,255,100,0.12); color: #00ff64; --glow: rgba(0,255,100,0.4); }
.neon-plat-cam4 { background: rgba(255,230,0,0.12); color: #ffe600; --glow: rgba(255,230,0,0.4); }
.neon-plat-livejasmin { background: rgba(255,50,80,0.12); color: #ff3250; --glow: rgba(255,50,80,0.4); }

/* Category neon icon colors */
.neon-cat-age { background: rgba(255,45,117,0.12); color: #ff2d75; --glow: rgba(255,45,117,0.35); }
.neon-cat-ethnicity { background: rgba(191,95,255,0.12); color: #bf5fff; --glow: rgba(191,95,255,0.35); }
.neon-cat-body { background: rgba(0,200,255,0.12); color: #00c8ff; --glow: rgba(0,200,255,0.35); }
.neon-cat-hair { background: rgba(255,215,0,0.12); color: #ffd700; --glow: rgba(255,215,0,0.35); }

/* Hair color dots */
.hair-dot { width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; transition: all 0.25s; }
.neon-link:hover .hair-dot { box-shadow: 0 0 10px var(--glow); }
.neon-link.active .hair-dot { box-shadow: 0 0 12px var(--glow), 0 0 4px var(--glow); }

/* Neon tags */
.neon-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 17px; border-radius: 26px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    color: #71717a; font-size: 18px; font-weight: 500; transition: all 0.25s;
}
.neon-tag:hover {
    color: #00ffff; border-color: rgba(0,255,255,0.3);
    background: rgba(0,255,255,0.06);
    box-shadow: 0 0 12px rgba(0,255,255,0.1);
    text-shadow: 0 0 6px rgba(0,255,255,0.3);
}
.neon-tag.active {
    color: #00ffff; border-color: rgba(0,255,255,0.4);
    background: rgba(0,255,255,0.1);
    box-shadow: 0 0 16px rgba(0,255,255,0.15), inset 0 0 12px rgba(0,255,255,0.04);
    text-shadow: 0 0 8px rgba(0,255,255,0.4);
}

/* Neon CTA link */
.neon-cta {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 15px; border-radius: 13px;
    font-size: 19px; font-weight: 600;
    color: #ff2d75; transition: all 0.25s;
}
.neon-cta:hover { text-shadow: 0 0 12px rgba(255,45,117,0.5); }
.neon-cta svg { width: 21px; height: 21px; }

/* ==================== NEON FRAME CARDS ==================== */
.card-neon {
    position: relative;
    background: #111;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.card-neon::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--platform-color);
    opacity: 0.6;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.card-neon:hover {
    border-color: var(--platform-color);
    box-shadow: 0 0 20px color-mix(in srgb, var(--platform-color) 20%, transparent),
                0 0 40px color-mix(in srgb, var(--platform-color) 8%, transparent);
}
.card-neon:hover::before { opacity: 1; }

.card-neon .neon-image-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.card-neon .neon-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.card-neon:hover .neon-image-wrap img { transform: scale(1.03); }
.card-neon .neon-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(17,17,17,0.7) 0%, transparent 40%);
    pointer-events: none;
}

.card-neon .neon-live-badge {
    position: absolute; top: 12px; left: 12px;
    display: flex; align-items: center; gap: 6px; z-index: 1;
}
.card-neon .neon-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444, 0 0 20px rgba(239,68,68,0.4);
    animation: neon-pulse 1.5s ease-in-out infinite;
}
.card-neon .neon-live-text {
    font-size: 10px; font-weight: 700; color: #ef4444;
    text-transform: uppercase; letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(239,68,68,0.5);
}
.card-neon .neon-viewers {
    position: absolute; top: 12px; right: 12px;
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: rgba(255,255,255,0.8); z-index: 1;
}
.card-neon .neon-viewers svg {
    width: 13px; height: 13px;
    fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 1.5;
}
.card-neon .neon-badges {
    position: absolute; bottom: 8px; left: 12px;
    display: flex; gap: 6px; z-index: 1;
}
.card-neon .neon-badge-hd {
    font-size: 9px; font-weight: 700; color: #00ffff;
    text-shadow: 0 0 6px rgba(0,255,255,0.4); letter-spacing: 1px;
}
.card-neon .neon-badge-new {
    font-size: 9px; font-weight: 700; color: #ff8c00;
    text-shadow: 0 0 6px rgba(255,140,0,0.4); letter-spacing: 1px;
}

.card-neon .neon-info { padding: 12px 14px 14px; }
.card-neon .neon-name {
    font-size: 15px; font-weight: 600; color: #fff;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.card-neon:hover .neon-name {
    color: var(--platform-color);
    text-shadow: 0 0 12px color-mix(in srgb, var(--platform-color) 30%, transparent);
}
.card-neon .neon-meta {
    display: flex; align-items: center; justify-content: space-between; margin-top: 4px;
}
.card-neon .neon-age-country { font-size: 12px; color: #71717a; }
.card-neon .neon-platform-label {
    font-size: 10px; font-weight: 700;
    color: var(--platform-color); letter-spacing: 0.5px;
    text-shadow: 0 0 8px color-mix(in srgb, var(--platform-color) 25%, transparent);
}

@keyframes neon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Platform neon card colors */
.card-neon-chaturbate { --platform-color: #ff8c00; }
.card-neon-stripchat  { --platform-color: #ff2e2e; }
.card-neon-bongacams  { --platform-color: #ff00aa; }
.card-neon-camsoda    { --platform-color: #00e6ff; }
.card-neon-xlovecam   { --platform-color: #b43cff; }
.card-neon-cams       { --platform-color: #00ff64; }
.card-neon-cam4       { --platform-color: #ffe600; }
.card-neon-livejasmin { --platform-color: #ff3250; }

/* ==================== PLATFORM BADGES ==================== */
.lh-platform-chaturbate { background: #f97316; }
.lh-platform-stripchat  { background: #dc2626; }
.lh-platform-bongacams  { background: #db2777; }
.lh-platform-camsoda    { background: #06b6d4; }
.lh-platform-xlovecam   { background: #8b5cf6; }
.lh-platform-cams       { background: #2563eb; }
.lh-platform-cam4       { background: #ea580c; }
.lh-platform-livejasmin { background: #e11d48; }
.lh-platform-cb         { background: #f97316; }
.lh-platform-sc         { background: #dc2626; }
.lh-platform-bc         { background: #db2777; }

/* ==================== ICON CONTROLS (view + sort) ==================== */
.lh-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.lh-icon-btn svg {
    width: 18px;
    height: 18px;
    color: #52525b;
    transition: color 0.2s;
}
.lh-icon-btn span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #52525b;
    transition: color 0.2s;
}
.lh-icon-btn:hover svg { color: #a1a1aa; }
.lh-icon-btn:hover span { color: #a1a1aa; }
.lh-icon-btn:hover { background: rgba(255,255,255,0.04); }
.lh-icon-btn.active svg { color: #f43f5e; filter: drop-shadow(0 0 6px rgba(244,63,94,0.5)); }
.lh-icon-btn.active span { color: #f43f5e; }
.lh-icon-btn.active { background: rgba(244,63,94,0.08); }

/* ==================== FOOTER ==================== */
.lh-footer-link {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #a1a1aa;
    transition: all 0.2s;
}
.lh-footer-link:hover { background: rgba(255,255,255,0.04); color: #d4d4d8; }

/* ==================== STREAMING SCHEDULE ==================== */
.sched-stats {
    display: flex;
    gap: 1px;
    border-radius: 10px;
    overflow: hidden;
}
.sched-stat {
    flex: 1;
    padding: 10px 8px;
    background: rgba(255,255,255,0.03);
    text-align: center;
}
.sched-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: #e4e4e7;
    line-height: 1;
}
.sched-stat-rose { color: #f43f5e; }
.sched-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #52525b;
    margin-top: 4px;
}

.sched-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.sched-day {
    width: 34px;
    font-size: 11px;
    font-weight: 600;
    color: #a1a1aa;
    text-align: right;
    flex-shrink: 0;
}
.sched-day-today { color: #f43f5e; }
.sched-track {
    flex: 1;
    height: 22px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.sched-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(244,63,94,0.5), rgba(244,63,94,0.8));
    box-shadow: 0 0 8px rgba(244,63,94,0.2);
}
.sched-fill-high {
    background: linear-gradient(90deg, rgba(244,63,94,0.7), #f43f5e);
    box-shadow: 0 0 12px rgba(244,63,94,0.35);
}
.sched-time {
    width: 100px;
    font-size: 10px;
    color: #52525b;
    text-align: left;
    flex-shrink: 0;
}

/* ==================== QUICK TAGS ==================== */
.quick-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #27272a transparent;
}
.quick-tags::-webkit-scrollbar { height: 4px; }
.quick-tags::-webkit-scrollbar-track { background: transparent; }
.quick-tags::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }
.quick-tags-label {
    font-size: 12px;
    color: #71717a;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    font-size: 13px;
    color: #a1a1aa;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}
.quick-tag:hover {
    border-color: var(--rose-500);
    color: var(--rose-400);
}
.quick-tag.active {
    background: var(--rose-500);
    border-color: var(--rose-500);
    color: #fff;
}
.quick-tag.hot {
    background: linear-gradient(135deg, var(--rose-500), #f97316);
    border-color: transparent;
    color: #fff;
}
.quick-tag .tag-emoji { font-size: 14px; }

/* ==================== BREADCRUMBS ==================== */
.breadcrumbs {
    background: transparent;
}
.breadcrumbs-inner {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}
.breadcrumbs a { color: #71717a; transition: color 0.15s; }
.breadcrumbs a:hover { color: var(--rose-400); }
.breadcrumbs .separator { color: #3f3f46; }
.breadcrumbs .current { color: #a1a1aa; font-weight: 500; }
.breadcrumbs--hide-mobile { display: block; }
@media (max-width: 768px) { .breadcrumbs--hide-mobile { display: none; } }

/* ==================== SKELETON LOADING ==================== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #222222 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 4px;
}

/* ==================== NO RESULTS ==================== */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #71717a;
}

/* ==================== FILTER SIDEBAR ==================== */
.filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #71717a;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    color: #a1a1aa;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    transition: all 0.2s;
}
.filter-chip:hover {
    border-color: var(--rose-500);
    color: var(--rose-400);
}
.filter-chip-active {
    background: rgba(244,63,94,0.1) !important;
    border-color: var(--rose-500) !important;
    color: var(--rose-400) !important;
}

/* ==================== ANIMATIONS ==================== */
@keyframes pulse-live { 0%,100%{opacity:1} 50%{opacity:.4} }
.animate-pulse-live { animation: pulse-live 2s ease-in-out infinite; }

/* ==================== PROFILE PAGE ==================== */
.profile-container { max-width: 1600px; margin: 0 auto; }
.profile-container-fw { max-width: 1200px; margin: 0 auto; }

.profile-two-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
.profile-two-col__main { min-width: 0; }
.profile-two-col__sidebar { min-width: 0; }

.profile-fw-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}
.profile-fw-info-row__left { min-width: 0; }
.profile-fw-info-row__right { min-width: 0; }

.heatmap-wrap { overflow: hidden; }

@media (max-width: 1024px) {
    .profile-two-col { grid-template-columns: 1fr; }
    .profile-fw-info-row { grid-template-columns: 1fr; }
}

/* ==================== ROSE GLOW CARD HOVER ==================== */
.rose-glow-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rose-glow-hover:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(244,63,94,0.15), 0 8px 25px rgba(0,0,0,0.3);
}