/*
Theme Name: shortvid
Theme URI: https://example.com/
Author: ShortVid Builder
Description: Short video WordPress theme (TikTok-style vertical feed) designed to work with wp-shortvideo-core plugin + Cloudflare Stream.
Version: 2.5.81
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.2
License: GPLv2 or later
Text Domain: shortvid
*/


:root{
  --sv-black:#0b0b0f;
  --sv-gray:#717171;
  --sv-light:#fbfbfc;
  --sv-grad-a:#0866FF;
  --sv-grad-b:#1877F2;

  /* Backwards compat for older tab styles */
  --sv-ac1: var(--sv-grad-a);
  --sv-ac2: var(--sv-grad-b);

  --sv-radius:18px;
  --sv-shadow: 0 10px 34px rgba(0,0,0,.12);

  /* Light theme defaults */
  /* Requested: pure white page background */
  --sv-bg: #ffff;
  --sv-card: #ffffff;
  --sv-fg: var(--sv-black);
  --sv-muted: var(--sv-gray);
  --sv-border: rgba(20,20,20,.10);
  --sv-chip: rgba(20,20,20,.06);
  --sv-chip2: rgba(20,20,20,.09);
  --sv-link: #1877F2;
  --sv-brand: #1877F2;
  --sv-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* Phase 102: solid unread notifications background */
  --sv-unread-bg: #ffe7ea;
  --sv-unread-border: #ffc2cc;

  /* Phase 104: marked/admin notification colors (solid) */
  --sv-marked-bg: #fff4d6;
  --sv-admin-bg: #e7f3ff;
}

body.sv-dark{
  /* Requested: dark theme uses the same solid surface color everywhere */
  --sv-bg: #141414;
  --sv-card: #141414;
  --sv-fg: var(--sv-light);
  --sv-muted: rgba(234,237,240,.72);
  --sv-border: rgba(234,237,240,.10);
  --sv-chip: rgba(234,237,240,.06);
  --sv-chip2: rgba(234,237,240,.10);
  --sv-shadow: 0 14px 40px rgba(0,0,0,.42);
  --sv-link: #4b8dff;

  /* Phase 102: solid unread notifications background (dark) */
  --sv-unread-bg: #23161a;
  --sv-unread-border: #3b1f26;

  /* Phase 104: marked/admin notification colors (solid) */
  --sv-marked-bg: #2a2314;
  --sv-admin-bg: #13202b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sv-font);
  background: var(--sv-bg);
  color: var(--sv-fg);
}

button, input, textarea, select{ font-family: var(--sv-font); }
::placeholder{ font-family: var(--sv-font); }

/* Phase 25.32: optional content protection (admin toggles) */
body.sv-noselect{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
body.sv-noselect input,
body.sv-noselect textarea,
body.sv-noselect button,
body.sv-noselect select,
body.sv-noselect .sv-in{
  -webkit-user-select:auto;
  user-select:auto;
}
body.sv-noselect img,
body.sv-noselect iframe{
  -webkit-user-drag:none;
  user-drag:none;
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:none}


/* Phase72: Chirp font (local) */
@font-face{font-family:'Chirp';src:url('assets/fonts/chirp-regular-web.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Chirp';src:url('assets/fonts/chirp-medium-web.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Chirp';src:url('assets/fonts/chirp-bold-web.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Chirp';src:url('assets/fonts/chirp-heavy-web.woff') format('woff');font-weight:800;font-style:normal;font-display:swap;}

/* Apply Chirp only when enabled via body class */
/* Phase 74: X-style typography spec (light + dark) */
body.sv-font-chirp{
  /* Global stack */
  font-family:'Chirp',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
  --sv-font: 'Chirp',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* Light typography colors */
  --sv-fg: #0f1419;
  --sv-muted: #536471;
  --sv-link: #1d9bf0;
  --sv-brand: #1d9bf0;

  /* Global text rhythm */
  line-height: 1.4;
  letter-spacing: 0;
}
body.sv-dark.sv-font-chirp{
  /* Dark typography colors */
  --sv-fg: #e7e9eb;
  --sv-muted: #71767b;
  --sv-link: #1d9bf0;
  --sv-brand: #1d9bf0;
}

/* Ensure all form controls use Chirp */
body.sv-font-chirp,
body.sv-font-chirp button,
body.sv-font-chirp input,
body.sv-font-chirp textarea,
body.sv-font-chirp select{
  font-family: var(--sv-font) !important;
  font-weight: 400;
}

/* Links, hashtags, mentions */
body.sv-font-chirp a{ color: var(--sv-link); text-decoration:none; }
body.sv-font-chirp a:hover{ text-decoration:none; opacity:.95; }

/* Tweet/post main content text */
body.sv-font-chirp .sv-text,
body.sv-font-chirp .sv-cap,
body.sv-font-chirp .sv-reelCap,
body.sv-font-chirp .sv-storyCap,
body.sv-font-chirp .sv-chatMsg,
body.sv-font-chirp .sv-msgLast{
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--sv-fg) !important;
  line-height: 22px !important;
}
body.sv-font-chirp .sv-text p{ margin: 0 0 10px; }

/* Hashtags and @mentions inside posts (same size as body, blue link) */
body.sv-font-chirp .sv-text a,
body.sv-font-chirp .sv-cap a,
body.sv-font-chirp .sv-reelCap a,
body.sv-font-chirp .sv-storyCap a,
body.sv-font-chirp .sv-repostMeta a,
body.sv-font-chirp #sv-lightbox a{
  font-weight: 400 !important;
  color: var(--sv-link) !important;
}

/* User handle / @username */
body.sv-font-chirp .sv-handle,
body.sv-font-chirp .sv-profHandle,
body.sv-font-chirp .sv-profileHandle{
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sv-muted) !important;
  line-height: 22px !important;
}

/* Display name */
body.sv-font-chirp .sv-name{
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--sv-fg) !important;
  line-height: 1.3 !important;
}
body.sv-font-chirp .sv-profileName,
body.sv-font-chirp .sv-profName,
body.sv-font-chirp .sv-profTopName,
body.sv-font-chirp .sv-pageTitle,
body.sv-font-chirp .sv-msgTitle{
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--sv-fg) !important;
  line-height: 1.3 !important;
}

/* Timestamp / relative time */
body.sv-font-chirp .sv-time,
body.sv-font-chirp .sv-timeInline,
body.sv-font-chirp .sv-msgTime,
body.sv-font-chirp .sv-chatTime{
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sv-muted) !important;
  line-height: 1.25 !important;
}

/* Engagement numbers */
body.sv-font-chirp .sv-pill small{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sv-muted) !important;
}
body.sv-font-chirp .sv-pill:hover small{ color: var(--sv-fg) !important; }

/* Action button labels (where present) */
body.sv-font-chirp .sv-pill{
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Compose / primary button text */
body.sv-font-chirp .sv-primary,
body.sv-font-chirp button.sv-primary{
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* Profile bio */
body.sv-font-chirp .sv-profileBio{
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--sv-fg) !important;
  line-height: 1.45 !important;
}

/* Profile stats */
body.sv-font-chirp .sv-statNum{
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--sv-fg) !important;
}
body.sv-font-chirp .sv-statLbl{
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sv-muted) !important;
}

/* Notes / helper text / legal-ish small text */
body.sv-font-chirp .sv-note{
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sv-muted) !important;
}

/* Search inputs */
body.sv-font-chirp .sv-in{
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--sv-fg) !important;
}
body.sv-font-chirp .sv-in::placeholder{ color: #71767b !important; }
body.sv-dark.sv-font-chirp .sv-in::placeholder{ color: #71767b !important; }

/* DM preview unread -> bold (best-effort, modern browsers) */
body.sv-font-chirp .sv-msgRowWrap:has(.sv-msgBadge) .sv-msgLast{
  font-weight: 700 !important;
}


img{max-width:100%; display:block}

.sv-layout{display:flex; min-height:100vh;}
.sv-side{
  display:none; width:260px; padding:18px 14px;
  border-right:1px solid var(--sv-border);
  position:sticky; top:0; height:100vh;
  background: color-mix(in srgb, var(--sv-bg) 92%, var(--sv-card));
}
.sv-logo{
  display:flex; align-items:center; gap:10px;
  font-weight:950; letter-spacing:.3px; font-size:18px;
  padding:10px 12px; border-radius:14px;
  text-decoration:none;
}
.sv-dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b));
}
.sv-nav{margin-top:10px; display:flex; flex-direction:column; gap:6px;}
.sv-navLink{
  padding:10px 12px; border-radius:14px; text-decoration:none;
  border:1px solid transparent;
  color: var(--sv-fg);
  opacity:.92;
}
.sv-navLink:hover{background: var(--sv-chip);}
.sv-navLink.is-active{background: var(--sv-chip2); border-color: var(--sv-border);}

/* Sidebar nav icons + dropdown */
.sv-navLink{ display:flex; align-items:center; gap:10px; }
.sv-navIco{ width:27px; height:27px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.sv-navIco svg{ width:27px; height:27px; display:block; }

.sv-navMore{ margin-top: 8px; border-top: 1px solid var(--sv-border); padding-top: 10px; }
.sv-navMore summary{
  list-style:none; cursor:pointer;
  padding:10px 12px; border-radius:14px;
  background: var(--sv-chip);
  border:1px solid var(--sv-border);
  font-weight:900;
  display:flex; align-items:center; justify-content:space-between;
}
.sv-navMore summary::-webkit-details-marker{ display:none; }
.sv-navMore[open] summary{ background: var(--sv-chip2); }
.sv-navMore .sv-navLink{ margin-top: 8px; }

.sv-main{flex:1; min-width:0;}

.sv-shell{
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0 4px 0;
}

@media(min-width: 980px){
  .sv-side{display:block;}
  .sv-shell{padding-bottom:0;}
  /* Desktop: hide bottom nav (mobile-only) */
  .sv-bottom{display:none !important;}
  .logged-in .sv-top{ padding-left: 0; }
@media(max-width:720px){
  .sv-top.sv-scrollUp{ background: color-mix(in srgb, var(--sv-bg) 72%, transparent); backdrop-filter:saturate(1.25) blur(10px); }
}
}

/* Mobile bottom nav */
@media(max-width: 720px){
  /* Shell is edge-to-edge. Use body padding to make space for the fixed bottom nav. */
  body.logged-in{ padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .logged-in .sv-bottom{display:flex;}
}

/* Right sidebar (desktop only, large screens) */
.sv-sideRight{
  display:none;
  width:320px;
  padding:18px 14px;
  border-left:1px solid var(--sv-border);
  position:sticky;
  top:0;
  height:100vh;
  background: color-mix(in srgb, var(--sv-bg) 92%, var(--sv-card));
  overflow:auto;
}
@media(min-width: 1200px){
  .sv-sideRight{display:block;}
}

.sv-rBox{
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: 18px;
  padding: 14px;
}
.sv-rTitle{font-weight:950; font-size:14px; opacity:.95; margin-bottom:10px;}
.sv-rightSuggest .sv-uTile{ margin-bottom: 10px; }
.sv-rightSuggest .sv-uTile:last-child{ margin-bottom: 0; }
.sv-sideRight .sv-uTile{ border: 1px solid var(--sv-border); border-radius: 16px; padding: 10px; }
.sv-sideRight .sv-uLink{ display:block; }
.sv-sideRight .sv-uAv{ width: 44px; height:44px; border-radius: 999px; overflow:hidden; margin: 0 auto 8px; }
.sv-sideRight .sv-uNm{ font-weight:950; text-align:center; }
.sv-sideRight .sv-uHd, .sv-sideRight .sv-uMutual{ text-align:center; }
.sv-sideRight .sv-uFollow{ width:100%; margin-top:8px; }

.sv-rightTrending{display:flex; flex-wrap:wrap; gap:8px;}
.sv-rightTag{display:inline-flex; padding:8px 10px; border-radius:999px; border:1px solid var(--sv-border); background: var(--sv-chip); font-weight:900;}
.sv-rightTag:hover{background: var(--sv-chip2);}

/* Feed container tweaks for mobile edge-to-edge */
@media(max-width: 720px){
  .sv-feed{
    border-radius:0 !important;
    border-left:none !important;
    border-right:none !important;
  }
}

@media (max-width: 720px){
  .sv-feed{ border-left:none; border-right:none; border-radius:0; }
}
.sv-bottom{
  display:none;
  position:fixed; left:0; right:0; bottom:0;
  display:none; gap:8px;
  padding:10px 12px;
  background: color-mix(in srgb, var(--sv-bg) 75%, var(--sv-card));
  border-top:1px solid var(--sv-border);
  backdrop-filter: blur(12px);
  z-index:50;
}
.sv-btm{
  flex:1; text-align:center;
  padding:10px 12px; border-radius:14px;
  text-decoration:none;
  font-weight:900;
  color: var(--sv-fg);
  opacity:.88;
}
.sv-btm.is-active{background: var(--sv-chip2); opacity:1}

/* Phase25.2: Bottom nav icons + FAB */
.sv-btmLink{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:10px 8px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  color: var(--sv-fg);
  opacity:.9;
}
.sv-btmLink .sv-btmIco{ width:27px; height:27px; display:inline-flex; }
.sv-btmLink .sv-btmIco svg{ width:27px; height:27px; display:block; }
.sv-btmLbl{ font-size:11px; opacity:.85; }
.sv-btmLink.is-active{ background: var(--sv-chip2); opacity:1; }

.sv-fab{
  width:56px; height:56px;
  border-radius: 22px;
  border: 1px solid var(--sv-border);
  background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b));
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  margin-top: -18px;
  color: #ffffff;
}
.sv-fabIco svg{ width:24px; height:24px; }

.sv-fabBackdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  z-index: 55;
  display:none;
}
.sv-fabBackdrop.is-open{ display:block; }

.sv-fabMenu{
  position:fixed;
  left: 12px; right: 12px;
  bottom: 86px;
  z-index: 56;
  display:none;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid var(--sv-border);
  background: color-mix(in srgb, var(--sv-bg) 80%, var(--sv-card));
}
.sv-fabMenu.is-open{ display:block; }
.sv-fabItem{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  text-decoration:none;
  color: var(--sv-fg);
  font-weight: 900;
}
.sv-fabItem:hover{ background: var(--sv-chip); }
.sv-fabItemIco{ width:27px; height:27px; display:inline-flex; }
.sv-fabItemIco svg{ width:27px; height:27px; display:block; }



/* Topbar */
.sv-top{
  position: sticky;
  top: 0;
  z-index: 40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin: 0 0 14px;
  padding: 14px 2px;
  background: color-mix(in srgb, var(--sv-bg) 86%, var(--sv-card));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sv-border);
}
.sv-topLeft{display:flex; align-items:baseline; gap:10px; min-width:0;}
.sv-topBrand{
  font-weight: 1000;
  font-size: 24px;
  letter-spacing: -0.5px;
  color: var(--sv-brand);
  text-decoration:none;
  white-space:nowrap;
}
.sv-topPage{
  font-weight: 900;
  font-size: 13px;
  color: var(--sv-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 42vw;
}
.sv-topRight{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.sv-icoBtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--sv-fg);
  cursor:pointer;
  padding:0;
  text-decoration:none;
}
.sv-icoBtn:hover{ background: var(--sv-chip2); }
.sv-icoBtn .sv-ico{ width: 27px; height: 27px; display:block; }

/* Topbar layout helpers */

.sv-title{ flex: 1; min-width: 0; }
.sv-title{
  display:flex; align-items:center; gap:10px;
  font-weight:950; font-size:18px;
}
.sv-toggle{
  border:1px solid var(--sv-border);
  background: var(--sv-card);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight:900;
  cursor:pointer;
}

/* Dark mode visibility for key buttons */
body.sv-dark .sv-toggle,
body.sv-dark .sv-x{
  border-color: rgba(234,237,240,.18);
  background: rgba(234,237,240,.06);
}
body.sv-dark .sv-toggle,
body.sv-dark .sv-x{ color: var(--sv-fg); box-shadow: 0 10px 22px rgba(0,0,0,.28); }

body.sv-dark .sv-pill{
  background: rgba(234,237,240,.10);
  border-color: rgba(234,237,240,.18);
}
body.sv-dark .sv-pill.is-on{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sv-grad-a) 35%, rgba(234,237,240,.10)),
    color-mix(in srgb, var(--sv-grad-b) 35%, rgba(234,237,240,.10))
  );
}

