@font-face{font-family:'HelveticaGeo';src:url('../fonts/hn-geo-roman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'HelveticaGeoCaps';src:url('../fonts/hn-geo-caps.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
/* ============================================================
   FONTS — Helvetica Neue LT GEO (embedded woff2)
   Caps  = headings, buttons, navigation
   Roman = body copy
   ============================================================ */




/* ============================================================
   TOKENS
   ============================================================ */
:root{
    --bg:#16191F;
    --bg-bar:#1C2027;
    --surface:#1B1F25;
    --card:#21262F;
    --elevated:#272C34;

    --line:#2C313A;
    --line-2:#323844;
    --line-3:#3A414B;
    --line-4:#525A65;

    --text:#F4F5F2;
    --text-2:#E4E7EB;
    --text-3:#C9CED6;
    --text-4:#B9BFC8;
    --muted:#A5ABB4;
    --muted-2:#99A0A9;
    --dim:#787F89;
    --dim-2:#6F767F;

    --accent:#D8FF3E;
    --accent-soft:#EAFF8F;
    --accent-deep:#8FA82A;

    --purple:#8B5CF6;
    --purple-text:#C9B6FF;
    --green:#5BE49B;
    --green-text:#7BE8B3;
    --blue:#3B82F6;

    --gold:#E8B54D;
    --gold-soft:#F5CE7A;
    --pink:#EC4899;
    --pink-soft:#F472B6;

    --r-sm:11px;
    --r-md:16px;
    --r-lg:20px;
    --r-xl:24px;
    --pill:999px;

    --pad:48px;
    --shell:1760px;
    --header-h:66px;

    --live:#FF3B5C;
    --live-soft:#FF6B85;
    --live-dim:rgba(255,59,92,.16);

    --font-body:'HelveticaGeo','Helvetica Neue',system-ui,-apple-system,sans-serif;
    --font-display:'HelveticaGeoCaps','HelveticaGeo','Helvetica Neue',system-ui,sans-serif;
}

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

/* the hidden attribute must beat any display rule below */
[hidden]{display:none !important;}

html{-webkit-text-size-adjust:100%;}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    font-size:15px;
    line-height:1.45;
}

a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-soft);}
::selection{background:var(--accent);color:var(--bg);}

button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}
img{display:block;max-width:100%;}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

h1,h2,h3{margin:0;letter-spacing:-0.035em;font-weight:900;}

/* ------------------------------------------------------------
   Caps face: headings, buttons, navigation, labels
   ------------------------------------------------------------ */
h1,h2,h3,
button,
.nav a,
.utility__links a,
.drawer__nav a,
.footer__nav a,
.footer__mobile-nav a,
.logo b,
.link-btn,
.profile-btn,
.userchip__name,
.head__link,
.stories__title,
.cities__title,
.city,
.cities__more,
.tag,
.status,
.card__name b,
.post__cat,
.post__title,
.faq__q span,
.modal__title,
.sheet__head b,
.sheet__label,
.ad__t{
    font-family:var(--font-display);
}

.shell{max-width:var(--shell);margin:0 auto;}
.section{padding:0 var(--pad) 56px;}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes drawerIn{from{transform:translateX(-100%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utility{
    background:var(--bg-bar);
    border-bottom:1px solid var(--line);
    font-size:13px;
    color:var(--muted);
}
.utility__inner{
    max-width:var(--shell);margin:0 auto;
    height:44px;padding:0 var(--pad);
    display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.utility__links{display:flex;gap:24px;align-items:center;}
.utility__links a{color:var(--muted);}
.utility__links a:hover{color:var(--text-2);}
.utility__right{display:flex;gap:20px;align-items:center;}
.utility__phone{color:var(--text-3);}

.langpick{
    display:flex;gap:2px;align-items:center;
    background:var(--elevated);border:1px solid #353C46;
    border-radius:var(--pill);padding:3px;
}
.langpick button{
    padding:4px 12px;border-radius:var(--pill);
    font-size:12px;color:var(--muted);
    transition:color .15s;
}
.langpick button:hover{color:var(--text-2);}
.langpick button[aria-pressed="true"]{background:var(--accent);color:var(--bg);font-weight:700;}

/* ============================================================
   HEADER
   ============================================================ */
.header{
    position:sticky;top:0;z-index:40;
    background:rgba(22,25,31,.9);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
}
.header__inner{
    max-width:var(--shell);margin:0 auto;
    padding:22px var(--pad);
    display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.header__left{display:flex;align-items:center;gap:44px;}

.logo{display:flex;align-items:baseline;gap:6px;color:var(--text);}
.logo:hover{color:var(--text);}
.logo b{font-size:27px;font-weight:900;letter-spacing:-.03em;}
.logo i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;}

.nav{display:flex;gap:28px;font-size:15px;font-weight:600;}
.nav a{color:var(--text-4);}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);}

.header__right{display:flex;align-items:center;gap:14px;}
.header__auth{display:flex;align-items:center;gap:12px;}

.link-btn{font-size:15px;font-weight:600;color:var(--text-4);}
.link-btn:hover{color:var(--text);}
.link-btn--accent{font-weight:700;color:var(--accent);}

.icon-btn{
    position:relative;width:44px;height:44px;flex-shrink:0;
    border:1px solid var(--line-3);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;color:var(--text-2);
    transition:border-color .15s,color .15s;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);}
.icon-btn svg{width:19px;height:19px;}
.icon-btn__dot{
    position:absolute;top:-3px;right:-3px;
    min-width:19px;height:19px;padding:0 5px;
    background:var(--accent);color:var(--bg);
    border:2px solid var(--bg);border-radius:var(--pill);
    font-size:11px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
}

.userchip{
    display:flex;align-items:center;gap:10px;
    border:1px solid var(--line-3);border-radius:var(--pill);
    padding:5px 14px 5px 5px;
    transition:border-color .15s;
}
.userchip:hover{border-color:var(--line-4);}
.userchip__av{
    width:34px;height:34px;border-radius:50%;
    background:linear-gradient(140deg,var(--accent),var(--accent-deep));
    color:var(--bg);font-size:14px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
}
.userchip__name{font-size:14px;font-weight:700;color:var(--text-2);}

.burger{
    display:none;width:36px;height:36px;flex-shrink:0;
    border:1px solid var(--line-3);border-radius:50%;
    align-items:center;justify-content:center;
    font-size:16px;color:var(--text-3);
}

.profile-btn{
    display:none;align-items:center;gap:8px;
    border:none;border-radius:var(--pill);
    padding:4px 14px 4px 4px;
    font-size:13px;font-weight:700;color:var(--text-2);
}
.profile-btn:hover{color:var(--text);}
.profile-btn__av{
    width:28px;height:28px;flex-shrink:0;border-radius:50%;
    background:linear-gradient(140deg,var(--accent),var(--accent-deep));
    color:var(--bg);font-size:12px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;margin-bottom:24px;
}
.head h2{font-size:40px;}
.head p{margin:8px 0 0;font-size:15px;color:var(--muted);}
.head__link{font-size:15px;font-weight:600;color:var(--accent);white-space:nowrap;}

.arrows{display:flex;gap:8px;flex-shrink:0;}
.arrows button{
    width:40px;height:40px;
    border:1px solid var(--line-3);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);transition:.15s;
}
.arrows button:hover{border-color:var(--accent);color:var(--text);}

/* ============================================================
   LISTING CARDS
   ============================================================ */
/* VIP carousel — 6 visible on desktop, 2 on mobile */
.grid-vip{
    display:flex;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none;
}
.grid-vip::-webkit-scrollbar{display:none;}

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

.card{
    position:relative;display:block;
    border-radius:var(--r-lg);overflow:hidden;
    border:1px solid var(--line-2);
    color:var(--text);
    transition:border-color .2s,box-shadow .2s;
}
.card:hover{border-color:var(--line-4);color:var(--text);}

/* rank borders */
.card--gold{border-color:var(--gold);box-shadow:0 0 0 1px rgba(232,181,77,.25);}
.card--gold:hover{border-color:var(--gold-soft);box-shadow:0 0 0 1px rgba(232,181,77,.45);}
.card--pink{border-color:var(--pink);box-shadow:0 0 0 1px rgba(236,72,153,.22);}
.card--pink:hover{border-color:var(--pink-soft);box-shadow:0 0 0 1px rgba(236,72,153,.4);}

.card--vip{
    flex:0 0 calc((100% - 80px) / 6);
    height:auto;aspect-ratio:3/4;
    scroll-snap-align:start;
}
.card--vip .card__ph{font-size:11px;}
.card--vip .card__top{top:11px;left:11px;right:11px;}
.card--vip .status{height:22px;padding:0 9px;font-size:10px;}
.card--vip .play{width:48px;height:48px;font-size:16px;}
.card--vip .card__body{padding:48px 11px 12px;}
.card--vip .tag{height:22px;padding:0 9px;font-size:10px;}
.card--vip .card__name{margin-top:8px;}
.card--vip .card__name b{font-size:17px;}
.card--vip .verified{width:16px;height:16px;font-size:10px;}
.card--vip .card__loc{font-size:11px;}

.card--sm{height:340px;border-radius:18px;}

.card__ph{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;color:var(--dim-2);
}
.card--sm .card__ph{font-size:11px;}

.card__top{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:8px;}
.card--sm .card__top{top:11px;left:11px;right:11px;}

.status{
    display:inline-flex;align-items:center;gap:6px;
    height:26px;padding:0 11px;border-radius:var(--pill);
    background:rgba(16,19,24,.72);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-size:11px;font-weight:700;color:var(--text-2);white-space:nowrap;
}
.card--sm .status{height:22px;padding:0 9px;font-size:10px;}
.status i{width:6px;height:6px;border-radius:50%;background:#8B9199;display:inline-block;}
.status--live i{background:var(--green);}

.play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:60px;height:60px;border-radius:50%;
    background:rgba(16,19,24,.55);
    border:1.5px solid rgba(244,245,242,.85);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;color:var(--text);padding-left:2px;
}
.card--sm .play{width:48px;height:48px;font-size:16px;}

.card__body{
    position:absolute;left:0;right:0;bottom:0;
    padding:60px 14px 14px;
    background:linear-gradient(to top,rgba(12,14,18,.94) 42%,rgba(12,14,18,0));
}
.card--sm .card__body{padding:48px 11px 11px;}

