/* ===== includes/header.php ===== */

:root{
    --bg:#0f0f12;
    --bg2:#17171b;
    --bg3:#1d1d23;
    --card:#17171c;
    --card2:#202028;
    --text:#f4f4f6;
    --muted:#b7b7c2;
    --line:#2c2c34;

    --accent:#d63829;
    --accent2:#b92f23;
    --accent3:#ee4b3a;
    --accent-soft:rgba(var(--accent-rgb),.14);
    --accent-soft-2:rgba(var(--accent-rgb),.22);

    --green:#2dd36f;
    --text-rgb:244,244,246;
    --muted-rgb:183,183,194;
    --bg-rgb:15,15,18;
    --card-rgb:23,23,28;
    --line-rgb:44,44,52;
    --accent-rgb:214,56,41;
    --text-on-accent:#ffffff;
    --shadow:0 12px 30px rgba(0,0,0,.35);
    --max:1400px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select{font:inherit}

body{
    background:
        radial-gradient(circle at top left, rgba(var(--accent-rgb),.16), transparent 30%),
        radial-gradient(circle at top right, rgba(var(--accent-rgb),.10), transparent 22%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

.container{
    width:min(calc(100% - 32px), var(--max));
    margin:0 auto;
}

.topbar{
    position:sticky;
    top:0;
    z-index:3000;
    backdrop-filter:blur(10px);
    background:rgba(var(--bg-rgb),.92);
    border-bottom:1px solid rgba(var(--text-rgb),.06);
}

.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 0;
    position:relative;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex-shrink:0;
}

.logo img{
    height:46px;
    width:auto;
    max-width:240px;
    object-fit:contain;
}

.logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.logo-title{
    font-weight:800;
    letter-spacing:.2px;
    font-size:1.08rem;
}

.logo-sub{
    color:var(--muted);
    font-size:.78rem;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 22px;
    border-radius:999px;
    font-weight:700;
    border:none;
    cursor:pointer;
    transition:.2s ease;
}

.btn-primary{
    background:linear-gradient(135deg,var(--accent),var(--accent3));
    color:#fff;
    box-shadow:0 10px 24px rgba(var(--accent-rgb),.28);
}

.btn-primary:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg,var(--accent3),var(--accent));
}

.btn-secondary{
    background:rgba(var(--text-rgb),.05);
    color:#fff;
    border:1px solid rgba(var(--text-rgb),.08);
}

.btn-secondary:hover{
    background:rgba(var(--accent-rgb),.10);
    border-color:rgba(var(--accent-rgb),.24);
}

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

/* Desktop nav + full-width mega menu */
/* Desktop nav + full-width mega menu */
.desktop-nav{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    position:static;
}

.nav-item{
    position:static;
}

.nav-item-mega{
    position:static;
}

.nav-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    color:var(--muted);
    background:rgba(var(--text-rgb),.03);
    border:1px solid rgba(var(--text-rgb),.05);
    transition:.2s ease;
    font-size:.95rem;
    font-weight:700;
    position:relative;
    z-index:5002;
}

.nav-link:hover,
.nav-item.active > .nav-link,
.nav-item-mega:hover > .nav-link,
.nav-item-mega:focus-within > .nav-link{
    color:#fff;
    background:rgba(var(--accent-rgb),.10);
    border-color:rgba(var(--accent-rgb),.22);
}

.nav-caret{
    font-size:.72rem;
    opacity:.85;
}

/* full-width dropdown */
.mega-menu{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% - 6px);
    display:none;
    z-index:5000;
}

/* invisible bridge so hover doesn't break */
.mega-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-18px;
    height:18px;
}

/* keep menu open when hovering trigger OR menu */
.nav-item-mega:hover .mega-menu,
.nav-item-mega:focus-within .mega-menu,
.topbar-inner:hover .nav-item-mega:hover .mega-menu,
.mega-menu:hover{
    display:block;
}

.mega-menu-panel{
    width:100%;
    max-width:none;
    margin:0;
    background:rgba(var(--card-rgb),.98);
    border:1px solid rgba(var(--text-rgb),.08);
    border-radius:22px;
    box-shadow:0 24px 60px rgba(0,0,0,.48);
    padding:22px;
}

.mega-menu-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-bottom:14px;
    margin-bottom:18px;
    border-bottom:1px solid rgba(var(--text-rgb),.06);
}

.mega-menu-heading{
    font-size:1.04rem;
    font-weight:800;
    color:#fff;
}

.mega-menu-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border-radius:999px;
    background:rgba(var(--accent-rgb),.10);
    border:1px solid rgba(var(--accent-rgb),.22);
    color:#fff;
    font-size:.9rem;
    font-weight:800;
    white-space:nowrap;
    transition:.2s ease;
}

.mega-menu-all:hover{
    background:linear-gradient(135deg,var(--accent),var(--accent3));
    border-color:transparent;
}

.mega-menu-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px 22px;
}

.mega-menu-col{
    display:grid;
    gap:8px;
    align-content:start;
}

.mega-menu-link{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    color:#fff;
    font-size:.92rem;
    font-weight:700;
    background:rgba(var(--text-rgb),.025);
    border:1px solid transparent;
    transition:.2s ease;
    line-height:1.3;
}

.mega-menu-link:hover{
    background:rgba(var(--accent-rgb),.10);
    border-color:rgba(var(--accent-rgb),.22);
    transform:translateX(2px);
}


.mobile-menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:14px;
    border:1px solid rgba(var(--text-rgb),.08);
    background:rgba(var(--text-rgb),.04);
    color:#fff;
    cursor:pointer;
    flex-shrink:0;
    padding:0;
    appearance:none;
    -webkit-appearance:none;
}

.mobile-menu-toggle:hover{
    background:rgba(var(--accent-rgb),.10);
    border-color:rgba(var(--accent-rgb),.24);
}

.hamburger{
    width:20px;
    height:14px;
    position:relative;
    display:block;
}

.hamburger span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:#fff;
    border-radius:999px;
    transition:.25s ease;
    display:block;
}

.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:6px}
.hamburger span:nth-child(3){top:12px}
.topbar{
    position:sticky;
    top:0;
    z-index:3000;
    backdrop-filter:blur(10px);
    background:rgba(var(--bg-rgb),.92);
    border-bottom:1px solid rgba(var(--text-rgb),.06);
}
.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 0;
    position:relative;
}
body.menu-open{
    overflow:hidden;
	
}
body.menu-open{
    overflow:hidden;
}

.mobile-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:calc(100vh - 74px);
    z-index:4000;

    background:rgba(var(--bg-rgb),.98);
    backdrop-filter:blur(10px);

    display:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    padding:14px 16px 20px;
}

.mobile-menu.open{
    display:block;
}

.mobile-menu-grid{
    display:grid;
    gap:10px;
    padding-bottom:40px;
}

.mobile-nav-group{
    border-radius:16px;
    background:rgba(var(--text-rgb),.04);
    border:1px solid rgba(var(--text-rgb),.06);
    overflow:hidden;
}

.mobile-nav-toggle{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    background:transparent;
    color:#fff;
    border:none;
    font-weight:700;
    cursor:pointer;
}

.mobile-nav-children{
    display:none;
    padding:0 10px 10px;
}

.mobile-nav-group.open .mobile-nav-children{
    display:grid;
    gap:8px;
}

.mobile-nav-children a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(var(--text-rgb),.03);
    border:1px solid rgba(var(--text-rgb),.05);
    color:#fff;
    font-weight:700;
    font-size:.92rem;
}

.mobile-nav-children a:hover{
    background:rgba(var(--accent-rgb),.10);
    border-color:rgba(var(--accent-rgb),.24);
}

.mobile-cta{
    margin-top:10px;
}

/* Shared page styles */
.hero{
    padding:46px 0 28px;
}

.hero-wrap{
    display:grid;
    grid-template-columns:1.2fr .9fr;
    gap:28px;
    align-items:stretch;
}