/* Stories */
.sv-stories{
  display:flex; align-items:center; gap:12px;
  overflow:auto;
  padding: 12px 0 14px;
  -webkit-overflow-scrolling: touch;
}
.sv-story{
  min-width: 118px;
  width: 118px;
  height: 180px;
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background: var(--sv-chip2);
  flex:0 0 auto;
}
@media(min-width:980px){
  .sv-story{ min-width: 132px; width:132px; height: 196px; }
}
.sv-storyBg{position:absolute; inset:0;}
.sv-storyBg img{width:100%; height:100%; object-fit:cover; display:block;}
.sv-storyShade{position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.20), rgba(0,0,0,0));}
.sv-storyTop{position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:10px; z-index:2; min-width:0;}
.sv-storyAva{
  width:34px; height:34px;
  border-radius:999px;
  padding:2px;
  background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b));
  flex:0 0 auto;
}
.sv-story.is-seen .sv-storyAva{ background: rgba(255,255,255,.35); }
.sv-storyAva img{width:100%; height:100%; border-radius:999px; object-fit:cover; background: rgba(0,0,0,.25);}
.sv-storyAdd{
  width:34px; height:34px;
  border-radius:999px;
  background: rgba(255,255,255,.20);
  display:flex; align-items:center; justify-content:center;
  font-weight:950;
}
.sv-storyLabel{
  position:absolute; left:10px; right:10px; bottom:10px;
  font-size:13px;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:2;
}

/* Feed cards */
.sv-feed{display:flex; flex-direction:column; gap:0; background: var(--sv-card); border:1px solid var(--sv-border); border-radius: var(--sv-radius); overflow:hidden; box-shadow: var(--sv-shadow);}
.sv-feed > .sv-card{background: transparent; border:0; border-bottom:1px solid var(--sv-border); border-radius:0; box-shadow:none;}
.sv-feed > .sv-card:last-child{border-bottom:0;}
.sv-card{
  background: var(--sv-card);
  border:1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  overflow:hidden;
}

/* Two-panel layout used by Upload + Ads pages */
.sv-grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media(min-width: 980px){
  .sv-grid2{ grid-template-columns: 1fr 1fr; align-items:start; }
}
.sv-panelTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sv-panelActions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
  align-items:center;
}
.sv-panelActions .sv-note{ margin-top:0; }

/* Phase25.33: Upload media previews (remove before submit) */
.sv-previews{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.sv-prev{
  position:relative;
  width: 88px;
  height: 88px;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--sv-border);
  background: rgba(0,0,0,.06);
}
body.sv-dark .sv-prev{ background: rgba(255,255,255,.04); }
.sv-prev img, .sv-prev video{ width:100%; height:100%; object-fit: cover; display:block; }
.sv-prevVideo{ width: 170px; height: 96px; }
.sv-prevBtn{
  position:absolute;
  top:8px;
  right:8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
body.sv-dark .sv-prevBtn{ background: rgba(0,0,0,.55); }
.sv-prevBtn .sv-ico{ width: 16px; height: 16px; }
.sv-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px 10px;
}
.sv-user{
  display:flex; align-items:center; gap:10px;
}
.sv-av{
  width:36px; height:36px; border-radius:999px;
  overflow:hidden; flex:0 0 auto;
  background: var(--sv-chip2);
}
.sv-av img{width:100%; height:100%; object-fit:cover}
/* Avatar story ring (when author has an active story) */
.sv-av.has-story{padding:2px; background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b));}
.sv-av.has-story img{border-radius:999px; background: var(--sv-card);}
.sv-meta{min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:nowrap;}
.sv-name{font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; min-width:0; max-width: 44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sv-handle{font-weight:600; font-size:14px; min-width:0; max-width: 36vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex}
.sv-time{font-size:12px; color: var(--sv-muted); white-space:nowrap; flex:0 0 auto; }
.sv-menu{opacity:.7}

.sv-hdRight{ display:flex; align-items:center; gap:10px; }
.sv-followMini{
  border:1px solid var(--sv-border);
  background: var(--sv-chip);
  color: var(--sv-fg);
  font-weight:950;
  font-size:13px;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
}
.sv-followMini.is-on{ background: var(--sv-chip2); }
.sv-followMini:active{ transform: scale(.99); }

.sv-body{padding: 0 12px 12px;}
.sv-text{font-size:14px; color: color-mix(in srgb, var(--sv-fg) 92%, var(--sv-muted));}
.sv-text p{margin: 0 0 10px}
.sv-media{
  margin-top: 10px;
  border-radius: 16px;
  overflow:hidden;
  background: var(--sv-card);
  position:relative;
  max-height: var(--sv-feed-media-max-h);
}
.sv-media img{width:100%; height:auto; display:block}

/* Feed media: auto height with a max-height cap (admin setting) */

/* Video posters (feed + reels) */
.sv-videoPoster{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#000;
  opacity:1;
  transition: opacity .18s ease;
}
.sv-mediaVideo.is-ready .sv-videoPoster{ opacity:0; pointer-events:none; }
.sv-reelPoster{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#000;
  opacity:1;
  transition: opacity .18s ease;
}
.sv-reelMedia.is-ready .sv-reelPoster{ opacity:0; pointer-events:none; }

.sv-mediaVideo{ background:#000; position:relative; max-height: var(--sv-feed-video-max-h, 520px); }
.sv-mediaVideo iframe{ width:100%; height: var(--sv-feed-video-max-h, 520px); display:block; border:0; background:#000; }
.sv-mediaVideo video{ width:100%; height:auto; display:block; border:0; background:#000; border-radius: 0 !important; }
.sv-feedFrame, .sv-feedVid{ pointer-events:none; }
.sv-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.sv-playBtn{
  width:56px; height:56px; border-radius:999px;
  background: rgba(0,0,0,.40);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:white;
  font-weight:950;
}


/* Autoplay assist spinner (feed + reels) */
.sv-autoSpinWrap{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:6;
  pointer-events:auto;
  cursor:pointer;
}
.sv-autoSpinWrap .sv-spin{
  width:28px;
  height:28px;
}

/* Phase 158: autoplay spinner should spin only ~1s (one rotation) */
.sv-autoSpinWrap .sv-autoSpin{
  animation: svspin 1s linear 1 !important;
}

/* Actions */
.sv-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 12px;
  border-top:1px solid var(--sv-border);
}
.sv-actRow{display:flex; gap:15px; flex-wrap:wrap}
.sv-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid var(--sv-border);
  border-left: none;
  border-right: none;
  background: var(--sv-chip);
  font-weight:950;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
.sv-pill.is-on{
  background: linear-gradient(135deg, color-mix(in srgb, var(--sv-grad-a) 30%, var(--sv-card)), color-mix(in srgb, var(--sv-grad-b) 30%, var(--sv-card)));
  border-color: color-mix(in srgb, var(--sv-grad-a) 40%, var(--sv-border));
}
.sv-pill small{font-weight:900; opacity:.9}

/* SVG icons */
.sv-ico{ width:27px; height:27px; display:inline-block; flex:0 0 auto; }
.sv-pill .sv-ico{ width:27px; height:27px; }
.sv-menu{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  opacity:.8;
}
.sv-menu:hover{ background: rgba(127,127,127,.12); opacity:1; }
body.sv-dark .sv-menu:hover{ background: rgba(255,255,255,.08); }

.sv-playBtn .sv-ico{ width:27px; height:27px; }

.sv-lbNav .sv-ico{ width:27px; height:27px; }

.sv-caret{ width:27px; height:27px; opacity:.85; }



/* Lightbox */
.sv-lightbox{
  position:fixed; inset:0; z-index:200;
  background: rgba(0,0,0,.62);
  display:none;
  align-items:center; justify-content:center;
  padding: 18px;
}
.sv-lbCard{
  width: min(860px, 100%);
  background: var(--sv-card);
  border:1px solid var(--sv-border);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.sv-lbTop{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 14px; border-bottom:1px solid var(--sv-border);
}
.sv-x{
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  border:1px solid var(--sv-border);
  background: transparent;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight:950;
  cursor:pointer;
}
.sv-lbImg{max-height:70vh; width:100%; object-fit:contain; background:#000}

.sv-lbVideo{
  display:none;
  width:100%;
  background:#000;
  border-radius: 18px;
  overflow:hidden;
}
.sv-lbVideo iframe,
.sv-lbVideo video{
  width:100%;
  height:70vh;
  border:0;
  display:block;
  background:#000;
}
@media(max-width: 820px){
  .sv-lbVideo iframe,
  .sv-lbVideo video{ height:60vh; }
}

.sv-lbMedia{position:relative; background:#000}

.sv-vErr{
  padding:18px;
  text-align:center;
  color: var(--sv-fg);
}
.sv-vErr a{ text-decoration:none; }

/* Story full-screen mode */
.sv-lightbox.is-story{padding:0; background: rgba(0,0,0,.92);}
.sv-lightbox.is-story .sv-lbCard{width:100%; height:100%; border-radius:0; border:0; background:#000; box-shadow:none; position:relative;}
.sv-lightbox.is-story .sv-lbTop{position:absolute; top:0; left:0; right:0; z-index:6; background: transparent; border-bottom:0; padding:10px 12px;}
.sv-lightbox.is-story .sv-lbTop > div{display:none;}
.sv-lightbox.is-story .sv-x{background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.22); color:#fff;}
.sv-lightbox.is-story .sv-lbImg{max-height:100vh; height:100vh; object-fit:contain;}
.sv-lightbox.is-story .sv-lbVideo{display:block; border-radius:0;}
.sv-lightbox.is-story .sv-lbVideo iframe{height:100vh;}

/* Story overlay HUD */
.sv-storyOv{position:absolute; inset:0; z-index:5; pointer-events:none;}
.sv-storyTapLayer{position:absolute; inset:0; z-index:1; display:flex; pointer-events:auto;}
.sv-storyTapZone{flex:1;}
.sv-storyTapZone:active{background: rgba(255,255,255,.03);} 

.sv-storyHud{height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:56px 12px 14px; position:relative; z-index:2; pointer-events:none;}
.sv-storyProg{height:3px; border-radius:999px; overflow:hidden; background: rgba(255,255,255,.18); margin-bottom:10px;}
.sv-storyProg span{display:block; height:100%; width:0%; background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b)); transition: width 0ms linear;}
.sv-storyTopRow{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.sv-storyUser{display:flex; align-items:center; gap:10px; color:#fff; min-width:0;}
.sv-storyAva{width:36px; height:36px; border-radius:999px; padding:2px; background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b)); overflow:hidden; flex:0 0 auto;}
.sv-storyAva img{width:100%; height:100%; border-radius:999px; object-fit:cover; background: rgba(0,0,0,.25);}
.sv-storyUserMeta{min-width:0;}
.sv-storyUserName{font-weight:950; font-size:13px; display:flex; align-items:center; gap:6px; min-width:0; max-width: 58vw;}
.sv-storyUserName .sv-ell{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sv-storyUserHandle{font-weight:600; font-size:12px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sv-storyTopRight{display:flex; gap:8px; align-items:center; pointer-events:auto; flex-wrap:wrap; justify-content:flex-end;}
.sv-storyMiniBtn{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.35); color:#fff; font-weight:950; cursor:pointer;}
.sv-storyMiniBtn:disabled{opacity:.5; cursor:default;}
.sv-storyMiniBtn svg{width:27px; height:27px; fill:#fff;}
.sv-storyMiniBtn.sv-primary{background: rgba(255,255,255,.12);}
.sv-storyCenterText{margin: 0 auto; max-width: 700px; width:100%; padding: 14px 12px; font-size:22px; line-height:1.25; font-weight:950; color:#fff; text-align:center; text-wrap:balance;}
.sv-storyBottom{display:flex; justify-content:center;}
.sv-storyCap{max-width: 760px; width:100%; padding: 10px 12px; border-radius: 18px; border:1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); color:#fff; font-weight:900; line-height:1.35; pointer-events:auto;}
.sv-storySide{position:absolute; right:12px; bottom:90px; display:flex; flex-direction:column; gap:10px; pointer-events:auto;}
.sv-storySideBtn,.sv-storySideStat{width:54px; min-height:54px; border-radius:18px; border:1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.35); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-weight:950; cursor:pointer;}
.sv-storySideBtn.is-on{background: rgba(255,255,255,.14);}
.sv-storySideBtn svg,.sv-storySideStat svg{width:27px; height:27px; fill:#fff;}
.sv-storySideBtn small,.sv-storySideStat small{font-size:12px; opacity:.9;}
@media(max-width:520px){.sv-storySide{bottom:78px}.sv-storyCenterText{font-size:20px}}
.sv-lbNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.45);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
  font-weight:950;
  cursor:pointer;
  z-index:3;
}
.sv-lbNav:disabled{opacity:.35; cursor:default}
.sv-lbPrev{left:10px}
.sv-lbNext{right:10px}
body.sv-dark .sv-lbNav{border-color:rgba(255,255,255,.22); background: rgba(0,0,0,.55)}

#sv-lb-comments{max-height:38vh; overflow-y:auto; padding-right:6px}
@media(max-width:820px){#sv-lb-comments{max-height:30vh}}

/* Gallery grid inside feed cards */
.sv-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  border-radius: 18px;
  overflow:hidden;
  background:#000;
}
.sv-gBtn{
  padding:0;
  border:0;
  background:transparent;
  display:block;
  cursor:pointer;
  position:relative;
}
.sv-gBtn img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 1 / 1;}
.sv-gMore{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-weight:950;
  font-size:22px;
}


/* Auth */
.sv-authWrap{min-height: calc(100vh - 80px); display:flex; align-items:center; justify-content:center;}
.sv-auth{max-width:520px; width:100%;}
.sv-in{
  width:100%;
  margin-top:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid var(--sv-border);
  background: var(--sv-chip);
  color: var(--sv-fg);
  outline:none;
}
.sv-in:focus{border-color: color-mix(in srgb, var(--sv-grad-a) 35%, var(--sv-border));}
.sv-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  border:0;
  background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b));
  color:white;
  font-weight:950;
  cursor:pointer;
  text-decoration:none;
}
.sv-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid var(--sv-border);
  background: transparent;
  font-weight:950;
  cursor:pointer;
  text-decoration:none;
}
.sv-note{font-size:13px; color: var(--sv-muted); margin-top:8px;}
.sv-empty{
  padding: 18px;
  color: var(--sv-muted);
}

/* Reels */
.sv-reels{
  height: calc(100vh - 80px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.sv-reel{
  height: calc(100vh - 120px);
  border-radius: 22px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--sv-border);
  box-shadow: var(--sv-shadow);
}
.sv-reel iframe{width:100%; height:100%; border:0; display:block}

/* Reels full-screen page (no site chrome) */
body.sv-reelsPage{
  background:#000;
}
body.sv-reelsPage .sv-reels{
  /* Use JS-calculated viewport height to avoid mobile browser chrome cropping */
  height: calc(var(--sv-vh, 1vh) * 100);
  min-height: 100vh;
  overflow-y: auto;
  gap: 0;
  scroll-snap-type: y mandatory;
}
body.sv-reelsPage .sv-reel{
  height: calc(var(--sv-vh, 1vh) * 100);
  min-height: 100vh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.sv-reel{ position:relative; }
.sv-reelMedia{ position:relative; width:100%; height:100%; }
.sv-reelErr .sv-reelMedia::after{
  content:"Video failed to load";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  font-weight:950;
  color:#fff;
  background: rgba(0,0,0,.55);
}
.sv-reelOverlay{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  /* Lift bottom actions above mobile browser controls / safe area */
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px;
  pointer-events:none;
}
.sv-reelLeft{
  max-width: 72%;
  color: rgba(255,255,255,.96);
  pointer-events:auto;
}
.sv-reelAuthor{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.98);
  text-decoration:none;
}
.sv-reelAuthorRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.sv-reelFollow{
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.98);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 950;
  cursor:pointer;
  white-space:nowrap;
}
.sv-reelFollow.is-on{
  background: rgba(255,255,255,.18);
}
.sv-reelFollow:hover{
  background: rgba(0,0,0,.42);
}
.sv-reelAv{
  width:42px;
  height:42px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.25);
}
.sv-reelAv img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-reelNm{ font-weight:950; display:flex; align-items:center; gap:6px; min-width:0; }
.sv-reelNm .sv-ell{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sv-reelHd{ opacity:.85; font-weight:600; }
.sv-reelCap{
  margin-top:8px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  padding:10px 12px;
  border-radius: 14px;
  backdrop-filter: blur(8px);
}
.sv-reelRight{
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items:center;
  pointer-events:auto;
  margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.sv-rBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.98);
  border-radius: 16px;
  padding: 10px;
  cursor:pointer;
}
.sv-rBtn.is-on{
  background: rgba(255,255,255,.15);
}
.sv-rBtn small, .sv-rViews small{ font-weight:950; }
.sv-rViews{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.98);
  border-radius: 16px;
  padding: 10px;
}
.sv-reelOverlay .sv-ico{ width:27px; height:27px; }
.sv-reelMute{ position:absolute; top:14px; right:14px; z-index:6; pointer-events:auto; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.20); background: rgba(0,0,0,.35); color: rgba(255,255,255,.98); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sv-reelMute .sv-ico{ width:27px; height:27px; }
.sv-reelMute.is-on{ background: rgba(255,255,255,.15); }
.sv-reelMute.is-disabled{ opacity:.55; cursor:default; }