.tags{display:flex;flex-wrap:wrap;gap:5px;}
.tag{
    display:inline-flex;align-items:center;
    height:26px;padding:0 11px;border-radius:var(--pill);
    font-size:11px;font-weight:800;white-space:nowrap;
}
.card--sm .tag{height:22px;padding:0 9px;font-size:10px;}
.tag--photo{background:rgba(139,92,246,.22);color:var(--purple-text);border:1px solid rgba(139,92,246,.6);}
.tag--new{background:rgba(91,228,155,.18);color:var(--green-text);border:1px solid rgba(91,228,155,.55);}
.tag--vip{background:var(--gold);color:#1A1503;border:1px solid var(--gold);}
.tag--top{background:var(--pink);color:#fff;border:1px solid var(--pink);}

.card__name{display:flex;align-items:center;gap:6px;margin-top:10px;}
.card--sm .card__name{margin-top:8px;}
.card__name b{font-size:22px;font-weight:900;letter-spacing:-.02em;}
.card--sm .card__name b{font-size:17px;}
.verified{
    width:19px;height:19px;flex-shrink:0;border-radius:50%;
    background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:900;
}
.card--sm .verified{width:16px;height:16px;font-size:10px;}

.card__loc{
    display:flex;align-items:center;gap:5px;margin-top:4px;
    font-size:13px;color:var(--text-3);
}
.card--sm .card__loc{font-size:11px;}

/* photo placeholder gradients */
.g1{background:linear-gradient(160deg,#2A303A,#1B1F25);}
.g2{background:linear-gradient(160deg,#343026,#201E22);}
.g3{background:linear-gradient(160deg,#262E28,#1D2320);}
.g4{background:linear-gradient(160deg,#33272F,#211D23);}
.g5{background:linear-gradient(160deg,#2B2A34,#1E1C24);}

/* ============================================================
   STORIES
   ============================================================ */
.stories__title{font-size:22px;font-weight:900;letter-spacing:-.025em;margin-bottom:18px;}
.stories__rail{
    display:flex;gap:26px;
    overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none;
}
.stories__rail::-webkit-scrollbar{display:none;}
.story{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    width:88px;flex-shrink:0;scroll-snap-align:start;color:var(--text-2);
}
.story:hover{color:var(--text);}
.story__ring{
    width:80px;height:80px;border-radius:50%;padding:3px;
    background:linear-gradient(140deg,var(--accent),var(--line-3));
}
.story__img{
    width:100%;height:100%;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;color:var(--dim);
}
.story__name{
    font-size:12px;font-weight:600;text-align:center;
    line-height:1.2;overflow-wrap:anywhere;
}

/* ============================================================
   SEARCH
   ============================================================ */
.search{
    background:var(--card);border:1px solid var(--line-2);
    border-radius:var(--r-lg);padding:22px;
}
.search__row{display:grid;grid-template-columns:1fr 200px;gap:10px;}
.search__field{
    display:flex;align-items:center;gap:12px;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:var(--pill);padding:15px 22px;
}
.search__field span{font-size:15px;color:var(--dim);}
.search__field input{
    flex:1;min-width:0;background:none;border:none;outline:none;
    font-family:inherit;font-size:16px;font-weight:500;color:var(--text);
}
.search__field input::placeholder{color:var(--muted-2);}
.search__go{
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);color:var(--bg);
    border-radius:var(--pill);font-size:16px;font-weight:800;
    transition:background .15s;
}
.search__go:hover{background:var(--accent-soft);}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.chip{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--elevated);border:1px solid var(--line-3);
    border-radius:var(--pill);padding:11px 18px;
    font-size:14px;font-weight:600;color:var(--text-2);
    transition:border-color .15s;
}
.chip:hover{border-color:var(--line-4);}
.chip small{font-size:10px;color:var(--muted-2);}
.chip i{
    width:13px;height:13px;border-radius:50%;
    border:1px solid var(--line-4);background:transparent;
    display:inline-block;flex-shrink:0;transition:.15s;
}
.chip[aria-pressed="true"]{border-color:var(--accent);}
.chip[aria-pressed="true"] i{border-color:var(--accent);background:var(--accent);}

.search__row{min-width:0;}
.search__field{min-width:0;}
.search__go{padding:15px 22px;white-space:nowrap;}

@media (max-width:760px){
    .search{padding:14px;border-radius:var(--r-md);}
    .search__row{grid-template-columns:1fr;gap:8px;}
    .search__field{padding:13px 18px;}
    .search__field input{font-size:15px;}
    .search__go{padding:14px;font-size:15px;}

    .chips{gap:8px;margin-top:12px;}
    .chip{padding:10px 14px;font-size:13px;}
    .chip__menu{
        position:fixed;left:14px;right:14px;
        top:auto;min-width:0;max-height:60vh;
    }
    .search__meta{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* ============================================================
   CITIES (sidebar)
   ============================================================ */
.cities{
    background:var(--card);border:1px solid var(--line-2);
    border-radius:var(--r-lg);padding:18px;margin-bottom:16px;
}
.cities__title{
    font-size:17px;font-weight:900;letter-spacing:-.02em;
    margin-bottom:14px;
}
.cities__list{display:flex;flex-direction:column;gap:2px;}
.city{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 12px;border-radius:var(--r-sm);
    font-size:14px;font-weight:600;color:var(--text-3);
    transition:background .15s,color .15s;
}
.city:hover{background:var(--elevated);color:var(--text);}
.city b{font-size:12px;font-weight:800;color:var(--dim);}
.city[aria-current="page"]{background:var(--accent);color:var(--bg);font-weight:800;}
.city[aria-current="page"] b{color:rgba(22,25,31,.6);}
.city[aria-current="page"]:hover{background:var(--accent-soft);color:var(--bg);}
.cities__more{
    display:block;width:100%;margin-top:10px;padding-top:12px;
    border-top:1px solid var(--line-2);
    font-size:13px;font-weight:700;color:var(--accent);text-align:left;
}
.cities--sheet{background:none;border:none;padding:0;margin:0;}
.cities--sheet .city{padding:13px 14px;font-size:15px;}

/* ============================================================
   PAGINATION
   ============================================================ */
.pager{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:28px;flex-wrap:wrap;
}
/* direct children only — the arrow <span> inside an edge link stays plain */
.pager > a,
.pager > span{
    min-width:42px;height:42px;padding:0 12px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line-2);border-radius:var(--r-sm);
    font-family:var(--font-display);
    font-size:14px;font-weight:700;color:var(--text-3);
    transition:border-color .15s,color .15s,background .15s;
}
.pager > a:hover{border-color:var(--line-4);color:var(--text);}
.pager > a[aria-current="page"]{
    background:var(--accent);border-color:var(--accent);
    color:var(--bg);font-weight:900;
}
.pager > a[aria-current="page"]:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--bg);}
.pager > .pager__gap{border-color:transparent;color:var(--dim);min-width:24px;padding:0;}
/* prev / next read as text, not as boxes */
.pager > .pager__edge{border:none;gap:7px;padding:0 14px;color:var(--muted);}
.pager > .pager__edge:hover{color:var(--text);}
.pager > .is-disabled,
.pager > [aria-disabled="true"]{opacity:.35;pointer-events:none;}

/* ============================================================
   STORY VIEWER
   ============================================================ */
.viewer{
    position:fixed;inset:0;z-index:3000;
    display:flex;align-items:center;justify-content:center;
    background:#0B0D11;
}
.viewer[hidden]{display:none;}

.viewer__stage{
    position:relative;
    width:min(430px,100vw);
    height:min(92vh,860px);
    max-height:100dvh;
    background:#0B0D11;
    border-radius:var(--r-lg);overflow:hidden;
}

/* the media layer fills the stage; JS injects .viewer__frame into it */
.viewer__media{position:absolute;inset:0;background:#0B0D11;}
.viewer__frame{
    width:100%;height:100%;
    object-fit:contain;display:block;background:#0B0D11;
}

.viewer__bars{
    position:absolute;top:12px;left:12px;right:12px;z-index:4;
    display:flex;gap:4px;
}
.viewer__bar{
    flex:1;height:3px;border-radius:var(--pill);
    background:rgba(244,245,242,.28);overflow:hidden;
}
.viewer__bar i{
    display:block;height:100%;width:0;
    background:var(--text);border-radius:var(--pill);
}
.viewer__bar--done i{width:100%;}
/* duration is set inline by the script, per frame */
.viewer__bar--live i{animation:storyFill var(--story-dur,5s) linear forwards;}
@keyframes storyFill{from{width:0}to{width:100%}}

.viewer__top{
    position:absolute;top:26px;left:0;right:0;z-index:4;
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;
    background:linear-gradient(to bottom,rgba(11,13,17,.8),transparent);
}
.viewer__av{
    width:34px;height:34px;flex-shrink:0;border-radius:50%;overflow:hidden;
    background:linear-gradient(140deg,var(--accent),var(--accent-deep));
    color:var(--bg);font-family:var(--font-display);
    font-size:13px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
}
.viewer__av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.viewer__meta{flex:1;min-width:0;}
.viewer__name{
    font-family:var(--font-display);
    font-size:14px;font-weight:800;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.viewer__time{font-size:11px;color:var(--text-3);margin-top:1px;}
.viewer__x{
    width:34px;height:34px;flex-shrink:0;border-radius:50%;
    background:rgba(16,19,24,.55);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;color:var(--text);
}

/* tap zones sit under the chrome but over the media */
.viewer__zones{position:absolute;inset:0;z-index:2;display:flex;}
.viewer__zones button{flex:1;height:100%;}
.viewer__zones button:first-child{flex:0 0 33%;}

.viewer__cta{
    position:absolute;left:0;right:0;bottom:0;z-index:4;
    padding:70px 16px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(11,13,17,.94) 40%,rgba(11,13,17,0));
    pointer-events:none;
}
.viewer__cta a{
    pointer-events:auto;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);color:var(--bg);
    border-radius:var(--pill);padding:14px;
    font-family:var(--font-display);
    font-size:15px;font-weight:900;
}
.viewer__cta a:hover,
.viewer__cta a:focus{background:var(--accent);color:var(--bg);}

/* desktop arrows live outside the stage */
.viewer__nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:46px;height:46px;border-radius:50%;
    background:rgba(16,19,24,.7);border:1px solid var(--line-3);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:var(--text);
    transition:border-color .15s,color .15s;
}
.viewer__nav:hover{border-color:var(--accent);color:var(--accent);}
.viewer__nav--prev{left:calc(50% - min(215px,50vw) - 66px);}
.viewer__nav--next{left:auto;right:calc(50% - min(215px,50vw) - 66px);}
.viewer__nav[aria-disabled="true"]{opacity:.3;pointer-events:none;}

@media (max-width:900px){
    /* the tap zones replace the arrows on touch */
    .viewer__nav{display:none;}
    .viewer__stage{
        width:100vw;height:100dvh;border-radius:0;
    }
}

/* ============================================================
   AD SLOTS
   ============================================================ */
.ad{
    position:relative;
    border:1px dashed #474E59;border-radius:var(--r-md);
    background:repeating-linear-gradient(135deg,var(--surface) 0 12px,#181C22 12px 24px);
    display:flex;align-items:center;justify-content:center;
    text-align:center;
}
.ad--billboard{height:160px;}
.ad--rail{height:600px;}
.ad__t{font-size:15px;font-weight:700;color:#8B9199;}
.ad__s{font-size:12px;color:var(--dim-2);margin-top:4px;}
.ad__label{
    position:absolute;top:10px;left:14px;
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}

/* ============================================================
   RECENT + SIDEBAR
   ============================================================ */
.recent{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;}
.recent__side{position:static;}

/* ============================================================
   BLOG
   ============================================================ */
.grid-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.post{
    background:var(--card);border:1px solid var(--line-2);
    border-radius:18px;overflow:hidden;color:var(--text);
    transition:border-color .2s;
}
.post:hover{border-color:var(--line-4);color:var(--text);}
.post__img{
    height:170px;display:flex;align-items:center;justify-content:center;
    font-size:12px;color:var(--dim-2);
}
.post__body{padding:20px;}
.post__cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800;}
.post__title{font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.25;margin-top:10px;}
.post__meta{font-size:13px;color:var(--muted-2);margin-top:12px;}

/* ============================================================
   FAQ
   ============================================================ */
.grid-faq{display:flex;flex-direction:column;gap:12px;}
.faq{
    background:var(--card);border:1px solid var(--line-2);
    border-radius:var(--r-md);padding:20px 22px;
}
.faq__q{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:16px;width:100%;text-align:left;
}
.faq__q span{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.3;}
.faq__ic{
    width:28px;height:28px;flex-shrink:0;border-radius:50%;
    border:1px solid var(--line-3);color:var(--muted);
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:800;transition:.15s;
}
.faq[data-open="true"] .faq__ic{border-color:var(--accent);color:var(--accent);}
.faq__a{
    margin:12px 0 0;font-size:14px;line-height:1.6;
    color:var(--muted);max-width:640px;
}
.faq__a[hidden]{display:none;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line);}
.footer__top{
    max-width:var(--shell);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:32px;
    padding:22px var(--pad);border-bottom:1px solid var(--line);
}
.footer__logo b{font-size:24px;}
.footer__logo i{width:7px;height:7px;}
.footer__nav{display:flex;flex-wrap:wrap;align-items:center;gap:26px;}
.footer__nav a{font-size:14px;font-weight:600;color:var(--muted);}
.footer__nav a:hover{color:var(--text-2);}
.footer__bottom{
    max-width:var(--shell);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:18px var(--pad);font-size:13px;color:var(--muted-2);
}
.footer__social{display:flex;align-items:center;gap:20px;}
.footer__social a{color:var(--text);font-weight:600;}

/* ============================================================
   MODAL
   ============================================================ */
.modal{
    position:fixed;inset:0;z-index:2000;
    display:flex;align-items:center;justify-content:center;padding:32px;
    animation:fadeIn .22s ease both;
}
.modal[hidden]{display:none;}
.modal__scrim{position:absolute;inset:0;background:rgba(10,12,16,.94);backdrop-filter:blur(10px);}
.modal__box{
    position:relative;z-index:1;width:440px;max-width:100%;
    max-height:calc(100vh - 64px);overflow-y:auto;
    background:#21262F;border:1px solid var(--line-3);
    border-radius:var(--r-xl);padding:32px;
    box-shadow:0 40px 90px rgba(0,0,0,.55);
    animation:pop .28s cubic-bezier(.34,1.4,.5,1) both;
}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.modal__title{font-size:30px;font-weight:900;letter-spacing:-.035em;line-height:1.05;}
.modal__sub{font-size:14px;color:var(--muted);margin-top:8px;}
.modal__x{
    width:36px;height:36px;flex-shrink:0;
    border:1px solid var(--line-3);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;color:var(--muted);transition:.15s;
}
.modal__x:hover{border-color:var(--line-4);color:var(--text);}

.tabs{
    display:flex;gap:4px;
    background:var(--surface);border:1px solid #323844;
    border-radius:var(--pill);padding:4px;margin-top:24px;
}
.tabs button{
    flex:1;padding:11px 0;border-radius:var(--pill);
    font-size:14px;font-weight:700;color:var(--muted);
    transition:.15s;
}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--bg);font-weight:800;}

.fields{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px;}
.field input{
    width:100%;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:12px;padding:14px 16px;
    font-family:inherit;font-size:15px;color:var(--text);
    outline:none;transition:border-color .15s;
}
.field input::placeholder{color:var(--dim);}
.field input:focus{border-color:var(--accent);}
.field--pw{position:relative;}
.field--pw input{padding-right:86px;}
.field__toggle{
    position:absolute;right:16px;bottom:14px;
    font-size:13px;font-weight:700;color:var(--muted);
}
.field__toggle:hover{color:var(--text-2);}

.check{
    display:flex;align-items:center;gap:9px;
    font-size:13px;color:var(--muted);line-height:1.5;
    cursor:pointer;
}
.check input{
    width:17px;height:17px;flex-shrink:0;
    accent-color:var(--accent);cursor:pointer;
}
.modal__row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.modal__forgot{font-size:13px;font-weight:700;color:var(--accent);}
.modal__submit{
    width:100%;margin-top:22px;
    background:var(--accent);color:var(--bg);
    border-radius:var(--pill);padding:16px;
    font-size:16px;font-weight:800;transition:background .15s;
}
.modal__submit:hover{background:var(--accent-soft);}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.drawer{position:fixed;inset:0;z-index:1500;display:flex;animation:fadeIn .2s ease both;}
.drawer[hidden]{display:none;}
.drawer__scrim{position:absolute;inset:0;background:rgba(10,12,16,.72);backdrop-filter:blur(4px);}
.drawer__panel{
    position:relative;width:300px;max-width:85vw;height:100%;
    background:var(--surface);border-right:1px solid var(--line);
    display:flex;flex-direction:column;
    animation:drawerIn .28s cubic-bezier(.22,1,.36,1) both;
}
.drawer__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px;border-bottom:1px solid var(--line);
}
.drawer__x{
    width:32px;height:32px;border:1px solid var(--line-3);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;color:var(--muted);
}
.drawer__nav{display:flex;flex-direction:column;padding:8px 10px;gap:2px;overflow-y:auto;}
.drawer__nav a{
    display:flex;align-items:center;min-height:46px;padding:0 12px;
    border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--text-3);
}
.drawer__nav a[aria-current="page"]{background:var(--elevated);color:var(--text);font-weight:700;}
.drawer__foot{margin-top:auto;padding:14px 18px 18px;border-top:1px solid var(--line);}
.drawer__foot .langpick{width:100%;}
.drawer__foot .langpick button{flex:1;justify-content:center;padding:8px 0;}

.mobile-auth{display:none;}

/* ============================================================
   MOBILE BOTTOM BAR + FILTER SHEET
   ============================================================ */
.dock{
    display:none;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:12px 14px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(22,25,31,.98),rgba(22,25,31,.7));
}
.dock__bar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--elevated);border:1px solid var(--line-3);
    border-radius:var(--pill);padding:7px 10px;
}
.dock__pill{
    height:44px;display:flex;align-items:center;gap:7px;
    background:var(--surface);border-radius:var(--pill);padding:0 16px;
    font-size:13px;font-weight:700;color:var(--text-3);white-space:nowrap;
}
.dock__pill--lang{min-width:48px;justify-content:center;padding:0;font-weight:800;color:var(--text-2);}
.dock__fab{
    width:54px;height:54px;flex-shrink:0;border-radius:50%;
    background:var(--accent);color:var(--bg);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:900;
    box-shadow:0 8px 22px rgba(216,255,62,.28);
}

.sheet{position:fixed;inset:0;z-index:1400;display:flex;align-items:flex-end;}
.sheet[hidden]{display:none;}
.sheet__scrim{position:absolute;inset:0;background:rgba(10,12,16,.7);backdrop-filter:blur(4px);}
.sheet__panel{
    position:relative;width:100%;max-height:86vh;
    display:flex;flex-direction:column;
    background:var(--card);border-top:1px solid var(--line-3);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -24px 60px rgba(0,0,0,.55);
    animation:sheetUp .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet__grip{display:flex;justify-content:center;padding:10px 0 4px;}
.sheet__grip span{width:44px;height:4px;border-radius:var(--pill);background:var(--line-4);}
.sheet__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px 14px;border-bottom:1px solid var(--line-2);
}
.sheet__head b{font-size:18px;font-weight:900;letter-spacing:-.02em;}
.sheet__x{
    width:32px;height:32px;border-radius:9px;
    background:#3A2B2B;border:1px solid #6B3A3A;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:#FF8B8B;
}
.sheet__body{
    display:flex;flex-direction:column;gap:16px;
    padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sheet__label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px;}
.sheet__select{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:12px;padding:14px 16px;
    font-size:14px;color:var(--text-3);text-align:left;
}
.sheet__select small{font-size:10px;color:var(--dim);}
.sheet__search{
    display:flex;align-items:center;gap:10px;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:12px;padding:14px 16px;
}
.sheet__search span{font-size:15px;color:var(--dim);}
.sheet__search input{
    flex:1;min-width:0;background:none;border:none;outline:none;
    font-family:inherit;font-size:15px;color:var(--text);
}
.sheet__search input::placeholder{color:var(--muted-2);}
.sheet__toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:12px;padding:14px 16px;
    font-size:14px;font-weight:600;color:var(--text-3);text-align:left;
    transition:border-color .15s;
}
.sheet__toggle i{
    width:40px;height:23px;flex-shrink:0;
    border-radius:var(--pill);background:var(--line-3);
    position:relative;transition:background .18s;
}
.sheet__toggle i::after{
    content:'';position:absolute;top:3px;left:3px;
    width:17px;height:17px;border-radius:50%;
    background:var(--muted);transition:transform .18s,background .18s;
}
.sheet__toggle[aria-pressed="true"]{border-color:var(--accent);color:var(--text);}
.sheet__toggle[aria-pressed="true"] i{background:var(--accent);}
.sheet__toggle[aria-pressed="true"] i::after{transform:translateX(17px);background:var(--bg);}
.sheet__foot{
    display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line-2);background:#1E222A;
}
.sheet__clear{font-size:13px;font-weight:800;letter-spacing:.06em;color:#FF8B8B;}
.sheet__apply{
    background:var(--accent);color:var(--bg);
    border-radius:12px;padding:15px;text-align:center;
    font-size:15px;font-weight:900;
}

/* flags in language pickers */
.flag{font-size:14px;line-height:1;}
.langpick button{display:inline-flex;align-items:center;gap:6px;}

/* mobile footer variant */
.footer__mobile{
    display:none;
    padding:22px var(--pad) 24px;
    background:var(--surface);border-top:1px solid var(--line);
}
.footer__mobile .logo{margin-bottom:12px;}
.footer__mobile .logo b{font-size:20px;}
.footer__mobile .logo i{width:6px;height:6px;}
.footer__mobile-nav{
    display:flex;flex-wrap:wrap;gap:10px 18px;
    font-size:13px;font-weight:600;
}
.footer__mobile-nav a{color:var(--muted);}
.footer__mobile .langpick{margin-top:16px;}
.footer__mobile .langpick button{flex:1;text-align:center;padding:8px 0;}
.footer__mobile-meta{
    margin-top:16px;display:flex;flex-direction:column;gap:6px;
    font-size:12px;color:var(--dim);
}
.footer__mobile-meta a{color:var(--dim);}
.footer__mobile-meta a:hover{color:var(--muted);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1440px){
    :root{--pad:36px;}
    .grid-recent{gap:8px;}
    .card--sm{height:300px;}
}

@media (max-width:1240px){
    :root{--pad:32px;}
    .nav{gap:20px;font-size:14px;}
    .header__left{gap:28px;}
    .grid-vip{gap:12px;}
    .card--vip{flex-basis:calc((100% - 48px) / 5);}
    .grid-recent{grid-template-columns:repeat(3,1fr);}
    .recent{grid-template-columns:1fr;}
    .recent__side{position:static;}
    .ad--rail{height:200px;}
    .head h2{font-size:34px;}
}

@media (max-width:980px){
    .card--vip{flex-basis:calc((100% - 36px) / 4);}
}

@media (max-width:900px){
    .utility{display:none;}
    .nav,.header__right .link-btn,.userchip__name{display:none;}
    /* the user chip is replaced by the profile button; the bell stays */
    .header__auth[data-authed] .userchip{display:none;}
    .header__auth{gap:8px;}
    .icon-btn{width:36px;height:36px;}
    .icon-btn svg{width:17px;height:17px;}
    .icon-btn__dot{min-width:17px;height:17px;font-size:10px;}
    .burger{display:flex;}
    .mobile-auth{
        display:grid;grid-template-columns:1fr 1fr;gap:8px;
        padding:14px var(--pad);border-bottom:1px solid var(--line);
        max-width:var(--shell);margin:0 auto;
    }
    .mobile-auth button{
        height:44px;display:flex;align-items:center;justify-content:center;
        border-radius:var(--pill);font-size:14px;font-weight:700;
    }
    .mobile-auth .is-login{border:1px solid var(--line-3);color:var(--text-2);}
    .mobile-auth .is-signup{background:var(--accent);color:var(--bg);font-weight:800;}

    .grid-blog{grid-template-columns:1fr;}

    /* profile button replaces the desktop user chip */
    body.is-authed .profile-btn{display:inline-flex;}
    .header__right{gap:8px;}

    /* cities move into their own bottom sheet */
    .recent__side .cities{display:none;}

    /* search moves into the bottom sheet */
    .search-section{display:none;}
    .dock{display:block;}
    body{padding-bottom:96px;}

    /* footer swaps to the stacked mobile version */
    .footer__top,.footer__bottom{display:none;}
    .footer__mobile{display:block;}
}

@media (max-width:760px){
    :root{--pad:18px;}
    .section{padding-bottom:36px;}
    .header__inner{padding:16px var(--pad);}
    .logo b{font-size:21px;}
    .logo i{width:6px;height:6px;}

    .head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px;}
    .head h2{font-size:26px;}
    .head p{font-size:14px;}

    /* VIP carousel — 2 cards per view */
    .grid-vip{gap:10px;}
    .card--vip{
        flex:0 0 calc((100% - 10px) / 2);
        border-radius:var(--r-md);
    }
    .card--vip .card__ph{font-size:10px;}
    .card--vip .card__top{top:9px;left:9px;right:9px;}
    .card--vip .status{height:20px;padding:0 8px;font-size:9px;}
    .card--vip .play{width:42px;height:42px;font-size:14px;}
    .card--vip .card__body{padding:40px 9px 10px;}
    .card--vip .tag{height:20px;padding:0 8px;font-size:9px;}
    .card--vip .card__name{margin-top:7px;}
    .card--vip .card__name b{font-size:15px;}
    .card--vip .verified{width:15px;height:15px;font-size:9px;}
    .card--vip .card__loc{font-size:10px;}

    /* tags stay on one line so the card bottom never grows */
    .card .tags{flex-wrap:nowrap;overflow:hidden;}

    .grid-recent{grid-template-columns:repeat(2,1fr);gap:8px;}
    .card--sm{height:auto;aspect-ratio:3/4;border-radius:var(--r-md);}
    .card--sm .card__name b{font-size:14px;}

    .stories__rail{gap:14px;}
    .story{width:72px;}
    .story__ring{width:66px;height:66px;}
    .story__name{font-size:11px;}

    /* blog cards become horizontal rows */
    .post{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px;border-radius:14px;}
    .post__img{height:76px;border-radius:10px;}
    .post__body{padding:0;}
    .post__cat{font-size:10px;}
    .post__title{font-size:15px;font-weight:800;margin-top:6px;}
    .post__meta{font-size:11px;margin-top:6px;}

    .faq{padding:14px 16px;border-radius:14px;}
    .faq__q span{font-size:14px;}
    .faq__ic{width:24px;height:24px;font-size:13px;}
    .faq__a{font-size:12px;margin-top:10px;}

    .ad--billboard{height:120px;}
    .ad--rail{height:160px;}
    .ad__t{font-size:13px;}

    .modal{padding:16px;}
    .modal__box{padding:24px;border-radius:var(--r-lg);}
    .modal__title{font-size:24px;}
}