.hero-main{
    background:
        linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.01)),
        linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.06));
    border:1px solid rgba(var(--accent-rgb),.20);
    border-radius:28px;
    padding:34px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}

.hero-main:before{
    content:"";
    position:absolute;
    right:-80px;
    top:-80px;
    width:240px;
    height:240px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(var(--accent-rgb),.24), transparent 68%);
}

.live-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(45,211,111,.10);
    color:var(--green);
    border:1px solid rgba(45,211,111,.25);
    border-radius:999px;
    padding:8px 14px;
    font-weight:700;
    font-size:.9rem;
    margin-bottom:18px;
}

.dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 6px rgba(45,211,111,.12);
}

.hero h1{
    margin:0 0 14px;
    font-size:clamp(2rem,4vw,3.7rem);
    line-height:1.04;
    letter-spacing:-.03em;
}

.hero p{
    margin:0 0 22px;
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.6;
    max-width:700px;
}

.hero-cta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:24px;
}

.hero-stats{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.stat{
    min-width:130px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(var(--text-rgb),.04);
    border:1px solid rgba(var(--text-rgb),.06);
}

.stat strong{
    display:block;
    font-size:1.12rem;
    margin-bottom:4px;
}

.stat span{
    color:var(--muted);
    font-size:.92rem;
}

.hero-side{
    display:grid;
    gap:18px;
}

.mini-panel{
    background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
    border:1px solid rgba(var(--text-rgb),.07);
    border-radius:24px;
    padding:22px;
    box-shadow:var(--shadow);
}

.mini-panel h3{
    margin:0 0 14px;
    font-size:1.05rem;
}

.activity-list{
    display:grid;
    gap:12px;
}

.activity-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:rgba(var(--text-rgb),.03);
    border:1px solid rgba(var(--text-rgb),.05);
    border-radius:14px;
    padding:12px 14px;
}

.activity-item .left{
    min-width:0;
}

.activity-item strong{
    display:block;
    font-size:.98rem;
}

.activity-item span{
    color:var(--muted);
    font-size:.88rem;
}

.badge-live{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent3));
    border-radius:999px;
    font-size:.8rem;
    padding:7px 10px;
    white-space:nowrap;
    font-weight:800;
}

.section{
    padding:14px 0 6px;
}

.section-header{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

.section-header h2{
    margin:0;
    font-size:1.55rem;
    letter-spacing:-.02em;
}

.section-header p{
    margin:6px 0 0;
    color:var(--muted);
}

.filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:24px;
}

.filter-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 16px;
    border-radius:999px;
    background:rgba(var(--text-rgb),.04);
    color:#fff;
    border:1px solid rgba(var(--text-rgb),.08);
    transition:.2s ease;
    font-weight:700;
    font-size:.95rem;
}

.filter-pill:hover,
.filter-pill.active{
    background:linear-gradient(135deg,var(--accent),var(--accent3));
    border-color:transparent;
    box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
}

.featured-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:10px;
}

.cams-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin:22px 0 10px;
}

.cam-card{
    background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
    border:1px solid rgba(var(--text-rgb),.07);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.2s ease;
}

.cam-card:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--accent-rgb),.26);
    box-shadow:0 16px 36px rgba(0,0,0,.42);
}

.cam-thumb{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:var(--card2);
}

.cam-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    transition:transform .35s ease;
}

.cam-card:hover .cam-thumb img{
    transform:scale(1.03);
}

.thumb-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.45));
}

.card-top{
    position:absolute;
    left:10px;
    top:10px;
    right:10px;
    display:flex;
    justify-content:space-between;
    gap:8px;
    z-index:2;
}

.viewer-pill,
.status-pill{
    border-radius:999px;
    padding:6px 9px;
    font-size:.76rem;
    font-weight:800;
    backdrop-filter:blur(6px);
}

.status-pill{
    color:#fff;
    background:rgba(var(--accent-rgb),.95);
    box-shadow:0 6px 16px rgba(var(--accent-rgb),.22);
}

.viewer-pill{
    color:#fff;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(var(--text-rgb),.16);
}

.card-bottom{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:2;
}

.tease{
    display:inline-block;
    padding:7px 9px;
    background:rgba(0,0,0,.48);
    border:1px solid rgba(var(--text-rgb),.14);
    border-radius:10px;
    color:#fff;
    font-size:.82rem;
    line-height:1.3;
}

.cam-body{
    padding:12px 14px 14px;
}

.cam-meta{
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.cam-name{
    font-size:1rem;
    font-weight:800;
    margin:0 0 4px;
}

.cam-tags{
    color:var(--muted);
    font-size:.86rem;
    line-height:1.35;
}

.price-tag{
    background:rgba(var(--accent-rgb),.10);
    border:1px solid rgba(var(--accent-rgb),.22);
    color:#fff;
    padding:7px 9px;
    border-radius:12px;
    font-size:.8rem;
    font-weight:700;
    white-space:nowrap;
}

.cam-actions{
    display:flex;
    gap:10px;
}

.cam-actions .btn{
    flex:1;
    min-height:42px;
    font-size:.92rem;
}

.promo-band{
    margin:34px 0 10px;
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.08)),
        linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
    border:1px solid rgba(var(--accent-rgb),.24);
    border-radius:26px;
    padding:28px;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.promo-band h3{
    margin:0 0 8px;
    font-size:1.45rem;
}

.promo-band p{
    margin:0;
    color:var(--muted);
    max-width:700px;
    line-height:1.6;
}

.ticker-wrap{
    margin:16px 0 28px;
    overflow:hidden;
    border:1px solid rgba(var(--text-rgb),.06);
    background:rgba(var(--text-rgb),.03);
    border-radius:16px;
}

.ticker{
    display:flex;
    gap:40px;
    white-space:nowrap;
    padding:14px 20px;
    color:#fff;
    animation:tickerMove 26s linear infinite;
    min-width:max-content;
}

.ticker span{
    color:#fff;
    font-weight:700;
}

.ticker em{
    color:var(--muted);
    font-style:normal;
    margin-left:8px;
    font-weight:500;
}