@media(max-width: 560px){
  .sv-reelLeft{ max-width: 78%; }
  .sv-rBtn, .sv-rViews{ border-radius: 18px; padding: 9px; }
}



/* Phase 24+: Tabs + Interests chips */
.sv-tabs{
  display:flex;
  justify-content: center;
  gap:8px;
  margin:10px 0 10px;
  overflow:auto;
  padding:8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sv-bg) 70%, var(--sv-card));
  border:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
  -webkit-overflow-scrolling: touch;
}
.sv-tabs::-webkit-scrollbar{ height: 0; }
.sv-tab{
  width: 100%;
  border:1px solid var(--sv-border);
  background: var(--sv-card);
  color:var(--sv-fg);
  padding:10px 12px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
body.sv-dark .sv-tab{border-color:rgba(255,255,255,.12); background:rgba(20,20,20,.6)}
.sv-tab.is-active{
  border:1px solid var(--sv-border);
  background: linear-gradient(90deg, #0866ff91, #1877f29e) !important;
  color: #fff !important;
}
.sv-tab.is-on{border:none; background:linear-gradient(90deg,var(--sv-ac1),var(--sv-ac2)); color:#fff; box-shadow:0 14px 30px rgba(0,0,0,.16)}
.sv-chips{display:flex; flex-wrap:wrap; gap:8px}
.sv-chip{border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.75); color:var(--sv-fg); padding:10px 12px; border-radius:999px; font-weight:800; cursor:pointer}
body.sv-dark .sv-chip{border-color:rgba(255,255,255,.12); background:rgba(20,20,20,.6)}
.sv-chip.is-on{border:none; background:linear-gradient(90deg,var(--sv-ac1),var(--sv-ac2)); color:#fff}
/* Phase 163: interests picker uses a softer selected state + shows count */
#sv-topics .sv-chip.is-on{
  background: color-mix(in srgb, var(--sv-ac1) 22%, var(--sv-chip));
  border: 1px solid color-mix(in srgb, var(--sv-ac1) 48%, var(--sv-border));
  color: var(--sv-fg);
}
body.sv-dark #sv-topics .sv-chip.is-on{
  background: color-mix(in srgb, var(--sv-ac1) 18%, rgba(20,20,20,.6));
  border-color: color-mix(in srgb, var(--sv-ac1) 46%, rgba(255,255,255,.14));
  color: rgba(255,255,255,.98);
}


/* Phase25.1: horizontal shelves (suggested users/reels/premium) */
.sv-shelf{
  margin: 12px 0;
  padding: 12px 12px 10px;
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: 22px;
}
.sv-shelfHd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sv-shelfT{ font-weight: 900; letter-spacing: .2px; }
.sv-hscroll{ display:flex; gap: 12px; overflow:auto; padding: 2px 2px 8px; }
.sv-hscroll::-webkit-scrollbar{ height: 8px; }
.sv-uTile{
  flex: 0 0 170px;
  color: inherit;
  border: 1px solid var(--sv-border);
  border-radius: 22px;
  padding: 14px 12px 12px;
  background: var(--sv-card);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
}
.sv-uLink{ text-decoration:none; color:inherit; display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.sv-uAv{
  width: 78px; height: 78px; border-radius: 999px;
  overflow:hidden; border: 2px solid var(--sv-border);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  background: rgba(0,0,0,.08);
}
body.sv-dark .sv-uAv{ box-shadow: 0 10px 26px rgba(0,0,0,.34); }
.sv-uAv img{ width:100%; height:100%; object-fit: cover; display:block; }
.sv-uNm{ font-weight: 950; line-height:1.1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:6px; min-height:20px; min-width:0; }
.sv-uHd{ opacity:.75; font-size: 12px; margin-top: -2px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; min-height:16px; }
.sv-uMutual{ opacity:.72; font-size: 12px; margin-top: -6px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; min-height:16px; }
.sv-uStats{ display:flex; align-items:center; justify-content:center; gap:10px; font-size: 12px; color: var(--sv-muted); margin-top: -2px; }
.sv-uStats b{ color: var(--sv-fg); font-weight: 950; }
.sv-uSep{ display:inline-block; width:1px; height: 14px; background: var(--sv-border); opacity:.9; }
.sv-uFollow{
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b));
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}
.sv-uFollow.is-on{
  background: transparent;
  color: var(--sv-fg);
  border: 1px solid var(--sv-border);
}
.sv-uFollow:disabled{ opacity:.7; cursor:not-allowed; }

.sv-rTile{ flex: 0 0 140px; text-decoration:none; }
.sv-rThumb{
  width: 140px; height: 190px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid var(--sv-border);
  background: rgba(0,0,0,.12);
}
.sv-rThumb img{ width:100%; height:100%; object-fit: cover; display:block; }

.sv-adCard .sv-av{ display:flex; align-items:center; justify-content:center; }
.sv-avBadge{
  width: 46px; height: 46px;
  border-radius: 18px;
  border: 1px solid var(--sv-border);
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  opacity: .9;
}

.sv-storyPlayer{ padding: 14px; border-bottom: 1px solid var(--sv-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.10); }
.sv-storyFrame{
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 18px;
  background: #000;
}


/* Phase25.2: Mobile drawer */
.sv-drawerOpen{
  /* Default (fallback): floating button */
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99992;
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid var(--sv-border);
  background: color-mix(in srgb, var(--sv-bg) 70%, var(--sv-card));
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(10px);
  color: var(--sv-fg);
}
.sv-drawerOpen svg{ width:27px; height:27px; }

/* When injected into the topbar (preferred) */
.sv-drawerOpen.sv-inTop{
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--sv-chip2);
}

/* Tablet/Desktop: menu button on the right corner */
@media(min-width: 720px){
  .sv-drawerOpen{ left: auto; right: 12px; }
}

.sv-drawerBackdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  z-index: 99990;
  display:none;
}
.sv-drawerBackdrop.is-open{ display:block; }

.sv-drawer{
  position:fixed;
  left: 10px;
  right: auto;
  top: 10px;
  bottom: 10px;
  width: min(320px, calc(100% - 20px));
  border-radius: 24px;
  border: 1px solid var(--sv-border);
  background: color-mix(in srgb, var(--sv-bg) 80%, var(--sv-card));
  z-index: 99991;
  display:none;
  padding: 12px;
  flex-direction: column;
}
.sv-drawer.is-open{ display:flex; }
.sv-drawerTop{ display:flex; align-items:center; justify-content:space-between; padding: 6px 4px 10px; border-bottom:1px solid var(--sv-border); }
.sv-drawerTitle{ font-weight: 950; }
.sv-drawerBody{ display:flex; flex-direction:column; gap: 8px; padding: 12px 4px; flex:1; overflow-y:auto; -webkit-overflow-scrolling: touch; }
.sv-drawerLink{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  text-decoration:none;
  color: var(--sv-fg);
  font-weight: 900;
}
.sv-drawerLink:hover{ background: var(--sv-chip); }

/* Drawer is allowed on all screens (mobile/tablet/desktop) */



/* Profile (author) page */
.sv-profileCover{
  height: 260px;
  border-radius: 28px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow:hidden;
  border:1px solid var(--sv-border);
}
.sv-profileCoverActions{ position:absolute; top: 14px; right: 14px; z-index: 3; }
.sv-profileGlass{ display:none; }
.sv-profileCard{
  position: relative;
  margin-top: -72px;
  border-radius: 28px;
  border:1px solid var(--sv-border);
  background: var(--sv-card);
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  padding: 14px;
  padding-top: 74px;
}
.sv-profActions{ display:none; }
.sv-profileRow{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: 10px; }
.sv-profileAvatar{
  width: 112px; height: 112px; border-radius: 999px;
  position:absolute; left:50%; top: -56px; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--sv-grad-a), var(--sv-grad-b));
  padding: 4px;
  box-shadow: 0 20px 44px rgba(0,0,0,.18);
}
.sv-profileAvatar img{ width:100%; height:100%; object-fit:cover; border-radius: 999px; border: 5px solid var(--sv-bg); background: var(--sv-chip); }
.sv-profileName{ font-weight: 950; font-size: 22px; line-height: 1.1; }
.sv-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.sv-badge{ font-size:12px; font-weight:950; padding:5px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.7); }
.sv-badgeCount{font-size:11px;padding:2px 7px;border-radius:999px}

body.sv-dark .sv-badge{ border-color:rgba(255,255,255,.12); background:rgba(20,20,20,.6); }
.sv-badge-admin{ background:rgba(var(--sv-badge-admin-rgb,54,120,255),.16); border-color:rgba(var(--sv-badge-admin-rgb,54,120,255),.25); }
.sv-badge-verified{ background:rgba(var(--sv-badge-verified-rgb,12,184,110),.16); border-color:rgba(var(--sv-badge-verified-rgb,12,184,110),.25); }
.sv-badge-premium{ background:rgba(var(--sv-badge-premium-rgb,244,7,82),.16); border-color:rgba(var(--sv-badge-premium-rgb,244,7,82),.25); }

/* Ads dashboard helpers */
.sv-secHd{ padding: 0 2px; }
.sv-adDashMeta{ padding: 0 14px 10px 14px; }
.sv-adDashMeta .sv-badges{ margin-top: 0; }
.sv-profileHandle{ opacity:.7; font-weight: 800; margin-top: 2px; }
.sv-followBtn{
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--sv-border);
  background: linear-gradient(90deg, #ff2b5d, #ff8a00);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}
.sv-followBtn.is-on{
  background: var(--sv-chip2);
  color: var(--sv-fg);
}

.sv-profMore{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--sv-border);
  background: var(--sv-card);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.sv-profMore .sv-ico{ width:27px; height:27px; }
body.sv-dark .sv-profMore{
  border-color: rgba(234,237,240,.18);
  background: rgba(234,237,240,.06);
  color: var(--sv-fg);
}
.sv-stats{ display:flex; gap:10px; margin-top: 12px; }
.sv-stat{
  flex:1;
  border-radius: 16px;
  background: var(--sv-chip);
  border: 1px solid var(--sv-border);
  padding: 10px 10px;
  text-align:center;
}
.sv-statNum{ font-weight: 950; font-size: 16px; }
.sv-statLbl{ opacity:.7; font-weight: 800; font-size: 12px; margin-top: 2px; }

.sv-profileLink{
  margin-top: 10px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--sv-chip);
  border: 1px solid var(--sv-border);
  text-decoration:none;
  color: var(--sv-fg);
}
.sv-profileBio{ margin-top: 10px; opacity:.9; line-height: 1.35; }
.sv-profileFacts{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:10px; }
.sv-profileFacts .sv-chip{ cursor:default; }
.sv-privateNote{ margin-top: 12px; }

/* Profile tabs: reuse pills, only adjust spacing */
.sv-profileCard .sv-tabs{ margin-top: 14px; }

.sv-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top: 12px; }
.sv-gridItem{
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow:hidden;
  background: var(--sv-chip);
  border: 1px solid var(--sv-border);
}
.sv-gridItem img{ width:100%; height:100%; object-fit:cover; display:block; }

@media(min-width: 980px){
  .sv-profileCover{ height: 280px; }
  .sv-grid{ gap: 12px; }
}



.sv-hint{ font-size:12px; color: var(--muted); margin-top:6px; }


/* Sponsored ads: show media in full (contain) + max height */
:root{ --sv-ad-max-h:520px; }
@media(max-width:520px){ :root{ --sv-ad-max-h:360px; } }
.sv-adCard .sv-media{ max-height: var(--sv-ad-max-h); }
.sv-adCard .sv-media img{ height:auto; max-height: var(--sv-ad-max-h); object-fit:contain; display:block; background:#000; }
.sv-adCard .sv-media iframe{ width:100%; height: var(--sv-ad-max-h); max-height: var(--sv-ad-max-h); border:0; display:block; background:#000; }


/* Phase 25.14: Repost wrapper */
.sv-repostBox{
  margin-top:10px;
  border:1px solid var(--sv-b);
  border-radius:14px;
  background:rgba(0,0,0,.03);
  overflow:hidden;
}
body.sv-dark .sv-repostBox{ background:rgba(255,255,255,.04); }
.sv-repostHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--sv-b);
}
.sv-repostHead .sv-note{ margin:0; }
.sv-repostBody{
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
}
.sv-repostThumb{
  width:84px;
  height:84px;
  border-radius:12px;
  background:rgba(0,0,0,.08);
  overflow:hidden;
  flex:0 0 auto;
}
body.sv-dark .sv-repostThumb{ background:rgba(255,255,255,.08); }
.sv-repostThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-repostMeta{ flex:1; min-width:0; }
.sv-repostMeta .sv-title{ font-weight:950; }
.sv-repostMeta .sv-note{ margin-top:4px; }

/* Phase 25.14 fixes */
.sv-profileCover{ position:relative; z-index:1; }
.sv-profileCard{ position:relative; z-index:2; }
.sv-profileAvatar{ position:relative; z-index:3; }

