/* Phase 122xt: apply screenshot CSS in full, unify shelf/subheader surfaces, and match profile feed width to home */
:root{
  --sv122-page-bg-light:#f0f2f4;
  --sv122-page-bg-dark:#0a0d10;
  --sv122-shelf-light:#f0f2f4;
  --sv122-shelf-dark:#0a0d10;
  --sv122-feed-rule-light:2px solid rgba(0, 0, 0, .35);
  --sv122-feed-rule-dark:1px solid rgba(56, 68, 77, .88);
}

html,
body,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage){
  background:var(--sv122-page-bg-light) !important;
}

body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage){
  --sv122-page-bg:var(--sv122-page-bg-light);
  --sv122-shelf-bg:var(--sv122-shelf-light);
  --sv-bg:var(--sv122-page-bg) !important;
  background:var(--sv122-page-bg) !important;
}

body.sv-dark:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage){
  --sv122-page-bg:var(--sv122-page-bg-dark);
  --sv122-shelf-bg:var(--sv122-shelf-dark);
  --sv-bg:var(--sv122-page-bg) !important;
  background:var(--sv122-page-bg) !important;
}

/* Shelves and top surfaces use the shelf color from the screenshot request */
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-top,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-topbar,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-stories,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-stories,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-shelf,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-groupSuggest,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-userSuggest,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-gShelf,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gShelf,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-groupShelf,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-storyStrip,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-storyRail,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-storyTray{
  background:var(--sv122-shelf-bg) !important;
  box-shadow:none !important;
  border:none !important;
}

/* Subheaders/tabs should feel like cards and never vanish */
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-homeTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-notiTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-msgTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-exTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gFbTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gModalTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-hashTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-monetTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-epTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-miniTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-homeTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-profTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-profileTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-notiTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-msgTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-exTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-gFbTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-gTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-hashTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-monetTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-epTabs,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-miniTabs{
  background:var(--sv-card) !important;
  box-shadow:none !important;
  border-left:none !important;
  border-right:none !important;
  border-top:none !important;
  border-bottom:none !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  min-height:44px !important;
  z-index:30 !important;
}

/* Keep sticky tab bars rendering reliably in the app shell */
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-homeTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-notiTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-msgTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-exTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gFbTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-hashTabs,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-monetTabs{
  position:sticky !important;
  top:54px !important;
}

/* exact screenshot cleanup */
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-uTile{
  border:none !important;
  box-shadow:none !important;
}

body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-groupCard,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gCard,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gSuggestCard,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gShelf .sv-groupCard,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-gSuggestRow .sv-groupCard{
  border:none !important;
  box-shadow:none !important;
  background:var(--sv-card) !important;
}

html.sv-pwa-mobileApp body.sv-page-home:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-story,
body.sv-page-home:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-story{
  box-shadow:none !important;
  border:none !important;
  background:var(--sv-card) !important;
}

body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-storySuggestCard{
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  background:var(--sv-card) !important;
}

/* feed body and profile feed width should match home without left-right shake */
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-main,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-shell,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-pad,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-layout,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed,
body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileShell,
body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2,
body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2 #sv-feed.sv-feed,
body.sv-page-about-me:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed{
  overflow-x:clip !important;
  max-width:100% !important;
}

body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2 #sv-feed.sv-feed,
body.sv-page-about-me:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed{
  width:100% !important;
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-shadow:none !important;
  border:none !important;
  background:transparent !important;
}

body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2 #sv-feed.sv-feed > .sv-card,
body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2 #sv-feed.sv-feed > .sv-shelf,
body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2 #sv-feed.sv-feed > .sv-stories,
body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2 #sv-feed.sv-feed > .sv-homeTabs,
body.sv-page-about-me:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed > .sv-card,
body.sv-page-about-me:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed > .sv-shelf,
body.sv-page-about-me:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed > .sv-stories,
body.sv-page-about-me:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed > .sv-homeTabs{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* apply feed-card border css fully everywhere, including PWA */
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed{
  box-shadow:none !important;
  border-left:none !important;
  border-right:none !important;
  border-top:none !important;
  border-bottom:none !important;
  background:transparent !important;
}

body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card,
html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card,
body.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2 #sv-feed.sv-feed > .sv-card,
body.sv-page-about-me:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed > .sv-card{
  border-bottom:2px solid rgba(0, 0, 0, .35) !important;
  border-top:2px solid rgba(0, 0, 0, .35) !important;
  border-left:none !important;
  border-right:none !important;
  margin-bottom:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  background:var(--sv-card) !important;
}

body.sv-dark:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card,
html.sv-pwa-mobileApp body.sv-dark:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card,
body.sv-dark.author:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-profileCardV2 #sv-feed.sv-feed > .sv-card,
body.sv-dark.sv-page-about-me:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed > .sv-card{
  border-top:var(--sv122-feed-rule-dark) !important;
  border-bottom:var(--sv122-feed-rule-dark) !important;
}

body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card::before,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card::after{
  display:none !important;
  content:none !important;
}

/* remove margin shadows and wrapper lines on story/suggestion shelves without affecting single boxes */
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-stories,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-shelf,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-groupSuggest,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-userSuggest,
body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-gShelf{
  box-shadow:none !important;
  border:none !important;
}

body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-uFollow{
  color:var(--sv-bg, #000) !important;
  background:var(--sv-fg) !important;
  border:none !important;
  box-shadow:none !important;
}


/* Phase123 exact repost-media block from screenshot */
@media (max-width: 980px) {
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostCard,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostMedia,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostGallery,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostMediaOuter {
    border-radius: 0 0 14px 14px !important;
    overflow: hidden !important;
    border: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
}