@keyframes tickerMove{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

.footer{
    padding:34px 0 110px;
    color:var(--muted);
}

.footer-box{
    border-top:1px solid rgba(var(--text-rgb),.06);
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.sticky-cta{
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:1200;
    display:none;
}

.sticky-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:rgba(16,16,21,.95);
    border:1px solid rgba(var(--accent-rgb),.22);
    border-radius:18px;
    padding:12px;
    backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.sticky-copy strong{
    display:block;
    font-size:.95rem;
}

.sticky-copy span{
    color:var(--muted);
    font-size:.82rem;
}

@media (max-width:1180px){
    .hero-wrap{grid-template-columns:1fr}
    .featured-grid{grid-template-columns:repeat(2,1fr)}
    .cams-grid{grid-template-columns:repeat(3,1fr)}
    .mega-menu-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

@media (max-width:980px){
    .desktop-nav,
    .desktop-cta{
        display:none;
    }

    .mega-menu{
        display:none !important;
    }

    .mobile-menu-toggle{
        display:inline-flex;
    }

    .topbar-inner{
        gap:12px;
    }

    .header-actions{
        margin-left:auto;
    }
}

@media (max-width:820px){
    .featured-grid{grid-template-columns:1fr}
    .cams-grid{grid-template-columns:repeat(2,1fr)}
    .hero-main{padding:24px}
    .mini-panel{padding:18px}
    .promo-band{padding:22px}
    .sticky-cta{display:block}
    .logo img{height:40px;max-width:190px}
    .logo-sub{display:none}
}

@media (max-width:560px){
    .cams-grid{grid-template-columns:1fr}
    .hero{padding-top:28px}
    .hero h1{font-size:2.1rem}
    .section-header h2{font-size:1.32rem}
    .hero-cta .btn{width:100%}
    .cam-actions{flex-direction:column}
    .promo-band .btn{width:100%}
    .topbar-inner{padding:10px 0}
    .logo img{height:36px;max-width:160px}
}


/* ===== index.php ===== */

    .hero.hero-compact{
        padding:20px 0 14px;
    }

    .hero.hero-compact .hero-main{
        padding:24px 26px;
    }

    .hero.hero-compact h1{
        margin:0 0 8px;
        font-size:clamp(1.9rem,3.4vw,2.9rem);
        line-height:1.05;
        letter-spacing:-.03em;
    }

    .hero.hero-compact p{
        margin:0 0 16px;
        max-width:760px;
        font-size:1rem;
        line-height:1.55;
    }

    .hero.hero-compact .hero-cta{
        margin-bottom:0;
    }

    .featured-grid-home{
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:16px;
        margin-top:6px;
    }

    .top-category-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:18px;
        margin:16px 0 8px;
    }

    .category-box{
        border-radius:20px;
        padding:18px;
        background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
        border:1px solid rgba(var(--text-rgb),.07);
        box-shadow:var(--shadow);
        transition:.2s ease;
    }

    .category-box:hover{
        transform:translateY(-3px);
        border-color:rgba(var(--accent-rgb),.24);
        background:rgba(var(--accent-rgb),.08);
    }

    .category-box h3{
        margin:0 0 6px;
        font-size:1.05rem;
    }

    .category-box p{
        margin:0 0 14px;
        color:var(--muted);
        font-size:.92rem;
        line-height:1.5;
    }

    .section-tight{
        padding-top:8px;
    }

    @media (max-width:1280px){
        .featured-grid-home{
            grid-template-columns:repeat(4,1fr);
        }
    }

    @media (max-width:1100px){
        .featured-grid-home{
            grid-template-columns:repeat(3,1fr);
        }

        .top-category-grid{
            grid-template-columns:repeat(2,1fr);
        }
    }

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

        .top-category-grid{
            grid-template-columns:1fr;
        }

        .hero.hero-compact .hero-main{
            padding:20px;
        }
    }

    @media (max-width:560px){
        .featured-grid-home{
            grid-template-columns:1fr;
        }

        .hero.hero-compact .hero-cta .btn{
            width:100%;
        }
    }


/* ===== categories.php ===== */

    .categories-page{
        padding:28px 0 26px;
    }

    .breadcrumb{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
        color:var(--muted);
        font-size:.92rem;
        margin-bottom:16px;
    }

    .breadcrumb span.sep{
        opacity:.55;
    }

    .categories-hero{
        padding:28px;
        border-radius:28px;
        background:
            linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.01)),
            linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.06));
        border:1px solid rgba(var(--accent-rgb),.20);
        box-shadow:var(--shadow);
        margin-bottom:22px;
    }

    .categories-hero h1{
        margin:0 0 10px;
        font-size:clamp(2rem,4vw,3rem);
        line-height:1.04;
        letter-spacing:-.03em;
    }

    .categories-hero p{
        margin:0;
        color:var(--muted);
        font-size:1.02rem;
        line-height:1.6;
        max-width:780px;
    }

    .category-groups{
        display:grid;
        gap:18px;
    }

    .category-group{
        border-radius:24px;
        background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
        border:1px solid rgba(var(--text-rgb),.07);
        box-shadow:var(--shadow);
        overflow:hidden;
    }

    .category-group-head{
        padding:22px 22px 16px;
        border-bottom:1px solid rgba(var(--text-rgb),.06);
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:16px;
        flex-wrap:wrap;
    }

    .category-group-head h2{
        margin:0 0 6px;
        font-size:1.4rem;
        letter-spacing:-.02em;
    }

    .category-group-head p{
        margin:0;
        color:var(--muted);
        line-height:1.55;
        max-width:760px;
    }

    .category-group-body{
        padding:18px 22px 22px;
    }

    .category-chip-grid{
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:12px;
    }

    .category-chip{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        min-height:54px;
        padding:0 16px;
        border-radius:16px;
        background:rgba(var(--text-rgb),.04);
        border:1px solid rgba(var(--text-rgb),.06);
        color:#fff;
        font-weight:700;
        transition:.2s ease;
    }

    .category-chip:hover{
        background:rgba(var(--accent-rgb),.10);
        border-color:rgba(var(--accent-rgb),.24);
        transform:translateY(-2px);
    }

    .category-chip span:last-child{
        opacity:.7;
    }

    @media (max-width:1100px){
        .category-chip-grid{
            grid-template-columns:repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width:820px){
        .category-chip-grid{
            grid-template-columns:repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width:560px){
        .categories-hero{
            padding:22px;
        }

        .category-group-head,
        .category-group-body{
            padding-left:16px;
            padding-right:16px;
        }

        .category-chip-grid{
            grid-template-columns:1fr;
        }
    }


/* ===== browse.php ===== */

    .browse-top{
        padding:22px 0 18px;
    }

    .breadcrumb{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
        color:var(--muted);
        font-size:.92rem;
        margin-bottom:16px;
    }

    .breadcrumb span.sep{
        opacity:.55;
    }

    .browse-hero{
        display:grid;
        grid-template-columns:1.1fr .9fr;
        gap:18px;
        align-items:stretch;
    }

    .panel{
        background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
        border:1px solid rgba(var(--text-rgb),.07);
        border-radius:24px;
        box-shadow:var(--shadow);
    }

    .hero-panel{
        padding:24px;
        background:
            linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.01)),
            linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05));
        border-color:rgba(var(--accent-rgb),.20);
    }

    .hero-panel h1{
        margin:0 0 10px;
        font-size:2rem;
        line-height:1.04;
        letter-spacing:-.03em;
    }

    .hero-panel p{
        margin:0 0 16px;
        color:var(--muted);
        line-height:1.6;
    }

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

    .hero-meta{
        padding:20px;
        display:grid;
        gap:12px;
    }

    .meta-box{
        padding:14px 16px;
        border-radius:18px;
        background:rgba(var(--text-rgb),.03);
        border:1px solid rgba(var(--text-rgb),.06);
    }

    .meta-box strong{
        display:block;
        margin-bottom:4px;
    }

    .meta-box span{
        color:var(--muted);
        font-size:.92rem;
    }

    .toolbar{
        margin-top:18px;
        padding:16px;
        display:grid;
        grid-template-columns:1fr auto auto;
        gap:12px;
        align-items:center;
    }

    .toolbar-left{
        color:var(--muted);
        font-size:.95rem;
        font-weight:700;
    }

    .chip-row{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .chip{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:40px;
        padding:0 14px;
        border-radius:999px;
        background:rgba(var(--text-rgb),.04);
        color:#fff;
        border:1px solid rgba(var(--text-rgb),.08);
        transition:.2s ease;
        font-weight:700;
        font-size:.9rem;
    }

    .chip:hover,
    .chip.active{
        background:linear-gradient(135deg,var(--accent),var(--accent3));
        border-color:transparent;
        box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
    }

    .sort-wrap select{
        min-height:44px;
        padding:0 16px;
        border-radius:14px;
        background:rgba(var(--text-rgb),.05);
        color:#fff;
        border:1px solid rgba(var(--text-rgb),.08);
        outline:none;
    }

    .sort-wrap select option{
        background:var(--card2);
        color:#fff;
    }

    .grid-wrap{
        margin-top:18px;
    }

    .cams-grid{
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:18px;
    }

    .pagination{
        margin-top:24px;
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        justify-content:center;
    }

    .page-link{
        min-width:46px;
        height:46px;
        padding:0 16px;
        border-radius:14px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:rgba(var(--text-rgb),.04);
        border:1px solid rgba(var(--text-rgb),.08);
        color:#fff;
        font-weight:800;
        transition:.2s ease;
    }

    .page-link:hover,
    .page-link.active{
        background:linear-gradient(135deg,var(--accent),var(--accent3));
        border-color:transparent;
    }

    @media (max-width:1280px){
        .cams-grid{
            grid-template-columns:repeat(4,1fr);
        }
    }

    @media (max-width:1100px){
        .browse-hero{
            grid-template-columns:1fr;
        }

        .cams-grid{
            grid-template-columns:repeat(3,1fr);
        }
    }

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

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

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

        .hero-actions .btn{
            width:100%;
        }
    }