.sv-repostBox{ border:1px solid var(--sv-border); border-radius:16px; padding:12px; background:rgba(127,127,127,.06); margin-top:10px; }
.sv-repostHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.sv-repostTag{ font-weight:900; font-size:12px; letter-spacing:.02em; opacity:.85; }
.sv-repostOrig{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.sv-repostOrig .sv-repostThumb{ width:92px; height:92px; border-radius:14px; overflow:hidden; flex:0 0 auto; background:var(--sv-chip); }
.sv-repostOrig .sv-repostThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-repostOrig .sv-repostMeta{ flex:1 1 auto; min-width:0; }
.sv-repostOrig .sv-repostMeta .sv-n{ font-weight:950; }
.sv-repostOrig .sv-repostMeta .sv-c{ margin-top:4px; opacity:.85; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Phase 25.16: Repost embeds (use original media sizing) */
.sv-repostOrigFull{ display:block; }
.sv-repostOrigFull .sv-repostMeta{ margin-bottom:8px; }
.sv-repostOrigFull .sv-repostMedia{ margin-top:8px; }

/* Phase 25.26: profile stacking */
.sv-profileCover{ z-index:0; }
.sv-profileGlass{ z-index:1; }
.sv-profileCard{ z-index:2; }
.sv-profileAvatar{ z-index:3; }


/* Onboarding lock: hide navigation + make content full width */
body.sv-onboarding-mode .sv-side,
body.sv-onboarding-mode .sv-bottom{
  display:none !important;
}
body.sv-onboarding-mode .sv-layout{
  grid-template-columns: 1fr !important;
}
body.sv-onboarding-mode .sv-main{
  padding-bottom: 18px !important;
}


/* Legacy toggle button (kept for compatibility) */
.sv-toggle{display:none !important;}


/* Facebook-like "My Story" plus badge */
.sv-storyMine .sv-ringInner{ position:relative; }
.sv-plusBadge{
  position:absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--sv-brand);
  color: #08110a;
  border: 2px solid var(--sv-card);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 16px;
  line-height: 1;
}
body.sv-dark .sv-plusBadge{ border-color: #101116; color: #071009; }


/* Social links row (profile) */
.sv-socialRow{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:10px; }
.sv-socialBtn{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--sv-chip);
  border: 1px solid var(--sv-border);
  text-decoration:none;
  color: var(--sv-fg);
  font-weight: 850;
  font-size: 13px;
}
.sv-socialBtn:hover{ opacity:.95; }
.sv-socialBtn .sv-ico{ width:27px; height:27px; }

/* Watch History page */
.sv-whHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sv-whList{ display:flex; flex-direction:column; gap:0; }
.sv-whList .sv-card{ border-radius: 0; border-left:none; border-right:none; }
@media (max-width: 860px){
  .sv-whHead{ padding: 10px 12px; }
}



/* Mini badges (tick icons) */
.sv-badgeMiniWrap{ display:inline-flex; align-items:center; gap:6px; margin-left:6px; vertical-align:middle; }
.sv-badgeMini{ width:27px; height:27px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.sv-badgeMini .sv-ico{ width:27px; height:27px; }
.sv-badgeMini-verified{ background: rgb(var(--sv-badge-verified-rgb, 29, 155, 240)); }
.sv-badgeMini-premium{ background: rgb(var(--sv-badge-premium-rgb, 199, 0, 255)); }
.sv-badgeMini-admin{ background: rgb(var(--sv-badge-admin-rgb, 255, 184, 0)); }

/* Reels media sizing + ad reels */
.sv-reelVid{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.sv-reelAdImg{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-reelAdText{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:32px; text-align:center; font-size:18px; line-height:1.35; font-weight:950; color:#fff; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.14), rgba(0,0,0,.92)); }
.sv-reelCta{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); color:#fff; font-weight:950; cursor:pointer; }
.sv-reelCta:hover{ background: rgba(255,255,255,.20); }
.sv-reelCta .sv-ico{ width:27px; height:27px; }

/* Full black reels page background */
body.sv-reelsPage{ margin:0; background:#000; }


/* Phase B: badges + ellipsis in user tiles */
.sv-uNm .sv-badgeMiniWrap{ margin-left:0; }



/* Phase B: Repost preview header (avatar/name/time/report/follow) */
.sv-repostBoxV2{ padding:0; overflow:hidden; }
.sv-repostBanner{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.02em;
  border-bottom:1px solid var(--sv-border);
  opacity:.92;
}
.sv-repostBanner .sv-ico{ width:27px; height:27px; }
.sv-repostCard{ padding:12px; cursor:pointer; }
.sv-repostMiniHd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sv-repostMiniHd .sv-hdRight{ gap:8px; }
.sv-repostMenuBtn{
  border:1px solid var(--sv-border);
  background: var(--sv-chip);
  color: var(--sv-fg);
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.sv-repostMenuBtn .sv-ico{ width:27px; height:27px; }
.sv-repostCap{
  margin-top:8px;
  opacity:.9;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Phase C: safer overflow for long text/links */
.sv-cap, .sv-reelCap, .sv-storyCap, .sv-text{ overflow-wrap:anywhere; word-break:break-word; }


/* Toast */
.sv-toast{ position:fixed; left:50%; bottom:86px; transform: translateX(-50%) translateY(18px); opacity:0; pointer-events:none;
  padding:10px 14px; border-radius: 999px; border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.72); color:#fff; font-weight:950; z-index:9999; transition: .18s ease; }
body.sv-dark .sv-toast{ background: rgba(0,0,0,.80); }
.sv-toast.is-on{ opacity:1; transform: translateX(-50%) translateY(0); }

/* Mid-roll ad overlay (feed autoplay + lightbox video) */
.sv-midroll{
  position:absolute;
  inset:0;
  z-index: 30;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
}
.sv-midrollCard{
  width: min(520px, 100%);
  border-radius: 22px;
  overflow:hidden;
  background: rgba(18,18,18,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  color:#fff;
}
.sv-midrollTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sv-midrollTag{ font-weight:950; font-size:12px; letter-spacing:.02em; opacity:.92; }
.sv-midrollSkip{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight:950;
  cursor:pointer;
}
.sv-midrollSkip:disabled{ opacity:.55; cursor:default; }
.sv-midrollBody{ padding: 14px; display:flex; flex-direction:column; gap: 12px; }
.sv-midrollMedia{ width:100%; border-radius: 18px; overflow:hidden; background:#000; }
.sv-midrollMedia img{ width:100%; height: 280px; object-fit:cover; display:block; }
.sv-midrollMedia iframe{ width:100%; height: 280px; border:0; display:block; background:#000; }
.sv-midrollMedia.sv-midrollText{ height: 240px; display:flex; align-items:center; justify-content:center; padding: 18px; text-align:center; font-weight:950; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), rgba(0,0,0,.92)); }
.sv-midrollTitle{ font-weight:950; font-size:16px; line-height:1.25; }
.sv-midrollCta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:950;
  text-decoration:none;
}
.sv-midrollCta:hover{ background: rgba(255,255,255,.20); }



/* Drawer icons */
.sv-drawerLink{ display:flex; align-items:center; gap:10px; }
.sv-drawerLink .sv-ico{ width:27px; height:27px; flex:0 0 auto; opacity:.92; }
.sv-drawerLink span{ flex:1; min-width:0; }


.sv-reelFrame{ width:100%; height:100%; display:block; border:0; background:#000; pointer-events:none; }

.sv-reelMedia iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; pointer-events:none; }


/* ============================================================
   Phase I (ZIP NOW - partial): Requested layout + UI tweaks
   ============================================================ */

/* Body padding */
.sv-body{ padding: 0 5px 12px !important; }

/* Reels spacing + icon size */
.sv-reelRight{ margin-bottom: 40px !important; }
.sv-reelLeft{ margin-bottom: 40px !important; }
.sv-reelOverlay .sv-ico,
.sv-reelRight .sv-ico,
.sv-reelLeft .sv-ico,
.sv-rBtn .sv-ico{ width:27px !important; height:27px !important; }

/* Mute button position */
.sv-reelMute{ top: 55px !important; }

/* Reels caption glass off */
.sv-reelCap{ border: none !important; background: transparent !important; backdrop-filter: none !important; }

/* Thumb cards (right rail / story thumbs) */
.sv-rThumb{ border-radius: 15px !important; width: 190px !important; height: 300px !important; overflow:hidden; }

/* Stories horizontal strip */
.sv-stories{ gap: 6px !important; padding: 5px 0 5px !important; }
.sv-hscroll{ gap: 6px !important; }

/* Gallery background adapts to theme */
.sv-gallery{ background: var(--sv-card, rgba(255,255,255,.06)) !important; }
body.sv-dark .sv-gallery{ background: var(--sv-card, rgba(255,255,255,.06)) !important; }

/* Repost spacing */
.sv-repostCap{ margin-bottom: 9px !important; }

/* Pills: remove background + border */
.sv-pill,
.sv-spill{ background: none !important; border-color: transparent !important; }
.sv-pill small{ font-size: 15px !important; }
body.sv-dark .sv-pill{ color: #fff !important; }

/* Feed body padding */
.sv-body{ padding: 0 5px 12px !important; }

/* Active colors */
.sv-pill[data-act="like"].is-on{ color: #ff2d55 !important; }
.sv-pill[data-act="repost"].is-on{ color: #00ba7c !important; }

/* Repost box transparent */
.sv-repostBox,
.sv-repostBoxV2{ background: none !important; }

/* Feed header one-row name + inline buttons */
.sv-nameRow{ display:flex; align-items:center; gap:8px; min-width:0; }
.sv-nameRow .sv-name{ min-width:0; display:flex; align-items:center; gap:6px; }
.sv-followInline, .sv-boostInline{
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.sv-boostInline{ opacity: .92; }
.sv-subRow{ display:flex; align-items:center; gap:8px; margin-top: 3px; }
.sv-subRow .sv-time{ opacity:.78; }
.sv-spon{ font-weight:950; font-size:12px; opacity:.78; }

/* Remove any accidental icon button borders in feeds */
.sv-pill .sv-ico{ background: none !important; border: 0 !important; }



/* Force all UI icon svgs to 27x27 */
.sv-ico,
.sv-ico svg,
.sv-icoBtn svg,
.sv-btmLink svg,
.sv-rBtn svg,
.sv-reelOverlay svg,
.sv-reelRight svg,
.sv-reelLeft svg,
.sv-topbar svg,
.sv-nav svg{
  width:27px !important;
  height:27px !important;
}


/* Force all SVG icons to 27x27 across the UI */
.sv-ico, .sv-ico svg, .sv-btmIco, .sv-btmIco svg, .sv-icoBtn svg{width:27px !important; height:27px !important;}

/* === User CSS restore (Phase34/35) === */
.sv-feed > .sv-card { border-bottom: 2px solid var(--sv-border); padding: 0 10px 0; border-top: 2px solid var(--sv-border); }
.sv-shelf { margin: 0; padding: 12px 10px 10px; border-top: 0.5px solid var(--sv-border); border-radius: 0; border-bottom: 0.5px solid var(--sv-border); }
.sv-stories { padding: 5px 6px 5px !important; }
.sv-story { height: 210px; position: relative; border-radius: 13px; }
.sv-rThumb { width: 170px !important; }
/* User requested: flat feed cards/shelf */
.sv-card { border-radius: 0 !important; }
.sv-shelf { border-radius: 0 !important; }

/* ============================================================
   Phase 49: Reels fit-to-screen (prevent bottom UI cropping)
   ============================================================ */

/* Reels page should be true full-screen: no global paddings or bottom nav overlap */
body.sv-reelsPage{ margin:0; padding:0; height:100%; overflow:hidden; background:#000; }
body.sv-reelsPage .sv-body,
body.sv-reelsPage .sv-main,
body.sv-reelsPage .sv-wrap,
body.sv-reelsPage main{ padding:0 !important; margin:0 !important; height:100%; }

/* Hide mobile bottom nav on reels page so captions/actions are never covered */
body.sv-reelsPage .sv-bottom{ display:none !important; }

/* Strong viewport sizing fallbacks (svh/dvh) + existing JS --sv-vh var */
body.sv-reelsPage .sv-reels{
  height: 100svh;
  height: 100dvh;
  height: calc(var(--sv-vh, 1vh) * 100);
  min-height: 100svh;
}
body.sv-reelsPage .sv-reel{
  height: 100svh;
  height: 100dvh;
  height: calc(var(--sv-vh, 1vh) * 100);
  min-height: 100svh;
}

/* Lift bottom overlay slightly more (safe area + extra breathing room) */
body.sv-reelsPage .sv-reelOverlay{
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.sv-reelsPage .sv-reelRight,
body.sv-reelsPage .sv-reelLeft{
  margin-bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ===== Phase 51: Feed card borders + tighter action/pill spacing (user request) ===== */
.sv-feed > .sv-card{
  border-bottom: 2px solid var(--sv-border) !important;
  padding: 0 10px 0 !important;
  border-top: 02px solid var(--sv-border) !important;
}
.sv-actRow{
  gap: 6px !important;
}
.sv-pill{
  gap: 4px !important;
  padding: 1px 5px !important;
}



/* ===========================
   Phase52/53: Feed head order + name truncation + badge star
   =========================== */
.sv-hd .sv-nameRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.sv-hd .sv-headLeft{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  white-space:nowrap;
}
.sv-hd .sv-headActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.sv-hd .sv-subRow{ display:none; }

.sv-hd .sv-name{
  font-weight:800;
  font-size:15px;
  max-width:52vw;
}
.sv-hd .sv-timeInline{
  font-size:12px;
  opacity:.8;
  flex:0 0 auto;
}
.sv-hd .sv-spon{
  font-size:12px;
  font-weight:750;
  flex:0 0 auto;
  white-space:nowrap;
}

.sv-badgeMini .sv-ico{ width:20px; height:20px; }

/* Small screens: keep head compact and prevent wrap */
@media (max-width: 520px){
  .sv-hd .sv-name{ max-width:38vw; font-size:14px; }
  .sv-hd .sv-headActions .sv-followMini{ padding:4px 8px; }
  .sv-hd .sv-timeInline, .sv-hd .sv-spon{ font-size:11px; }
}

/* Phase54: Profile V2 layout + tabs (Posts/Media/Premium) */
.sv-profileShell{ padding: 0; max-width: 720px; margin: 0 auto; }
.sv-profileTopBar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sv-bg);
  border-bottom: 1px solid var(--sv-border);
}
.sv-profBack{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--sv-fg);
  text-decoration:none;
}
.sv-profBack:hover{ background: rgba(0,0,0,.06); }
body.sv-dark .sv-profBack:hover{ background: rgba(255,255,255,.06); }
.sv-profTopMeta{ display:flex; flex-direction:column; min-width:0; }
.sv-profTopName{ font-weight: 950; font-size: 18px; line-height: 1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-profTopSub{ opacity:.75; font-weight: 750; font-size: 13px; }

.sv-profileCoverV2{
  height: 170px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow:hidden;
  border-bottom: 1px solid var(--sv-border);
}

.sv-profileCardV2{
  position: relative;
  padding: 12px;
}

.sv-profHeroRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-top: -46px;
}

.sv-profileAvatarV2{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--sv-bg);
  border: 4px solid var(--sv-bg);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  position: relative;
  flex: 0 0 auto;
}
.sv-profileAvatarV2 img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid var(--sv-border);
  background: var(--sv-chip);
  display:block;
}

.sv-profileCardV2 .sv-profActions{ display:flex; align-items:center; gap: 10px; margin-left:auto; }

.sv-profEditBtn{
  position:absolute;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--sv-border);
  background: rgba(255,255,255,.88);
  color: #111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
body.sv-dark .sv-profEditBtn{
  background: rgba(20,20,20,.72);
  color: var(--sv-fg);
}
.sv-profEditBtn .sv-ico{ width: 18px; height: 18px; }

.sv-profileCoverV2 .sv-profEditCover{ top: 10px; right: 10px; }
.sv-profileAvatarV2 .sv-profEditAvatar{ right: -2px; bottom: -2px; }

/* Phase57: ensure profile cover/avatar edit pencil is always clickable */
.sv-profEditBtn{ z-index: 20; pointer-events: auto; }
.sv-profEditBtn .sv-ico{ pointer-events: none; }
.sv-profileCoverV2{ z-index: 1; }
.sv-profileCardV2{ position: relative; z-index: 2; }

.sv-profInfo{ padding-top: 10px; }
.sv-profNameRow{ display:flex; align-items:center; gap: 6px; }
.sv-profName{ font-weight: 950; font-size: 22px; line-height: 1.1; }
.sv-profHandle{ opacity: .75; font-weight: 800; margin-top: 2px; }

.sv-profileTabs{ margin-top: 12px; }

/* Phase 146: Edit profile button like Twitter (outline) */
#sv-edit-profile.sv-followBtn{
  background: transparent;
  color: var(--sv-fg);
  border: 1px solid var(--sv-border);
}
#sv-edit-profile.sv-followBtn:hover{ background: var(--sv-chip); }

/* Phase 146: Twitter-like stats row (no boxes/borders) */
.sv-profileCardV2 .sv-stats{
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sv-profileCardV2 .sv-stat{
  flex: 0 0 auto;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  text-align: left;
}
.sv-profileCardV2 .sv-statNum{
  font-weight: 950;
  font-size: 14px;
  display: inline;
}
.sv-profileCardV2 .sv-statLbl{
  display: inline;
  margin-left: 6px;
  opacity: .75;
  font-weight: 800;
  font-size: 13px;
}

/* Phase58: Crop + pick from uploads (Edit Profile) */
#sv-ov{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0,0,0,.55);
  z-index: 99999;
}
.sv-ovPanel{
  width: min(760px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.sv-ovTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sv-border);
}
.sv-ovTitle{ font-weight: 950; }
.sv-ovBody{ padding: 12px 14px 14px; }

/* Phase 146: Edit Profile tabs + sections (Twitter-like settings inside the same modal) */
.sv-epTabs{
  display:flex;
  gap: 8px;
  overflow:auto;
  padding: 8px 0 10px;
  margin: 6px 0 0;
  border-bottom: 1px solid var(--sv-border);
}
.sv-epTab{
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--sv-border);
  background: var(--sv-chip);
  color: var(--sv-fg);
  font-weight: 850;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.sv-epTab.is-on{
  background: var(--sv-fg);
  color: var(--sv-bg);
  border-color: transparent;
}
.sv-epSection{ display:none; padding-top: 10px; }
.sv-epSection.is-on{ display:block; }
.sv-epGrid2{ display:grid; grid-template-columns:1fr 1fr; gap: 10px; }
@media (max-width: 560px){ .sv-epGrid2{ grid-template-columns:1fr; } }
.sv-epHint{ opacity:.75; font-size: 12px; margin-top: 4px; }
.sv-epDivider{ height:1px; background: var(--sv-border); margin: 12px 0; }
.sv-epDanger{
  border: 1px solid var(--sv-border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(220,38,38,.05);
}
body.sv-dark .sv-epDanger{ background: rgba(220,38,38,.10); }
.sv-epDanger b{ display:block; margin-bottom: 6px; }
.sv-epList{ display:grid; gap: 8px; }
.sv-epItem{ padding: 10px 12px; border: 1px solid var(--sv-border); border-radius: 14px; background: var(--sv-chip); }
.sv-epItem small{ display:block; opacity:.75; margin-top: 4px; }
.sv-icoBtn{
  border: 1px solid var(--sv-border);
  background: transparent;
  color: var(--sv-fg);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}
.sv-icoBtn svg{ width: 18px; height: 18px; }

.sv-upGrid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.sv-upItem{
  border: 1px solid var(--sv-border);
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}
.sv-upItem img{ width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.sv-epMediaRow{ display: grid; gap: 8px; }
.sv-epMediaBtns{ display:flex; gap: 8px; flex-wrap: wrap; }
.sv-epAvatarPrev{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid var(--sv-border);
  object-fit: cover;
  background: #000;
}
.sv-epCoverPrev{
  width: 100%;
  height: 64px;
  border-radius: 14px;
  border: 1px solid var(--sv-border);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sv-cropPanel{ width: min(760px, 100%); }
.sv-cropBoxWrap{ display:flex; justify-content:center; }
.sv-cropBox{
  width: min(560px, 86vw);
  background: #0c0c0c;
  border: 1px solid var(--sv-border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  touch-action: none;
}
.sv-cropBox img{
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  will-change: transform;
  user-select: none;
  pointer-events: none;
}
.sv-cropZoomLbl{ display:block; font-weight: 850; margin-top: 10px; }
.sv-cropZoomLbl input{ width: 100%; }
.sv-cropBtns{ display:flex; gap: 10px; margin-top: 10px; }
.sv-cropBtns button{ flex: 1; }

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

@media (max-width: 520px){
  .sv-profileCoverV2{ height: 150px; }
  .sv-profTopName{ font-size: 17px; }
  .sv-profName{ font-size: 20px; }
  .sv-profileAvatarV2{ width: 88px; height: 88px; }
}


/* Phase59: Fullscreen cropper (pencil edit) */
#sv-cropfs.sv-cropFS{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  display: none;
  flex-direction: column;
}
#sv-cropfs .sv-cropTop{
  height: 56px;
  display:flex;
  align-items:center;
  padding: 0 10px;
  color: #fff;
  flex: 0 0 auto;
}
#sv-cropfs .sv-cropTopBtn{
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#sv-cropfs .sv-cropTopBtn svg{ width: 22px; height: 22px; fill: currentColor; }
#sv-cropfs .sv-cropTitle{
  flex: 1;
  text-align:center;
  font-weight: 950;
  font-size: 18px;
}
#sv-cropfs .sv-cropStage{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
}
#sv-cropfs .sv-cropViewportWrap{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
#sv-cropfs .sv-cropViewport{
  position: relative;
  width: min(92vw, 860px);
  max-height: calc(100vh - 56px - 72px - 24px);
  background: #111;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.58);
  touch-action: none;
}
#sv-cropfs .sv-cropViewport.is-avatar{
  width: min(76vw, 420px);
  border-radius: 14px;
}
#sv-cropfs .sv-cropViewport img{
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  max-width: none !important;
  max-height: none !important;
  width: auto;
  height: auto;
}
#sv-cropfs .sv-cropGrid{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#sv-cropfs .sv-cropGrid .v{
  position:absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.28);
}
#sv-cropfs .sv-cropGrid .v1{ left: 33.333%; }
#sv-cropfs .sv-cropGrid .v2{ left: 66.666%; }
#sv-cropfs .sv-cropGrid .h{
  position:absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.28);
}
#sv-cropfs .sv-cropGrid .h1{ top: 33.333%; }
#sv-cropfs .sv-cropGrid .h2{ top: 66.666%; }

#sv-cropfs .sv-cropCircleGuide{
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 999px;
  pointer-events: none;
}
#sv-cropfs .sv-cropSpinner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.35);
}
.sv-spin{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: svspin .9s linear infinite;
}
@keyframes svspin{ to{ transform: rotate(360deg); } }

