/* Knotvia — ONE global theme: Ivory Light (v2.0.14, owner-approved Theme 1).
   Warm ivory #FAF6EF page, white cards, emerald #0E7A4F primary, marigold
   #F2A007 accent, charcoal text. Media stages (video/reel/story players,
   lightbox, call stage) keep a dark backdrop behind the media, as in every
   light theme. NOTE: --violet / --coral are legacy variable NAMES kept so
   all components keep working — they now hold emerald / marigold values. */
:root{
  --bg:#FAF6EF; --bg2:#F5EDDC; --card:#FFFFFF; --card2:#FAF4E7; --card3:#F1E7D0;
  --line:#EADFC8; --line-soft:rgba(120,90,20,.20);
  --text:#262019; --muted:#6E6152; --muted2:#7D6C50;
  --violet:#0E7A4F; --coral:#F2A007;
  --grad:linear-gradient(120deg,#0E7A4F,#F2A007);
  --grad-btn:linear-gradient(120deg,#0E7A4F,#0A5C3C);
  --gold-text:#A86E00; --green-deep:#0B5C3C; --success:#0E7A4F;
  --danger:#C81E1E; --danger-bright:#E02424;
  --radius:18px; --radius-sm:12px;
  --shadow:0 10px 30px rgba(120,90,20,.16);
  --shadow-sm:0 6px 18px rgba(120,90,20,.10);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg) linear-gradient(165deg,#FBF7EE 0%,#F3EAD8 100%);background-attachment:fixed;color:var(--text);font-family:'Inter',system-ui,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:'Poppins','Inter',system-ui,sans-serif}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
::selection{background:rgba(242,160,7,.45)}
svg.ic{flex:none;vertical-align:middle}

/* ---------- header ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:14px;padding:10px 20px}
.topbar .logo-img{height:40px;border-radius:10px;box-shadow:var(--shadow-sm)}
.brand-link{display:flex;align-items:center;gap:11px;text-decoration:none;cursor:pointer}
.brand-link:hover{text-decoration:none}
.menu-btn{display:none}
.topbar .search-toggle{display:none}
/* v2.0.8: full-width search bar opened from the compact topbar (small phones) */
.search-pop{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(250,246,239,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:none;align-items:center;gap:10px;padding:10px 12px}
.search-pop.open{display:flex}
.search-pop input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:10px 16px;font-size:15px;outline:none}
.search-pop input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(14,122,79,.30)}
/* v2.0.15: visible Search (submit) button in the mobile search bar — the
   guaranteed tappable submit path on phones whose keyboard action key does
   not deliver a keydown Enter (the bar itself is now a <form>). */
.search-pop .search-go{flex:none;width:42px;height:42px;border:none;border-radius:999px;background:var(--grad-btn);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.search-pop .search-go:active{transform:scale(.95)}
.drawer-scrim{display:none}
.side-search{display:none}
.side-search input{width:100%;background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:9px 14px;font-size:14px;outline:none}
.notif[data-notif-reel],.notif[data-notif-channel],.notif[data-notif-page]{cursor:pointer}
.brand{font-size:25px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.3px}
.topbar .search{flex:1;max-width:430px;margin-left:6px;position:relative}
.topbar .search .search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted2);display:flex}
.topbar .search input{width:100%;background:var(--card);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:9px 16px 9px 40px;font-size:14px;outline:none;transition:border-color .15s, box-shadow .15s}
.topbar .search input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(14,122,79,.30)}
.topbar .spacer{flex:1}
.streak-chip{display:none;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line-soft);color:var(--gold-text);border-radius:999px;padding:7px 13px;font-weight:700;font-size:13.5px}
.streak-chip.show{display:inline-flex}
.icon-btn{background:var(--card);border:1px solid var(--line-soft);color:var(--text);border-radius:50%;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;position:relative;transition:background .15s, transform .1s}
.icon-btn:hover{background:var(--card2)}
.icon-btn:active{transform:scale(.94)}
.icon-btn .dot{position:absolute;top:-4px;right:-4px;background:var(--coral);color:#262019;font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px;border:2px solid var(--bg)}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--card2);border:2px solid var(--line-soft)}
.avatar.sm{width:34px;height:34px}.avatar.lg{width:92px;height:92px;border-width:3px}

/* ---------- layout: 3 columns on desktop ---------- */
.layout{width:100%;margin:0;display:grid;grid-template-columns:212px minmax(0,1fr);gap:20px;padding:20px 18px 96px}
.sidebar{position:sticky;top:78px;height:fit-content;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm)}
.sidebar a{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;color:var(--text);font-weight:600;font-size:14.5px;transition:background .15s}
.sidebar a:hover{background:var(--card2);text-decoration:none}
.sidebar a.active{background:linear-gradient(120deg,rgba(14,122,79,.16),rgba(242,160,7,.18));color:var(--text)}
.sidebar a .ic{color:var(--muted)}
.sidebar a.active .ic{color:var(--violet)}
.side-user{display:flex;gap:10px;align-items:center;padding:4px 6px 14px;border-bottom:1px solid var(--line-soft);margin-bottom:10px}
.side-user .nm{font-weight:700;font-size:14.5px;line-height:1.25}
.side-user .un{color:var(--muted);font-size:12.5px}
.level-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(14,122,79,.10);border:1px solid rgba(14,122,79,.40);color:var(--green-deep);font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;vertical-align:middle;white-space:nowrap}
.side-credit{margin-top:14px;padding:12px 6px 2px;border-top:1px solid var(--line-soft)}
.credit{font-size:12.5px;color:var(--muted2)}
.credit a{color:var(--violet);font-weight:600}
.maincol{min-width:0}
.rightrail{display:none}
@media (min-width:1120px){
  .layout{grid-template-columns:212px minmax(0,1fr) 312px}
  .rightrail{display:block;position:sticky;top:78px;height:fit-content}
}
/* ---------- v2.0.13: independent column scrolling (desktop only) ----------
   Each zone scrolls on its own: the sticky sidebar and right rail become
   their own scroll containers, capped just under the viewport height
   (sticky top 78px + 20px breathing room), and overscroll-behavior:
   contain stops a finished zone from chaining its scroll into the page.
   The centre column keeps the window scroll, so scrolling over the posts
   scrolls only the posts. Mobile is untouched by THESE rules: at ≤860px
   the sidebar is the slide-in drawer (its own scroll fix lives in the
   ≤860px block below) and these rules never apply. */