/* ===== category.php ===== */

.pagination-wrap{
    margin-top:22px;
}

.pagination{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:center;
}

.page-link,
.page-dots{
    min-width:44px;
    min-height:44px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    font-weight:700;
    font-size:.95rem;
}

.page-link{
    background:rgba(var(--text-rgb),.04);
    border:1px solid rgba(var(--text-rgb),.08);
    color:#fff;
    transition:.2s ease;
}

.page-link:hover{
    background:rgba(var(--accent-rgb),.10);
    border-color:rgba(var(--accent-rgb),.24);
}

.page-link.active{
    background:linear-gradient(135deg,var(--accent),var(--accent3));
    border-color:transparent;
    box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
}

.page-dots{
    color:var(--muted);
}
    .category-top{
        padding:20px 0 18px;
    }

    .breadcrumb{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
        color:var(--muted);
        font-size:.92rem;
        margin-bottom:16px;
    }

    .breadcrumb span.sep{
        opacity:.55;
    }

    .category-layout{
        display:grid;
        gap:18px;
    }

    .panel{
        background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
        border:1px solid rgba(var(--text-rgb),.07);
        border-radius:24px;
        box-shadow:var(--shadow);
    }

    .category-hero{
        padding:22px 22px 18px;
        background:
            linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.01)),
            linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05));
        border-color:rgba(var(--accent-rgb),.20);
    }

    .category-hero-head{
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:14px;
        flex-wrap:wrap;
        margin-bottom:14px;
    }

    .category-hero h1{
        margin:0 0 6px;
        font-size:clamp(1.9rem, 3vw, 2.6rem);
        line-height:1.02;
        letter-spacing:-.03em;
    }

    .category-live-count{
        color:var(--muted);
        font-size:.95rem;
    }

    .category-hero-cta{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        margin-top:14px;
    }

    .top-cams-grid{
        display:grid;
        grid-template-columns:1.2fr 1fr 1fr;
        gap:18px;
    }

    .featured-large{
        min-height:100%;
    }

    .featured-large .cam-thumb{
        aspect-ratio:16 / 9;
    }

    .featured-large .cam-body{
        padding:18px;
    }

    .featured-large .cam-name{
        font-size:1.15rem;
    }

    .sidebar-section{
        padding:18px;
    }

    .sidebar-section h3{
        margin:0 0 12px;
        font-size:1rem;
    }

    .quick-links{
        display:grid;
        gap:10px;
    }

    .quick-links a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 14px;
        border-radius:14px;
        background:rgba(var(--text-rgb),.03);
        border:1px solid rgba(var(--text-rgb),.05);
        color:#fff;
        font-weight:700;
        transition:.2s ease;
    }

    .quick-links a:hover{
        background:rgba(var(--accent-rgb),.10);
        border-color:rgba(var(--accent-rgb),.24);
    }

    .quick-links small{
        color:var(--muted);
        font-weight:500;
        font-size:.82rem;
    }

    .chip-row{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .chip{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:40px;
        padding:0 14px;
        border-radius:999px;
        background:rgba(var(--text-rgb),.04);
        color:#fff;
        border:1px solid rgba(var(--text-rgb),.08);
        transition:.2s ease;
        font-weight:700;
        font-size:.9rem;
    }

    .chip:hover,
    .chip.active{
        background:linear-gradient(135deg,var(--accent),var(--accent3));
        border-color:transparent;
        box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
    }

    .section-panel{
        padding:18px;
    }

    .section-header{
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:14px;
        margin-bottom:16px;
        flex-wrap:wrap;
    }

    .section-header h2{
        margin:0;
        font-size:1.4rem;
        letter-spacing:-.02em;
    }

    .section-header p{
        margin:6px 0 0;
        color:var(--muted);
    }

.cams-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
}

    .subnav-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:14px;
    }

    .subnav-card{
        padding:18px;
        border-radius:20px;
        background:rgba(var(--text-rgb),.04);
        border:1px solid rgba(var(--text-rgb),.06);
        transition:.2s ease;
    }

    .subnav-card:hover{
        transform:translateY(-3px);
        border-color:rgba(var(--accent-rgb),.24);
        background:rgba(var(--accent-rgb),.08);
    }

    .subnav-card strong{
        display:block;
        margin-bottom:6px;
        font-size:1rem;
    }

    .subnav-card span{
        color:var(--muted);
        font-size:.92rem;
        line-height:1.45;
    }

    .seo-block{
        color:var(--muted);
        line-height:1.7;
        font-size:.98rem;
    }

    .empty-state{
        padding:18px;
        border-radius:18px;
        background:rgba(var(--text-rgb),.03);
        border:1px solid rgba(var(--text-rgb),.06);
        color:var(--muted);
    }

    @media (max-width:1280px){
        .top-cams-grid{
            grid-template-columns:1fr 1fr;
        }

        .featured-large{
            grid-column:1 / -1;
        }

        .cams-grid{
            grid-template-columns:repeat(2,1fr);
        }
    }

    @media (max-width:820px){
        .top-cams-grid,
        .cams-grid,
        .subnav-grid{
            grid-template-columns:1fr;
        }
    }

    @media (max-width:560px){
        .category-hero-cta .btn{
            width:100%;
        }
    }


/* ===== gender.php ===== */

    .category-top{
        padding:20px 0 18px;
    }

    .breadcrumb{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
        color:var(--muted);
        font-size:.92rem;
        margin-bottom:16px;
    }

    .breadcrumb span.sep{
        opacity:.55;
    }

    .category-layout{
        display:grid;
        gap:18px;
    }

    .panel{
        background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
        border:1px solid rgba(var(--text-rgb),.07);
        border-radius:24px;
        box-shadow:var(--shadow);
    }

    .category-hero{
        padding:22px 22px 18px;
        background:
            linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.01)),
            linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05));
        border-color:rgba(var(--accent-rgb),.20);
    }

    .category-hero-head{
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:14px;
        flex-wrap:wrap;
        margin-bottom:14px;
    }

    .category-hero h1{
        margin:0 0 6px;
        font-size:clamp(1.9rem, 3vw, 2.6rem);
        line-height:1.02;
        letter-spacing:-.03em;
    }

    .seo-intro{
        margin:0 0 10px;
        color:var(--muted);
        line-height:1.6;
        font-size:1rem;
        max-width:950px;
    }

    .category-live-count{
        color:var(--muted);
        font-size:.95rem;
    }

    .category-hero-cta{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        margin-top:14px;
    }

    .sidebar-section{
        padding:18px;
    }

    .sidebar-section h3{
        margin:0 0 12px;
        font-size:1rem;
    }

    .chip-row{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .chip{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:40px;
        padding:0 14px;
        border-radius:999px;
        background:rgba(var(--text-rgb),.04);
        color:#fff;
        border:1px solid rgba(var(--text-rgb),.08);
        transition:.2s ease;
        font-weight:700;
        font-size:.9rem;
    }

    .chip:hover,
    .chip.active{
        background:linear-gradient(135deg,var(--accent),var(--accent3));
        border-color:transparent;
        box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
    }

    .section-panel{
        padding:18px;
    }

    .section-header{
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:14px;
        margin-bottom:16px;
        flex-wrap:wrap;
    }

    .section-header h2{
        margin:0;
        font-size:1.4rem;
        letter-spacing:-.02em;
    }

    .section-header p{
        margin:6px 0 0;
        color:var(--muted);
    }

    .cams-grid{
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:18px;
    }

    .subnav-grid{
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:14px;
    }

    .subnav-card{
        padding:18px;
        border-radius:20px;
        background:rgba(var(--text-rgb),.04);
        border:1px solid rgba(var(--text-rgb),.06);
        transition:.2s ease;
    }

    .subnav-card:hover{
        transform:translateY(-3px);
        border-color:rgba(var(--accent-rgb),.24);
        background:rgba(var(--accent-rgb),.08);
    }

    .subnav-card strong{
        display:block;
        margin-bottom:6px;
        font-size:1rem;
    }

    .subnav-card span{
        color:var(--muted);
        font-size:.92rem;
        line-height:1.45;
    }

    .seo-block{
        color:var(--muted);
        line-height:1.7;
        font-size:.98rem;
    }

    .empty-state{
        padding:18px;
        border-radius:18px;
        background:rgba(var(--text-rgb),.03);
        border:1px solid rgba(var(--text-rgb),.06);
        color:var(--muted);
    }

    .pagination-wrap{
        margin-top:22px;
    }

    .pagination{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        align-items:center;
        justify-content:center;
    }

    .page-link,
    .page-dots{
        min-width:44px;
        min-height:44px;
        padding:0 14px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:14px;
        font-weight:700;
        font-size:.95rem;
    }

    .page-link{
        background:rgba(var(--text-rgb),.04);
        border:1px solid rgba(var(--text-rgb),.08);
        color:#fff;
        transition:.2s ease;
    }

    .page-link:hover{
        background:rgba(var(--accent-rgb),.10);
        border-color:rgba(var(--accent-rgb),.24);
    }

    .page-link.active{
        background:linear-gradient(135deg,var(--accent),var(--accent3));
        border-color:transparent;
        box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
    }

    .page-dots{
        color:var(--muted);
    }

    @media (max-width:1280px){
        .cams-grid{
            grid-template-columns:repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width:980px){
        .cams-grid,
        .subnav-grid{
            grid-template-columns:repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width:560px){
        .cams-grid,
        .subnav-grid{
            grid-template-columns:1fr;
        }

        .category-hero-cta .btn{
            width:100%;
        }
    }


/* ===== room.php ===== */

.offline-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    min-height:420px;
    background:
        linear-gradient(180deg, rgba(var(--text-rgb),.02), rgba(var(--text-rgb),.01)),
        linear-gradient(135deg, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),.03));
}