#sv-cropfs .sv-cropBottom{
  height: 72px;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 0 16px calc(12px + env(safe-area-inset-bottom));
  color: #fff;
  flex: 0 0 auto;
}
#sv-cropfs .sv-cropBottom input[type="range"]{ flex: 1; }
#sv-cropfs .sv-cropZoomBtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 22px;
  font-weight: 950;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#sv-cropUpload.sv-cropUpload{
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: rgba(0,0,0,.82);
  display: none;
  align-items:center;
  justify-content:center;
}
#sv-cropUpload .sv-cropUploadBox{
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(20,20,20,.92);
  color: #fff;
  display:flex;
  flex-direction: column;
  align-items:center;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Phase 61: lightweight skeleton for smoother profile tab switching */
.sv-skelCard{opacity:.85;}
.sv-skelHead{display:flex; align-items:center; gap:10px; padding:12px;}
.sv-skelHead span{display:block; height:10px; border-radius:999px; background:var(--sv-border); opacity:.45; flex:1;}
.sv-skelHead span:first-child{width:36px; height:36px; border-radius:50%; flex:0 0 36px;}
.sv-skelBody{height:220px; margin:0 12px 12px; border-radius:14px; background:var(--sv-border); opacity:.3;}

/* Phase 63: overlay during profile tab fetch (no flicker) */
#sv-feed.sv-tabLoading{ position: relative; }
#sv-feed .sv-feedLoadingOverlay{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(2px);
  z-index: 6;
  pointer-events: none;
}
body.sv-dark #sv-feed .sv-feedLoadingOverlay{
  background: rgba(0,0,0,.55);
}
#sv-feed .sv-feedLoadingOverlay .sv-spin{ transform: scale(1.1); }



/* Phase 65: Messenger */
.sv-msgBtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--sv-border);
  border-radius:999px; background:var(--sv-card); color:var(--sv-text);
  cursor:pointer;
}
.sv-msgBtn .sv-ico{ width:18px; height:18px; }

.sv-searchRow{ display:flex; align-items:center; gap:10px; }
.sv-searchIn{ flex:1; min-width:0; }
.sv-searchPremium{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--sv-border);
  background:var(--sv-card); color:var(--sv-text);
}

#sv-ov{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.sv-msgPanel{
  width:min(96vw, 520px);
  height:min(92vh, 720px);
  background:var(--sv-card);
  border:1px solid var(--sv-border);
  border-radius:18px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