@media (min-width:861px){
  .sidebar{max-height:calc(100vh - 98px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#D8C69E transparent}
  .sidebar::-webkit-scrollbar{width:6px}
  .sidebar::-webkit-scrollbar-thumb{background:#D8C69E;border-radius:99px}
}
@media (min-width:1120px){
  .rightrail{max-height:calc(100vh - 98px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#D8C69E transparent}
  .rightrail::-webkit-scrollbar{width:6px}
  .rightrail::-webkit-scrollbar-thumb{background:#D8C69E;border-radius:99px}
}
.view{display:none;animation:fadeIn .22s ease}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
h2.section{font-size:20px;font-weight:700;margin:6px 0 14px}
.muted{color:var(--muted);font-size:14px}
.card-title{font-size:16px;font-weight:700;margin-bottom:10px}

/* ---------- cards / posts ---------- */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.post-head{display:flex;gap:12px;align-items:center;margin-bottom:10px;position:relative}
.post-head .name{font-weight:700;font-size:15px}
.post-head .name a{color:var(--text)}
.post-head .meta{color:var(--muted);font-size:12.5px}
.post-head .more{margin-left:auto;background:none;border:none;color:var(--muted);border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.post-head .more:hover{background:var(--card2);color:var(--text)}
.menu-pop{position:absolute;right:0;top:40px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:30;min-width:180px}
.menu-pop button{display:flex;gap:9px;align-items:center;width:100%;background:none;border:none;color:var(--text);font-size:14px;font-weight:600;padding:9px 11px;border-radius:9px;text-align:left}
.menu-pop button:hover{background:var(--card2)}
.menu-pop button.danger{color:var(--danger)}
.post-text{white-space:pre-wrap;font-size:15px;line-height:1.6;margin-bottom:10px;word-break:break-word}
.post-text .tag{color:var(--violet);font-weight:600}
.post-media{width:100%;border-radius:14px;margin-bottom:10px;display:block;max-height:480px;object-fit:cover;background:#000}
audio.post-media{max-height:none;height:48px;object-fit:initial}
video.post-media{object-fit:contain}
.reaction-bar{display:flex;gap:6px;align-items:center;padding:7px 2px 2px;border-top:1px solid var(--line-soft);margin-top:4px}
.react-btn{display:inline-flex;gap:7px;align-items:center;background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:600;padding:7px 11px;border-radius:999px;transition:background .15s,color .15s}
.react-btn:hover{background:var(--card2);color:var(--text)}
.react-btn.on-like{color:var(--violet);background:rgba(14,122,79,.12)}
.react-btn.on-love{color:var(--danger-bright);background:rgba(224,36,36,.10)}
.react-btn.on-haha{color:var(--gold-text);background:rgba(242,160,7,.15)}
.react-btn .cnt{font-size:12.5px}
.action-spacer{flex:1}
.icon-action{background:none;border:none;color:var(--muted);border-radius:999px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.icon-action:hover{background:var(--card2);color:var(--text)}
.icon-action.saved{color:var(--gold-text)}
.shared-box{border:1px solid var(--line-soft);border-radius:14px;padding:12px;background:var(--card2);margin-bottom:10px}
.circle-tag{display:inline-flex;gap:6px;align-items:center;background:var(--card2);border:1px solid var(--line-soft);color:var(--violet);font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;margin-bottom:8px}
.edited-tag{color:var(--muted2);font-size:12px;font-weight:500}
.comments{margin-top:10px;border-top:1px solid var(--line-soft);padding-top:12px;display:none}
.comments.open{display:block}
.comment{display:flex;gap:10px;margin-bottom:10px;font-size:14px}
.comment .bubble{background:var(--card2);border-radius:12px;padding:8px 12px;flex:1}
.comment .bubble .who{font-weight:700;font-size:13.5px}
.comment .reply-link{background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:2px 4px}
.comment .reply-link:hover{color:var(--text)}
.replies{margin-left:44px}
.comment-form{display:flex;gap:8px;margin-top:8px}
.comment-form input{flex:1;background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:9px 14px;outline:none}
.comment-form input:focus{border-color:var(--violet)}
.empty-state{text-align:center;padding:36px 20px;color:var(--muted)}
.empty-state .big-ic{color:var(--muted2);margin-bottom:10px;display:flex;justify-content:center}
.empty-state h3{color:var(--text);font-size:17px;margin-bottom:6px}

/* skeleton shimmer */
.skel{border-radius:14px;background:linear-gradient(100deg,var(--card) 40%,var(--card2) 50%,var(--card) 60%);background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- composer ---------- */
.composer textarea{width:100%;background:transparent;border:none;color:var(--text);font-size:15.5px;resize:vertical;min-height:52px;outline:none;line-height:1.5}
.composer .composer-top{display:flex;gap:12px;align-items:flex-start}
.composer .composer-top textarea{flex:1;padding-top:6px}
.composer .row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:12px}
.chip{display:inline-flex;gap:7px;align-items:center;background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;transition:border-color .15s}
.chip:hover{border-color:var(--violet)}
.chip.rec{border-color:var(--danger-bright);color:var(--danger-bright)}
.chip.challenge-chip{border-style:dashed;color:var(--gold-text)}
.btn{background:var(--grad-btn);color:#fff;border:none;border-radius:999px;padding:10px 24px;font-weight:700;font-size:15px;box-shadow:0 6px 18px rgba(14,122,79,.32);transition:transform .1s, box-shadow .15s, opacity .15s}
.btn:hover{box-shadow:0 8px 22px rgba(242,160,7,.45)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--card2);border:1px solid var(--line-soft);color:var(--text);box-shadow:none}
.btn.sm{padding:7px 16px;font-size:13.5px}
.btn:disabled{opacity:.55;cursor:default}
.preview-media{max-width:100%;border-radius:12px;margin-top:10px;max-height:260px}

/* ---------- challenge card ---------- */
.challenge-card{background:linear-gradient(130deg,rgba(14,122,79,.13),rgba(242,160,7,.15)),var(--card);border:1px solid rgba(242,160,7,.5)}
.challenge-card .cc-top{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.challenge-card .cc-badge{display:inline-flex;gap:6px;align-items:center;background:rgba(242,160,7,.16);color:var(--gold-text);border:1px solid rgba(242,160,7,.5);font-size:11.5px;font-weight:800;letter-spacing:.6px;border-radius:999px;padding:3px 10px;text-transform:uppercase}
.challenge-card h3{font-size:18px}
.challenge-card .hash{color:var(--gold-text);font-weight:700}

/* ---------- stories ---------- */
.stories{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 16px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{text-align:center;width:74px;flex:none;cursor:pointer;background:none;border:none;color:var(--text)}
.story .ring{width:66px;height:66px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#0E7A4F,#F2A007,#0E7A4F);margin:0 auto 6px;transition:transform .15s}
.story:hover .ring{transform:scale(1.05)}
.story .ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--bg)}
.story .plus{font-size:24px;line-height:58px;background:var(--card2);border-radius:50%;height:100%;color:var(--violet)}
.story span{font-size:12px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-viewer{position:fixed;inset:0;background:#04050F;z-index:120;display:none;flex-direction:column}
.story-viewer.open{display:flex}
.sv-top{padding:14px 16px 6px;max-width:520px;width:100%;margin:0 auto}
.sv-segments{display:flex;gap:5px}
.sv-segments .seg{flex:1;height:3.5px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.sv-segments .seg i{display:block;height:100%;background:#fff;width:0}
.sv-head{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#fff;font-weight:600;font-size:14px}
.sv-close{background:rgba(255,255,255,.12);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:15px}
.sv-body{flex:1;display:flex;align-items:center;justify-content:center;max-width:520px;width:100%;margin:0 auto;padding:10px 16px 30px;position:relative}
.sv-body img{max-width:100%;max-height:100%;border-radius:16px;object-fit:contain}
.sv-text{background:linear-gradient(130deg,#0E7A4F,#C07F00);color:#fff;border-radius:16px;padding:34px 26px;font-size:21px;font-weight:600;text-align:center;line-height:1.5;width:100%}
.sv-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:#fff;width:42px;height:42px;border-radius:50%;font-size:22px;z-index:2}
/* v2.0.10 — story music: viewer sound label + mute toggle sit in .sv-top */
.sv-btns{display:inline-flex;gap:6px}
.sv-sound{margin-top:8px;color:#fff;font-size:12.5px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-body video{max-width:100%;max-height:100%;border-radius:16px;object-fit:contain}
/* v2.0.10 — story composer: picked-sound chip + library picker rows */
.picked-sound{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;font-weight:600;margin-bottom:8px;max-width:100%}
.picked-sound .ps-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picked-sound button{background:none;border:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:50%}
.picked-sound button:hover{color:var(--text);background:rgba(38,32,25,.08)}
.sound-picker{margin-top:8px;max-height:232px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.sound-pick-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);color:var(--text);padding:9px 12px;cursor:pointer;font-size:13.5px}
.sound-pick-row:last-child{border-bottom:none}
.sound-pick-row:hover{background:rgba(38,32,25,.05)}
.sound-pick-row .spr-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sound-pick-row .spr-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sound-pick-row .spr-main span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sound-pick-row .spr-ic{flex:none;display:inline-flex}
.sound-pick-row .spr-prev{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(14,122,79,.14);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--violet)}
.sv-prev{left:10px}.sv-next{right:10px}

/* ---------- right rail widgets ---------- */
.widget{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.widget h3{font-size:15px;margin-bottom:12px;display:flex;gap:8px;align-items:center}
.widget h3 .ic{color:var(--gold-text)}
.trend-item{padding:9px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.trend-item:last-child{border-bottom:none}
.trend-item .tt{font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trend-item .tm{color:var(--muted);font-size:12px;margin-top:2px}
.kotw{display:flex;gap:12px;align-items:center}
.kotw .crown{color:var(--gold-text)}
/* ---------- v2.0.17: fixed marketing banner slot ----------
   Replaces the visible Star of the Week rail widget (the weekly-star data
   stays in the discover payload, dormant). That box measured 131px tall;
   the banner slot is 260px — double. One shared component (.banner-slot)
   renders at the top of the right rail AND inside every profile; the
   in-profile block only appears where the rail itself is hidden
   (<1120px), as a full-width block under the profile header/stats. */
.banner-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;height:260px;border-radius:var(--radius);margin-bottom:16px;overflow:hidden;text-decoration:none;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm)}
.banner-house{background:linear-gradient(155deg,#0A5C3C 0%,#0E7A4F 52%,#C98406 118%);color:#FFFDF6;padding:22px 20px;text-align:center;cursor:pointer}
.banner-mark{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1}
.banner-tag{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.banner-head{font-size:18.5px;line-height:1.3;margin-top:8px}
.banner-sub{font-size:13.5px;line-height:1.5;opacity:.92;max-width:250px}
.banner-cta{margin-top:12px;background:#FFFDF6;color:#0B5C3C;font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.banner-media{background:var(--card2)}
.banner-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ad-label{position:absolute;top:10px;right:10px;z-index:2;background:rgba(24,19,10,.72);color:#FFF3D6;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.banner-inprofile{display:none}
@media (max-width:1119px){.banner-inprofile{display:flex;margin:14px 0 4px}}
.rail-person{display:flex;gap:10px;align-items:center;padding:8px 0}
.rail-person:last-child{padding-bottom:0}

/* ---------- people / circles ---------- */
.person{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.person:last-child{border-bottom:none}
.person .online-dot{width:10px;height:10px;border-radius:50%;background:#17A865;border:2px solid var(--card);margin-left:-16px;margin-top:26px;position:relative;z-index:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.circle-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.circle-card .c-ic{width:52px;height:52px;border-radius:16px;background:linear-gradient(130deg,rgba(14,122,79,.20),rgba(242,160,7,.22));display:flex;align-items:center;justify-content:center;color:var(--violet)}
.circle-card h3{margin:10px 0 6px;font-size:17px}

/* ---------- profile ---------- */
.cover{height:200px;border-radius:var(--radius);background:var(--grad);background-size:cover;background-position:center;position:relative;margin-bottom:58px;box-shadow:var(--shadow-sm)}
.cover .avatar.lg{position:absolute;left:22px;bottom:-44px;border:4px solid var(--bg)}
.profile-info{padding:4px 10px}
.profile-info h2{font-size:24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.profile-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.p-chip{display:inline-flex;gap:6px;align-items:center;background:var(--card2);border:1px solid var(--line-soft);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;color:var(--muted)}
.p-chip.flame{color:var(--gold-text)}.p-chip.points{color:var(--green-deep)}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stats-row .st{background:var(--card2);border:1px solid var(--line-soft);border-radius:14px;padding:12px;text-align:center}
.stats-row .st .n{font-size:20px;font-weight:800;font-family:'Poppins',sans-serif}
.stats-row .st .l{color:var(--muted);font-size:12px}
.badges-row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.badge-item{display:inline-flex;gap:6px;align-items:center;background:rgba(242,160,7,.12);border:1px solid rgba(242,160,7,.45);color:var(--gold-text);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700}
.tabs{display:flex;gap:6px;margin:14px 0;border-bottom:1px solid var(--line-soft);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#D8C69E transparent}
.tabs::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-track{background:rgba(38,32,25,.06);border-radius:99px}
.tabs::-webkit-scrollbar-thumb{background:#D8C69E;border-radius:99px}
.tabs button{background:none;border:none;color:var(--muted);font-weight:700;font-size:14px;padding:9px 14px;border-bottom:2.5px solid transparent;margin-bottom:-1px;flex:none;white-space:nowrap}
.tabs button.active{color:var(--text);border-bottom-color:var(--coral)}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.media-grid img,.media-grid video{width:100%;height:120px;object-fit:cover;border-radius:12px;background:#000}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input,.field textarea{width:100%;background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:12px;padding:11px 14px;outline:none;font-size:15px;transition:border-color .15s}
.field input:focus,.field textarea:focus{border-color:var(--violet)}

/* ---------- loops ---------- */
.loops-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.loop-title-input{width:100%;background:var(--card);border:1px solid var(--line-soft);color:var(--text);border-radius:12px;padding:10px 14px;outline:none;margin-bottom:12px;font-size:14px}
.loops-wrap{height:calc(100vh - 240px);min-height:480px;overflow-y:auto;scroll-snap-type:y mandatory;border-radius:var(--radius);scrollbar-width:none;background:#04050F}
.loops-wrap::-webkit-scrollbar{display:none}
.loop-item{position:relative;height:100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;background:#04050F}
.loop-item video{height:100%;max-width:100%;object-fit:contain}
.loop-overlay{position:absolute;left:0;right:0;bottom:0;padding:16px 76px 18px 16px;background:linear-gradient(transparent,rgba(2,3,12,.85));color:#fff}
.loop-overlay .lt{font-weight:600;font-size:15px;line-height:1.45}
.loop-rail{position:absolute;right:10px;bottom:70px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:3}
.loop-rail button{background:rgba(24,20,14,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.loop-rail .lr{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;font-size:12px;font-weight:700}
.loop-rail button.liked{color:#FF8A8E;border-color:rgba(255,94,98,.6)}
.sheet{position:fixed;inset:0;background:rgba(30,24,16,.55);z-index:110;display:none;align-items:flex-end;justify-content:center}
.sheet.open{display:flex}
.sheet-box{background:var(--card);width:100%;max-width:560px;max-height:78vh;border-radius:22px 22px 0 0;padding:18px;display:flex;flex-direction:column}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheet-list{overflow-y:auto;flex:1;padding-right:2px}

/* ---------- baithak ---------- */
.room-card-live{display:flex;gap:12px;align-items:center}
.live-badge{display:inline-flex;gap:7px;align-items:center;background:rgba(224,36,36,.09);border:1px solid rgba(224,36,36,.45);color:var(--danger);font-size:11.5px;font-weight:800;letter-spacing:.8px;border-radius:999px;padding:4px 11px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--danger-bright);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,36,36,.5)}70%{box-shadow:0 0 0 8px rgba(224,36,36,0)}100%{box-shadow:0 0 0 0 rgba(224,36,36,0)}}
.room-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.room-head h3{font-size:18px;flex:1}
.room-head{flex-wrap:wrap}
.room-members{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.member-chip{display:inline-flex;gap:7px;align-items:center;background:var(--card2);border:1px solid var(--line-soft);border-radius:999px;padding:3px 11px 3px 3px;font-size:12.5px;font-weight:600}
.member-chip .host-tag{background:var(--grad-btn);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px;letter-spacing:.4px}
.room-msgs{height:320px;overflow-y:auto;border:1px solid var(--line-soft);border-radius:14px;padding:14px;background:var(--bg2);display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.room-msg{display:flex;gap:9px;font-size:14px;align-items:flex-start}
.room-msg .rb{background:var(--card2);border-radius:12px;padding:8px 12px;flex:1}
.room-msg audio{width:100%;height:38px;margin-top:4px}
.room-actions{display:flex;gap:10px;align-items:center}
.talk-btn{display:inline-flex;gap:8px;align-items:center;background:var(--grad-btn);color:#fff;border:none;border-radius:999px;padding:12px 20px;font-weight:700;font-size:14.5px;box-shadow:0 6px 18px rgba(14,122,79,.30)}
.talk-btn.rec{background:#B91C1C;animation:pulse 1.2s infinite}
.room-form{display:flex;gap:8px;flex:1}
.room-form input{flex:1;background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:11px 16px;outline:none}

/* ---------- chat ---------- */
.chat-search{margin-bottom:12px}
.chat-search input{width:100%;background:var(--card);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:10px 16px;outline:none;font-size:14px}
.chat-wrap{display:grid;grid-template-columns:290px minmax(0,1fr);gap:0;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm)}
.chat-list{border-right:1px solid var(--line-soft);max-height:66vh;overflow-y:auto}
.chat-item{display:flex;gap:10px;padding:12px;cursor:pointer;align-items:center;position:relative}
.chat-item:hover,.chat-item.active{background:var(--card2)}
.chat-item .unread{background:var(--coral);color:#262019;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;margin-left:auto}
.chat-item .cdot{position:absolute;left:40px;bottom:12px;width:11px;height:11px;border-radius:50%;background:#17A865;border:2px solid var(--card)}
.chat-box{display:flex;flex-direction:column;height:66vh;min-width:0}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:75%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.45}
.msg.me{align-self:flex-end;background:#DCEFE2;color:var(--text);border:1px solid rgba(14,122,79,.18);border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;background:var(--card2);border-bottom-left-radius:4px}
.msg img{max-width:230px;width:100%;border-radius:10px;display:block}
.msg audio{width:210px;height:38px}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-soft);align-items:center}
/* v2.0.16: the composer overflowed its panel on desktop — the thread
   column (1fr = minmax(auto,1fr)) could not shrink below the pane's
   min-content, and the text input (a flex item with min-width:auto) would
   not shrink below its intrinsic ~232px, giving the pane a ~429px floor;
   list 290px + 429px exceeded the centre zone at common laptop widths
   and .chat-wrap's overflow:hidden clipped the Send button. Fix: the
   track and pane may shrink (minmax(0,1fr) / min-width:0 above), the
   input gives up its intrinsic minimum so IT absorbs the squeeze, and
   the buttons never shrink. */
.chat-form input{flex:1;min-width:0;background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:11px 16px;outline:none}
.chat-form .btn,.chat-form .icon-chip{flex:none}
.chat-head{padding:12px 16px;border-bottom:1px solid var(--line-soft);font-weight:700;display:flex;gap:10px;align-items:center}
.chat-head .presence{font-size:12px;color:var(--muted);font-weight:500}
.chat-head .presence .on{color:var(--violet);font-weight:700}
.icon-chip{display:inline-flex;align-items:center;justify-content:center;background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:50%;width:42px;height:42px;cursor:pointer}
.icon-chip.rec{border-color:var(--danger-bright);color:var(--danger-bright)}

/* ---------- notifications ---------- */
.notif-group{color:var(--muted);font-size:12.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;margin:14px 0 4px}
.notif-group:first-child{margin-top:0}
.notif{display:flex;gap:12px;padding:11px 8px;border-bottom:1px solid var(--line-soft);align-items:center;border-radius:10px}
.notif.unread{background:rgba(14,122,79,.08)}
.notif:last-child{border-bottom:none}

/* ---------- settings ---------- */
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600}
.about-card .credit{font-size:14px}

/* ---------- auth ---------- */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;background:radial-gradient(900px 500px at 15% 0%,rgba(14,122,79,.14),transparent),radial-gradient(900px 500px at 90% 100%,rgba(242,160,7,.16),transparent),var(--bg)}
.auth-split{display:grid;grid-template-columns:1fr 460px;gap:0;width:100%;min-height:100vh;margin:0;background:var(--bg)}
.auth-split .auth-wrap{min-height:0}
.auth-brand{padding:34px 40px 30px;background:linear-gradient(150deg,rgba(14,122,79,.13),rgba(242,160,7,.15)),var(--bg2);display:flex;flex-direction:column}
.brand-logo{display:block;align-self:flex-start;height:68px;width:auto;max-width:80%;object-fit:contain;border-radius:14px;margin:0 0 10px;background:transparent}
.brand-slides{position:relative;flex:1 1 auto;min-height:240px;width:100%;border:none;border-radius:0;box-shadow:none;background:none;margin:0}
.brand-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease}
.brand-slide.on{opacity:1}
.brand-cap{position:static;text-align:center;margin:16px 0 0;color:var(--text);font-weight:600;font-size:15.5px}
.brand-dots{position:static;display:flex;justify-content:center;gap:6px;margin-top:10px}
.brand-dots span{width:7px;height:7px;border-radius:50%;background:rgba(38,32,25,.25);transition:background .3s}
.brand-dots span.on{background:var(--coral)}
@media (prefers-reduced-motion: reduce){.brand-slide{transition:none}}
.brand-line{font-family:'Poppins',sans-serif;font-weight:700;font-size:21px;text-align:center;margin:14px 0 0}
.auth-brand h2,.auth-brand .brand-name{font-size:27px;line-height:1.25;margin-bottom:8px;color:var(--text)}
.auth-tag{color:var(--muted);font-size:14.5px;margin-bottom:26px}
.auth-feats,.brand-feats{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:auto}
.auth-feats li,.brand-feats li{display:flex;flex-direction:column;gap:1px;padding-left:16px;border-left:3px solid rgba(242,160,7,.85);font-size:14.5px;color:var(--text)}
.auth-feats b{font-size:14.5px}
.auth-feats span{color:var(--muted);font-size:13.5px}
.brand-feats li{display:block}
.auth-card{padding:40px 36px;text-align:left;color:var(--text)}
.auth-card h1{font-size:26px;font-weight:700;color:var(--text)}
.tagline{color:var(--muted);margin:6px 0 22px;font-size:14.5px}
.auth-card .btn{width:100%;margin-top:6px}
.auth-card .field input{background:var(--card2);border-color:var(--line);color:var(--text)}
.auth-card .credit{text-align:center;margin-top:14px}
.auth-switch{margin-top:14px;font-size:14.5px;color:var(--muted);text-align:center}
.auth-logo{display:block;height:56px;width:auto;max-width:70%;object-fit:contain;border-radius:12px;margin:0 auto 18px}
.auth-logo.mobile-only{display:none}
.mobile-only{display:none}
.auth-credit{margin-top:20px;text-align:center}
.error{background:rgba(224,36,36,.08);border:1px solid rgba(224,36,36,.55);color:#B3261E;border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:14px;display:none}
.error.show{display:block}
@media (max-width:820px){
  .auth-split{grid-template-columns:1fr;min-height:0}
  .auth-brand{padding:22px 20px 18px}
  .brand-logo{height:52px;margin-bottom:6px}
  .brand-slides{flex:none;height:auto;min-height:0;aspect-ratio:3/2;margin:0}
  .brand-line{font-size:18px}
  .auth-split .auth-wrap{min-height:0}
  .auth-card{padding:28px 24px}
}

/* ---------- bottom nav (mobile) ---------- */
.bottomnav{display:none}
.feed-end{text-align:center;padding:22px 0 8px}
.feed-end .credit{margin-top:6px}
@media (max-width:860px){
  .layout{grid-template-columns:1fr;padding:14px 12px 96px}
  /* The sidebar becomes a slide-in drawer: every section (Pages, Channels,
     Trending, Groups, Events, Settings, Log Out…) stays reachable on phones.
     v2.0.13 drawer-scroll fix: the base .sidebar rule sets height:fit-content,
     which (with top:0;bottom:0 also set) made this box as tall as ALL its
     content — the bottom hung off-screen and overflow-y:auto never engaged,
     so the menu "jammed" and its last entries were unreachable. Pinning the
     height to the viewport (100vh, then 100dvh for mobile URL bars) makes
     the content overflow the box instead, and the internal scroll works. */
  .sidebar{display:flex;position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;max-height:100dvh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;width:min(300px,84vw);z-index:85;border-radius:0;transform:translateX(-106%);transition:transform .25s ease;overflow-y:auto}
  .sidebar.open{transform:none;box-shadow:var(--shadow)}
  .menu-btn{display:inline-flex}
  .drawer-scrim{display:block;position:fixed;inset:0;background:rgba(30,24,16,.5);z-index:84;opacity:0;pointer-events:none;transition:opacity .25s ease}
  .drawer-scrim.show{opacity:1;pointer-events:auto}
  .side-search{display:block;margin-bottom:10px}
  .topbar .search{display:none}
  .topbar{padding:10px 14px}
  .brand{font-size:22px}
  .chat-wrap{grid-template-columns:1fr}
  .loops-wrap{height:calc(100vh - 265px)}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(255,253,248,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);z-index:60;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav button{flex:1;background:none;border:none;color:var(--muted);font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0}
  .bottomnav button.active{color:var(--violet)}
  .bottomnav .post-btn .ic-wrap{background:var(--grad);color:#fff;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-18px;border:3px solid var(--bg);box-shadow:0 8px 20px rgba(14,122,79,.40)}
}

/* ---------- v2.0.8: compact topbar on small phones (≤560px only) ----------
   The fixed topbar children summed to ~517px min-content, so phones got a
   sideways-sliding page. Below 560 the bar compacts: slimmer gaps/padding,
   smaller logo + wordmark, search collapses to an icon button (opens the
   .search-pop bar), the streak chip goes icon-only (the count stays on the
   profile), and under 430 the wordmark text hides (logo mark + BETA stay).
   Desktop (>560px) is untouched. */
@media (max-width:560px){
  /* v2.0.13: gap 6→4px (and a slimmer streak chip) so the added top-right
     Logout button fits without squeezing the round controls at 360px */
  .topbar{gap:4px;padding:8px}
  .brand-link{gap:6px}
  .topbar .logo-img{height:28px;border-radius:8px}
  .brand{font-size:18px}
  .topbar .beta-badge{font-size:9px;padding:2px 5px;margin-left:0;letter-spacing:.4px}
  .topbar .search-toggle{display:inline-flex}
  .topbar .icon-btn{width:36px;height:36px}
  .topbar .avatar{width:36px;height:36px}
  .streak-chip{font-size:0;gap:0;padding:8px 8px}
  /* post reaction rows are wider than a phone card — let them wrap instead
     of pushing the whole page sideways */
  .reaction-bar{flex-wrap:wrap;gap:2px}
  .react-btn{padding:6px 8px}
}
@media (max-width:430px){
  .brand{display:none}
}

/* ---------- modal / toast / misc ---------- */
.modal{position:fixed;inset:0;background:rgba(30,24,16,.55);display:none;align-items:center;justify-content:center;z-index:90;padding:16px}
.modal.open{display:flex}
.modal .box{background:var(--card);border:1px solid var(--line-soft);border-radius:20px;max-width:520px;width:100%;max-height:86vh;overflow-y:auto;padding:22px;box-shadow:var(--shadow)}
.logout-box{max-width:420px}
/* ---------- admin users table: name link opens the real profile in a new tab (v2.0.13; was the v2.0.12 overview popup) ---------- */
.adm-user-link{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;cursor:pointer;vertical-align:middle}
.adm-user-link:hover .adm-user-name{color:var(--violet);text-decoration:underline}
.adm-user-link:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:8px}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:var(--card3);border:1px solid var(--line);color:var(--text);padding:11px 20px;border-radius:999px;font-size:14px;font-weight:600;z-index:130;display:none;box-shadow:var(--shadow)}
.toast.show{display:block}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card2);border:1px solid var(--line-soft);border-radius:14px;padding:16px;text-align:center}
.stat .num{font-size:26px;font-weight:800;font-family:'Poppins',sans-serif}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl td,table.tbl th{padding:9px;border-bottom:1px solid var(--line-soft);text-align:left}

/* ================= v1.0.0 additions ================= */
/* public chrome (landing + legal pages) */
.pub-top{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:18px;padding:12px 26px;flex-wrap:wrap}
.pub-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-family:'Poppins',sans-serif;font-weight:800;font-size:22px}
.pub-brand:hover{text-decoration:none}
.pub-brand img{height:38px;border-radius:10px}
.pub-nav{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pub-nav a{color:var(--muted);font-weight:600;font-size:14.5px}
.pub-nav a:hover{color:var(--text);text-decoration:none}
.hero{text-align:center;padding:72px 22px 54px;max-width:820px;margin:0 auto}
.hero-logo{width:110px;height:110px;border-radius:26px;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(34px,6vw,54px);line-height:1.12;margin:22px 0 14px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);font-size:17.5px;max-width:640px;margin:0 auto 26px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-cta .btn{padding:13px 26px;font-size:16px}
.hero-note{color:var(--muted2);font-size:13.5px;margin-top:16px}
.landing-sec{max-width:1040px;margin:0 auto;padding:34px 22px}
.landing-sec h2{text-align:center;font-size:29px;margin-bottom:24px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.feat-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.feat-card h3{font-size:17px;margin-bottom:7px}
.feat-card p{color:var(--muted);font-size:14.5px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.step{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px;text-align:center}
.step-n{display:inline-flex;width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:18px;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{font-size:16.5px;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px}
.safety-band{text-align:center}
.safety-band p{color:var(--muted);max-width:640px;margin:0 auto 20px}
.site-footer{border-top:1px solid var(--line-soft);margin-top:50px;background:var(--bg2)}
.sf-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;padding:38px 22px 10px}
@media(max-width:760px){.sf-grid{grid-template-columns:1fr 1fr}}
.sf-logo{display:flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;font-weight:800;font-size:20px;margin-bottom:10px}
.sf-logo img{height:34px;border-radius:9px}
.sf-col p{color:var(--muted);font-size:14px;max-width:320px}
.sf-col h4{font-size:14px;margin-bottom:12px;color:var(--text)}
.sf-col a{display:block;color:var(--muted);font-size:14px;margin-bottom:8px}
.sf-col a:hover{color:var(--text)}
.sf-bottom{max-width:1100px;margin:0 auto;padding:16px 22px 26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--muted2);font-size:13.5px;border-top:1px solid var(--line-soft);margin-top:16px}
.sf-bottom .credit{margin-left:auto}
/* legal / help pages */
.legal-wrap{max-width:820px;margin:0 auto;padding:36px 22px 10px}
.legal-wrap h1{font-size:32px;margin-bottom:6px}
.legal-updated{color:var(--muted2);font-size:13.5px;margin-bottom:22px}
.legal-wrap h2{font-size:19px;margin:26px 0 8px}
.legal-wrap p,.legal-wrap li{color:#4A4238;font-size:15px}
.legal-wrap ul{margin:8px 0 8px 20px}
.legal-wrap li{margin-bottom:5px}
.faq-cats{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.faq-cats button{background:var(--card);border:1px solid var(--line-soft);color:var(--muted);border-radius:999px;padding:7px 15px;font-weight:600;font-size:13.5px}
.faq-cats button.active{background:var(--grad-btn);color:#fff;border-color:transparent}
.faq-item{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;background:none;border:none;color:var(--text);text-align:left;padding:15px 17px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;gap:10px}
.faq-arrow{color:var(--muted2);font-size:13px;flex:none;align-self:center}
.faq-a{display:none;padding:0 17px 15px}
.faq-a.open{display:block}
.faq-a p{color:var(--muted);font-size:14.5px}
/* auth extras */
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin:10px 0;cursor:pointer}
.check-row input{margin-top:3px;width:17px;height:17px;accent-color:var(--violet)}
.auth-legal{text-align:center;color:var(--muted2);font-size:13px;margin-top:12px}
.linklike{background:none;border:none;color:var(--violet);font:inherit;cursor:pointer;padding:0}
.linklike:hover{text-decoration:underline}
.ok-box{background:rgba(14,122,79,.09);border:1px solid rgba(14,122,79,.45);color:var(--green-deep);border-radius:12px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.ok-tag{background:rgba(14,122,79,.12);color:var(--violet);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}
.warn-tag{background:rgba(224,36,36,.10);color:var(--danger);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}
/* in-app v1 additions */
.vbadge{color:var(--violet);display:inline-flex;vertical-align:-3px}
/* v2.0.8: sidebar footer links — tidy 2-column mini-grid, no dot separators
   (the narrow 212px sidebar wrapped the inline dots onto their own lines) */
.side-legal{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;padding:10px 6px 0;font-size:12.5px;color:var(--muted2);line-height:1.35}
.side-legal a{display:block;padding:6px 8px;border-radius:9px;color:var(--muted);font-size:12.5px;font-weight:600;transition:background .15s,color .15s}
.side-legal a:hover{background:var(--card2);color:var(--text);text-decoration:none}
.aud-select{background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:8px 10px;font-size:13px;outline:none}
.held-banner{background:rgba(242,160,7,.13);border:1px solid rgba(242,160,7,.5);color:#8A5F00;border-radius:10px;padding:8px 12px;font-size:13px;margin-bottom:10px;display:flex;gap:7px;align-items:center}
.held-note{font-size:12px;color:#8A5F00;margin-top:4px}
.msg.held{opacity:.75;border:1px dashed rgba(242,160,7,.65)}
.held-tag{display:block;font-size:11px;color:#8A5F00;margin-top:3px}
.pinned-tag{display:inline-flex;gap:5px;align-items:center;background:rgba(242,160,7,.14);color:var(--gold-text);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;margin-left:6px}
.priv-tag{display:inline-flex;gap:4px;align-items:center;background:var(--card3);color:var(--muted);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700;vertical-align:2px}
.role-tag{background:var(--card3);color:var(--violet);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;text-transform:capitalize}
.cat-chip{background:var(--card3);color:var(--gold-text);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;text-transform:capitalize}
.progress{background:var(--card2);border-radius:999px;height:10px;overflow:hidden;margin:10px 0}
.progress i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .4s}
.checklist-items{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.cl-item{display:inline-flex;gap:6px;align-items:center;background:var(--card2);border:1px solid var(--line-soft);border-radius:999px;padding:5px 11px;font-size:12.5px;color:var(--muted)}
.cl-item.done{color:var(--violet);border-color:rgba(14,122,79,.4)}
.bar{background:var(--card2);border-radius:999px;height:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--violet)}
.bar.coral i{background:var(--coral)}
.sep{border:none;border-top:1px solid var(--line-soft);margin:18px 0}
.member-list{display:flex;flex-wrap:wrap;gap:8px}
.tag-loops{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:8px}
.tag-loop video{width:100%;border-radius:12px;max-height:300px;background:#000}
.mention{color:var(--violet);font-weight:600}
.post-text a{color:var(--violet)}
/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(4,6,20,.94);z-index:200;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:92vh;border-radius:12px;box-shadow:var(--shadow)}
.lightbox-close{position:absolute;top:16px;right:18px}
/* onboarding */
.ob-steps{display:flex;gap:7px;margin-bottom:16px}
.ob-steps span{flex:1;height:5px;border-radius:99px;background:var(--card3)}
.ob-steps span.on{background:var(--grad)}
.ob-foot{display:flex;align-items:center;gap:10px;margin-top:20px}
.ob-h{font-size:14px;margin:14px 0 8px;color:var(--muted)}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px}
.pick-chip{background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:8px 15px;font-weight:600;font-size:13.5px}
.pick-chip.on{background:var(--grad-btn);border-color:transparent;color:#fff}
.switch-row input[type="checkbox"]{width:20px;height:20px;accent-color:var(--violet);flex:none}
.btn.danger{background:linear-gradient(120deg,#B3261E,#E02424)}
select{background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:10px;padding:10px 12px;width:100%;outline:none}
.field select{width:100%}

/* ================= v2.0.0 "Mixture" ================= */
.feed-sort{display:flex;gap:8px;align-items:center;margin:4px 0 12px}
.feed-sort .chip.active{background:var(--grad-btn);color:#fff;border-color:transparent}
.page-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.4px;background:rgba(14,122,79,.10);color:var(--green-deep);border:1px solid rgba(14,122,79,.35);border-radius:20px;padding:1px 7px;vertical-align:middle;margin-left:4px}
.poll-box{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px}
.poll-q{font-weight:600;margin-bottom:9px;display:flex;gap:6px;align-items:center}
.poll-opt{position:relative;display:flex;width:100%;text-align:left;gap:8px;align-items:center;background:#FFFFFF;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 12px;margin-bottom:7px;cursor:pointer;overflow:hidden;font-size:14px}
.poll-opt:hover{border-color:var(--violet)}
.poll-opt.done{cursor:default}
.poll-opt.done i{position:absolute;inset:0 auto 0 0;background:rgba(14,122,79,.25);border-radius:10px}
.poll-opt.done.mine{border-color:var(--violet)}
.poll-opt.done.mine i{background:rgba(242,160,7,.38)}
.poll-opt .po-t{position:relative;flex:1}
.poll-opt .po-p{position:relative;font-weight:700;font-size:13px}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:12px}
.video-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer}
.video-card:hover{border-color:var(--violet)}
.vthumb{position:relative;aspect-ratio:16/9;background:#05071a}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vthumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.vdur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;font-size:11.5px;padding:2px 6px;border-radius:6px}
.vprog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.25)}
.vprog i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--coral))}
.vmeta{padding:10px 12px}
.reel-strip{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 12px}
.reel-mini{position:relative;flex:0 0 128px;height:200px;border-radius:14px;overflow:hidden;background:#05071a;border:1px solid var(--line);cursor:pointer}
.reel-mini video{width:100%;height:100%;object-fit:cover}
.rm-meta{position:absolute;left:8px;bottom:22px;font-size:11.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);display:flex;gap:4px;align-items:center}
.rm-title{position:absolute;left:8px;right:8px;bottom:6px;font-size:11.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duet-wrap{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.duet-wrap video{width:100%;height:100%;object-fit:cover}
.duet-tag{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;font-size:11.5px;padding:3px 10px;border-radius:20px;white-space:nowrap}
.loop-chan{display:inline-flex;gap:5px;align-items:center;background:rgba(0,0,0,.55);border-radius:16px;padding:3px 10px;font-size:12px;color:#fff;cursor:pointer;margin-bottom:6px}
.loop-sound{display:flex;gap:6px;align-items:center;background:none;border:none;color:#fff;font-size:12.5px;cursor:pointer;padding:2px 0;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.loop-duet-btn{display:inline-flex;gap:6px;align-items:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:16px;padding:4px 11px;font-size:12px;cursor:pointer;margin-top:4px}
.trend-tags{display:flex;gap:8px;flex-wrap:wrap}
.trend-tag{background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:6px 13px;color:var(--text);text-decoration:none;font-weight:600;font-size:13.5px}
/* v2.0.9 — hashtag picker (upload + edit forms) and watch-page tag row */
.tagbox{position:relative}
.tag-chips{display:flex;flex-wrap:wrap;gap:6px}
.tag-chips:not(:empty){margin-bottom:8px}
.tag-chip{display:inline-flex;align-items:center;gap:4px;background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:4px 5px 4px 11px;font-size:13px;font-weight:600}
.tag-chip button{background:none;border:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:50%}
.tag-chip button:hover{color:var(--text);background:rgba(38,32,25,.08)}
.tag-suggest{position:absolute;left:0;right:0;top:100%;z-index:45;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:6px;overflow:hidden;box-shadow:0 14px 34px rgba(120,90,20,.28)}
.tag-sug{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--text);padding:10px 13px;font-size:14px;cursor:pointer;text-align:left}
.tag-sug:hover,.tag-sug.hi{background:var(--card2)}
.tag-sug .ts-tag{font-weight:700}
.tag-sug .ts-count{color:var(--muted);font-size:12.5px;white-space:nowrap}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.trend-tag span{color:var(--muted);font-weight:400}
.trend-tag:hover{border-color:var(--coral)}
.sound-row{display:flex;gap:12px;align-items:flex-start}
.event-cover{width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin-bottom:10px}
.memories-card{border-color:rgba(242,160,7,.55)}
.mem-label{display:inline-block;font-size:12px;font-weight:700;color:var(--gold-text);margin-bottom:6px}
.memory-item article{box-shadow:none;border-color:var(--line)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.shop-item{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px}
.shop-item img{width:100%;height:110px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.shop-price{color:var(--violet);font-weight:700;margin:3px 0}
.c-ic img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.c-ic-sm{display:inline-flex;width:34px;height:34px;border-radius:10px;background:var(--card2);border:1px solid var(--line);align-items:center;justify-content:center;color:var(--muted);flex:0 0 auto}
.beta-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;background:linear-gradient(135deg,var(--violet),var(--coral));color:#fff;border-radius:6px;padding:2px 6px;vertical-align:middle;margin-left:6px}
.beta-notice{position:relative;background:linear-gradient(90deg,rgba(14,122,79,.10),rgba(242,160,7,.12));border:1px solid rgba(242,160,7,.5);color:var(--text);border-radius:10px;padding:8px 34px 8px 12px;font-size:13px;line-height:1.45;margin-bottom:12px}
.beta-notice a{color:var(--violet);font-weight:700;text-decoration:underline}
.beta-notice-x{position:absolute;top:4px;right:8px;background:none;border:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:2px}
.beta-notice-x:hover{color:var(--text)}
.brand-row{display:flex;align-items:center;gap:10px}
.brand-row .beta-badge{font-size:11px;padding:3px 8px;margin-left:0}
.call-overlay{position:fixed;inset:0;background:rgba(3,4,15,.88);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.call-box{width:min(680px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.call-head{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px}
.call-stage{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.call-stage #remoteVideo{width:100%;height:100%;object-fit:cover}
.call-stage #localVideo{position:absolute;right:10px;bottom:10px;width:26%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.5);background:#111}
.call-status{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;padding:4px 10px;border-radius:16px;max-width:75%}
.call-actions{display:flex;gap:8px;justify-content:center;margin:12px 0 6px}
.incoming-call{position:fixed;left:50%;transform:translateX(-50%);bottom:86px;z-index:210;background:var(--card);border:1px solid var(--violet);border-radius:16px;padding:12px 16px;display:flex;gap:14px;align-items:center;box-shadow:0 12px 40px rgba(120,90,20,.35);max-width:92vw}
.ic-info{display:flex;align-items:center;gap:4px;font-weight:600}
.ic-actions{display:flex;gap:8px}
.msg-call{align-self:center;background:var(--card2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;border-radius:16px;padding:5px 12px;margin:4px auto;display:flex;gap:6px;align-items:center;width:fit-content}
/* v2.0.3 — owner edit/delete affordances */
.comment .c-actions{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.comment .c-act,.poll-box .c-act{background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:2px 4px;cursor:pointer}
.comment .c-act:hover,.poll-box .c-act:hover{color:var(--text)}
.comment .c-act.danger:hover,.poll-box .c-act.danger:hover{color:var(--danger)}
.msg{position:relative}
.msg-del{position:absolute;top:-8px;left:-8px;width:19px;height:19px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(38,32,25,.88);color:#fff;font-size:13px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0}
.msg:hover .msg-del{display:flex}
.msg-deleted{font-style:italic}
.video-grid#roomVideoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0}
.vtile{position:relative;border-radius:12px;overflow:hidden;background:#05071a;aspect-ratio:4/3}
.vtile video{width:100%;height:100%;object-fit:cover}
.vtile span{position:absolute;left:8px;bottom:6px;font-size:11.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.pl-item{cursor:pointer;border-radius:10px;padding:6px}
.pl-item:hover{background:rgba(38,32,25,.05)}
.pl-item.active{outline:2px solid var(--violet)}
.watch-card video{max-height:70vh}
/* v2.0.4 — sound upload + Reel video editor */
.sound-upload{border:1px dashed var(--line);border-radius:14px;padding:12px;margin-bottom:14px;background:rgba(38,32,25,.03)}
.sound-upload .su-title{font-weight:700;margin-bottom:4px}
.su-note{margin-top:8px;font-size:13px;color:#8A5F00;background:rgba(242,160,7,.10);border:1px solid rgba(242,160,7,.4);border-radius:10px;padding:8px 10px}
.lib-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.lib-tools .chip.on,.ed-filters .chip.on{background:var(--grad-btn);color:#fff;border-color:transparent}
.ed-box{max-width:440px}
.ed-stage{position:relative;background:#000;border-radius:14px;overflow:hidden;max-height:52vh;margin:0 auto}
.ed-stage video{width:100%;height:100%;display:block;object-fit:contain;max-height:52vh}
.ed-ovl{position:absolute;left:50%;transform:translate(-50%,-50%);pointer-events:none;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9);white-space:nowrap;max-width:96%;overflow:hidden}
.ed-tabs{display:flex;gap:8px;margin:12px 0 10px}
.ed-tabs .chip.on{background:var(--grad-btn);color:#fff;border-color:transparent}
.ed-filters{display:flex;gap:8px;flex-wrap:wrap}
.ed-colors{display:flex;gap:8px;flex-wrap:wrap}
.ed-swatch{width:30px;height:30px;border-radius:50%;border:2px solid rgba(38,32,25,.25);cursor:pointer;padding:0}
.ed-swatch.on{border-color:var(--card);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--violet)}
.ed-emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.ed-emoji{background:var(--card2);border:1px solid var(--line-soft);border-radius:10px;font-size:20px;padding:5px 0;cursor:pointer;line-height:1.25}
.ed-emoji.on{border-color:var(--coral);background:rgba(242,160,7,.16)}
.ed-panel input[type="range"]{width:100%}
/* v2.0.6 — employees tab + staff panel */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 14px}
.perm-check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;background:var(--card2);border:1px solid var(--line-soft);border-radius:10px;padding:8px 10px;cursor:pointer}
.perm-check input{margin-top:2px}
.emp-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.emp-edit{width:100%;background:var(--card2);border:1px solid var(--line-soft);border-radius:12px;padding:12px;margin-top:6px}
.staff-head{position:sticky;top:0;z-index:50;display:flex;gap:12px;align-items:center;padding:12px 18px;background:rgba(250,246,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.staff-nav{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px 0}
.staff-nav button{background:var(--card2);border:1px solid var(--line-soft);color:var(--text);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.staff-nav button.active{background:var(--grad-btn);color:#fff;border-color:transparent}
.staff-main{max-width:1060px;margin:0 auto;padding:16px 18px 60px}

/* ================= v2.0.7 — strict 3-zone shell: wide rows scroll inside their zone ================= */
/* Wide tables (admin Users/Audit/Employees/Promote, Creator Studio, staff panel…)
   scroll horizontally INSIDE their card instead of stretching the center column
   over the right rail. Every <table class="tbl"> is wrapped in .tbl-wrap by the JS. */
.tbl-wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#D8C69E transparent}
.tbl-wrap::-webkit-scrollbar{height:6px}
.tbl-wrap::-webkit-scrollbar-track{background:rgba(38,32,25,.06);border-radius:99px}
.tbl-wrap::-webkit-scrollbar-thumb{background:#D8C69E;border-radius:99px}
.tbl-wrap table.tbl{margin-bottom:0}
.maincol .view{min-width:0}
/* Slim 212px sidebar: the user block truncates instead of poking out of the card */
.side-user .nm,.side-user .un{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar{padding:12px}
.side-user{padding-left:2px;padding-right:2px}
.sidebar .level-chip{max-width:100%;overflow:hidden;font-size:10px;padding:1px 6px}

/* ---------- v2.1.0: Ads system (Ivory Light) ---------- */
.sponsored-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(242,160,7,.16);color:#A86E00;border:1px solid rgba(242,160,7,.5);font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:99px;text-transform:uppercase}
.sponsored-tag.light{background:rgba(20,16,8,.55);color:#FFD98A;border-color:rgba(242,160,7,.65)}
.ad-label-inline{margin-left:auto;background:rgba(24,19,10,.72);color:#FFF3D6;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.ad-post{border-color:rgba(242,160,7,.55)}
.ad-creative{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:12px;margin-top:10px;cursor:pointer;background:#EFE7D7}
.ad-caption{display:flex;align-items:center;gap:10px;margin-top:10px}
.ad-caption b{flex:1;min-width:0}
.ad-paybox{margin-top:10px;background:var(--card2);border:1px solid var(--line-soft);border-radius:12px;padding:12px}
.banner-paid{padding:0}
.banner-media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.banner-ad-cap{position:absolute;left:10px;bottom:10px;z-index:2;background:rgba(24,19,10,.72);color:#FFF7E6;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;max-width:calc(100% - 76px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-loop-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.perm-list{display:flex;flex-wrap:wrap;gap:8px}
.watch-stage{position:relative}
.preroll{position:absolute;inset:0;z-index:5;border-radius:12px;overflow:hidden;background:#0B0B10}
.preroll-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.preroll-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(transparent,rgba(5,4,2,.82));color:#FFF7E6;font-size:12.5px;font-weight:600}
.preroll-bar span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preroll-count{color:#FFD98A;font-weight:700;white-space:nowrap}