.offline-message{
    max-width:640px;
    text-align:center;
}

.offline-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(var(--text-rgb),.06);
    border:1px solid rgba(var(--text-rgb),.10);
    color:#fff;
    font-size:.82rem;
    font-weight:800;
    margin-bottom:16px;
}

.offline-message h2{
    margin:0 0 10px;
    font-size:1.5rem;
    line-height:1.15;
    letter-spacing:-.02em;
}

.offline-message p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.offline-actions{
    margin-top:20px;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}
    .cam-page{
        padding:20px 0 26px;
    }

    .breadcrumb{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
        color:var(--muted);
        font-size:.92rem;
        margin-bottom:16px;
    }

    .breadcrumb span.sep{
        opacity:.55;
    }

    .cam-layout{
        display:grid;
        grid-template-columns:minmax(0, 1.45fr) 340px;
        gap:18px;
        align-items:start;
    }

    .panel{
        background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
        border:1px solid rgba(var(--text-rgb),.07);
        border-radius:24px;
        box-shadow:var(--shadow);
    }

    .player-panel{
        overflow:hidden;
    }

    .player-head{
        padding:18px 18px 0;
    }

    .live-row{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        flex-wrap:wrap;
        margin-bottom:12px;
    }

    .room-title{
        margin:0;
        font-size:1.8rem;
        line-height:1.05;
        letter-spacing:-.03em;
    }

    .room-sub{
        margin:6px 0 0;
        color:var(--muted);
        font-size:.97rem;
    }

    .status-pill,
    .viewer-pill{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:999px;
        padding:7px 10px;
        font-size:.8rem;
        font-weight:800;
        white-space:nowrap;
    }

    .status-pill{
        color:#fff;
        background:rgba(var(--accent-rgb),.95);
        box-shadow:0 6px 16px rgba(var(--accent-rgb),.22);
    }

    .viewer-pill{
        color:#fff;
        background:rgba(var(--text-rgb),.06);
        border:1px solid rgba(var(--text-rgb),.10);
    }

    .iframe-wrap{
        position:relative;
        width:100%;
        aspect-ratio:15.8 / 9;
        background:var(--bg);
        border-top:1px solid rgba(var(--text-rgb),.06);
        border-bottom:1px solid rgba(var(--text-rgb),.06);
    }

    .iframe-wrap iframe{
        position:absolute;
        right:-1px;
        inset:0;
        width:100%;
        height:100%;
        border:0;
        display:block;
        background:#000;
    }

    .player-actions{
        padding:16px 18px 18px;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }

    .sidebar{
        display:grid;
        gap:16px;
        position:sticky;
        top:92px;
    }

    .sidebar-section{
        padding:18px;
    }

    .sidebar-section h3{
        margin:0 0 12px;
        font-size:1rem;
    }

    .quick-list{
        display:grid;
        gap:10px;
    }

    .quick-item{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 14px;
        border-radius:14px;
        background:rgba(var(--text-rgb),.03);
        border:1px solid rgba(var(--text-rgb),.05);
        color:#fff;
        font-weight:700;
        transition:.2s ease;
    }

    .quick-item:hover{
        background:rgba(var(--accent-rgb),.10);
        border-color:rgba(var(--accent-rgb),.24);
    }

    .quick-item small{
        color:var(--muted);
        display:block;
        margin-top:2px;
        font-size:.82rem;
        font-weight:500;
    }

    .chip-row{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .chip{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:40px;
        padding:0 14px;
        border-radius:999px;
        background:rgba(var(--text-rgb),.04);
        color:#fff;
        border:1px solid rgba(var(--text-rgb),.08);
        transition:.2s ease;
        font-weight:700;
        font-size:.9rem;
    }

    .chip:hover,
    .chip.active{
        background:linear-gradient(135deg,var(--accent),var(--accent3));
        border-color:transparent;
        box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
    }

    .section{
        padding:18px 0 6px;
    }

    .section-header{
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:14px;
        margin-bottom:16px;
        flex-wrap:wrap;
    }

    .section-header h2{
        margin:0;
        font-size:1.35rem;
        letter-spacing:-.02em;
    }

    .section-header p{
        margin:6px 0 0;
        color:var(--muted);
    }

    .related-grid{
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:18px;
    }

    .cam-card{
        background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
        border:1px solid rgba(var(--text-rgb),.07);
        border-radius:18px;
        overflow:hidden;
        box-shadow:var(--shadow);
        transition:.2s ease;
    }

    .cam-card:hover{
        transform:translateY(-4px);
        border-color:rgba(var(--accent-rgb),.26);
        box-shadow:0 16px 36px rgba(0,0,0,.42);
    }

    .cam-thumb{
        position:relative;
        width:100%;
        aspect-ratio:16 / 9;
        overflow:hidden;
        background:var(--card2);
    }

    .cam-thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
        display:block;
        transition:transform .35s ease;
    }

    .cam-card:hover .cam-thumb img{
        transform:scale(1.03);
    }

    .thumb-overlay{
        position:absolute;
        inset:0;
        background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.45));
    }

    .card-top{
        position:absolute;
        left:10px;
        top:10px;
        right:10px;
        display:flex;
        justify-content:space-between;
        gap:8px;
        z-index:2;
    }

    .card-bottom{
        position:absolute;
        left:10px;
        right:10px;
        bottom:10px;
        z-index:2;
    }

    .tease{
        display:inline-block;
        padding:7px 9px;
        background:rgba(0,0,0,.48);
        border:1px solid rgba(var(--text-rgb),.14);
        border-radius:10px;
        color:#fff;
        font-size:.82rem;
        line-height:1.3;
    }

    .cam-body{
        padding:12px 14px 14px;
    }

    .cam-meta{
        display:flex;
        align-items:start;
        justify-content:space-between;
        gap:12px;
        margin-bottom:12px;
    }

    .cam-name{
        font-size:1rem;
        font-weight:800;
        margin:0 0 4px;
    }

    .cam-tags{
        color:var(--muted);
        font-size:.86rem;
        line-height:1.35;
    }

    .price-tag{
        background:rgba(var(--accent-rgb),.10);
        border:1px solid rgba(var(--accent-rgb),.22);
        color:#fff;
        padding:7px 9px;
        border-radius:12px;
        font-size:.8rem;
        font-weight:700;
        white-space:nowrap;
    }

    .cam-actions{
        display:flex;
        gap:10px;
    }

    .cam-actions .btn{
        flex:1;
        min-height:42px;
        font-size:.92rem;
    }

    .empty-state{
        padding:18px;
        border-radius:18px;
        background:rgba(var(--text-rgb),.03);
        border:1px solid rgba(var(--text-rgb),.06);
        color:var(--muted);
        grid-column:1 / -1;
    }

    @media (max-width:1180px){
        .cam-layout{
            grid-template-columns:1fr;
        }

        .sidebar{
            position:static;
        }

        .related-grid{
            grid-template-columns:repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width:820px){
        .related-grid{
            grid-template-columns:repeat(2, minmax(0, 1fr));
        }

        .player-head{
            padding:16px 16px 0;
        }

        .player-actions{
            padding:14px 16px 16px;
        }
    }

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

        .player-actions .btn{
            width:100%;
        }

        .room-title{
            font-size:1.45rem;
        }
    }