@media (min-width: 920px){
  #sv-ov{ align-items:flex-end; justify-content:flex-end; padding:18px; }
  .sv-msgPanel.is-desktop{
    width:360px; height:520px; border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
  }
}
.sv-msgHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px; border-bottom:1px solid var(--sv-border);
}
.sv-msgTitle{ font-weight:800; font-size:18px; }
.sv-msgBody{ flex:1; display:flex; min-height:0; }
.sv-msgList{ flex:1; display:flex; flex-direction:column; min-height:0; }
.sv-msgSearchWrap{ padding:10px; border-bottom:1px solid var(--sv-border); }
.sv-msgRows{ flex:1; overflow:auto; }
.sv-msgRow{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border:0; background:transparent; color:inherit;
  border-bottom:1px solid var(--sv-border);
  text-align:left;
  cursor:pointer;
}
.sv-msgRow:hover{ background:rgba(0,0,0,.03); }
.sv-msgAva{ width:44px; height:44px; border-radius:999px; object-fit:cover; border:1px solid var(--sv-border); flex:0 0 auto; }
.sv-msgMeta{ flex:1; min-width:0; }
.sv-msgTopLine{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sv-msgName{ font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-msgTime{ font-size:12px; color:var(--sv-muted); flex:0 0 auto; }
.sv-msgLast{ font-size:13px; color:var(--sv-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sv-msgBadge{ width:22px; height:22px; border-radius:999px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }

.sv-chatView{ flex:1; display:none; flex-direction:column; min-height:0; }
.sv-chatHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px; border-bottom:1px solid var(--sv-border);
}
.sv-chatWho{ display:flex; align-items:center; gap:10px; min-width:0; }
.sv-chatName{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-chatScroll{ flex:1; overflow:auto; padding:12px; background:rgba(0,0,0,.03); }
.sv-chatComposer{ display:flex; gap:10px; padding:10px; border-top:1px solid var(--sv-border); background:var(--sv-card); }
.sv-chatInp{ flex:1; min-width:0; }
.sv-chatSend{
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--sv-border); background:var(--sv-card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.sv-chatSend .sv-ico{ width:18px; height:18px; }
.sv-chatMsg{ display:flex; flex-direction:column; margin:8px 0; }
.sv-chatMsg.is-me{ align-items:flex-end; }
.sv-chatBubble{
  max-width:80%;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid var(--sv-border);
  background:var(--sv-card);
}
.sv-chatMsg.is-me .sv-chatBubble{ background:#111; color:#fff; border-color:#111; }
.sv-chatTime{ font-size:11px; color:var(--sv-muted); margin-top:4px; }


/* Phase 67 Messenger upgrades */
.sv-dmBadgeWrap{ position:relative; }
.sv-dmBadge{
  position:absolute;
  top:6px; right:6px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#111; color:#fff;
  font-weight:800; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--sv-card);
  line-height:1;
}
.sv-btmIco{ position:relative; }
.sv-btmIco .sv-dmBadge{ top:-3px; right:-3px; border-color:var(--sv-body); }

/* Phase 84: Notifications badge */
.sv-notifBadgeWrap{ position:relative; }
.sv-notifBadge{
  position:absolute;
  top:6px; right:6px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ff1a3d; color:#fff;
  font-weight:800; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--sv-card);
  line-height:1;
}


.sv-msgTabs{
  display:flex; gap:6px;
  padding:8px 10px;
  border-bottom:1px solid var(--sv-border);
}
.sv-msgTab{
  flex:1;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--sv-border);
  background:transparent;
  color:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.sv-msgTab.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.sv-chatSub{
  font-size:12px;
  color:var(--sv-muted);
  margin-top:2px;
}
.sv-chatMetaRow{
  display:flex; align-items:center; gap:6px; justify-content:flex-end;
}
.sv-chatTicks{ font-size:11px; color:rgba(255,255,255,.85); }
.sv-chatTicks.is-seen{ color:#1d9bf0; }

.sv-chatTools{ display:flex; gap:10px; }
.sv-chatTool{
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--sv-border);
  background:var(--sv-card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.sv-chatTool .sv-ico{ width:18px; height:18px; }

.sv-replyBar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  margin:10px 10px 0;
  border:1px solid var(--sv-border);
  border-radius:12px;
  background:rgba(0,0,0,.03);
}
.sv-replyTxt{ font-size:12px; color:var(--sv-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-replyX{
  width:32px; height:32px; border-radius:999px;
  border:1px solid var(--sv-border); background:var(--sv-card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

.sv-quote{
  border-left:3px solid rgba(0,0,0,.12);
  padding-left:8px;
  margin-bottom:6px;
  font-size:12px;
  color:var(--sv-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sv-chatMedia{
  margin-top:6px;
}
.sv-chatMedia img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}
.sv-chatMedia video{
  width:100%;
  border-radius:12px;
}
.sv-chatMedia audio{ width:100%; }

/* ============================
   Phase 69: UI polish
   ============================ */

/* Requested override */
.sv-profileCardV2{ padding: 0 !important; }

/* Inbox tab badges (Unread / Request split) */
.sv-msgTab{ position:relative; }
.sv-tabBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  background:#ff3b7a;
  color:#fff;
  border:2px solid var(--sv-card);
}

/* Inbox row quick-send button */
.sv-msgRowWrap{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.sv-msgRowWrap .sv-msgRow{ flex:1; }
.sv-msgQuick{
  width:40px;
  min-width:40px;
  border-radius:14px;
  border:1px solid var(--sv-border);
  background:var(--sv-card);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.sv-msgQuick svg{ width:18px; height:18px; }

/* Init error toast (admins only) */
.sv-initToast{
  position:fixed;
  right:12px;
  bottom:88px;
  z-index:99999;
  background:rgba(0,0,0,.78);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:10px;
  max-width: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.sv-initToast button{
  background:#fff;
  border:0;
  color:#000;
  font-weight:900;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}

/* Phase 73: repost video UI + chat header affordance */
.sv-chatWho{ cursor:pointer; }
.sv-repostVideo{ position:relative; overflow:hidden; }
.sv-repostMute{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.42);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  z-index: 3;
}
.sv-repostMute .sv-ico{ width:18px; height:18px; }
.sv-repostTime{
  position:absolute;
  bottom:10px;
  right:10px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  z-index: 3;
}


/* Phase 75: X-like tabs/headers + read-more links + mobile name row tighten + bottom nav icon polish */

/* Repost preview: latest spec removes speaker + time overlays */
.sv-repostMute,
.sv-repostTime{ display:none !important; }

/* Tabs (For you / Following / etc) closer to X */
.sv-tabs{
  justify-content:flex-start;
  gap:0;
  margin: 0 0 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow:none;
  border: none;
  border-bottom: 1px solid var(--sv-border);
}
.sv-tab{
  border:none;
  background: transparent;
  border-radius: 0;
  padding: 14px 10px;
  font-weight: 800;
  width:auto;
  flex:1;
  text-align:center;
  color: var(--sv-muted);
  position: relative;
}
.sv-tab:hover{ background: color-mix(in srgb, var(--sv-bg) 92%, var(--sv-card)); }
.sv-tab.is-active{
  background: transparent !important;
  color: var(--sv-fg) !important;
  border:none !important;
}
.sv-tab.is-active::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-1px;
  width: 56%;
  height: 4px;
  border-radius: 999px;
  background: var(--sv-link);
}

/* Typography mapping for tabs + section headers */
body.sv-font-chirp .sv-tab{ font-size:15px !important; line-height: 22px !important; }
body.sv-font-chirp .sv-rTitle,
body.sv-font-chirp .sv-shelfT,
body.sv-font-chirp .sv-boxTitle,
body.sv-font-chirp .sv-secTitle{ font-size:20px !important; font-weight:800 !important; color: var(--sv-fg) !important; line-height:1.3 !important; }

/* Read more / show more links (best-effort) */
body.sv-font-chirp .sv-readMore,
body.sv-font-chirp .sv-showMore,
body.sv-font-chirp .sv-moreLink,
body.sv-font-chirp .sv-readMoreLink,
body.sv-font-chirp .sv-showMoreLink,
body.sv-font-chirp a[data-readmore],
body.sv-font-chirp a[data-showmore]{
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sv-link) !important;
  cursor:pointer;
}

/* Mobile: tighten name/time row like X */
@media(max-width: 520px){
  .sv-headLeft{ gap: 8px; }
  .sv-nameRow{ gap: 6px; align-items: baseline; }
  body.sv-font-chirp .sv-name{ font-size: 17px !important; }
  body.sv-font-chirp .sv-timeInline{ font-size: 13px !important; }
}

/* Ensure message/inbox buttons are clickable */
.sv-msg-open,
.sv-msg-user,
.sv-msgBtn{ cursor:pointer; }

/* Bottom nav: remove icon background chips, keep active state via color */
.sv-bottom .sv-btmLink,
.sv-bottom .sv-btmIco{ background: transparent !important; }
.sv-bottom .sv-btmLink.is-active{ background: transparent !important; }
.sv-bottom .sv-btmLink.is-active .sv-ico{ color: var(--sv-link) !important; }
.sv-bottom .sv-btmLbl{ background: transparent !important; }

/* Phase 79: Live highlighting + directory + gifting */
.sv-livePill{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:2px 8px;border-radius:999px;font-weight:950;letter-spacing:.3px;font-size:12px;line-height:18px;background:rgba(255,59,48,.16);border:1px solid rgba(255,59,48,.35)}
.sv-liveDot{width:6px;height:6px;border-radius:999px;background:rgb(255,59,48);box-shadow:0 0 0 3px rgba(255,59,48,.18)}
.sv-card.is-live{border-color:rgba(255,59,48,.35)}
.sv-card.is-live .sv-media{outline:2px solid rgba(255,59,48,.35);outline-offset:-2px;border-radius:16px}
.sv-reel.is-live .sv-reelVid{outline:2px solid rgba(255,59,48,.35);outline-offset:-2px}
.sv-liveBadge{position:absolute;top:12px;left:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:950;font-size:12px;letter-spacing:.35px;background:rgba(255,59,48,.92);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.sv-liveBadge:before{content:"";width:7px;height:7px;border-radius:999px;background:#fff;opacity:.95}

.sv-liveDirectory{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:900px){.sv-liveDirectory{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1200px){.sv-liveDirectory{grid-template-columns:repeat(4,minmax(0,1fr));}}
.sv-liveCard{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--sv-border);background:var(--sv-card);}
.sv-liveThumb{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.sv-liveMeta{padding:10px;display:flex;gap:10px;align-items:center}
.sv-liveMeta .sv-av{width:34px;height:34px}
.sv-liveName{font-weight:950;line-height:1.1}
.sv-liveSub{opacity:.75;font-size:12px;margin-top:2px}
.sv-liveGo{margin-left:auto}

.sv-giftGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(min-width:600px){.sv-giftGrid{grid-template-columns:repeat(6,minmax(0,1fr));}}
.sv-giftBtn{border:1px solid var(--sv-border);background:var(--sv-card);border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:850}
.sv-giftBtn small{opacity:.75;font-weight:900}
.sv-pillGift{gap:8px}


/* ===========================
   Phase 80: Groups
=========================== */

.sv-groupSuggest{
  display:block;
  margin: 8px 0 10px;
  overflow:hidden;
}
.sv-groupSuggest .sv-gShelf{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 10px 10px;
  scroll-snap-type:x mandatory;
}
.sv-groupSuggest .sv-gShelf::-webkit-scrollbar{ height: 6px; }
.sv-groupCard{
  min-width: 240px;
  max-width: 240px;
  scroll-snap-align:start;
  border: 1px solid var(--sv-border);
  border-radius: 16px;
  overflow:hidden;
  background: var(--sv-card, var(--sv-surface));
}
.sv-groupCard .sv-gCover{
  height: 70px;
  background: var(--sv-border);
  background-size: cover;
  background-position: center;
}
.sv-groupCard .sv-gMeta{
  padding: 10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.sv-groupCard .sv-gAv{
  width: 42px; height: 42px; border-radius: 14px;
  background: var(--sv-border);
  flex:0 0 auto;
  overflow:hidden;
}
.sv-groupCard .sv-gAv img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-groupCard .sv-gName{
  font-weight: 950;
  line-height: 1.1;
}
.sv-groupCard .sv-gSub{
  margin-top: 2px;
  color: var(--sv-muted);
  font-size: 13px;
}
.sv-groupCard .sv-gActions{
  padding: 0 10px 10px;
  display:flex;
  gap:8px;
}

.sv-groups{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.sv-gItem{
  border: 1px solid var(--sv-border);
  border-radius: 16px;
  overflow:hidden;
  background: var(--sv-card, var(--sv-surface));
}
.sv-gItem .sv-gRow{
  display:flex;
  gap:10px;
  padding: 12px;
  align-items:flex-start;
}
.sv-gItem .sv-gAv{
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--sv-border);
  overflow:hidden;
  flex:0 0 auto;
}
.sv-gItem .sv-gAv img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-gItem .sv-gTitle{
  font-weight: 950;
}
.sv-gItem .sv-gDesc{
  margin-top:4px;
  color: var(--sv-muted);
  font-size: 13px;
}
.sv-gItem .sv-gFoot{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: 0 12px 12px;
}

.sv-groupHead .sv-ghCover,
.sv-groupFb .sv-ghCover{
  height: 140px;
  background: var(--sv-border);
  background-size: cover;
  background-position:center;
}
.sv-groupHead .sv-ghBody,
.sv-groupFb .sv-ghBody{
  padding: 12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.sv-groupHead .sv-ghAv,
.sv-groupFb .sv-ghAv{
  width: 72px; height: 72px; border-radius: 22px;
  background: var(--sv-border);
  overflow:hidden;
  flex:0 0 auto;
  margin-top: -36px;
  border: 2px solid var(--sv-card, var(--sv-surface));
}
.sv-groupHead .sv-ghAv img,
.sv-groupFb .sv-ghAv img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-groupHead .sv-ghName,
.sv-groupFb .sv-ghName{
  font-weight: 950;
  font-size: 18px;
}
.sv-groupHead .sv-ghDesc,
.sv-groupFb .sv-ghDesc{
  margin-top:6px;
  color: var(--sv-muted);
  font-size: 13px;
}
.sv-groupHead .sv-ghActions,
.sv-groupFb .sv-ghActions{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* ===========================
   Phase 83: Facebook-style Groups UI
=========================== */

.sv-gFbLayout{display:grid;grid-template-columns:340px 1fr;gap:12px;align-items:start}
@media(max-width:960px){.sv-gFbLayout{grid-template-columns:1fr}}

.sv-gFbLeft{padding:14px}
.sv-gFbTitle{font-weight:950;font-size:18px}
.sv-gFbSub{color:var(--sv-muted);font-size:13px;margin-top:6px}
.sv-gFbNav{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sv-gFbNavItem{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--sv-border);border-radius:14px;background:var(--sv-card, var(--sv-surface));font-weight:900}
.sv-gFbNavItem.is-on{outline:2px solid rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18)}
.sv-gFbCreate{margin-top:12px;width:100%}

.sv-gFbShortcuts{margin-top:14px}
.sv-gFbMiniTitle{font-weight:950;margin-bottom:8px}
.sv-gFbShortcut{display:block;padding:8px 10px;border:1px solid var(--sv-border);border-radius:12px;text-decoration:none;color:inherit;margin-bottom:8px;background:var(--sv-card, var(--sv-surface))}

.sv-gFbMain{min-width:0}
.sv-gFbTop{padding:14px}
.sv-gFbTopRow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sv-gFbH{font-weight:950;font-size:16px}
.sv-gFbTools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sv-gSearchWrap{position:relative;display:inline-flex;align-items:center}
.sv-gSearchWrap .sv-in{padding-right:34px}
.sv-gClearBtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:999px;border:1px solid var(--sv-border);background:var(--sv-card, var(--sv-surface));color:var(--sv-text);font-weight:950;display:none;align-items:center;justify-content:center;cursor:pointer;line-height:1}
.sv-gFbChips{margin-top:10px}
.sv-chipRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sv-chipRow .sv-chip{cursor:pointer;user-select:none}
.sv-chipRow .sv-chip.is-on{outline:2px solid rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.18)}

.sv-gFbEmptyCard{padding:14px}
.sv-gFbEmptyCard .t{font-weight:950}
.sv-gFbEmpty{padding:14px}
.sv-gFbEmpty .t{font-weight:950}

/* cards list */
.sv-gFbCard{border:1px solid var(--sv-border);border-radius:16px;overflow:hidden;background:var(--sv-card, var(--sv-surface))}
.sv-gFbLink{text-decoration:none;color:inherit;display:block}
.sv-gFbCover{height:90px;background:var(--sv-border);background-size:cover;background-position:center}
.sv-gFbBody{display:flex;gap:12px;padding:12px}
.sv-gFbAv{width:52px;height:52px;border-radius:16px;background:var(--sv-border);overflow:hidden;flex:0 0 auto;margin-top:-26px;border:2px solid var(--sv-card, var(--sv-surface))}
.sv-gFbAv img{width:100%;height:100%;object-fit:cover;display:block}
.sv-gFbInfo{min-width:0;flex:1}
.sv-gFbName{font-weight:950}
.sv-gFbMeta{color:var(--sv-muted);font-size:13px;margin-top:4px}
.sv-gFbDesc{color:var(--sv-muted);font-size:13px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv-gFbFoot{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:0 12px 12px;flex-wrap:wrap}
.sv-gFbActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Group single tabs + composer */
.sv-ghBodyFb{padding-top:14px}
.sv-gFbTabs{display:flex;gap:10px;align-items:center;padding:0 12px 12px;flex-wrap:wrap}
.sv-gFbTab{border:1px solid var(--sv-border);background:var(--sv-card, var(--sv-surface));border-radius:999px;padding:8px 12px;font-weight:900}
.sv-gFbTab.is-on{outline:2px solid rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18)}

.sv-gFbAboutGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:720px){.sv-gFbAboutGrid{grid-template-columns:1fr}}

.sv-gFbComposer{margin:12px;padding:12px;border:1px solid var(--sv-border);border-radius:16px;background:var(--sv-card, var(--sv-surface))}
.sv-gFbComposeRow{display:flex;gap:10px;align-items:flex-start}
.sv-gFbMeAv{width:38px;height:38px;border-radius:14px;background:var(--sv-border);overflow:hidden;flex:0 0 auto}
.sv-gFbMeAv img{width:100%;height:100%;object-fit:cover;display:block}
.sv-gFbComposeBar{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}


/* Phase 84: Notifications panel */
.sv-notiList{ display:flex; flex-direction:column; gap:8px; }
.sv-notiItem{ display:block; padding:10px 12px; border:1px solid var(--sv-border); border-radius:14px; background:var(--sv-card); }
.sv-notiItem.is-unread{ background: var(--sv-unread-bg); border-color: var(--sv-unread-border); box-shadow:none; }
.sv-notiItem.is-marked{ background: var(--sv-marked-bg); }
.sv-notiItem.is-admin{ background: var(--sv-admin-bg); }
.sv-notiItem.is-admin.is-unread,
.sv-notiItem.is-marked.is-unread{ border-color: var(--sv-unread-border); }
.sv-notiTitle{ font-weight:800; font-size:14px; }
.sv-notiMsg{ font-size:13px; color:var(--sv-muted); margin-top:4px; }
.sv-notiTime{ font-size:12px; color:var(--sv-muted); margin-top:6px; }

/* Phase 102: /notifications page header + tabs + actions */
.sv-notiHead{
  border:1px solid var(--sv-border);
  background:var(--sv-card);
  border-radius:16px;
  padding:12px;
}
.sv-notiHeadTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sv-notiHeadBtns{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; width:auto; justify-content:flex-end; }
.sv-notiHeadBtnsLeft,.sv-notiHeadBtnsRight{ display:flex; gap:8px; align-items:center; }
.sv-chip.sv-danger{ border-color: var(--sv-unread-border); }
.sv-notiTabs{
  margin-top:10px;
  display:flex;
  gap:8px;
}

/* Phase 103: /notifications search + filters + infinite scroll */
.sv-notiTools{ margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sv-notiSearch{
  flex:1;
  min-width:220px;
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--sv-border);
  background:var(--sv-card);
  border-radius:999px;
  padding:8px 12px;
}
.sv-notiSearch .sv-ico{ width:18px; height:18px; color:var(--sv-muted); }
.sv-notiSearchInp{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--sv-fg);
  font-weight:800;
}
.sv-notiFilter{
  border:1px solid var(--sv-border);
  background:var(--sv-card);
  color:var(--sv-fg);
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
}
@media(max-width:520px){
  .sv-notiFilter{ flex:1; }
  .sv-notiSearch{ flex:1 1 100%; }
}

/* Phase 107: make the /notifications header feel less "busy" on small screens */
@media(max-width:640px){
  .sv-notiHeadTop{ flex-direction:column; align-items:stretch; }
  .sv-notiHeadBtns{ width:100%; justify-content:space-between; }
}
.sv-notiInlineNote{ margin-top:10px; }
.sv-notiMore{ margin-top:10px; text-align:center; }

.sv-notiPinned{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:950;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(29,155,240,.35);
  background:rgba(29,155,240,.10);
}

.sv-notiPin.is-on{
  border-color:rgba(29,155,240,.35);
  background:rgba(29,155,240,.08);
  color:rgb(29,155,240);
}
.sv-notiMark.is-on{
  border-color:rgba(255,193,7,.40);
  background:rgba(255,193,7,.10);
  color:rgba(255,193,7,.95);
}
.sv-notiTab{
  flex:1;
  border:1px solid var(--sv-border);
  background:var(--sv-card);
  color:var(--sv-fg);
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.sv-notiTab.is-active{
  border-color: var(--sv-unread-border);
  box-shadow: 0 0 0 2px rgba(255,26,61,.10);
}

.sv-notiSection{ margin-top:10px; }
.sv-notiSecTitle{ font-weight:900; font-size:12px; color:var(--sv-muted); padding:6px 4px; }

/* Phase 106: actor avatar + tick in notification rows */
.sv-notiLeft{ flex:0 0 auto; }
.sv-notiAvatarWrap{
  position:relative;
  width:40px;
  height:40px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--sv-border);
  background:var(--sv-card);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sv-notiAvatar{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-notiAvatarPh .sv-ico{ width:18px; height:18px; color:var(--sv-muted); }
.sv-notiTick{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:16px;
  height:16px;
  border-radius:999px;
  background: rgb(var(--sv-badge-verified-rgb, 29, 155, 240));
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--sv-card);
}
body.sv-dark .sv-notiTick{ border-color: var(--sv-card,#141414); }
.sv-notiTick .sv-ico{ width:12px; height:12px; color:#fff; }

.sv-notiRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.sv-notiMain{ flex:1; min-width:0; }
.sv-notiEnd{ display:flex; gap:6px; align-items:center; flex:0 0 auto; }
.sv-notiEnd .sv-icoBtn{ width:34px; height:34px; border-radius:12px; }
.sv-notiItem.is-pinned{ border-color: rgba(29,155,240,.35); }


/* Phase 98: Like pop notification (auto-dismiss + swipe) */
.sv-likePopHost{
  position:fixed;
  top:68px;
  left:50%;
  transform:translateX(-50%);
  width:min(520px, calc(100vw - 24px));
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.sv-likePop{
  pointer-events:auto;
  background:var(--sv-card);
  border:1px solid var(--sv-border);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  display:flex;
  gap:10px;
  align-items:flex-start;
  touch-action:pan-y;
}
.sv-likePopIco{ width:34px; height:34px; border-radius:14px; background:rgba(255,26,61,.14); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.sv-likePopTxt{ flex:1 1 auto; min-width:0; }
.sv-likePopTitle{ font-weight:900; font-size:13px; line-height:1.2; }
.sv-likePopMsg{ font-size:12px; color:var(--sv-muted); margin-top:2px; line-height:1.3; }
.sv-likePopClose{ background:transparent; border:0; color:var(--sv-muted); font-size:18px; line-height:1; padding:2px 4px; cursor:pointer; }


/* Phase 109: Notification Settings Modal */
.sv-icoChip{ display:inline-flex; align-items:center; gap:8px; }
.sv-icoChip .sv-ico{ width:18px; height:18px; display:block; }
.sv-icoChipTxt{ font-weight:900; }

.sv-modal{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.sv-modalBack{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.50);
}
body.sv-dark .sv-modalBack{ background: rgba(0,0,0,.65); }

.sv-modalCard{
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.sv-modalHead{
  position: sticky;
  top: 0;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--sv-border);
  background: var(--sv-card);
}
.sv-modalTitle{ font-weight:950; font-size:16px; }
.sv-modalBody{ padding: 14px; }
.sv-modalFoot{
  position: sticky;
  bottom: 0;
  z-index: 1;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--sv-border);
  background: var(--sv-card);
}

.sv-setSection{
  border: 1px solid var(--sv-border);
  border-radius: 18px;
  padding: 12px;
  background: var(--sv-card);
  margin-bottom: 12px;
}
.sv-setH{ font-weight: 950; font-size: 13px; margin-bottom: 6px; }
.sv-setRow{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 10px 8px;
  border-radius: 16px;
  border: 1px solid var(--sv-border);
  background: color-mix(in srgb, var(--sv-card) 70%, var(--sv-bg));
  margin-top: 8px;
}
.sv-setTxt{ min-width:0; }
.sv-setTitle{ font-weight: 900; font-size: 14px; }
.sv-setSub{ font-size: 12px; color: var(--sv-muted); margin-top: 2px; }

.sv-setGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width:520px){
  .sv-setGrid{ grid-template-columns: 1fr; }
}
.sv-setLabel{ font-size: 12px; font-weight: 900; margin-bottom: 6px; }
.sv-input{
  width: 100%;
  border: 1px solid var(--sv-border);
  background: var(--sv-body);
  color: var(--sv-text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  outline: none;
}
body.sv-dark .sv-input{ background: var(--sv-surface); }

.sv-switch{
  position: relative;
  width: 44px;
  height: 26px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.sv-switch input{
  position:absolute;
  inset:0;
  opacity:0;
}
.sv-switchUI{
  position:absolute;
  inset:0;
  border-radius: 999px;
  border: 1px solid var(--sv-border);
  background: var(--sv-bg);
}
.sv-switchUI:after{
  content:'';
  position:absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--sv-card);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.sv-switch input:checked + .sv-switchUI{
  background: var(--sv-brand);
  border-color: color-mix(in srgb, var(--sv-brand) 70%, #000);
}
.sv-switch input:checked + .sv-switchUI:after{
  transform: translateX(18px);
}

/* Primary CTA chip */
.sv-chip.sv-cta{
  background: var(--sv-brand);
  border-color: color-mix(in srgb, var(--sv-brand) 70%, #000);
  color: #fff;
}

/* Phase 112: Hashtag page + mention/hashtag suggestions */
.sv-hashtagPage{max-width:680px;margin:0 auto;}
.sv-hashHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 10px;}
.sv-hashTitle{font-size:20px;font-weight:800;letter-spacing:.2px;display:flex;align-items:baseline;gap:2px;}
.sv-hashPound{opacity:.8;}
.sv-hashTabs{display:flex;gap:10px;align-items:center;margin:4px 0 8px;}
.sv-hashTabs .sv-tab{background:transparent;border:0;color:var(--sv-text);font-weight:700;padding:8px 10px;border-radius:999px;cursor:pointer;}
.sv-hashTabs .sv-tab.is-active{background:var(--sv-card);border:1px solid var(--sv-border);}
.sv-hashFilters{display:flex;gap:10px;align-items:center;margin:0 0 10px;}
.sv-hashResults .sv-userRow{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--sv-border);background:var(--sv-card);border-radius:16px;margin:8px 0;}
.sv-hashResults .sv-userRow img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.sv-hashResults .sv-userMeta{display:flex;flex-direction:column;min-width:0;}
.sv-hashResults .sv-userName{font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sv-hashResults .sv-userHandle{opacity:.8;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sv-suggestBox{position:absolute;z-index:999999;background:var(--sv-card);border:1px solid var(--sv-border);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:auto;max-height:260px;min-width:260px;}
.sv-suggestItem{display:flex;align-items:center;gap:10px;padding:10px;cursor:pointer;}
.sv-suggestItem:hover{background:rgba(128,128,128,.08);}
.sv-suggestItem img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.sv-suggestItem .sv-sugText{display:flex;flex-direction:column;min-width:0;}
.sv-suggestItem .sv-sugTop{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sv-suggestItem .sv-sugSub{opacity:.8;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sv-suggestItem .sv-sugTag{font-weight:800;}

/* ensure hashtag + mention links inherit link styling */
.sv-tag,.sv-mention{color:var(--sv-link);text-decoration:none;}
.sv-tag:hover,.sv-mention:hover{text-decoration:underline;}


/* Phase 113: Hashtag follow + trending widget */
.sv-hashFollow{ font-weight:950; }
.sv-rightTrendingHash{ display:flex; flex-direction:column; gap:10px; }
.sv-rightTagRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sv-miniFollow{ padding:6px 10px; border-radius:999px; border:1px solid var(--sv-border); background: var(--sv-card); font-weight:900; cursor:pointer; }
.sv-miniFollow:hover{ background: var(--sv-chip2); }
.sv-miniFollow.is-on{ background: var(--sv-accent); border-color: transparent; color:#fff; }

/* Phase 114: Hashtag management + muted hashtags */
.sv-rTitleRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sv-rLink{font-size:13px;text-decoration:none;color:var(--sv-link);padding:4px 10px;border-radius:999px;background:rgba(127,127,127,.10)}
.sv-rLink:hover{background:rgba(127,127,127,.16)}

.sv-hashMute{margin-left:8px}

.sv-hmHead{margin-bottom:10px}
.sv-hmControls{display:flex;flex-direction:column;gap:12px;margin:12px 0}
.sv-hmToggle{display:flex;gap:12px;align-items:flex-start}
.sv-hmToggleTxt{line-height:1.2}
.sv-hmToggleTitle{font-weight:800}
.sv-hmToggleSub{font-size:13px;opacity:0.85;margin-top:2px}
.sv-hmMuteBar{display:flex;gap:10px;align-items:center}
.sv-hmMuteBar .sv-input{flex:1}

.sv-hmCols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.sv-hmCols{grid-template-columns:1fr}}
.sv-hmCol{background:var(--sv-card);border:1px solid var(--sv-border);border-radius:16px;padding:12px}
.sv-hmSectionHead{margin-bottom:10px}
.sv-hmH{font-weight:800}
.sv-hmSub{font-size:13px;opacity:0.85;margin-top:2px}
.sv-hmList{display:flex;flex-direction:column;gap:8px}
.sv-hmRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--sv-border);border-radius:14px;background:transparent}
.sv-hmRowLeft{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv-hmTag{font-weight:900;text-decoration:none;color:var(--sv-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sv-hmMeta{font-size:12px;opacity:0.8}
.sv-hmRowBtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.sv-miniMute{border:1px solid var(--sv-border);background:transparent;border-radius:999px;padding:6px 10px;font-size:13px;cursor:pointer}
.sv-miniMute.is-on{background:rgba(127,127,127,.12)}
.sv-miniMute.sv-danger{border-color:rgba(255,0,0,.35);color:var(--sv-danger)}

/* Phase 136: Drawer must always overlay PayPal iframes; hide PayPal buttons while menu is open */
body.sv-drawer-opened .sv-premSmartBtns,
body.sv-drawer-opened .sv-walletSmartBtns{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Phase 136: Show upload shortcut in topbar on tablets only */
@media (max-width: 720px){
  .sv-topUpload{ display:none !important; }
}
@media (min-width: 980px){
  .sv-topUpload{ display:none !important; }
}

/* Phase 136: Move drawer open button to left on mobile (drawer opens from left) */
@media (max-width: 720px){
  .sv-drawerOpen{ left: 12px; right: auto; }
}

/* Phase 136: Wallet page */
.sv-walletCard{ max-width: 560px; margin: 18px auto; padding: 18px; }
.sv-walletHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom: 14px; }
.sv-walletTitle{ margin:0; font-size: 22px; font-weight: 1000; }
.sv-walletBalanceRow{ text-align:right; }
.sv-walletLabel{ font-size: 12px; color: var(--sv-muted); font-weight: 900; }
.sv-walletBalance{ font-size: 18px; font-weight: 1000; }
.sv-walletTopupTitle{ font-size: 14px; font-weight: 1000; margin: 10px 0 8px; }
.sv-walletTopupRow{ display:flex; gap:10px; align-items:center; margin-bottom: 12px; }
.sv-walletTopupRow .sv-in{ flex:1; min-width: 120px; }
.sv-walletSmartBtns{ display:flex; flex-direction:column; gap:10px; }
.sv-walletBtn{ width:100%; }
.sv-walletPayBtn{ width:100%; height:48px; border-radius:10px; border:0; background:#111; color:#fff; font-weight:950; font-size:14px; letter-spacing:.4px; cursor:pointer; }
.sv-walletPayBtn:hover{ filter: brightness(1.08); }
.sv-walletPayBtn:disabled{ opacity:.6; cursor:not-allowed; }
.sv-walletStatus{ margin-top: 10px; font-size: 13px; color: var(--sv-muted); min-height: 18px; }
.sv-walletReceipt{ margin-top: 10px; padding: 10px 12px; border: 1px solid var(--sv-border); background: var(--sv-chip2); border-radius: 12px; font-size: 13px; font-weight: 900; }


/* Phase 137: prevent media shrink/layout shift while loading */
.sv-media.sv-mediaLoading{ min-height: 220px; }
.sv-media.sv-mediaLoading::before{ content:''; position:absolute; inset:0; background: color-mix(in srgb, var(--sv-card) 65%, var(--sv-bg)); opacity:.35; }
.sv-media.sv-mediaLoading img, .sv-media.sv-mediaLoading video, .sv-media.sv-mediaLoading iframe{ opacity:0; }
.sv-media img, .sv-media video, .sv-media iframe{ display:block; }


/* Phase 137: Wallet history UI */
.sv-walletHistory{ margin-top:14px; }
.sv-walletHistoryHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sv-walletHistoryHead h3{ margin:0; font-size:15px; }
.sv-walletTx{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.sv-walletTxItem{ display:flex; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--sv-border); border-radius:14px; background:var(--sv-card); }
.sv-walletTxMeta{ display:flex; flex-direction:column; gap:4px; }
.sv-walletTxType{ font-weight:900; font-size:13px; }
.sv-walletTxSub{ font-size:12px; color:var(--sv-muted); }
.sv-walletTxAmt{ text-align:right; font-weight:900; }
.sv-walletTxAmt small{ display:block; font-weight:700; color:var(--sv-muted); }


/* =========================
   Phase 139 UI fixes
   ========================= */

/* Ensure mobile bottom menu never covers last feed items */
@media(max-width: 720px){
  body.logged-in{ padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  .sv-feed{ padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}

/* Bottom mobile menu: show labels */
@media(max-width: 720px){
  .sv-bottom .sv-btmLbl{ display:block !important; }
  .sv-bottom .sv-btmLink{ gap:4px !important; padding: 10px 10px !important; }
  .sv-bottom .sv-btmIco{ width: 30px; height: 30px; }
}

/* Menus use var(--sv-fg) for text + icons (including active) */
.sv-top, .sv-side, .sv-bottom{ color: var(--sv-fg); }
.sv-top a, .sv-top button, .sv-side a, .sv-side button, .sv-bottom a, .sv-bottom button{ color: var(--sv-fg); }
.sv-top svg, .sv-side svg, .sv-bottom svg{ color: currentColor; stroke: currentColor; fill: currentColor; }
.sv-bottom .sv-btmLink.is-active,
.sv-bottom .sv-btmLink.is-active .sv-ico{ color: var(--sv-fg) !important; }

/* Feed media borders (videos + images + embeds) */
.sv-feed .sv-media img,
.sv-feed .sv-media video,
.sv-feed .sv-media iframe{
  border: 1px solid var(--sv-border);
  border-radius: 16px;
}

/* Mobile drawer/sidebar: scrollable list */
@media(max-width: 920px){
  .sv-drawerBody{
    overflow-y: auto;
    max-height: calc(100vh - 78px);
    -webkit-overflow-scrolling: touch;
  }
}

/* Stories: Facebook-like "Create story" card (avatar as top image) */
.sv-story.sv-storyCreate{
  padding: 0 !important;
  overflow: hidden;
  border-radius: 22px !important;
  border: 1px solid var(--sv-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.sv-storyCreateTop{ height: 72%; background: color-mix(in srgb, var(--sv-card) 70%, #dfe3ee); }
.sv-storyCreateTop img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-storyCreateBottom{
  height: 28%;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-direction:column;
  gap:0;
  position:relative;
  padding: 56px 14px 18px;
}
body.sv-dark .sv-storyCreateBottom{ background: var(--sv-card); }
.sv-storyCreatePlus{
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: #0866ff;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  position:absolute;
  top: -44px;
  border: 6px solid #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
body.sv-dark .sv-storyCreatePlus{ border-color: var(--sv-card); }
.sv-storyCreateLabel{
  font-weight: 900;
  font-size: 24px;
  color: #111;
  text-align:center;
  letter-spacing: -.2px;
}
body.sv-dark .sv-storyCreateLabel{ color: var(--sv-fg); }

/* Suggested groups cards: tighter FB-like layout + better button fit */
.sv-gShelf{ gap: 14px !important; }
.sv-groupCard, .sv-gFbCard{
  border-radius: 18px;
  overflow: hidden;
}
.sv-gActions, .sv-gFbActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sv-gActions .sv-primary,
.sv-gActions .sv-chip,
.sv-gFbActions .sv-primary,
.sv-gFbActions .sv-chip{
  flex: 1 1 140px;
  min-width: 140px;
  justify-content:center;
}

/* Reels text colors + action button spacing */
.sv-reelNm,
.sv-reelAuthor,
.sv-reelCap{
  color: rgba(255,255,255,.98) !important;
}
.sv-reelCap{ opacity: 1 !important; }
.sv-rBtn{
  padding: 2px !important;
  background: transparent !important;
  border: none !important;
  gap: 2px !important;
}
.sv-rViews{
  padding: 2px !important;
  background: transparent !important;
  border: none !important;
  gap: 2px !important;
}
.sv-reelMute{ top: 14px !important; right: 14px !important; }

/* Badges: Facebook-like pills */
.sv-badge{
  border: 0 !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  background: rgba(8,102,255,.12) !important;
  color: #0866ff !important;
}
body.sv-dark .sv-badge{
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}
.sv-badgeCount{
  background: #ff1a3d !important;
  color:#fff !important;
  border:0 !important;
  padding: 0 6px !important;
  min-width: 18px !important;
  height: 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.sv-badge-admin{ background: rgba(var(--sv-badge-admin-rgb,24,119,242),.14) !important; color: rgb(var(--sv-badge-admin-rgb,24,119,242)) !important; }
.sv-badge-verified{ background: rgba(var(--sv-badge-verified-rgb,24,119,242),.14) !important; color: rgb(var(--sv-badge-verified-rgb,24,119,242)) !important; }
.sv-badge-premium{ background: rgba(var(--sv-badge-premium-rgb,199,0,255),.14) !important; color: rgb(var(--sv-badge-premium-rgb,199,0,255)) !important; }

/* Badge icons near names: smaller FB check-style */
.sv-badgeMiniWrap{ gap:4px !important; margin-left:4px !important; }
.sv-badgeMini{
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
}
.sv-badgeMini .sv-ico{ width: 14px !important; height: 14px !important; }

/* Wallet redesign */
.sv-walletCard{ max-width: 980px; }
.sv-walletGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
@media(max-width: 900px){
  .sv-walletGrid{ grid-template-columns: 1fr; }
}
.sv-walletStats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media(max-width: 520px){
  .sv-walletStats{ grid-template-columns: 1fr; }
}
.sv-walletStat{
  border: 1px solid var(--sv-border);
  background: var(--sv-card);
  border-radius: 18px;
  padding: 16px;
  min-height: 76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.sv-walletStat .sv-walletLabel{ margin:0; }
.sv-walletStatVal{ font-weight: 1000; font-size: 18px; }

.sv-walletPanel{
  border: 1px solid var(--sv-border);
  background: var(--sv-card);
  border-radius: 18px;
  padding: 16px;
}
.sv-walletPanel h3{ margin:0 0 10px; font-size: 15px; font-weight: 1000; }

.sv-walletAmtRow{ display:flex; gap:10px; align-items:center; margin-bottom: 10px; }
.sv-walletAmtRow .sv-in{ flex:1; min-width: 0; }
.sv-walletQuick{ display:flex; gap:10px; }
.sv-walletQuick .sv-chip{ min-width: 60px; justify-content:center; }

.sv-walletButtons{ display:flex; flex-direction:column; gap:10px; }
.sv-walletPayBtn{ border-radius: 14px; height: 52px; }

/* Make wallet history match new panels */
.sv-walletHistoryCard{ border: 1px solid var(--sv-border); background: var(--sv-card); border-radius: 18px; padding: 16px; }


/* Phase 140: Requested UI overrides */
span.sv-btmIco { color: var(--sv-fg) !important; }
.sv-uHd { font-size: 14px; color: var(--sv-muted); }
.sv-uMutual { color: var(--sv-muted); }
.sv-pill .sv-ico { color: var(--sv-muted) !important; }

/* User request: hide bottom bar + tighten icon-only spacing */
.sv-bottom {
  display: none;
  position: fixed;
  padding: 6px 8px;
}
.sv-bottom .sv-btmLink {
  gap: 0 !important;
  padding: 1px 10px !important;
  border: none;
}

a.sv-drawerLink {
  color: var(--sv-fg) !important;
  font-size: 14px;
  font-weight: 500;
}

/* Keep Create Story card light-mode pixel-perfect; apply chip surface only in dark mode */
body.sv-dark .sv-storyCreateBottom { background: var(--sv-chip) !important; }

/* Buttons: replace gradients with solid surface + border */
.sv-btn,
.sv-primary,
.sv-walletPayBtn,
.sv-chip,
.sv-pill{

  background: var(--sv-fg) !important;
  color: var(--sv-bg, #000) !important;
  border: 1px solid var(--sv-border) !important;
}

/* Prevent global button override from breaking small chips in tight rows */
.sv-walletQuick .sv-chip,
.sv-gActions .sv-chip,
.sv-gFbActions .sv-chip,
.sv-pill{
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Phase 142: Story create + pills + headers + FAB tweaks (Twitter-like polish) */
.sv-storyCreatePlus{width:35px;height:35px;font-size:25px;top:-15px;border:3px solid #fff;}
.sv-storyCreateLabel{font-weight:400;font-size:14px;}
.sv-storyCreateBottom{height:28%;padding:50px 14px 18px;}
a.sv-story{color:#ebebeb;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.12);}
button.sv-pill{background:none;border:none !important;}
.sv-uHd{font-size:14px;color:var(--sv-fg) !important;}
button#sv-fab{color:#fff;}


/* Phase 143: Wallet PayPal/Card modal + mobile scroll (fix stuck scrolling / header overlap) */
.sv-walletModal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 10px 10px;
}
.sv-walletModal[aria-hidden="false"]{ display:flex; }
.sv-walletModalShade{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.sv-walletModalCard{
  position:relative;
  width: min(520px, 100%);
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 84px));
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.sv-walletModalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sv-border);
}
.sv-walletModalTitle{
  font-weight: 900;
  font-size: 14px;
  color: var(--sv-fg);
}
.sv-walletModalClose{
  background: transparent;
  border: 0;
  color: var(--sv-fg);
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px;
  cursor:pointer;
}
.sv-walletModalBody{
  padding: 14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.sv-walletButtons{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.sv-walletBtn{ width:100%; }
.sv-walletBtn iframe{ max-width:100% !important; }

html.sv-modalOpen, body.sv-modalOpen{ overflow:hidden !important; }

/* Phase 143: Remove background/border on post action SVG buttons (feeds + reels) */
.sv-pill, .sv-pill .sv-ico,
.sv-rBtn, .sv-rBtn .sv-ico,
.sv-rViews, .sv-rViews .sv-ico{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sv-rBtn, .sv-rViews{
  padding: 2px !important;
  gap: 2px !important;
}

/* Phase 145: Read more + Reels description modal */
a.sv-readMore{
  color: var(--sv-fg);
  font-weight: 800;
  text-decoration: none;
}
a.sv-readMore:hover{ text-decoration: underline; }

.sv-descModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55);
  z-index: 999999;
}
.sv-descCard{
  width: min(560px, 100%);
  background: var(--sv-card);
  color: var(--sv-txt);
  border: 1px solid var(--sv-border);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.sv-descTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--sv-border);
}
.sv-descTitle{ font-weight: 950; font-size: 14px; }
.sv-descClose{
  background: transparent;
  border: 0;
  padding: 8px;
  border-radius: 999px;
  color: var(--sv-fg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sv-descClose svg{ width: 18px; height: 18px; }
.sv-descBody{
  padding: 12px;
  max-height: 70vh;
  overflow: auto;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}


/* Phase150: Edit profile modal sizing + scroll */
#sv-lightbox.sv-epMode{ padding: 12px; align-items:center; justify-content:center; }
#sv-lightbox.sv-epMode .sv-lbCard{ width:min(1100px, 100%); height:calc(100vh - 24px); max-height:calc(100vh - 24px); overflow:hidden; }
#sv-lightbox.sv-epMode .sv-epPad{ height:100%; display:flex; flex-direction:column; }
#sv-lightbox.sv-epMode .sv-epScroll{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom: 16px; }
#sv-lightbox.sv-epMode .sv-epWrap{ max-width: 820px; margin: 0 auto; }
#sv-lightbox.sv-epMode .sv-epWrap .sv-in{ max-width: 100%; }
@media (max-width: 640px){
  #sv-lightbox.sv-epMode{ padding:0; }
  #sv-lightbox.sv-epMode .sv-lbCard{ width:100vw; height:100vh; max-height:100vh; border-radius:0; }
  #sv-lightbox.sv-epMode .sv-epWrap{ max-width: 100%; }
}
@media (min-width: 900px){ #sv-lightbox.sv-epMode .sv-epWrap{ max-width: 900px; } }
/* Phase 151: Auth redesign (Login / Register / Verify Email) */
body.sv-auth-page{
  background: #f2f3f5;
}
body.sv-dark.sv-auth-page{ background: #0b0c0f; }

/* Hide app navigation on auth pages */
body.sv-auth-page .sv-side{ display:none !important; }
body.sv-auth-page .sv-top{ display:none !important; }
body.sv-auth-page .sv-bottom{ display:none !important; }
body.sv-auth-page .sv-sideRight{ display:none !important; }
body.sv-auth-page{ padding-bottom:0 !important; }

body.sv-auth-page .sv-shell{
  padding: 18px 14px;
}

.sv-authScreen{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sv-authCard{
  width:100%;
  max-width: 420px;
  border-radius: 26px;
  border: 0;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.10);
  padding: 18px 16px 16px;
}
body.sv-dark .sv-authCard{ background: #12141a; box-shadow: 0 24px 60px rgba(0,0,0,.45); }

.sv-authHead{ display:flex; align-items:center; justify-content:flex-start; margin-bottom: 6px; }
.sv-authBack{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: inherit;
  background: rgba(0,0,0,.06);
}
body.sv-dark .sv-authBack{ background: rgba(255,255,255,.08); }

.sv-authTitle{
  font-size: 22px;
  font-weight: 1000;
  line-height: 1.18;
  letter-spacing: -0.2px;
  margin: 6px 0 10px;
}

.sv-authSub{ font-size: 13px; color: #6b7280; margin-top: -4px; }
body.sv-dark .sv-authSub{ color: rgba(255,255,255,.72); }

.sv-authAlert{
  margin-top: 8px;
  font-size: 13px;
  color: #b91c1c;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.22);
  border-radius: 14px;
  padding: 10px 12px;
}

.sv-authInfo{
  margin-top: 8px;
  font-size: 13px;
  color: #0f766e;
  background: rgba(20,184,166,.10);
  border: 1px solid rgba(20,184,166,.22);
  border-radius: 14px;
  padding: 10px 12px;
}

.sv-authOk{
  margin-top: 8px;
  font-size: 13px;
  color: #166534;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 14px;
  padding: 10px 12px;
}

.sv-authSocial{
  display:flex;
  gap: 12px;
  margin-top: 12px;
}

.sv-authSocialBtn{
  flex: 1 1 0;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #111;
  text-decoration:none;
}
body.sv-dark .sv-authSocialBtn{ background: #0f1116; border-color: rgba(255,255,255,.14); color: #fff; }
.sv-authSocialBtn .sv-ico{ width: 22px; height: 22px; }
.sv-authSocialBtn:hover{ transform: translateY(-1px); }
.sv-authSocialBtn.is-disabled{ opacity: .45; cursor: default; transform:none !important; }

.sv-authDivider{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 14px 0 10px;
  color: #6b7280;
  font-size: 12px;
}
body.sv-dark .sv-authDivider{ color: rgba(255,255,255,.62); }
.sv-authDivider:before,
.sv-authDivider:after{
  content:"";
  height: 1px;
  flex: 1;
  background: rgba(0,0,0,.10);
}
body.sv-dark .sv-authDivider:before,
body.sv-dark .sv-authDivider:after{ background: rgba(255,255,255,.14); }
.sv-authDivider span{ white-space:nowrap; }

.sv-authForm{ margin-top: 6px; }

.sv-authField{ position:relative; margin-top: 10px; }

.sv-authInput{
  width: 100%;
  height: 48px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #f3f4f6;
  padding: 0 14px;
  outline:none;
  font-size: 15px;
}
body.sv-dark .sv-authInput{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.sv-authInput::placeholder{ color: #9ca3af; }
body.sv-dark .sv-authInput::placeholder{ color: rgba(255,255,255,.46); }
.sv-authInput:focus{ border-color: var(--sv-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sv-brand) 18%, transparent); }

.sv-authPwWrap .sv-authInput{ padding-right: 46px; }
.sv-authPwToggle{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor:pointer;
  color: inherit;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sv-authPwToggle:hover{ background: rgba(0,0,0,.06); }
body.sv-dark .sv-authPwToggle:hover{ background: rgba(255,255,255,.08); }

.sv-authRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: #6b7280;
}
body.sv-dark .sv-authRow{ color: rgba(255,255,255,.70); }

.sv-authRemember{ display:flex; align-items:center; gap:8px; }
.sv-authRemember input{ width: 16px; height: 16px; }

.sv-authLink{ color: inherit; text-decoration:none; font-weight: 800; }
.sv-authLink:hover{ text-decoration: underline; }

.sv-authSubmit{
  width: 100%;
  height: 52px;
  border-radius: 18px;
  border: 0;
  margin-top: 14px;
  background: var(--sv-brand);
  color: #fff;
  font-weight: 1000;
  font-size: 15px;
  cursor:pointer;
}
.sv-authSubmit:hover{ filter: brightness(.98); transform: translateY(-1px); }

.sv-authResend{
  width: 100%;
  height: 48px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: transparent;
  font-weight: 950;
  cursor:pointer;
}
body.sv-dark .sv-authResend{ border-color: rgba(255,255,255,.14); color: #fff; }
.sv-authResend:hover{ background: rgba(0,0,0,.04); }
body.sv-dark .sv-authResend:hover{ background: rgba(255,255,255,.06); }

.sv-authFoot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: #6b7280;
}
body.sv-dark .sv-authFoot{ color: rgba(255,255,255,.70); }

@media(max-width: 420px){
  .sv-authCard{ border-radius: 22px; padding: 16px 14px; }
  .sv-authTitle{ font-size: 20px; }
}

/* =============================
   Phase 154: Instagram-like feed
   - Edge-to-edge media
   - Caption below media
   - IG-style action row
============================= */

/* Make feed container feel like Instagram (no card border/radius wrapper) */
.sv-feed{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  margin-left: -4px;
  margin-right: -4px;
}

.sv-feed > .sv-card{
  border: 0;
  border-bottom: 1px solid var(--sv-border);
  border-radius: 0;
  background: var(--sv-bg);
}

/* Header padding stays like IG */
.sv-feed .sv-hd{
  padding: 12px 12px;
}

/* Media must touch both ends */
.sv-igBody{ padding: 0; }
.sv-igMediaOuter{ position: relative; }
.sv-feed .sv-media,
.sv-feed .sv-gallery,
.sv-feed .sv-repostBox .sv-media,
.sv-feed .sv-repostBox .sv-gallery{
  margin-top: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.sv-feed .sv-repostBox,
.sv-feed .sv-repostBoxV2{
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  margin: 0 0 10px !important;
}
.sv-feed .sv-media img,
.sv-feed .sv-gallery img{
  border-radius: 0 !important;
}
.sv-feed .sv-gallery .sv-gBtn{ border-radius: 0 !important; }

/* IG action row */
.sv-igActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px 6px;
  gap: 10px;
}
.sv-igActRow{ display:flex; align-items:center; justify-content:space-between; width: 100%; gap: 10px; }
.sv-igActLeft{ display:flex; align-items:center; gap: 14px; }
.sv-igActRight{ display:flex; align-items:center; gap: 14px; }
.sv-igBtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--sv-fg);
}
.sv-igBtn .sv-ico{ width: 24px; height: 24px; }
.sv-igBtn small{
  font-size: 14px;
  font-weight: 900;
  opacity: .92;
}
.sv-igBtn.is-on{ color: var(--sv-accent); }

/* Phase 162: views inline (same color as other action SVGs) */
.sv-igViewsInline{ cursor: default; opacity: 1; }
.sv-igViewsInline .sv-ico{ width: 22px; height: 22px; }
.sv-igViewsInline small{ font-size: 13px; font-weight: 900; opacity: .92; }

.sv-igViews{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  opacity: .75;
	color: var(--sv-fg);
}
.sv-igViews .sv-ico{ width: 22px; height: 22px; }
.sv-igViews small{ font-size: 13px; font-weight: 900; }

/* Caption + meta below */
.sv-igMeta{ padding: 0 12px 12px; }
.sv-igLikes{ font-size: 13px; font-weight: 950; margin-bottom: 6px; }
.sv-igLikedBy{ font-size: 13px; font-weight: 900; margin-bottom: 6px; }
.sv-igLikedBy a{ color: inherit; text-decoration: none; font-weight: 950; }
.sv-igLikedBy b{ font-weight: 950; }
.sv-igCaption{
  font-size: 13px;
  line-height: 1.35;
  color: var(--sv-fg);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sv-card.is-capOpen .sv-igCaption{ display:block; -webkit-line-clamp: unset; overflow: visible; }
.sv-igCaption p{ display:inline; margin: 0; }
.sv-igCaption a{ color: inherit; text-decoration: none; }
.sv-igName{ font-weight: 950; margin-right: 6px; }
.sv-igCapText .sv-readMore{ font-weight: 950; opacity: .85; }
.sv-igCapText .sv-igMore{ font-weight: 950; opacity: .75; }

/* "Read caption" overlay button (matches screenshot behavior) */
.sv-igReadCapBtn{
  position:absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  background: var(--sv-accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Phase 160: on videos (including repost video containers), lift the button above controls */
.sv-igMediaOuter .sv-mediaVideo ~ .sv-igReadCapBtn{
  bottom: 50px;
}

/* Link preview spacing inside IG meta block */
.sv-igLink .sv-linkPrev{ margin-top: 10px; }
.sv-igCta{ margin-top: 10px; }

/* Bottom + top icons: enforce consistent IG-like sizing */
.sv-bottom .sv-ico,
.sv-top .sv-ico{ width: 24px; height: 24px; }

/* Verify Email resend button countdown styling */
.sv-authResend[disabled],
.sv-authResend.is-disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Phase 163: repost previews match original post spacing */
.sv-feed .sv-repostCard{ padding: 10px 0 0; }
.sv-feed .sv-repostMiniHd,
.sv-feed .sv-repostCap{ padding-left: 12px; padding-right: 12px; }
.sv-feed .sv-repostMedia{ margin-top: 6px; }




/* Phase 174: locked content blur + unlock overlay (feeds/single) */
.sv-card.sv-isLocked .sv-igMediaOuter{ position: relative; }
.sv-card.sv-isLocked .sv-igMediaOuter .sv-media,
.sv-card.sv-isLocked .sv-igMediaOuter .sv-gallery{
  filter: blur(14px);
  transform: scale(1.02);
}
.sv-card.sv-isLocked .sv-igMediaOuter .sv-media *,
.sv-card.sv-isLocked .sv-igMediaOuter .sv-gallery *{
  pointer-events: none;
}
.sv-lockOverlay{
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.sv-lockOverlayInner{ width:100%; display:flex; justify-content:center; }
.sv-lockInline{ display:flex; align-items:center; gap:8px; }
.sv-lockInline .sv-primary{ padding:6px 10px; font-size:12px; border-radius:999px; }
/* Phase 166: Locked badge on thumbnails/cards */
.sv-igMediaOuter{ position: relative; }
.sv-rThumb{ position: relative; }
.sv-lockBadge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  background: rgba(0,0,0,.62);
  color: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  backdrop-filter: blur(8px);
}
.sv-lockBadge--tile{ top: 8px; left: 8px; }
.sv-lockBadge--static,
.sv-lockBadge--chip{
  position: relative;
  top: auto;
  left: auto;
  display: inline-flex;
}
.sv-lockBadge--static{ margin-bottom: 10px; }
.sv-lockBadge--chip{ margin-top: 6px; }

/* Phase 166: Mass DM progress indicator (creator-only) */
.sv-subRow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.sv-dmProg{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--sv-border);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 850;
}
.sv-dmBar{
  width: 74px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.sv-dmBar > i{
  display:block;
  height:100%;
  width: 0%;
  background: var(--sv-fg);
}


/* Phase 175: hide profile icon on top header (mobile) */
@media(max-width: 720px){
  .sv-topProfile{ display:none !important; }
}

/* Phase 175: no default profile/cover images; show clean placeholders when empty */
.sv-profileCoverV2.is-empty{ background: var(--sv-chip2); background-image:none !important; }
.sv-profileAvatarV2.is-empty{ background: var(--sv-chip2); border:1px solid var(--sv-border); border-radius: 22px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sv-profileAvatarV2 .sv-avatarInitial{ font-weight: 1000; font-size: 22px; color: var(--sv-fg); opacity:.9; }