@media (max-width:380px){
    .grid-recent{grid-template-columns:1fr;}
    .card--sm{aspect-ratio:4/5;}
}

/* ============================================================
   PROFILE — story ring in the header
   ============================================================ */
.pro-head{
    display:flex;align-items:center;gap:20px;
    background:var(--card);border:1px solid var(--line-2);
    border-radius:var(--r-lg);padding:22px;
}

/* the ring is the story trigger; without stories it renders flat */
.pro-av{
    position:relative;flex-shrink:0;
    width:104px;height:104px;border-radius:50%;padding:3px;
    background:var(--line-3);
}
.pro-av[data-story]{
    background:linear-gradient(140deg,var(--accent),var(--accent-deep));
    cursor:pointer;
}
.pro-av[data-story][data-seen="true"]{background:var(--line-3);}
.pro-av__img{
    width:100%;height:100%;border-radius:50%;
    border:3px solid var(--card);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:var(--dim);
}
.pro-av__badge{
    position:absolute;bottom:2px;right:2px;
    height:22px;padding:0 9px;border-radius:var(--pill);
    background:var(--accent);color:var(--bg);
    border:2px solid var(--card);
    font-family:var(--font-display);
    font-size:10px;font-weight:800;
    display:flex;align-items:center;
}

.pro-meta{flex:1;min-width:0;}
.pro-name{display:flex;align-items:center;gap:8px;}
.pro-name b{font-family:var(--font-display);font-size:28px;font-weight:900;letter-spacing:-.03em;}
.pro-loc{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:14px;color:var(--text-3);}
.pro-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}

.pro-actions{display:flex;gap:10px;flex-shrink:0;}
.pro-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border-radius:var(--pill);padding:13px 22px;
    font-family:var(--font-display);
    font-size:14px;font-weight:800;white-space:nowrap;
}
.pro-btn--primary{background:var(--accent);color:var(--bg);}
.pro-btn--primary:hover{background:var(--accent-soft);color:var(--bg);}
.pro-btn--ghost{border:1px solid var(--line-3);color:var(--text-2);}
.pro-btn--ghost:hover{border-color:var(--line-4);color:var(--text);}

@media (max-width:760px){
    .pro-head{flex-direction:column;align-items:flex-start;gap:16px;padding:16px;}
    .pro-av{width:84px;height:84px;}
    .pro-name b{font-size:22px;}
    .pro-actions{width:100%;}
    .pro-btn{flex:1;padding:12px 16px;}
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumb{
    display:flex;align-items:center;flex-wrap:wrap;gap:9px;
    padding:22px var(--pad) 0;max-width:var(--shell);margin:0 auto;
    font-size:13px;color:var(--muted-2);
}
.crumb a{color:var(--muted-2);}
.crumb a:hover{color:var(--text-3);}
.crumb i{color:var(--line-4);font-style:normal;}
.crumb b{color:var(--text-2);font-weight:600;}

/* ============================================================
   PROFILE DETAIL (PDP)
   ============================================================ */
.pdp{display:grid;grid-template-columns:420px 1fr;gap:36px;align-items:start;}

.pdp__gallery{display:flex;flex-direction:column;gap:12px;}
.pdp__hero{
    position:relative;height:560px;
    border-radius:18px;overflow:hidden;border:1px solid var(--line-2);
    cursor:pointer;
}
.pdp__hero .card__ph{font-size:13px;}
.pdp__count{
    position:absolute;bottom:14px;right:14px;
    display:inline-flex;align-items:center;height:26px;padding:0 12px;
    border-radius:var(--pill);background:rgba(16,19,24,.72);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-family:var(--font-display);
    font-size:12px;font-weight:800;color:var(--text-2);
}
.pdp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.pdp__thumb{
    height:96px;border-radius:12px;border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:var(--dim);cursor:pointer;
    transition:border-color .15s;
}
.pdp__thumb:hover{border-color:var(--line-4);}
.pdp__thumb[aria-current="true"]{border-color:var(--accent);}

.pdp__info{display:flex;flex-direction:column;gap:14px;}
.pdp__headline{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;}
.pdp__name{display:flex;align-items:center;gap:10px;}
.pdp__name b{
    font-family:var(--font-display);
    font-size:46px;font-weight:900;letter-spacing:-.04em;line-height:1;
}
.pdp__name .verified{width:26px;height:26px;font-size:14px;}
.pdp__sub{font-size:16px;color:var(--muted);margin-top:10px;}
.pdp__side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
.rating{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-display);
    font-size:16px;font-weight:900;color:var(--accent);
}
.rating small{font-size:12px;font-weight:600;color:var(--muted-2);}

.contacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.cbtn{
    display:inline-flex;align-items:center;gap:9px;
    border-radius:12px;padding:15px 26px;
    font-family:var(--font-display);
    font-size:15px;font-weight:800;color:var(--text);
}
.cbtn--phone{background:var(--accent);color:var(--bg);font-weight:900;}
.cbtn--phone:hover{background:var(--accent-soft);color:var(--bg);}
.cbtn--wa{background:#1E7A4B;}
.cbtn--wa:hover{background:#238956;color:var(--text);}
.cbtn--viber{background:#5B3FA8;}
.cbtn--viber:hover{background:#6949BD;color:var(--text);}
.cbtn--tg{background:#2C6BB8;}
.cbtn--tg:hover{background:#3479CC;color:var(--text);}
.cbtn--ghost{border:1px solid var(--line-3);color:var(--text-2);padding:15px 24px;}
.cbtn--ghost:hover{border-color:var(--accent);color:var(--accent);}

.pdp__meta{
    display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:14px;
    font-size:12px;color:var(--muted-2);
}
.link-danger{font-weight:700;color:#FF8B8B;}
.link-danger:hover{color:#FFB3B3;}

/* panels */
.panel{
    background:var(--card);border:1px solid var(--line-2);
    border-radius:18px;padding:22px 24px;
}
.panel__head{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.panel__ic{font-size:15px;color:var(--accent);}
.panel__label{
    font-family:var(--font-display);
    font-size:13px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);
}
.panel__title{
    font-family:var(--font-display);
    font-size:22px;font-weight:900;letter-spacing:-.03em;
}
.panel p{margin:0;font-size:15px;line-height:1.65;color:var(--text-3);}
.panel p + p{margin-top:12px;}

.chiprow{display:flex;flex-wrap:wrap;gap:8px;}
.chiprow + .chiprow{margin-top:10px;}
.ichip{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:var(--pill);padding:9px 15px;
    font-size:13px;color:var(--muted-2);
}
.ichip b{font-weight:800;color:var(--text);}
.ichip--purple{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.45);color:var(--purple-text);font-weight:800;}
.ichip--accent{background:rgba(216,255,62,.12);border-color:rgba(216,255,62,.4);color:var(--accent);font-weight:800;}

.svc{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:12px;padding:11px 16px;
    font-size:14px;font-weight:600;color:var(--text-2);
}
.svc i{color:var(--accent);font-size:11px;font-style:normal;}

.prices{display:flex;flex-wrap:wrap;gap:10px;}
.pricecard{
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:14px;padding:14px 16px;min-width:180px;flex:1;
}
.pricecard__label{
    font-family:var(--font-display);
    font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted-2);
}
.pricecard__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px;}
.pricecard__val{
    font-family:var(--font-display);
    font-size:26px;font-weight:900;letter-spacing:-.03em;color:var(--accent);
}
.pricecard__dur{font-size:13px;color:var(--muted-2);}

.warn{
    display:flex;align-items:flex-start;gap:9px;margin-top:14px;
    background:rgba(255,139,139,.08);border:1px solid rgba(255,139,139,.3);
    border-radius:12px;padding:13px 15px;
}
.warn i{font-size:14px;color:#FF8B8B;font-style:normal;}
.warn span{font-size:13px;line-height:1.5;color:#FFB3B3;}

/* similar */
.similar{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.mini{
    border-radius:14px;border:1px solid var(--line-2);overflow:hidden;
    background:var(--surface);color:var(--text);transition:border-color .15s;
}
.mini:hover{border-color:var(--line-4);color:var(--text);}
.mini__img{height:150px;}
.mini__body{padding:12px;}
.mini__name{font-family:var(--font-display);font-size:14px;font-weight:800;}
.mini__loc{font-size:12px;color:var(--muted-2);margin-top:3px;}

/* lightbox */
.lightbox{
    position:fixed;inset:0;z-index:2000;
    display:flex;align-items:center;justify-content:center;padding:48px;
    animation:fadeIn .22s ease both;
}
.lightbox[hidden]{display:none;}
.lightbox__scrim{position:absolute;inset:0;background:rgba(10,12,16,.94);backdrop-filter:blur(10px);}
.lightbox__inner{
    position:relative;z-index:1;display:flex;align-items:center;gap:20px;
    animation:pop .28s cubic-bezier(.34,1.4,.5,1) both;
}
.lightbox__frame{
    width:min(720px,72vw);height:min(820px,80vh);
    border-radius:20px;border:1px solid var(--line-3);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;color:var(--dim);
}
.lightbox__nav{
    width:52px;height:52px;flex-shrink:0;
    border:1px solid var(--line-3);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:var(--text-2);transition:border-color .15s;
}
.lightbox__nav:hover{border-color:var(--accent);color:var(--accent);}
.lightbox__x{
    position:absolute;z-index:2;top:32px;right:36px;
    width:44px;height:44px;
    border:1px solid var(--line-3);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;color:var(--muted);
}
.lightbox__x:hover{border-color:var(--line-4);color:var(--text);}

/* mobile call bar */
.callbar{
    display:none;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:12px 14px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(22,25,31,.98),rgba(22,25,31,.7));
}
.callbar__row{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;}
.callbar__main{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--accent);color:var(--bg);
    border-radius:var(--pill);min-height:50px;padding:0 14px;
    font-family:var(--font-display);
    font-size:14px;font-weight:900;white-space:nowrap;
}
.callbar__ic{
    width:50px;height:50px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;color:var(--text);
}

@media (max-width:1240px){
    .pdp{grid-template-columns:340px 1fr;gap:24px;}
    .pdp__hero{height:460px;}
    .similar{grid-template-columns:repeat(4,1fr);}
}

@media (max-width:900px){
    .pdp{grid-template-columns:1fr;}
    .pdp__hero{height:400px;}
    .similar{grid-template-columns:repeat(3,1fr);}
    .lightbox{padding:16px;}
    .lightbox__nav{display:none;}
}

@media (max-width:760px){
    .crumb{display:none;}
    .pdp__hero{height:340px;border-radius:var(--r-md);}
    .pdp__thumbs{grid-template-columns:repeat(4,1fr);gap:8px;}
    .pdp__thumb{height:70px;}
    .pdp__headline{flex-direction:column;gap:12px;}
    .pdp__side{align-items:flex-start;}
    .pdp__name b{font-size:28px;}
    .pdp__name .verified{width:20px;height:20px;font-size:11px;}
    .pdp__sub{font-size:13px;margin-top:8px;}
    .contacts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px;}
    .cbtn{justify-content:center;padding:0;min-height:44px;font-size:13px;}
    .cbtn--phone,.cbtn--ghost{grid-column:1 / -1;padding:14px;}
    .panel{padding:16px;border-radius:var(--r-md);}
    .panel__title{font-size:18px;}
    .panel p{font-size:13px;}
    .similar{grid-template-columns:repeat(2,1fr);}
    .mini__img{height:120px;}
    .pricecard{min-width:120px;}
    .callbar{display:block;}
    body.has-callbar{padding-bottom:96px;}
}

/* ============================================================
   ACCOUNT
   ============================================================ */
.acc{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start;}
.acc__side{display:flex;flex-direction:column;gap:16px;position:sticky;top:110px;}
.acc__main{display:flex;flex-direction:column;gap:16px;}

.accnav{
    background:var(--card);border:1px solid var(--line-2);
    border-radius:18px;padding:10px;
}
.accnav__list{display:flex;flex-direction:column;gap:2px;}
.accnav__item{
    display:flex;align-items:center;min-height:50px;padding:0 18px;
    border-radius:12px;
    font-family:var(--font-display);
    font-size:15px;font-weight:700;color:var(--text-3);
    transition:background .15s,color .15s;
}
.accnav__item:hover{background:var(--elevated);color:var(--text);}
.accnav__item[aria-current="page"]{background:var(--accent);color:var(--bg);font-weight:800;}
.accnav__item[aria-current="page"]:hover{background:var(--accent);color:var(--bg);}
.accnav__item--danger{color:#FF8B8B;}
.accnav__item--danger:hover{background:rgba(255,139,139,.1);color:#FFB3B3;}

.acc-upgrade{
    display:block;background:var(--accent);color:var(--bg);
    border-radius:14px;padding:16px;text-align:center;
    font-family:var(--font-display);
    font-size:15px;font-weight:900;
}
.acc-upgrade:hover{background:var(--accent-soft);color:var(--bg);}

.stat{display:flex;flex-direction:column;gap:12px;font-size:14px;}
.stat__row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.stat__row span{color:var(--muted);}
.stat__row b{font-family:var(--font-display);font-weight:900;color:var(--text);}
.stat__row b.is-accent{color:var(--accent);}

.bar{margin-top:14px;height:6px;border-radius:var(--pill);background:var(--line-2);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--accent);border-radius:var(--pill);}
.outline-btn{
    display:block;margin-top:14px;
    border:1px solid var(--line-3);border-radius:10px;padding:11px;
    text-align:center;
    font-family:var(--font-display);
    font-size:13px;font-weight:800;color:var(--text-2);
    transition:border-color .15s,color .15s;
}
.outline-btn:hover{border-color:var(--accent);color:var(--accent);}

.notice{
    display:flex;align-items:flex-start;gap:14px;
    background:rgba(255,197,61,.09);border:1px solid rgba(255,197,61,.35);
    border-radius:16px;padding:20px 22px;
}
.notice i{font-size:20px;line-height:1.1;color:#FFC53D;font-style:normal;}
.notice b{
    display:block;
    font-family:var(--font-display);
    font-size:17px;font-weight:900;letter-spacing:-.02em;color:#FFD979;
}
.notice p{margin:6px 0 0;font-size:14px;line-height:1.55;color:#E2C98A;}

.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.form-grid--2{grid-template-columns:repeat(2,1fr);}
.ffield label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;}
.ffield input,.ffield textarea,.ffield select{
    width:100%;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:12px;padding:14px 16px;
    font-family:var(--font-body);font-size:15px;color:var(--text);
    outline:none;transition:border-color .15s;
}
.ffield textarea{min-height:120px;line-height:1.6;resize:vertical;}
.ffield input::placeholder,.ffield textarea::placeholder{color:var(--dim);}
.ffield input:focus,.ffield textarea:focus,.ffield select:focus{border-color:var(--accent);}
.ffield select{
    appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
    background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.ffield--full{grid-column:1 / -1;}

.actions{display:flex;align-items:center;gap:10px;margin-top:22px;}
.actions--end{justify-content:flex-end;}
.btn-save{
    background:var(--accent);color:var(--bg);
    border-radius:var(--pill);padding:15px 32px;
    font-family:var(--font-display);
    font-size:15px;font-weight:900;
}
.btn-save:hover{background:var(--accent-soft);}
.btn-cancel{
    border:1px solid var(--line-3);border-radius:var(--pill);padding:15px 28px;
    font-family:var(--font-display);
    font-size:15px;font-weight:700;color:var(--text-2);
}
.btn-cancel:hover{border-color:var(--line-4);color:var(--text);}

/* photos */
.photos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.ptile{
    position:relative;height:180px;border-radius:14px;
    border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:var(--dim);
}
.ptile[aria-current="true"]{border-color:var(--accent);}
.ptile__main{
    position:absolute;top:8px;left:8px;
    background:var(--accent);color:var(--bg);
    font-family:var(--font-display);
    font-size:9px;font-weight:900;padding:3px 8px;border-radius:5px;
}
.ptile__x{
    position:absolute;top:8px;right:8px;
    width:24px;height:24px;border-radius:50%;
    background:rgba(16,19,24,.8);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:#FF8B8B;
}
.ptile__x:hover{background:rgba(255,139,139,.25);}
.ptile--add{
    border:1px dashed #474E59;
    background:repeating-linear-gradient(135deg,var(--surface) 0 12px,#181C22 12px 24px);
    flex-direction:column;gap:6px;cursor:pointer;
}
.ptile--add i{font-size:22px;color:var(--accent);font-style:normal;}
.ptile--add span{font-size:12px;font-weight:700;color:#8B9199;}

/* checkbox grid */
.cbox-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 20px;}
.cbox-grid--inline{display:flex;flex-wrap:wrap;gap:10px 22px;}
.cbox{
    display:inline-flex;align-items:center;gap:9px;
    font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
}
.cbox input{position:absolute;opacity:0;width:0;height:0;}
.cbox i{
    width:17px;height:17px;flex-shrink:0;
    border-radius:5px;border:1px solid var(--line-4);background:transparent;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:900;font-style:normal;color:transparent;
    transition:.15s;
}
.cbox input:checked + i{border-color:var(--accent);background:var(--accent);color:var(--bg);}
.cbox input:checked ~ span{color:var(--text);}
.cbox input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px;}

/* price rows */
.prow{display:grid;grid-template-columns:1fr 1fr 1fr 44px;gap:12px;align-items:end;}
.prow + .prow{margin-top:10px;}
.prow__del{
    height:49px;border:1px solid rgba(255,139,139,.4);border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;color:#FF8B8B;
}
.prow__del:hover{background:rgba(255,139,139,.12);}
.add-btn{
    display:inline-flex;align-items:center;gap:8px;margin-top:16px;
    border:1px solid var(--line-3);border-radius:var(--pill);padding:12px 22px;
    font-family:var(--font-display);
    font-size:14px;font-weight:800;color:var(--text-2);
    transition:border-color .15s,color .15s;
}
.add-btn:hover{border-color:var(--accent);color:var(--accent);}
.add-btn i{color:var(--accent);font-style:normal;}

/* copy row */
.copyrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;}
.copyrow__val{
    background:var(--surface);border:1px solid var(--line-3);border-radius:12px;
    padding:14px 16px;font-size:14px;color:var(--muted-2);
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.copyrow__btn{
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);color:var(--bg);border-radius:12px;padding:14px 26px;
    font-family:var(--font-display);
    font-size:14px;font-weight:900;white-space:nowrap;
}
.copyrow__btn:hover{background:var(--accent-soft);}

.kv{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:14px;padding:16px 18px;
}
.kv span{font-size:15px;font-weight:700;color:var(--text-2);}
.kv b{font-family:var(--font-display);font-size:20px;font-weight:900;color:var(--accent);}
.hint{margin:12px 0 0;font-size:13px;color:var(--muted-2);}

/* balance */
.bal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.bal{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:20px 22px;}
.bal__label{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--muted-2);}
.bal__val{font-family:var(--font-display);font-size:34px;font-weight:900;letter-spacing:-.03em;margin-top:10px;}
.bal__val--accent{color:var(--accent);}
.bal__val--sm{font-size:22px;letter-spacing:-.02em;margin-top:14px;}

.tier{display:flex;align-items:center;gap:9px;margin:26px 0 12px;}
.tier:first-of-type{margin-top:0;}
.tier i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.tier b{font-family:var(--font-display);font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--muted);}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.plan{
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:14px;padding:16px;text-align:center;
    transition:border-color .15s;
}
.plan:hover{border-color:var(--accent);}
.plan__dur{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--text);}
.plan__old{font-size:13px;color:var(--dim);text-decoration:line-through;margin-top:7px;}
.plan__new{font-family:var(--font-display);font-size:21px;font-weight:900;letter-spacing:-.02em;color:var(--accent);margin-top:5px;}

.tx{display:flex;flex-direction:column;}
.tx__row{
    display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;
    padding:14px 0;border-bottom:1px solid var(--line);
}
.tx__row:last-child{border-bottom:none;}
.tx__name{font-size:15px;font-weight:700;}
.tx__date{font-size:12px;color:var(--muted-2);margin-top:3px;}
.tx__amt{font-family:var(--font-display);font-size:15px;font-weight:900;}
.tx__amt--out{color:#FF8B8B;}
.tx__amt--in{color:var(--green-text);}
.tx__state{font-size:12px;color:var(--muted-2);width:80px;text-align:right;}

/* notifications */
.nlist{display:flex;flex-direction:column;gap:10px;}
.nrow{
    display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:start;
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:14px;padding:16px 18px;
}
.nrow--unread{background:rgba(216,255,62,.06);border-color:rgba(216,255,62,.28);}
.nrow__ic{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:900;color:var(--bg);
}
.nrow__t{font-size:15px;font-weight:800;color:var(--text);}
.nrow__d{font-size:13px;line-height:1.55;color:var(--muted);margin-top:4px;}
.nrow__side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
.nrow__time{font-size:12px;color:var(--muted-2);white-space:nowrap;}
.nrow__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}

.tab-panel[hidden]{display:none;}

@media (max-width:1240px){
    .acc{grid-template-columns:260px 1fr;}
    .form-grid{grid-template-columns:repeat(2,1fr);}
    .photos{grid-template-columns:repeat(4,1fr);}
    .cbox-grid{grid-template-columns:repeat(3,1fr);}
    .plan-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
    .acc{grid-template-columns:1fr;}
    .acc__side{position:static;}
    .accnav__list{flex-direction:row;overflow-x:auto;scrollbar-width:none;}
    .accnav__list::-webkit-scrollbar{display:none;}
    .accnav__item{white-space:nowrap;padding:0 16px;min-height:44px;font-size:14px;}
    .bal-grid{grid-template-columns:1fr;}
}

@media (max-width:760px){
    .form-grid,.form-grid--2{grid-template-columns:1fr;}
    .photos{grid-template-columns:repeat(2,1fr);}
    .ptile{height:150px;}
    .cbox-grid{grid-template-columns:repeat(2,1fr);}
    .prow{grid-template-columns:1fr 1fr;gap:8px;}
    .prow__del{grid-column:1 / -1;height:40px;}
    .plan-grid{grid-template-columns:repeat(2,1fr);}
    .tx__row{grid-template-columns:1fr auto;gap:10px;}
    .tx__state{display:none;}
    .nrow{grid-template-columns:32px 1fr;gap:10px;padding:14px;}
    .nrow__ic{width:32px;height:32px;font-size:13px;}
    .nrow__side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;}
    .actions{flex-direction:column-reverse;align-items:stretch;}
    .btn-save,.btn-cancel{width:100%;text-align:center;}
}

/* ============================================================
   ============================================================
   SITE INTEGRATION LAYER
   Everything below adapts the static design pack to the live
   Laravel/Livewire app: real media inside the placeholder
   shells, overlay state driven from <body>, and the pages the
   pack did not cover (blog, agencies, errors, toasts).
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   OVERLAY STATE
   Livewire re-renders morph component HTML back to the server
   version, which would wipe a client-set [hidden]. Overlays are
   therefore driven by a class on <body>, which Livewire never
   touches.
   ------------------------------------------------------------ */
.drawer,
.sheet,
.lightbox,
.viewer{display:none;}
body.is-drawer-open   .drawer{display:flex;}
body.is-sheet-open    #sheet{display:flex;}
body.is-cities-open   #citySheet{display:flex;}
body.is-lightbox-open .lightbox{display:flex;}
body.is-viewer-open   .viewer{display:flex;}
body.is-locked{overflow:hidden;}

/* ------------------------------------------------------------
   REAL MEDIA INSIDE THE CARD SHELLS
   ------------------------------------------------------------ */
.card__media{position:absolute;inset:0;overflow:hidden;}
.card__media img,
.card__media video{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:opacity .3s;
}
.card__media video{position:absolute;inset:0;opacity:0;pointer-events:none;}
.card .play{transition:opacity .2s;}
.card__ph svg{opacity:.35;}

/* watermark stamped over listing photos */
.card__wm{
    position:absolute;right:8px;bottom:64px;z-index:3;
    max-width:38%;opacity:.5;pointer-events:none;
}

/* photo-count pill, bottom-right of a card */
.card__count{
    position:absolute;right:10px;bottom:10px;z-index:4;
    display:inline-flex;align-items:center;gap:5px;
    height:22px;padding:0 9px;border-radius:var(--pill);
    background:rgba(16,19,24,.72);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-size:10px;font-weight:800;color:var(--text-2);
}

/* status pill coming from the admin-defined status colours */
.tag--status{color:#1A1503;border-color:transparent;}

/* ------------------------------------------------------------
   STORIES - real avatars
   ------------------------------------------------------------ */
.story__img{overflow:hidden;}
.story__img img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.story__ring[data-seen="true"]{background:var(--line-3);}


/* ------------------------------------------------------------
   LIGHTBOX - real media
   ------------------------------------------------------------ */
.lightbox__frame{overflow:hidden;background:#0F1216;padding:0;}
.lightbox__media{
    width:100%;height:100%;object-fit:contain;display:block;background:#0F1216;
}
.lightbox__count{
    position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);
    font-size:13px;font-weight:700;color:var(--muted-2);white-space:nowrap;
}

/* ------------------------------------------------------------
   PDP - real gallery media
   ------------------------------------------------------------ */
.pdp__hero{display:block;width:100%;padding:0;background:var(--surface);}
.pdp__hero img,
.pdp__hero video{width:100%;height:100%;object-fit:cover;display:block;}
.pdp__thumb{overflow:hidden;padding:0;background:var(--surface);}
.pdp__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pdp__thumb--more{position:relative;}
.pdp__thumb--more::after{
    content:attr(data-more);
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(12,14,18,.7);
    font-family:var(--font-display);
    font-size:15px;font-weight:900;color:var(--text);
}
.mini__img{overflow:hidden;}
.mini__img img{width:100%;height:100%;object-fit:cover;display:block;}

/* agency strip on a profile */
.agency-chip{
    display:flex;align-items:center;gap:11px;
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:14px;padding:12px 16px;color:var(--text);
}
.agency-chip:hover{border-color:var(--line-4);color:var(--text);}
.agency-chip img{width:36px;height:36px;border-radius:9px;object-fit:cover;flex-shrink:0;}
.agency-chip__label{
    font-size:10px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted-2);
}
.agency-chip__name{font-size:14px;font-weight:800;margin-top:2px;}

/* stat strip under the profile headline */
.pdp__stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}

/* ------------------------------------------------------------
   ACCOUNT - real photo tiles
   ------------------------------------------------------------ */
.ptile{overflow:hidden;background:var(--surface);}
.ptile img,
.ptile video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
}
.ptile__x,
.ptile__main{z-index:2;}
.ptile--busy{opacity:.5;pointer-events:none;}

/* ------------------------------------------------------------
   FORM FEEDBACK
   ------------------------------------------------------------ */
.err{display:block;margin-top:6px;font-size:12px;font-weight:600;color:#FF8B8B;}
.ffield input.is-invalid,
.ffield select.is-invalid,
.ffield textarea.is-invalid,
.field input.is-invalid{border-color:#FF8B8B;}

.alert{
    display:flex;align-items:flex-start;gap:11px;
    border-radius:14px;padding:14px 16px;
    font-size:14px;line-height:1.55;
}
.alert--ok{background:rgba(91,228,155,.1);border:1px solid rgba(91,228,155,.35);color:var(--green-text);}
.alert--err{background:rgba(255,139,139,.1);border:1px solid rgba(255,139,139,.35);color:#FFB3B3;}
.alert--info{background:rgba(216,255,62,.08);border:1px solid rgba(216,255,62,.3);color:var(--accent-soft);}

/* ------------------------------------------------------------
   TOASTS
   ------------------------------------------------------------ */
.toasts{
    position:fixed;right:24px;bottom:24px;z-index:4000;
    display:flex;flex-direction:column;gap:10px;
    pointer-events:none;
}
.toast{
    pointer-events:auto;min-width:240px;max-width:340px;
    border-radius:12px;padding:13px 18px;
    font-size:14px;font-weight:600;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    animation:pop .25s cubic-bezier(.34,1.4,.5,1) both;
}
.toast--info{background:var(--elevated);border:1px solid var(--line-3);color:var(--text);}
.toast--success{background:#1E4433;border:1px solid #2F6B50;color:#B6F2D3;}
.toast--warning{background:#4A3A17;border:1px solid #7A6026;color:#FFD979;}
.toast--error{background:#4A2020;border:1px solid #7A3333;color:#FFB3B3;}
@media (max-width:760px){
    .toasts{right:14px;left:14px;bottom:calc(96px + env(safe-area-inset-bottom));}
    .toast{max-width:none;}
}

/* ------------------------------------------------------------
   HEADER NOTIFICATION DROPDOWN
   ------------------------------------------------------------ */
.notif{position:relative;}
.notif__panel{
    position:absolute;top:calc(100% + 10px);right:0;z-index:60;
    width:340px;max-width:calc(100vw - 32px);
    background:var(--card);border:1px solid var(--line-3);
    border-radius:var(--r-md);overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.notif__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;border-bottom:1px solid var(--line-2);
}
.notif__head b{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.notif__head a{font-size:12px;font-weight:700;}
.notif__list{max-height:360px;overflow-y:auto;}
.notif__item{
    display:grid;grid-template-columns:28px 1fr;gap:11px;
    padding:13px 16px;border-bottom:1px solid var(--line);
    color:var(--text);
}
.notif__item:hover{background:var(--elevated);color:var(--text);}
.notif__item:last-child{border-bottom:none;}
.notif__t{font-size:13px;font-weight:800;}
.notif__d{font-size:12px;line-height:1.5;color:var(--muted);margin-top:3px;}
.notif__time{font-size:11px;color:var(--dim);margin-top:4px;}
.notif__empty{padding:26px 20px;text-align:center;font-size:13px;color:var(--muted-2);}
.notif__all{
    display:block;padding:12px;text-align:center;
    border-top:1px solid var(--line-2);
    font-size:13px;font-weight:700;
}

/* ------------------------------------------------------------
   SKELETONS
   ------------------------------------------------------------ */
@keyframes shimmer{from{background-position:-320px 0}to{background-position:320px 0}}
.skel{
    border-radius:var(--r-md);
    background:linear-gradient(90deg,var(--card) 0%,var(--elevated) 50%,var(--card) 100%);
    background-size:640px 100%;
    animation:shimmer 1.2s linear infinite;
}
.skel--card{aspect-ratio:3/4;}

/* ------------------------------------------------------------
   EMPTY STATE
   ------------------------------------------------------------ */
.empty{
    grid-column:1/-1;
    padding:56px 24px;text-align:center;
    border:1px dashed var(--line-3);border-radius:var(--r-lg);
}
.empty__t{font-size:18px;font-weight:800;letter-spacing:-.02em;}
.empty__s{margin-top:6px;font-size:14px;color:var(--muted-2);}

/* ------------------------------------------------------------
   AD SLOTS WITH REAL CREATIVE
   ------------------------------------------------------------ */
.ad--live{
    border:1px solid var(--line-2);background:var(--surface);
    overflow:hidden;padding:0;
}
.ad--live img{width:100%;height:100%;object-fit:cover;display:block;}

/* ------------------------------------------------------------
   BLOG
   ------------------------------------------------------------ */
.post__img{overflow:hidden;}
.post__img img{width:100%;height:100%;object-fit:cover;display:block;}
.post__excerpt{
    margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--muted);
}
.grid-blog--wide{grid-template-columns:repeat(4,1fr);}
@media (max-width:1240px){.grid-blog--wide{grid-template-columns:repeat(3,1fr);}}
@media (max-width:900px){.grid-blog--wide{grid-template-columns:repeat(2,1fr);}}
@media (max-width:760px){.grid-blog--wide{grid-template-columns:1fr;}}

.article{max-width:820px;margin:0 auto;}
.article__title{font-size:42px;font-weight:900;letter-spacing:-.04em;line-height:1.08;}
.article__meta{margin-top:14px;font-size:13px;color:var(--muted-2);}
.article__cover{
    margin-top:24px;border-radius:var(--r-lg);overflow:hidden;
    border:1px solid var(--line-2);
}
.article__cover img{width:100%;display:block;}
.article__body{margin-top:28px;font-size:16px;line-height:1.75;color:var(--text-3);}
.article__body h2{font-size:26px;margin:32px 0 12px;}
.article__body h3{font-size:20px;margin:26px 0 10px;}
.article__body p{margin:0 0 16px;}
.article__body ul,.article__body ol{margin:0 0 16px;padding-left:22px;}
.article__body li{margin-bottom:8px;}
.article__body img{border-radius:var(--r-md);margin:20px 0;}
.article__body a{text-decoration:underline;}
@media (max-width:760px){
    .article__title{font-size:26px;}
    .article__body{font-size:15px;}
    .article__body h2{font-size:20px;}
}

/* ------------------------------------------------------------
   AGENCIES
   ------------------------------------------------------------ */
.grid-agency{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:1240px){.grid-agency{grid-template-columns:repeat(3,1fr);}}
@media (max-width:900px){.grid-agency{grid-template-columns:repeat(2,1fr);}}

.agency{
    position:relative;display:block;aspect-ratio:3/4;
    border-radius:var(--r-lg);overflow:hidden;
    border:1px solid var(--line-2);color:var(--text);
    transition:border-color .2s;
}
.agency:hover{border-color:var(--line-4);color:var(--text);}
.agency__img{position:absolute;inset:0;}
.agency__img img{width:100%;height:100%;object-fit:cover;display:block;}
.agency__body{
    position:absolute;left:0;right:0;bottom:0;padding:52px 14px 14px;
    background:linear-gradient(to top,rgba(12,14,18,.94) 42%,rgba(12,14,18,0));
}
.agency__name{font-size:17px;font-weight:900;letter-spacing:-.02em;}
.agency__meta{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:5px;font-size:12px;color:var(--text-3);
}
.agency__logo{
    position:absolute;top:12px;left:12px;z-index:2;
    width:38px;height:38px;border-radius:50%;overflow:hidden;
    border:2px solid rgba(244,245,242,.3);background:rgba(16,19,24,.5);
}
.agency__logo img{width:100%;height:100%;object-fit:cover;}

@media (max-width:760px){
    .cover{height:auto;min-height:0;border-bottom:none;}
    .cover__img{position:relative;inset:auto;height:180px;}
    .cover::after{
        inset:0 0 auto;height:180px;
        background:linear-gradient(to top,rgba(12,14,18,.75),transparent 60%);
    }
    .cover__inner{
        position:static;
        flex-direction:column;align-items:flex-start;gap:12px;
        padding:0 var(--pad) 20px;
        margin-top:-34px;
    }
    .cover__logo{width:64px;height:64px;}
    .cover__name{font-size:20px;flex-wrap:wrap;gap:8px;}
    .cover__facts{gap:10px;font-size:12px;}
    .cover__actions{width:100%;}
    .cover__actions > *{flex:1;justify-content:center;}
}

/* ------------------------------------------------------------
   SEO COPY BLOCK IN THE FOOTER
   ------------------------------------------------------------ */
.seo-copy{
    max-width:var(--shell);margin:0 auto;
    padding:32px var(--pad) 8px;
    font-size:14px;line-height:1.7;color:var(--muted-2);
}
.seo-copy h2{
    font-size:20px;font-weight:800;letter-spacing:-.02em;
    color:var(--text-3);margin:26px 0 10px;
}
.seo-copy p{margin:0 0 12px;}
.seo-copy ul{margin:0 0 14px;padding-left:20px;}
.seo-copy li{margin-bottom:6px;}
.seo-copy strong{color:var(--text-3);}

/* dense city/link cloud above the footer meta */
.footer__cloud{
    max-width:var(--shell);margin:0 auto;
    padding:18px var(--pad);border-bottom:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:8px 18px;
}
.footer__cloud a{font-size:13px;color:var(--dim);}
.footer__cloud a:hover{color:var(--muted);}

/* ------------------------------------------------------------
   AGE GATE
   ------------------------------------------------------------ */
.agegate{
    position:fixed;inset:0;z-index:5000;
    display:none;align-items:center;justify-content:center;padding:24px;
    background:rgba(10,12,16,.96);backdrop-filter:blur(12px);
}
body.is-agegate .agegate{display:flex;}
.agegate__box{
    width:440px;max-width:100%;text-align:center;
    background:#21262F;border:1px solid var(--line-3);
    border-radius:var(--r-xl);padding:32px;
    animation:pop .3s cubic-bezier(.34,1.4,.5,1) both;
}
.agegate__box h2{font-size:26px;margin-bottom:10px;}
.agegate__box p{margin:0 0 22px;font-size:14px;line-height:1.6;color:var(--muted);}
.agegate__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ------------------------------------------------------------
   404
   ------------------------------------------------------------ */
.oops{
    max-width:var(--shell);margin:0 auto;
    padding:96px var(--pad);text-align:center;
}
.oops__code{
    font-family:var(--font-display);
    font-size:96px;font-weight:900;letter-spacing:-.06em;color:var(--accent);
    line-height:1;
}
.oops__t{font-size:26px;font-weight:900;letter-spacing:-.03em;margin-top:14px;}
.oops__s{margin:10px 0 26px;font-size:15px;color:var(--muted);}

/* ------------------------------------------------------------
   SMALL UTILITIES
   ------------------------------------------------------------ */
.stack{display:flex;flex-direction:column;gap:16px;}
.muted{color:var(--muted-2);}
.nowrap{white-space:nowrap;}
[x-cloak]{display:none !important;}

/* the dock only ever appears on listing pages; a page without it
   should not reserve the space */
body:not(.has-dock) .dock{display:none;}
@media (max-width:900px){
    body:not(.has-dock):not(.has-callbar){padding-bottom:0;}
}

/* ------------------------------------------------------------
   LANGUAGE PICKER — real links rather than the mock buttons
   ------------------------------------------------------------ */
.langpick a{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 12px;border-radius:var(--pill);
    font-size:12px;font-weight:600;color:var(--muted);
    transition:color .15s,background .15s;
}
.langpick a:hover{color:var(--text-2);}
.langpick a[aria-current="page"]{background:var(--accent);color:var(--bg);font-weight:700;}
.drawer__foot .langpick a,
.footer__mobile .langpick a{flex:1;justify-content:center;padding:8px 0;}
.dock__pill--lang{color:var(--text-2);}

/* logo can be either the wordmark or an uploaded image */
.logo img{align-self:center;}

/* the header logout button sits inside a display:contents form */
.header__auth form{display:contents;}

/* ------------------------------------------------------------
   FILTER CHIPS — the mock chips become real dropdowns
   ------------------------------------------------------------ */
.chip-wrap{position:relative;}
.chip[aria-expanded="true"]{border-color:var(--accent);color:var(--text);}
.chip__count{
    background:var(--accent);color:var(--bg);
    border-radius:var(--pill);padding:1px 7px;
    font-size:11px;font-weight:800;
}
.chip__menu{
    position:absolute;top:calc(100% + 8px);left:0;z-index:50;
    min-width:230px;max-height:330px;overflow-y:auto;
    background:var(--card);border:1px solid var(--line-3);
    border-radius:14px;padding:8px;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.chip__menu--right{left:auto;right:0;}
.chip__item{
    display:flex;align-items:center;gap:10px;
    padding:9px 11px;border-radius:9px;
    font-size:14px;font-weight:600;color:var(--text-3);
    cursor:pointer;width:100%;text-align:left;
}
.chip__item:hover{background:var(--elevated);color:var(--text);}
.chip__item input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.chip__item[aria-selected="true"]{color:var(--accent);}

.range{display:flex;align-items:center;gap:8px;padding:6px;}
.range input{
    width:92px;min-width:0;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:10px;padding:10px 12px;
    font-family:inherit;font-size:14px;color:var(--text);outline:none;
}
.range input:focus{border-color:var(--accent);}
.range span{font-size:13px;color:var(--dim);}

.chip--reset{border-color:rgba(255,139,139,.4);color:#FF8B8B;}
.chip--reset:hover{border-color:#FF8B8B;color:#FFB3B3;}

/* the search block gets a result counter under it */
.search__meta{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:14px;font-size:13px;color:var(--muted-2);
}

/* ------------------------------------------------------------
   FILTER SHEET — real controls
   ------------------------------------------------------------ */
.sheet__body .ffield + .ffield{margin-top:0;}
.sheet__chips{display:flex;flex-wrap:wrap;gap:8px;}
.sheet__chip{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:var(--pill);padding:10px 15px;
    font-size:13px;font-weight:600;color:var(--text-3);
}
.sheet__chip[aria-pressed="true"],
.sheet__chip[aria-current="page"]{
    background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:800;
}
.sheet__range{display:flex;align-items:center;gap:10px;}
.sheet__range input{
    flex:1;min-width:0;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:12px;padding:13px 15px;
    font-family:inherit;font-size:14px;color:var(--text);outline:none;
}
.sheet__range input:focus{border-color:var(--accent);}
.sheet__range span{font-size:13px;color:var(--dim);}

/* ------------------------------------------------------------
   VIP RAIL — keep the pack's 6-up rhythm when fewer cards exist
   ------------------------------------------------------------ */
.grid-vip--few{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;}
.grid-vip--few .card--vip{flex:none;}
@media (max-width:1240px){.grid-vip--few{grid-template-columns:repeat(5,1fr);}}
@media (max-width:980px){.grid-vip--few{grid-template-columns:repeat(4,1fr);}}
@media (max-width:760px){.grid-vip--few{grid-template-columns:repeat(2,1fr);}}

/* ------------------------------------------------------------
   LOADING VEIL OVER THE RESULT GRID
   ------------------------------------------------------------ */
.grid-recent{position:relative;}
.grid-recent[data-loading="true"]{opacity:.45;pointer-events:none;transition:opacity .15s;}

/* ------------------------------------------------------------
   CHECKBOX GRID — server-driven variant
   Livewire toggles these, so there is no real <input> to hang the
   :checked selector on; `.is-on` plays that part.
   ------------------------------------------------------------ */
.cbox{background:none;border:none;padding:0;text-align:left;}
.cbox i.is-on{border-color:var(--accent);background:var(--accent);color:var(--bg);}
.cbox i.is-on + span{color:var(--text);}

/* ------------------------------------------------------------
   AGENCY COVER
   ------------------------------------------------------------ */
.cover{position:relative;height:320px;overflow:hidden;border-bottom:1px solid var(--line);}
.cover__img{position:absolute;inset:0;}
.cover__img img{width:100%;height:100%;object-fit:cover;display:block;}
.cover__img--empty{background:linear-gradient(140deg,#2A303A,#16191F);}
.cover::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to top,rgba(12,14,18,.94) 8%,rgba(12,14,18,.35) 60%,transparent);
}
.cover__inner{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    max-width:var(--shell);margin:0 auto;
    padding:26px var(--pad);
    display:flex;align-items:flex-end;gap:18px;
}
.cover__logo{
    width:76px;height:76px;flex-shrink:0;border-radius:50%;
    overflow:hidden;border:3px solid rgba(244,245,242,.28);background:rgba(16,19,24,.5);
}
.cover__logo img{width:100%;height:100%;object-fit:cover;}
.cover__meta{flex:1;min-width:0;}
.cover__name{
    display:flex;align-items:center;gap:10px;
    font-size:34px;font-weight:900;letter-spacing:-.035em;margin:0;
}
.cover__facts{
    display:flex;align-items:center;flex-wrap:wrap;gap:16px;
    margin-top:8px;font-size:13px;color:var(--text-3);
}
.cover__actions{display:flex;gap:8px;flex-shrink:0;}
@media (max-width:900px){
    .cover{height:auto;min-height:220px;}
    .cover__inner{flex-direction:column;align-items:flex-start;gap:12px;}
    .cover__name{font-size:24px;}
    .cover__actions{width:100%;flex-wrap:wrap;}
}

/* ------------------------------------------------------------
   LOAD MORE
   ------------------------------------------------------------ */
.loadmore{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin:28px auto 0;
    border:1px solid var(--line-3);border-radius:var(--pill);
    padding:15px 34px;
    font-family:var(--font-display);
    font-size:15px;font-weight:800;color:var(--text-2);
    transition:border-color .15s,color .15s;
}
.loadmore:hover{border-color:var(--accent);color:var(--accent);}
.loadmore[disabled]{opacity:.5;pointer-events:none;}

/* ------------------------------------------------------------
   AUTH MODAL — Livewire-driven, so it renders without [hidden]
   ------------------------------------------------------------ */
.modal--live{display:flex;}

/* ============================================================
   ACCOUNT — mobile overflow fixes
   ============================================================ */

/* grid/flex children must be allowed to shrink below their content */
.acc,
.acc__side,
.acc__main,
.form-grid > *,
.prow > *,
.tx__row > *,
.nrow > *,
.copyrow > *,
.bal-grid > *,
.plan-grid > *,
.stat__row > *{
    min-width:0;
}

.ffield input,
.ffield select,
.ffield textarea{
    min-width:0;
    max-width:100%;
}

@media (max-width:900px){
    .acc{display:flex;flex-direction:column;gap:16px;min-width:0;}

    /* aside dissolves so its children take their own order */
    .acc__side{display:contents;}

    .accnav    {order:1;}
    .acc-upgrade{order:2;}
    .acc__main {order:3;}
    .acc__side .panel{order:4;}

    /* dissolved children still need full width */
    .acc > *,
    .acc__side > *,
    .acc__main > *{min-width:0;max-width:100%;align-self:stretch;}

    /* tabs wrap onto rows — no horizontal scrolling */
    .accnav{padding:8px;}
    .accnav__list{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:6px;
        overflow:visible;
    }
    .accnav__item{
        justify-content:center;
        text-align:center;
        padding:0 10px;
        min-height:44px;
        font-size:13px;
        border-radius:10px;
        white-space:normal;
        line-height:1.2;
    }
    /* the logout item sits alone on the last row */
    .accnav__item--danger{grid-column:1 / -1;}
}

@media (max-width:380px){
    .accnav__list{grid-template-columns:1fr;}
    .accnav__item--danger{grid-column:auto;}
}

/* ------------------------------------------------------------
   PROFILE BUTTON — round chip on mobile, no ring
   ------------------------------------------------------------ */
@media (max-width:900px){
    .profile-btn{
        width:36px;height:36px;padding:0;
        justify-content:center;
        border-radius:50%;
        overflow:hidden;
    }
    .profile-btn__av{
        width:100%;height:100%;
        border-radius:50%;
        font-size:13px;font-weight:900;
    }
    .profile-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
}

/* ------------------------------------------------------------
   NOTIFICATION DROPDOWN — scrollable, viewport-safe on mobile
   ------------------------------------------------------------ */
.notif__list{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;   /* scroll stops at the list edge */
    touch-action:pan-y;
}

@media (max-width:900px){
    /* the dropdown becomes a full-width panel anchored to the header */
    .notif__panel{
        position:fixed;
        top:calc(var(--header-h) + 8px);
        left:12px;right:12px;
        width:auto;max-width:none;
        max-height:calc(100vh - var(--header-h) - 24px);
        display:flex;flex-direction:column;
    }
    .notif__head,.notif__all{flex:0 0 auto;}
    .notif__list{flex:1 1 auto;min-height:0;max-height:none;}

    .notif__item{grid-template-columns:26px 1fr;gap:10px;padding:12px 14px;}
    .notif__t{font-size:13px;line-height:1.3;}
    .notif__d{
        font-size:12px;margin-top:3px;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
        overflow:hidden;
    }
    .notif__t,.notif__d{overflow-wrap:anywhere;}
}

/* ------------------------------------------------------------
   LIGHTBOX — arrows overlay the photo on mobile
   ------------------------------------------------------------ */
@media (max-width:900px){
    .lightbox__inner{position:relative;gap:0;}

    .lightbox__nav{
        display:flex;
        position:absolute;top:50%;transform:translateY(-50%);
        z-index:3;
        width:44px;height:44px;
        background:rgba(16,19,24,.72);
        backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
        border-color:rgba(244,245,242,.25);
    }
    .lightbox__inner > .lightbox__nav:first-child{left:10px;}
    .lightbox__inner > .lightbox__nav:last-child{right:10px;}

    .lightbox__frame{
        width:100%;
        height:auto;max-height:78vh;
    }
}

/* ------------------------------------------------------------
   PROFILE STORY RING
   ------------------------------------------------------------ */
.pro-story{
    position:relative;flex-shrink:0;
    width:76px;height:76px;border-radius:50%;padding:3px;
    background:linear-gradient(140deg,var(--accent),var(--accent-deep));
    cursor:pointer;
}
.pro-story[data-seen="true"]{background:var(--line-3);}
.pro-story__img{
    display:block;width:100%;height:100%;
    border-radius:50%;overflow:hidden;
    border:3px solid var(--bg);
    background:var(--elevated);
}
.pro-story__img img{width:100%;height:100%;object-fit:cover;display:block;}
.pro-story__badge{
    position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
    padding:2px 8px;border-radius:var(--pill);
    background:var(--accent);color:var(--bg);
    border:2px solid var(--bg);
    font-family:var(--font-display);
    font-size:9px;font-weight:900;white-space:nowrap;
}
@media (max-width:760px){
    .pro-story{width:60px;height:60px;}
    .pro-story__badge{font-size:8px;padding:2px 6px;}
}

.faq__a a{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:2px;
}
.faq__a a:hover{color:var(--accent-soft);}

.cbtn--of{background:#00AFF0;}
.cbtn--of:hover{background:#1BBDF7;color:var(--text);}

/* ============================================================
   LIVE CAM
   ------------------------------------------------------------
   Red is reserved for "live" and appears nowhere else in the UI —
   accent green means action, gold means VIP, pink means TOP.
   A fourth colour keeps the states readable at a glance.
   ============================================================ */
:root{
    --live:#FF3B5C;
    --live-soft:#FF6B85;
    --live-dim:rgba(255,59,92,.16);
}

/* ------------------------------------------------------------
   LIVE BADGE — the pulsing dot
   ------------------------------------------------------------ */
.live-badge{
    display:inline-flex;align-items:center;gap:6px;
    height:24px;padding:0 10px;border-radius:var(--pill);
    background:var(--live);color:#fff;
    font-family:var(--font-display);
    font-size:10px;font-weight:900;letter-spacing:.08em;
    white-space:nowrap;
}
.live-badge i{
    width:6px;height:6px;border-radius:50%;
    background:#fff;display:inline-block;
    animation:livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%    {opacity:.35;transform:scale(.75);}
}

.live-badge--lg{height:28px;padding:0 13px;font-size:12px;}
.live-badge--lg i{width:7px;height:7px;}

/* viewer counter */
.live-count{
    display:inline-flex;align-items:center;gap:5px;
    height:24px;padding:0 10px;border-radius:var(--pill);
    background:rgba(16,19,24,.72);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-size:11px;font-weight:700;color:var(--text-2);
}
.live-count svg{width:13px;height:13px;opacity:.8;}

/* ------------------------------------------------------------
   LIVE CARD
   ------------------------------------------------------------ */
.card--onair{
    border-color:var(--live);
    box-shadow:0 0 0 1px rgba(255,59,92,.28);
}
.card--onair:hover{
    border-color:var(--live-soft);
    box-shadow:0 0 0 1px rgba(255,59,92,.5);
}

/* the badge sits above the status pill row */
.card__live{position:absolute;top:11px;left:11px;z-index:4;}
.card__viewers{position:absolute;top:11px;right:11px;z-index:4;}

/* ------------------------------------------------------------
   HOMEPAGE WIDGET
   ------------------------------------------------------------ */
.live-strip{
    background:linear-gradient(135deg,rgba(255,59,92,.09),rgba(255,59,92,0) 55%);
    border:1px solid rgba(255,59,92,.22);
    border-radius:var(--r-lg);
    padding:22px;
}
.live-strip__head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;margin-bottom:18px;
}
.live-strip__title{
    display:flex;align-items:center;gap:12px;
}
.live-strip__title h2{font-size:32px;}
.live-strip__sub{margin:6px 0 0;font-size:14px;color:var(--muted);}
.live-strip__link{
    font-family:var(--font-display);
    font-size:14px;font-weight:800;color:var(--live-soft);white-space:nowrap;
}
.live-strip__link:hover{color:var(--live);}

/* rail — same rhythm as the VIP carousel */
.grid-live{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none;
}
.grid-live::-webkit-scrollbar{display:none;}

.card--live{
    flex:0 0 calc((100% - 48px) / 5);
    height:auto;aspect-ratio:3/4;
    scroll-snap-align:start;
    border-radius:var(--r-md);
}
.card--live .card__ph{font-size:11px;}
.card--live .card__body{padding:44px 11px 12px;}
.card--live .card__name b{font-size:16px;}
.card--live .card__loc{font-size:11px;}
.card--live .verified{width:16px;height:16px;font-size:10px;}

/* ------------------------------------------------------------
   LIVE INDEX PAGE
   ------------------------------------------------------------ */
.grid-live-page{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grid-live-page .card--live{flex:none;width:auto;}

.live-hero{
    display:flex;align-items:center;gap:16px;
    margin-bottom:8px;
}
.live-hero h1{font-size:40px;letter-spacing:-.035em;font-weight:900;margin:0;}

.live-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}

/* ------------------------------------------------------------
   PROFILE — live state
   ------------------------------------------------------------ */
.pdp__live{
    display:flex;align-items:center;gap:14px;
    background:var(--live-dim);
    border:1px solid rgba(255,59,92,.4);
    border-radius:var(--r-md);
    padding:16px 18px;
    margin-top:16px;
}
.pdp__live-text{flex:1;min-width:0;}
.pdp__live-title{
    font-family:var(--font-display);
    font-size:16px;font-weight:900;color:var(--live-soft);
}
.pdp__live-sub{font-size:13px;color:var(--text-3);margin-top:3px;}
.pdp__live-cta{
    display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
    background:var(--live);color:#fff;
    border-radius:var(--pill);padding:13px 24px;
    font-family:var(--font-display);
    font-size:14px;font-weight:900;white-space:nowrap;
}
.pdp__live-cta:hover{background:var(--live-soft);color:#fff;}

/* the hero photo gets a live ribbon when streaming */
.pdp__hero-live{
    position:absolute;top:14px;left:14px;z-index:3;
}

/* ------------------------------------------------------------
   EMPTY STATE
   ------------------------------------------------------------ */
.live-empty{
    grid-column:1/-1;
    padding:56px 24px;text-align:center;
    border:1px dashed rgba(255,59,92,.35);
    border-radius:var(--r-lg);
    background:rgba(255,59,92,.04);
}
.live-empty__t{
    font-family:var(--font-display);
    font-size:18px;font-weight:900;color:var(--live-soft);
}
.live-empty__s{margin-top:6px;font-size:14px;color:var(--muted-2);}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:1240px){
    .card--live{flex-basis:calc((100% - 36px) / 4);}
    .grid-live-page{grid-template-columns:repeat(3,1fr);}
    .live-strip__title h2{font-size:26px;}
    .live-hero h1{font-size:32px;}
}

@media (max-width:900px){
    .grid-live-page{grid-template-columns:repeat(2,1fr);}
    .pdp__live{flex-direction:column;align-items:flex-start;}
    .pdp__live-cta{width:100%;justify-content:center;}
}

@media (max-width:760px){
    .live-strip{padding:14px;border-radius:var(--r-md);}
    .live-strip__head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px;}
    .live-strip__title h2{font-size:22px;}
    .live-strip__sub{font-size:13px;}

    .grid-live{gap:10px;}
    .card--live{flex-basis:calc((100% - 10px) / 2);}
    .card--live .card__body{padding:38px 9px 10px;}
    .card--live .card__name b{font-size:14px;}

    .live-badge{height:20px;padding:0 8px;font-size:9px;}
    .live-count{height:20px;padding:0 8px;font-size:10px;}
    .card__live{top:9px;left:9px;}
    .card__viewers{top:9px;right:9px;}

    .live-hero h1{font-size:26px;}
    .grid-live-page{gap:8px;}
}

@media (max-width:380px){
    .grid-live-page{grid-template-columns:1fr;}
}

/* ============================================================
   LIVE ROOM — /live/{slug}
   ============================================================ */
.live-room{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;}
.live-room__side{position:static;}

.live-player{
    position:relative;
    aspect-ratio:16/9;
    border-radius:var(--r-lg);overflow:hidden;
    border:1px solid var(--line-2);
    background:var(--surface) center/cover no-repeat;
    display:flex;align-items:center;justify-content:center;
}
/* the poster stays readable behind the placeholder copy */
.live-player::after{
    content:'';position:absolute;inset:0;
    background:rgba(11,13,17,.72);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.live-player__badge{position:absolute;top:14px;left:14px;z-index:3;}
.live-player__viewers{position:absolute;top:14px;right:14px;z-index:3;}

.live-player__body{position:relative;z-index:2;text-align:center;padding:24px;}
.live-player__icon{
    width:72px;height:72px;margin:0 auto 14px;
    border-radius:50%;
    border:1.5px solid rgba(244,245,242,.55);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;color:var(--text);padding-left:3px;
}
.live-player__icon--off{
    border-color:var(--line-4);color:var(--dim);
    font-size:20px;padding-left:0;
}
.live-player__off-title{
    font-family:var(--font-display);
    font-size:19px;font-weight:900;letter-spacing:-.02em;
    margin-bottom:6px;
}
.live-player__note{font-size:14px;color:var(--muted);}

/* streamer bar under the player */
.live-room__bar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:var(--card);border:1px solid var(--line-2);
    border-radius:var(--r-md);padding:14px 18px;margin-top:14px;
}
.live-room__who{display:flex;align-items:center;gap:12px;min-width:0;}
.live-room__av{
    width:46px;height:46px;flex-shrink:0;border-radius:50%;overflow:hidden;
    background:var(--elevated);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);
    font-size:17px;font-weight:900;color:var(--accent);
}
.live-room__av img{width:100%;height:100%;object-fit:cover;}
.live-room__name{
    display:flex;align-items:center;gap:7px;
    font-family:var(--font-display);
    font-size:18px;font-weight:900;letter-spacing:-.02em;
}
.live-room__loc{
    display:flex;align-items:center;gap:5px;margin-top:3px;
    font-size:13px;color:var(--text-3);
}

/* sidebar list of other streams */
.live-mini-list{display:flex;flex-direction:column;gap:4px;}
.live-mini{
    display:flex;align-items:center;gap:11px;
    padding:8px;border-radius:var(--r-sm);
    color:var(--text-3);transition:background .15s,color .15s;
}
.live-mini:hover{background:var(--elevated);color:var(--text);}
.live-mini__img{
    position:relative;
    width:52px;height:52px;flex-shrink:0;
    border-radius:10px;overflow:hidden;background:var(--surface);
}
.live-mini__img img{width:100%;height:100%;object-fit:cover;}
.live-mini__dot{
    position:absolute;top:5px;left:5px;
    width:7px;height:7px;border-radius:50%;
    background:var(--live);
    box-shadow:0 0 0 2px rgba(11,13,17,.6);
    animation:livePulse 1.6s ease-in-out infinite;
}
.live-mini__meta{min-width:0;}
.live-mini__name{
    display:block;
    font-family:var(--font-display);
    font-size:14px;font-weight:800;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.live-mini__viewers{display:block;font-size:12px;color:var(--muted-2);margin-top:2px;}

@media (max-width:1240px){
    .live-room{grid-template-columns:1fr 280px;}
}

@media (max-width:900px){
    .live-room{grid-template-columns:1fr;}
}

@media (max-width:760px){
    .live-player{border-radius:var(--r-md);}
    .live-player__icon{width:58px;height:58px;font-size:20px;}
    .live-player__off-title{font-size:16px;}
    .live-player__note{font-size:13px;}
    .live-room__bar{flex-direction:column;align-items:stretch;gap:12px;padding:14px;}
    .live-room__bar .pro-btn{justify-content:center;}
    .live-room__name{font-size:16px;}
}

/* ============================================================
   LIVE CHAT
   ============================================================ */
.chat{
    display:flex;flex-direction:column;
    height:520px;
    background:var(--card);border:1px solid var(--line-2);
    border-radius:var(--r-md);overflow:hidden;
}
.chat__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 16px;border-bottom:1px solid var(--line-2);
    flex:0 0 auto;
}
.chat__head b{
    font-family:var(--font-display);
    font-size:13px;font-weight:900;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);
}
.chat__count{
    display:inline-flex;align-items:center;gap:5px;
    font-size:12px;font-weight:700;color:var(--text-3);
}
.chat__count svg{width:13px;height:13px;opacity:.8;}

/* min-height:0 is what actually lets the list scroll inside a
   flex column — without it the track grows to fit its content */
.chat__list{
    flex:1 1 auto;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;
    padding:12px 14px;
    display:flex;flex-direction:column;gap:9px;
    scrollbar-width:thin;
}
.chat__msg{
    position:relative;
    font-size:13px;line-height:1.5;
    overflow-wrap:anywhere;
    padding-right:18px;
}
.chat__author{
    font-family:var(--font-display);
    font-weight:800;color:var(--accent);
    margin-right:6px;
}
.chat__text{color:var(--text-3);}
.chat__del{
    position:absolute;top:0;right:0;
    font-size:11px;color:var(--dim);
    opacity:0;transition:opacity .15s,color .15s;
}
.chat__msg:hover .chat__del{opacity:1;}
.chat__del:hover{color:#FF8B8B;}

.chat__empty{
    margin:auto;padding:20px;
    font-size:13px;color:var(--muted-2);text-align:center;
}

.chat__form{
    display:grid;grid-template-columns:1fr 44px;gap:8px;
    padding:12px 14px;border-top:1px solid var(--line-2);
    flex:0 0 auto;
}
.chat__form input{
    min-width:0;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:var(--pill);padding:11px 16px;
    font-family:inherit;font-size:14px;color:var(--text);
    outline:none;transition:border-color .15s;
}
.chat__form input::placeholder{color:var(--dim);}
.chat__form input:focus{border-color:var(--accent);}
.chat__form button{
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);color:var(--bg);
    border-radius:50%;font-size:15px;font-weight:900;
    transition:background .15s;
}
.chat__form button:hover{background:var(--accent-soft);}

.chat__err{
    padding:0 14px 12px;
    font-size:12px;font-weight:600;color:#FF8B8B;
}

.chat__guest{
    padding:14px;border-top:1px solid var(--line-2);
    font-size:13px;color:var(--muted);text-align:center;
    flex:0 0 auto;
}
.chat__guest button{
    display:block;width:100%;margin-top:10px;
    background:var(--accent);color:var(--bg);
    border-radius:var(--pill);padding:11px;
    font-family:var(--font-display);
    font-size:14px;font-weight:900;
}
.chat__guest button:hover{background:var(--accent-soft);}

@media (max-width:900px){
    /* on a phone the chat sits under the player, so a fixed tall
       box would push everything else off screen */
    .chat{height:380px;}
}

/* ============================================================
   LIVE STUDIO — მოდელის პანელი
   ============================================================ */
.studio__head{
    display:flex;align-items:center;justify-content:space-between;
    gap:20px;flex-wrap:wrap;margin-bottom:20px;
}
.studio__title{
    display:flex;align-items:center;gap:13px;
}
.studio__title h1{
    font-size:34px;letter-spacing:-.035em;font-weight:900;margin:0;
}

.studio__grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
.studio__side{display:flex;flex-direction:column;gap:16px;}

/* stats row reuses the balance card look from the account page */
.studio__stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px;}

/* chat in the studio is taller — it is the main surface here,
   not a sidebar widget */
.chat--studio{height:560px;}
.chat--studio .chat__msg{padding-right:52px;}

.chat__time{
    font-size:11px;color:var(--dim);margin-left:6px;
}
.chat__actions{
    position:absolute;top:0;right:0;
    display:flex;gap:4px;
    opacity:0;transition:opacity .15s;
}
.chat__msg:hover .chat__actions{opacity:1;}
.chat__actions button{
    width:20px;height:20px;border-radius:5px;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;color:var(--dim);
    background:var(--elevated);
    transition:color .15s,background .15s;
}
.chat__actions button:hover{background:rgba(255,139,139,.18);color:#FF8B8B;}

/* a message from the streamer stands out from the crowd */
.chat__msg--mod .chat__author{color:var(--live-soft);}

/* ------------------------------------------------------------
   LISTS — chatters and bans
   ------------------------------------------------------------ */
.studio__list{display:flex;flex-direction:column;gap:2px;}
.studio__row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 12px;border-radius:var(--r-sm);
    transition:background .15s;
}
.studio__row:hover{background:var(--elevated);}
.studio__row-meta{min-width:0;}
.studio__row-name{
    font-family:var(--font-display);
    font-size:14px;font-weight:800;color:var(--text-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.studio__row-sub{font-size:12px;color:var(--muted-2);margin-top:2px;}

.studio__ban,
.studio__unban{
    flex-shrink:0;
    border-radius:var(--pill);padding:7px 14px;
    font-family:var(--font-display);
    font-size:12px;font-weight:800;
    transition:border-color .15s,color .15s,background .15s;
}
.studio__ban{border:1px solid rgba(255,139,139,.4);color:#FF8B8B;}
.studio__ban:hover{background:rgba(255,139,139,.14);color:#FFB3B3;}
.studio__unban{border:1px solid var(--line-3);color:var(--text-3);}
.studio__unban:hover{border-color:var(--accent);color:var(--accent);}

/* ------------------------------------------------------------
   OFFLINE STATE
   ------------------------------------------------------------ */
.studio__offline{
    padding:64px 24px;text-align:center;
    background:var(--card);border:1px dashed var(--line-3);
    border-radius:var(--r-lg);
}
.studio__offline-icon{
    width:76px;height:76px;margin:0 auto 18px;
    border-radius:50%;border:1.5px solid var(--line-3);
    display:flex;align-items:center;justify-content:center;
    font-size:26px;color:var(--dim);
}
.studio__offline-title{
    font-family:var(--font-display);
    font-size:21px;font-weight:900;letter-spacing:-.025em;
}
.studio__offline-text{
    max-width:440px;margin:10px auto 0;
    font-size:14px;line-height:1.6;color:var(--muted);
}

@media (max-width:1240px){
    .studio__grid{grid-template-columns:1fr 300px;}
    .studio__stats{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:900px){
    .studio__grid{grid-template-columns:1fr;}
    .chat--studio{height:440px;}
}

@media (max-width:760px){
    .studio__head{gap:12px;}
    .studio__title h1{font-size:24px;}
    .studio__stats{grid-template-columns:repeat(2,1fr);gap:8px;}
    .studio__offline{padding:40px 18px;}
    .studio__offline-icon{width:60px;height:60px;font-size:22px;}
    .studio__offline-title{font-size:18px;}
    .chat--studio{height:400px;}
    /* touch has no hover, so the moderation buttons must always show */
    .chat__actions{opacity:1;}
}

/* the streamer's own row in the chatters list has no ban button */
.studio__you{
    flex-shrink:0;
    font-family:var(--font-display);
    font-size:11px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--dim);
}

/* the studio chat now has an input, so the list needs room for it */
.chat--studio .chat__form{border-top:1px solid var(--line-2);}

/* ============================================================
   STUDIO — ეთერის გაშვება
   ============================================================ */
.studio__start{
    display:grid;grid-template-columns:1fr auto;gap:10px;
    max-width:520px;margin:26px auto 0;
}
.studio__start input{
    min-width:0;
    background:var(--surface);border:1px solid var(--line-3);
    border-radius:var(--pill);padding:14px 20px;
    font-family:inherit;font-size:15px;color:var(--text);
    outline:none;transition:border-color .15s;
}
.studio__start input::placeholder{color:var(--dim);}
.studio__start input:focus{border-color:var(--live);}

.studio__golive{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--live);color:#fff;
    border-radius:var(--pill);padding:0 26px;min-height:50px;
    font-family:var(--font-display);
    font-size:15px;font-weight:900;white-space:nowrap;
    transition:background .15s;
}
.studio__golive:hover{background:var(--live-soft);}
.studio__golive[disabled]{opacity:.6;pointer-events:none;}
/* the badge inside the button must not pretend to be a separate control */
.studio__golive .live-badge{background:rgba(255,255,255,.2);}

.studio__stop{
    border:1px solid rgba(255,59,92,.5);border-radius:var(--pill);
    padding:12px 22px;
    font-family:var(--font-display);
    font-size:14px;font-weight:800;color:var(--live-soft);
    transition:background .15s,color .15s;
}
.studio__stop:hover{background:rgba(255,59,92,.14);color:#fff;}

/* editable title while live */
.studio__titlebar{
    display:grid;grid-template-columns:1fr auto;gap:10px;
    margin-bottom:16px;
}
.studio__titlebar input{
    min-width:0;
    background:var(--card);border:1px solid var(--line-2);
    border-radius:12px;padding:13px 18px;
    font-family:inherit;font-size:15px;color:var(--text);
    outline:none;transition:border-color .15s;
}
.studio__titlebar input::placeholder{color:var(--dim);}
.studio__titlebar input:focus{border-color:var(--accent);}
.studio__titlebar button{
    border:1px solid var(--line-3);border-radius:12px;padding:0 24px;
    font-family:var(--font-display);
    font-size:14px;font-weight:800;color:var(--text-2);
    transition:border-color .15s,color .15s;
}
.studio__titlebar button:hover{border-color:var(--accent);color:var(--accent);}

@media (max-width:760px){
    .studio__start,
    .studio__titlebar{grid-template-columns:1fr;}
    .studio__golive{justify-content:center;}
}

/* ============================================================
   LIVEKIT — ვიდეო ფენა
   ============================================================ */
.live-player__video{
    position:absolute;inset:0;z-index:1;
    width:100%;height:100%;
    object-fit:contain;
    background:#0B0D11;
    opacity:0;transition:opacity .3s;
}

/* placeholder ქრება მხოლოდ მაშინ, როცა ნაკადი მართლა მოვიდა */
#lkStage[data-lk="live"] .live-player__video{opacity:1;}
#lkStage[data-lk="live"]::after,
#lkStage[data-lk="live"] .live-player__body{opacity:0;pointer-events:none;}

.live-player__body{transition:opacity .3s;}

/* მდგომარეობის ტექსტი — CSS-იდან, რომ JS-ს თარგმანები არ სჭირდებოდეს */
#lkStage[data-lk="waiting"] [data-lk-msg]::after,
#lkStage[data-lk="connecting"] [data-lk-msg]::after,
#lkStage[data-lk="denied"] [data-lk-msg]::after,
#lkStage[data-lk="error"] [data-lk-msg]::after{content:'';}

#lkStage[data-lk="denied"] .live-player__icon,
#lkStage[data-lk="error"] .live-player__icon{
    border-color:rgba(255,59,92,.6);color:var(--live-soft);
}

/* studio preview — უფრო დაბალი, რადგან ჩატს უნდა დარჩეს ადგილი */
.studio__preview{
    aspect-ratio:16/9;
    max-height:340px;
    margin-bottom:16px;
}

@media (max-width:760px){
    .studio__preview{max-height:none;}
}

/* ============================================================
   STORY REACTIONS
   ============================================================ */
.sreact{
    position:absolute;left:0;right:0;bottom:0;z-index:5;
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:16px 14px calc(20px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(11,13,17,.9) 30%,rgba(11,13,17,0));
}
.sreact[hidden]{display:none !important;}

.sreact__btn{
    display:inline-flex;align-items:center;gap:7px;
    min-height:40px;padding:0 14px;
    border-radius:var(--pill);
    background:rgba(16,19,24,.6);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(244,245,242,.16);
    color:var(--text-2);
    transition:background .15s,border-color .15s,color .15s;
}
.sreact__btn:hover{background:rgba(16,19,24,.85);border-color:rgba(244,245,242,.35);}

.sreact__btn svg{
    width:19px;height:19px;flex-shrink:0;
    fill:currentColor;
    transition:transform .18s;
}
.sreact__n{
    font-family:var(--font-display);
    font-size:13px;font-weight:800;
    font-variant-numeric:tabular-nums;
}

/* არჩეული რეაქცია — თითოეულს საკუთარი ფერი, რომ ერთმანეთისგან
   მხოლოდ ფორმით არ განსხვავდებოდნენ */
.sreact__btn[aria-pressed="true"]{border-color:currentColor;}
.sreact__btn[data-react="like"][aria-pressed="true"]   {color:#5BA8FF;background:rgba(91,168,255,.18);}
.sreact__btn[data-react="heart"][aria-pressed="true"]  {color:#FF5E7A;background:rgba(255,94,122,.18);}
.sreact__btn[data-react="lovely"][aria-pressed="true"] {color:var(--gold);background:rgba(232,181,77,.18);}
.sreact__btn[data-react="fire"][aria-pressed="true"]   {color:#FF9540;background:rgba(255,149,64,.18);}

/* დაჭერისას — მოკლე ნახტომი, პასუხის მოლოდინის გარეშე */
.sreact__btn.is-pop svg{animation:sreactPop .35s cubic-bezier(.34,1.5,.5,1);}
@keyframes sreactPop{
    0%  {transform:scale(1);}
    45% {transform:scale(1.45);}
    100%{transform:scale(1);}
}

/* CTA-ს ადგილი უნდა დაეთმოს — ორივე ბოლოშია */
.viewer__cta{padding-bottom:78px;}

@media (max-width:760px){
    .sreact{gap:6px;padding:14px 10px calc(16px + env(safe-area-inset-bottom));}
    .sreact__btn{min-height:36px;padding:0 11px;gap:5px;}
    .sreact__btn svg{width:17px;height:17px;}
    .sreact__n{font-size:12px;}
    .viewer__cta{padding-bottom:72px;}
}

@media (max-width:380px){
    .sreact__btn{padding:0 9px;}
    .sreact__n{font-size:11px;}
}

/* ============================================================
   MY STORIES — რეაქციებით
   ============================================================ */
.mystories{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}

.mystory{
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:14px;overflow:hidden;
}
.mystory__media{
    position:relative;aspect-ratio:9/16;background:var(--elevated);
}
.mystory__media img,
.mystory__media video{width:100%;height:100%;object-fit:cover;display:block;}
.mystory__type{
    position:absolute;top:8px;left:8px;
    font-size:12px;color:var(--text);
    text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.mystory__del{
    position:absolute;top:8px;right:8px;
    width:24px;height:24px;border-radius:50%;
    background:rgba(16,19,24,.8);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:#FF8B8B;
}
.mystory__del:hover{background:rgba(255,139,139,.28);}

.mystory__meta{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:9px 11px 0;
    font-size:11px;color:var(--muted-2);
}

.mystory__react{
    display:flex;flex-wrap:wrap;gap:4px;
    padding:8px 11px 11px;
}
.mystory__r{
    display:inline-flex;align-items:center;gap:3px;
    font-size:11px;font-weight:700;color:var(--dim);
    font-variant-numeric:tabular-nums;
}
/* ნულოვანი მკრთალია — ერთი შეხედვით ჩანს რა მუშაობს */
.mystory__r.is-on{color:var(--text-2);}
.mystory__r i{font-style:normal;font-size:12px;opacity:.5;}
.mystory__r.is-on i{opacity:1;}

@media (max-width:1240px){.mystories{grid-template-columns:repeat(4,1fr);}}
@media (max-width:900px){.mystories{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.mystories{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   ACCESS NOTICE
   ============================================================ */
.notice--access{
    max-width:var(--shell);
    margin:16px auto 0;
    padding:16px 20px;
    position:relative;
}
.notice--access[hidden]{display:none !important;}

.notice__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.notice__btn{
    display:inline-flex;align-items:center;gap:7px;
    border:1px solid rgba(255,197,61,.45);border-radius:var(--pill);
    padding:9px 16px;
    font-family:var(--font-display);
    font-size:13px;font-weight:800;color:#FFD979;
    transition:background .15s,color .15s;
}
.notice__btn:hover{background:rgba(255,197,61,.14);color:#FFE9AE;}
.notice__btn--tg{background:#2C6BB8;border-color:#2C6BB8;color:#fff;}
.notice__btn--tg:hover{background:#3479CC;color:#fff;}

.notice__x{
    position:absolute;top:12px;right:14px;
    width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;color:#E2C98A;
    transition:background .15s;
}
.notice__x:hover{background:rgba(255,197,61,.16);}

@media (max-width:760px){
    .notice--access{margin:12px var(--pad) 0;padding:14px 16px;}
    .notice__btn{padding:8px 13px;font-size:12px;}
}