/* ===== xml-cache/category.php ===== */

    .category-top{
        padding:20px 0 18px;
    }

    .breadcrumb{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
        color:var(--muted);
        font-size:.92rem;
        margin-bottom:16px;
    }

    .breadcrumb span.sep{
        opacity:.55;
    }

    .category-layout{
        display:grid;
        gap:18px;
    }

    .panel{
        background:linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.015));
        border:1px solid rgba(var(--text-rgb),.07);
        border-radius:24px;
        box-shadow:var(--shadow);
    }

    .category-hero{
        padding:22px 22px 18px;
        background:
            linear-gradient(180deg, rgba(var(--text-rgb),.03), rgba(var(--text-rgb),.01)),
            linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05));
        border-color:rgba(var(--accent-rgb),.20);
    }

    .category-hero-head{
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:14px;
        flex-wrap:wrap;
        margin-bottom:14px;
    }

    .category-hero h1{
        margin:0 0 6px;
        font-size:clamp(1.9rem, 3vw, 2.6rem);
        line-height:1.02;
        letter-spacing:-.03em;
    }

    .category-live-count{
        color:var(--muted);
        font-size:.95rem;
    }

    .category-hero-cta{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        margin-top:14px;
    }

    .top-cams-grid{
        display:grid;
        grid-template-columns:1.2fr 1fr 1fr;
        gap:18px;
    }

    .featured-large{
        min-height:100%;
    }

    .featured-large .cam-thumb{
        aspect-ratio:16 / 9;
    }

    .featured-large .cam-body{
        padding:18px;
    }

    .featured-large .cam-name{
        font-size:1.15rem;
    }

    .sidebar-section{
        padding:18px;
    }

    .sidebar-section h3{
        margin:0 0 12px;
        font-size:1rem;
    }

    .quick-links{
        display:grid;
        gap:10px;
    }

    .quick-links a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 14px;
        border-radius:14px;
        background:rgba(var(--text-rgb),.03);
        border:1px solid rgba(var(--text-rgb),.05);
        color:#fff;
        font-weight:700;
        transition:.2s ease;
    }

    .quick-links a:hover{
        background:rgba(var(--accent-rgb),.10);
        border-color:rgba(var(--accent-rgb),.24);
    }

    .quick-links small{
        color:var(--muted);
        font-weight:500;
        font-size:.82rem;
    }

    .chip-row{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .chip{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:40px;
        padding:0 14px;
        border-radius:999px;
        background:rgba(var(--text-rgb),.04);
        color:#fff;
        border:1px solid rgba(var(--text-rgb),.08);
        transition:.2s ease;
        font-weight:700;
        font-size:.9rem;
    }

    .chip:hover,
    .chip.active{
        background:linear-gradient(135deg,var(--accent),var(--accent3));
        border-color:transparent;
        box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
    }

    .section-panel{
        padding:18px;
    }

    .section-header{
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:14px;
        margin-bottom:16px;
        flex-wrap:wrap;
    }

    .section-header h2{
        margin:0;
        font-size:1.4rem;
        letter-spacing:-.02em;
    }

    .section-header p{
        margin:6px 0 0;
        color:var(--muted);
    }

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

    .subnav-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:14px;
    }

    .subnav-card{
        padding:18px;
        border-radius:20px;
        background:rgba(var(--text-rgb),.04);
        border:1px solid rgba(var(--text-rgb),.06);
        transition:.2s ease;
    }

    .subnav-card:hover{
        transform:translateY(-3px);
        border-color:rgba(var(--accent-rgb),.24);
        background:rgba(var(--accent-rgb),.08);
    }

    .subnav-card strong{
        display:block;
        margin-bottom:6px;
        font-size:1rem;
    }

    .subnav-card span{
        color:var(--muted);
        font-size:.92rem;
        line-height:1.45;
    }

    .seo-block{
        color:var(--muted);
        line-height:1.7;
        font-size:.98rem;
    }

    .empty-state{
        padding:18px;
        border-radius:18px;
        background:rgba(var(--text-rgb),.03);
        border:1px solid rgba(var(--text-rgb),.06);
        color:var(--muted);
    }

    @media (max-width:1280px){
        .top-cams-grid{
            grid-template-columns:1fr 1fr;
        }

        .featured-large{
            grid-column:1 / -1;
        }

        .cams-grid{
            grid-template-columns:repeat(2,1fr);
        }
    }

    @media (max-width:820px){
        .top-cams-grid,
        .cams-grid,
        .subnav-grid{
            grid-template-columns:1fr;
        }
    }

    @media (max-width:560px){
        .category-hero-cta .btn{
            width:100%;
        }
    }


/* legacy xml-cache classes */
.notice-spaced{margin-top:20px}.pager-float-right{float:right}.pager-float-right-important{float:right!important}.clear-both{clear:both}.tag-link-small{font-size:12px}.cam-status-overlay-bg{width:100%;padding:10px;position:absolute;top:0;z-index:999;color:#000;background:#000;opacity:.65;min-height:40px;max-height:75px;margin-top:calc(60% - 75px)}.cam-status-overlay-text{width:100%;padding:10px;position:absolute;top:0;z-index:999;color:#fff;min-height:40px;max-height:75px;margin-top:calc(60% - 75px)}.legacy-cam-card{border-radius:4px;border:1px solid #cfcfcf;background:#e3e3e3}.legacy-cam-img{width:100%;max-width:100%;height:auto;display:block}.legacy-cam-bottom{background:#e3e3e3}.legacy-cam-separator{border-top:1px solid #bbb}.legacy-cam-desc-wrap{height:100px;background:#e3e3e3;overflow:auto}.legacy-cam-desc{padding:5px;max-height:85px;overflow:hidden;font-size:12px}.legacy-cam-viewers{bottom:0;position:absolute;font-size:10px;padding:0 5px 5px;overflow:hidden;background:#e3e3e3;width:100%;box-sizing:border-box}.legacy-cam-icon{float:left;margin-right:5px;height:15px;width:13px}

/* Theme-variable enforcement: keeps admin color settings reflected across the live site. */
.topbar, .mobile-menu, .mega-menu-panel{background:rgba(var(--bg-rgb),.94);border-color:rgba(var(--line-rgb),.9);}
.panel,.category-group,.cam-card,.category-box,.toolbar,.hero-meta,.hero-panel,.category-hero,.browse-hero,.categories-hero{background:var(--card);border-color:var(--line);}
.category-chip,.chip,.nav-link,.mobile-nav-toggle,select,input,textarea{background:var(--card2);border-color:var(--line);color:var(--text);}
.nav-link:hover,.category-chip:hover,.chip:hover,.chip.active,.mobile-nav-toggle:hover{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.28);}
.btn-primary,.mega-menu-all:hover,.status-pill{background:linear-gradient(135deg,var(--accent),var(--accent3));color:var(--text-on-accent);}
.btn-secondary,.chip,.category-chip{background:rgba(var(--text-rgb),.04);border-color:rgba(var(--line-rgb),.95);color:var(--text);}
.btn-secondary:hover{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.28);}
.dot,.online-dot{background:var(--green);}
.live-pill{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.24);color:var(--text);}
.breadcrumb,.breadcrumb a,.logo-sub,.section-header p,.seo-intro,.cam-tags,.muted{color:var(--muted);}
body, h1, h2, h3, h4, .logo-title, .cam-name{color:var(--text);}


/* ===== Admin theme color enforcement =====
   These selectors intentionally use the admin theme variables directly so every
   color option on /admin/theme.php has an obvious effect on the public site. */
html,
body{
    background:var(--bg) !important;
    color:var(--text);
}
body{
    background:
        radial-gradient(circle at top left, rgba(var(--bg-glow-rgb),.18), transparent 30%),
        radial-gradient(circle at top right, rgba(var(--bg-glow-rgb),.12), transparent 24%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg3) 100%) !important;
}
.topbar,
.mobile-menu{
    background:linear-gradient(180deg, rgba(var(--hero-start-rgb),.98), rgba(var(--section-rgb),.96)) !important;
    border-color:var(--line) !important;
}
.hero-main,
.categories-hero,
.browse-hero .hero-panel,
.category-hero,
.offline-wrap{
    background:
        linear-gradient(180deg, rgba(var(--text-rgb),.025), rgba(var(--text-rgb),.008)),
        linear-gradient(135deg, rgba(var(--hero-start-rgb),.96), rgba(var(--section-rgb),.92)) !important;
    border-color:var(--line) !important;
}
.hero-main:before{
    background:radial-gradient(circle, rgba(var(--accent-rgb),.24), transparent 68%) !important;
}
.footer,
.footer-box,
.mobile-menu,
.sidebar-section,
.section-panel,
.panel,
.toolbar,
.hero-meta,
.mini-panel,
.sticky-cta,
.offline-message{
    background:var(--bg3) !important;
    border-color:var(--line) !important;
}
.cam-card,
.category-box,
.category-group,
.mega-menu-panel,
.stat,
.activity-item,
.meta-box,
.subnav-card,
.offline-badge,
.legacy-cam-card,
.legacy-cam-bottom,
.legacy-cam-desc-wrap,
.legacy-cam-viewers{
    background:var(--card) !important;
    border-color:var(--line) !important;
}
.cam-card:hover,
.category-chip,
.chip,
.nav-link,
.mobile-nav-toggle,
.quick-links a,
.filter-pill,
.page-link,
.page-dots,
input,
select,
textarea,
.cam-thumb,
.legacy-cam-img{
    background:var(--card2) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}
.category-chip:hover,
.chip:hover,
.chip.active,
.nav-link:hover,
.nav-item.active > .nav-link,
.nav-item-mega:hover > .nav-link,
.nav-item-mega:focus-within > .nav-link,
.mobile-nav-toggle:hover,
.quick-links a:hover,
.filter-pill:hover,
.filter-pill.active,
.page-link:hover,
.page-link.active,
.subnav-card:hover,
.mega-menu-link:hover{
    background:linear-gradient(135deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.10)) !important;
    border-color:var(--accent) !important;
}
.btn-primary,
.badge-live,
.status-pill,
.price-tag,
.page-link.active,
.filter-pill.active,
.chip.active,
.mega-menu-all:hover,
.cam-actions .btn:first-child{
    background:linear-gradient(135deg,var(--accent),var(--accent3)) !important;
    border-color:transparent !important;
    color:var(--text-on-accent) !important;
}
.btn-primary:hover{
    background:linear-gradient(135deg,var(--accent2),var(--accent)) !important;
}
.btn-secondary,
.mega-menu-all,
.mobile-cta .btn-secondary{
    background:var(--card2) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}
.btn-secondary:hover{
    background:rgba(var(--accent-rgb),.14) !important;
    border-color:var(--accent) !important;
}
.live-pill{
    background:rgba(var(--accent-rgb),.10) !important;
    border-color:rgba(var(--accent-rgb),.32) !important;
    color:var(--text) !important;
}
.dot,
.online-dot,
.preview-online{
    background:var(--green) !important;
    box-shadow:0 0 0 6px rgba(var(--success-rgb),.12);
}
hr,
.topbar,
.mega-menu-panel,
.category-group-head,
.cam-card,
.panel,
.mini-panel,
.footer-box,
.sticky-cta,
.stat,
.activity-item,
.meta-box,
.sidebar-section,
.section-panel,
.subnav-card,
.category-chip,
.chip,
.filter-pill,
.quick-links a,
.page-link,
.page-dots,
input,
select,
textarea{
    border-color:var(--line) !important;
}
body,
h1,h2,h3,h4,h5,h6,
.logo-title,
.cam-name,
.mega-menu-heading,
.category-chip,
.quick-links a,
.stat strong,
.activity-item strong,
.meta-box strong,
.sidebar-section h3,
.section-header h2,
.subnav-card strong{
    color:var(--text) !important;
}
p,
.logo-sub,
.breadcrumb,
.breadcrumb a,
.section-header p,
.hero p,
.categories-hero p,
.category-live-count,
.cam-meta,
.cam-tags,
.tease,
.muted,
.subnav-card span,
.quick-links small,
.stat span,
.activity-item span,
.meta-box span,
.offline-message p,
.footer{
    color:var(--muted) !important;
}


/* ===== Final public-site theme fixes =====
   Keeps each admin theme option mapped to the correct live-site area. */

/* Header/menu has its own colors and no longer shares hero/page variables. */
.topbar,
.mobile-menu,
.mega-menu-panel{
    background:
        linear-gradient(180deg, var(--header-gradient-start, #17171b), var(--header-gradient-end, #09090c)),
        var(--header-bg, #111116) !important;
    border-color:var(--line) !important;
}

/* Header menu links still use card/line/accent settings, but the bar itself uses header-only settings. */
.topbar .nav-link,
.topbar .mobile-nav-toggle{
    background:rgba(var(--text-rgb), .045) !important;
    border-color:rgba(var(--line-rgb), .9) !important;
}

/* Restore rounded heroes on homepage, gender, category, browse, and categories pages. */
.hero-main,
.categories-hero,
.browse-hero .hero-panel,
.category-hero,
.gender-hero,
.offline-wrap{
    border-radius:24px !important;
    overflow:hidden !important;
}

/* Make pseudo/background layers obey the rounded hero corners. */
.hero-main::before,
.category-hero::before,
.gender-hero::before,
.categories-hero::before,
.browse-hero .hero-panel::before{
    border-radius:inherit !important;
}

/* Keep cam listings at 4 columns on desktop. */
.cams-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:18px;
}

@media (max-width:1100px){
    .cams-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width:760px){
    .cams-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width:480px){
    .cams-grid{
        grid-template-columns:1fr !important;
    }
}

/* Ensure the Watch Live CTA always looks/acts like the primary model-page link. */
.cam-actions .btn,
.cam-actions .btn-primary{
    width:100%;
    text-align:center;
}

.cam-name-link{display:inline-block;color:var(--text)!important;text-decoration:none;}
.cam-name-link:hover{color:var(--accent3)!important;}

/* ===== Layout/theme correction patch =====
   Dark section color should not paint the wide cam-list wrappers.
   It is reserved for intentional dark panels like sidebar/footer/toolbars. */
.topbar,
.mobile-menu,
.mega-menu-panel{
    background:
        linear-gradient(180deg, var(--header-gradient-start, #17171b), var(--header-gradient-end, #09090c)),
        var(--header-bg, #111116) !important;
    border-color:var(--line) !important;
}

.category-layout,
.section-panel,
#gender-live,
#category-live,
#featured-gender,
#featured-category{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}

.section-panel{
    padding:0 !important;
}

.sidebar-section,
.footer,
.footer-box,
.toolbar,
.hero-meta,
.mini-panel,
.sticky-cta,
.offline-message{
    background:var(--bg3) !important;
    border-color:var(--line) !important;
}

.cam-card,
.category-box,
.category-group,
.stat,
.activity-item,
.meta-box,
.subnav-card,
.offline-badge,
.legacy-cam-card,
.legacy-cam-bottom,
.legacy-cam-desc-wrap,
.legacy-cam-viewers{
    background:var(--card) !important;
    border-color:var(--line) !important;
}

.category-top > .container,
.gender-top > .container{
    width:min(calc(100% - 32px), var(--max)) !important;
    max-width:var(--max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.category-layout{
    width:100% !important;
    max-width:100% !important;
}

.category-hero,
.gender-hero{
    padding:22px 22px 18px !important;
    border:1px solid var(--line) !important;
    border-radius:24px !important;
    overflow:hidden !important;
    box-shadow:var(--shadow) !important;
    background:
        linear-gradient(180deg, rgba(var(--text-rgb),.025), rgba(var(--text-rgb),.008)),
        linear-gradient(135deg, rgba(var(--hero-start-rgb),.96), rgba(var(--section-rgb),.92)) !important;
}

.category-hero-head{
    display:flex !important;
    align-items:end !important;
    justify-content:space-between !important;
    gap:14px !important;
    flex-wrap:wrap !important;
    margin-bottom:14px !important;
}

.cams-grid{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:18px !important;
}
@media (max-width:1100px){.cams-grid{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;}}
@media (max-width:760px){.cams-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}}
@media (max-width:480px){.cams-grid{grid-template-columns:1fr !important;}}

/* ===== Light-theme header/menu readability fix =====
   Header/nav text should follow the selected theme text colors, not the old white-only dark theme defaults.
   Menu pills now behave like category chips: card background + readable theme text. */
.topbar .logo-title,
.topbar .logo-sub,
.topbar .nav-link,
.topbar .mobile-nav-toggle,
.mobile-menu,
.mobile-menu a,
.mobile-nav-toggle,
.mega-menu-panel,
.mega-menu-heading,
.mega-menu-link,
.mega-menu-all{
    color:var(--text) !important;
}

.topbar .logo-sub,
.mega-menu-link span,
.mobile-nav-children a{
    color:var(--muted) !important;
}

.topbar .nav-link,
.topbar .mobile-nav-toggle,
.mobile-nav-toggle,
.mega-menu-all{
    background:var(--card2) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

.topbar .nav-link:hover,
.topbar .nav-item.active > .nav-link,
.topbar .nav-item-mega:hover > .nav-link,
.topbar .nav-item-mega:focus-within > .nav-link,
.topbar .mobile-nav-toggle:hover,
.mobile-nav-toggle:hover,
.mega-menu-link:hover,
.mega-menu-all:hover{
    background:linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.08)) !important;
    border-color:var(--accent) !important;
    color:var(--text) !important;
}

.header-cta-btn,
.topbar .btn-primary,
.topbar .btn-join,
.topbar .btn-watch-live{
    background:linear-gradient(135deg,var(--accent),var(--accent3)) !important;
    border-color:transparent !important;
    color:var(--text-on-accent) !important;
}


/* ===== Final menu chip + cam subject readability fix =====
   Keep top/header menu items visually consistent with .category-chip on every theme. */
.topbar .nav-link,
.topbar .mobile-menu-toggle,
.mobile-nav-toggle,
.mobile-menu a,
.mega-menu-link,
.mega-menu-all{
    background:rgba(var(--text-rgb),.04) !important;
    border:1px solid rgba(var(--line-rgb),.95) !important;
    color:var(--text) !important;
    border-radius:16px !important;
    box-shadow:none !important;
}

.topbar .nav-link:hover,
.topbar .nav-item.active > .nav-link,
.topbar .nav-item-mega:hover > .nav-link,
.topbar .nav-item-mega:focus-within > .nav-link,
.topbar .mobile-menu-toggle:hover,
.mobile-nav-toggle:hover,
.mobile-menu a:hover,
.mega-menu-link:hover,
.mega-menu-all:hover{
    background:rgba(var(--accent-rgb),.10) !important;
    border-color:rgba(var(--accent-rgb),.24) !important;
    color:var(--text) !important;
}

.mega-menu-link span,
.mobile-nav-children a,
.topbar .logo-sub{
    color:var(--muted) !important;
}

/* Room subject sits over thumbnails, so it needs dark-overlay contrast even on light themes. */
.tease,
.cam-card .tease,
.card-bottom .tease{
    background:rgba(0,0,0,.62) !important;
    border-color:rgba(255,255,255,.20) !important;
    color:#fff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.65) !important;
}

/* ===== Final shared badge readability fix =====
   Viewer pills, quick items, and ticker labels can appear outside model cards.
   Outside cards they should behave like readable category chips instead of
   assuming a dark thumbnail overlay behind them. */
.viewer-pill,
.quick-item,
.ticker span{
    background:rgba(var(--text-rgb),.04) !important;
    border:1px solid rgba(var(--line-rgb),.95) !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

.viewer-pill,
.quick-item{
    backdrop-filter:none;
}

.quick-item:hover,
.viewer-pill:hover{
    background:rgba(var(--accent-rgb),.10) !important;
    border-color:rgba(var(--accent-rgb),.24) !important;
    color:var(--text) !important;
}

.quick-item small,
.ticker em{
    color:var(--muted) !important;
}

.ticker-wrap{
    background:rgba(var(--text-rgb),.035) !important;
    border-color:rgba(var(--line-rgb),.95) !important;
}

.ticker{
    color:var(--text) !important;
}

/* Keep viewer pills inside actual model thumbnail cards styled as overlay badges. */
.cam-card .cam-thumb .viewer-pill,
.cam-card .card-top .viewer-pill{
    color:#fff !important;
    background:rgba(0,0,0,.45) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    backdrop-filter:blur(6px);
}

/* Final polish: ticker inner labels should not look cramped. */
.ticker span{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:4px 8px !important;
    border-radius:999px !important;
    line-height:1.25 !important;
}

/* Clean category link systems */
.browse-niches-home {
    margin-top: 22px;
}
.browse-niches-home h3 {
    margin: 0 0 12px;
}
.more-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.more-category-list li {
    margin: 0;
}
.more-category-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--chip-bg, var(--color-card2));
    border: 1px solid var(--chip-border, var(--color-line));
    color: var(--chip-text, var(--color-text));
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
}
.more-category-list a:hover {
    color: var(--chip-hover-text, #fff);
    background: var(--color-accent, #d63829);
    border-color: var(--color-accent, #d63829);
}
.more-category-list .all-categories-link a {
    background: var(--color-accent, #d63829);
    border-color: var(--color-accent, #d63829);
    color: #fff;
}

/* Popular category chips used on gender/category pages */
.popular-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.popular-categories .category-chip {
    display: inline-flex;
    align-items: center;
}

.popular-categories .all-categories-chip {
    font-weight: 800;
    border-style: dashed;
}

.popular-categories .all-categories-chip:hover {
    border-style: solid;
}

.filter-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 13px;
    border-radius:999px;
    background:var(--card2);
    color:var(--text);
    border:1px solid var(--line);
    font-weight:700;
    font-size:.92rem;
    text-decoration:none;
    transition:.2s ease;
}

.filter-chip:hover{
    background:linear-gradient(135deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.10));
    border-color:var(--accent);
}

.popular-categories{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.all-categories-chip{
    font-weight:800;
    border-style:dashed !important;
}