/* Phase 150x: desktop correction pass.
   Goal: keep mobile untouched, fix centered desktop shell, full-width top header,
   floating More popup, calmer reels desktop, and cleaner verification desktop. */

:root{
  --sv150-shell: 1460px;
  --sv150-side-left: 260px;
  --sv150-side-right: 308px;
  --sv150-gap: 22px;
  --sv150-header-h: 88px;
  --sv150-reels-tabs-h: 74px;
  --sv150-surface: color-mix(in srgb, var(--sv-card) 94%, transparent);
  --sv150-surface-2: color-mix(in srgb, var(--sv-card) 88%, transparent);
  --sv150-border: color-mix(in srgb, var(--sv-border) 88%, transparent);
  --sv150-shadow: 0 18px 46px rgba(0,0,0,.10);
  --sv150-shadow-strong: 0 28px 80px rgba(0,0,0,.18);
}

@media (min-width: 1180px){
  body:not(.sv-auth-page):not(.sv-authPage){
    background:
      radial-gradient(1200px 420px at 0% -8%, rgba(59,130,246,.06), transparent 60%),
      radial-gradient(980px 360px at 100% 4%, rgba(236,72,153,.05), transparent 56%),
      var(--sv-bg) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-layout{
    display:grid !important;
    grid-template-columns: minmax(236px, var(--sv150-side-left)) minmax(0, 1fr) minmax(280px, var(--sv150-side-right)) !important;
    gap: var(--sv150-gap) !important;
    align-items:start !important;
    width:min(calc(100vw - 28px), var(--sv150-shell)) !important;
    max-width: var(--sv150-shell) !important;
    margin:0 auto !important;
    padding: calc(var(--sv150-header-h) + 18px) 0 28px !important;
    min-height:100vh !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-main{
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-main > .sv-shell,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-shell{
    margin:0 !important;
    padding:0 0 24px !important;
    max-width:none !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTop{
    position:fixed !important;
    inset:0 0 auto 0 !important;
    z-index:120 !important;
    display:grid !important;
    grid-template-columns: minmax(280px, 1.25fr) auto auto !important;
    align-items:center !important;
    gap:16px !important;
    width:100vw !important;
    max-width:none !important;
    margin:0 !important;
    padding:14px max(18px, calc((100vw - var(--sv150-shell)) / 2 + 10px)) !important;
    border:0 !important;
    border-bottom:1px solid var(--sv150-border) !important;
    border-radius:0 !important;
    background: color-mix(in srgb, var(--sv-card) 92%, transparent) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.08) !important;
    backdrop-filter: blur(18px) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTop__left,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTop__center,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTop__right{
    min-width:0 !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopBrand{ display:none !important; }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTop__search{
    width:100% !important;
    min-width:0 !important;
    height:56px !important;
    border-radius:18px !important;
    border:1px solid var(--sv150-border) !important;
    background: color-mix(in srgb, var(--sv-card) 86%, transparent) !important;
    box-shadow:none !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTop__search input{
    font-size:15px !important;
    font-weight:600 !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTop__center{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:6px !important;
    border:1px solid var(--sv150-border) !important;
    border-radius:20px !important;
    background: color-mix(in srgb, var(--sv-card) 88%, transparent) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopNavLink{
    min-width:62px !important;
    min-height:52px !important;
    padding:0 16px !important;
    border-radius:16px !important;
    font-size:15px !important;
    font-weight:800 !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopNavLbl{ display:none !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopNavIco,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopNavLink .sv-ico{ width:24px !important; height:24px !important; }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTop__right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopIco,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopCreate,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopProfile{
    min-height:52px !important;
    border-radius:16px !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopIco{
    width:52px !important;
    border:1px solid var(--sv150-border) !important;
    background: color-mix(in srgb, var(--sv-card) 88%, transparent) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-dTopCreate{
    padding:0 18px !important;
    font-size:15px !important;
    font-weight:900 !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-side,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-sideRight{
    display:block !important;
    position:sticky !important;
    top: calc(var(--sv150-header-h) + 18px) !important;
    max-height: calc(100vh - var(--sv150-header-h) - 36px) !important;
    overflow:auto !important;
    border:1px solid var(--sv150-border) !important;
    border-radius:26px !important;
    background: var(--sv150-surface) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: var(--sv150-shadow) !important;
    padding:16px 14px 18px !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-side .sv-logo{
    margin:0 0 10px !important;
    padding:2px 6px 12px !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-side .sv-nav{
    display:grid !important;
    gap:8px !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-navLink,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-rListItem,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-btmLink{
    min-height:48px !important;
    border-radius:16px !important;
    font-size:16px !important;
    font-weight:700 !important;
    padding:0 14px !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-navLink .sv-navIco,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-rListItem .sv-ico,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-navLink .sv-ico{
    width:22px !important;
    height:22px !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-navLink:hover,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-rListItem:hover,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-dTopNavLink:hover{
    background: color-mix(in srgb, var(--sv-card) 76%, var(--sv-fg) 4%) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-feed > .sv-card,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-feed > .sv-stories,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-feed > .sv-shelf,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-feed > .sv-homeTabs,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-walletViewport,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-monetScroll,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-verifyViewport{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-feed > .sv-card{
    border-radius:24px !important;
    border:1px solid var(--sv150-border) !important;
    box-shadow: var(--sv150-shadow) !important;
    overflow:hidden !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-feed > .sv-shelf,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-feed > .sv-stories,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-feed > .sv-homeTabs{
    border:1px solid var(--sv150-border) !important;
    border-radius:22px !important;
    background: var(--sv150-surface) !important;
    box-shadow: var(--sv150-shadow) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-head{ padding:14px 16px !important; }
  body:not(.sv-auth-page):not(.sv-authPage) .sv-body{ padding:0 16px 16px !important; }
  body:not(.sv-auth-page):not(.sv-authPage) .sv-actions{ padding:10px 16px 14px !important; }
  body:not(.sv-auth-page):not(.sv-authPage) .sv-head .sv-name,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-head .sv-name a{ font-size:20px !important; }
  body:not(.sv-auth-page):not(.sv-authPage) .sv-body,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-cap,
  body:not(.sv-auth-page):not(.sv-authPage) .sv-note{ font-size:15px !important; line-height:1.5 !important; }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-scrollRail{
    gap:12px !important;
    align-items:center !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage) .sv-scrollRailBtn{
    width:42px !important;
    height:42px !important;
    border-radius:999px !important;
    border:1px solid var(--sv150-border) !important;
    background: var(--sv150-surface) !important;
    box-shadow: var(--sv150-shadow) !important;
  }

  /* Real floating popup for More */
  details.sv-navMore{ position:relative !important; }
  details.sv-navMore > summary{
    list-style:none !important;
    cursor:pointer !important;
  }
  details.sv-navMore > summary::-webkit-details-marker,
  details.sv-navMore > summary::marker{ display:none !important; content:'' !important; }
  details.sv-navMore .sv-navMorePanel{
    display:none !important;
    position:fixed !important;
    z-index:1000 !important;
    width: 308px !important;
    padding:12px !important;
    border-radius:22px !important;
    border:1px solid var(--sv150-border) !important;
    background: color-mix(in srgb, var(--sv-card) 96%, transparent) !important;
    box-shadow: var(--sv150-shadow-strong) !important;
    backdrop-filter: blur(18px) !important;
  }
  details.sv-navMore[open] .sv-navMorePanel{ display:grid !important; gap:8px !important; }

  /* Groups page */
  .sv-groupsPage .sv-gFbLayout{
    display:grid !important;
    grid-template-columns: minmax(268px, 300px) minmax(0, 1fr) !important;
    gap:18px !important;
    align-items:start !important;
  }
  .sv-groupsPage .sv-gFbLeft,
  .sv-groupsPage .sv-gFbMain,
  .sv-groupsPage .sv-gFbTop,
  .sv-groupsPage .sv-groups{ min-width:0 !important; }
  .sv-groupsPage .sv-chipRow{ flex-wrap:wrap !important; }
  .sv-groupsPage .sv-gFbTopRow{ gap:12px !important; align-items:center !important; }
  .sv-groupsPage .sv-gFbTools{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; }

  /* Desktop creator pages */
  .sv-walletViewport,
  .sv-monetScroll,
  .sv-verifyViewport{ max-width:none !important; }
  .sv-walletModern .sv-wlCard,
  .sv-monetPage .sv-monetCard,
  .sv-monetPage .sv-monetHero,
  .sv-verifyPage .sv-verifyHero,
  .sv-verifyPage .sv-verifyCard,
  .sv-verifyPage .sv-verifyAlert{
    border-radius:24px !important;
    border:1px solid var(--sv150-border) !important;
    box-shadow: var(--sv150-shadow) !important;
  }
  .sv-verifyPage .sv-verifyHero,
  .sv-monetPage .sv-monetHeroV2{ padding:20px !important; }
  .sv-verifyPage .sv-verifyField{ background: color-mix(in srgb, var(--sv-card) 90%, transparent) !important; }
  .sv-verifyPage .sv-verifyFieldLabel,
  .sv-verifyPage .sv-verifySectionTitle,
  .sv-monetPage .sv-monetCardTitle,
  .sv-walletModern .sv-wlSectionTitle{ font-size:16px !important; font-weight:900 !important; }

  /* Reels desktop: bring back sidebars and one-reel-per-scroll */
  body.sv-reelsPage{ background: var(--sv-bg) !important; }
  body.sv-reelsPage .sv-layoutReels{
    display:grid !important;
    grid-template-columns: minmax(236px, var(--sv150-side-left)) minmax(0, 1fr) minmax(280px, var(--sv150-side-right)) !important;
    gap: var(--sv150-gap) !important;
    width:min(calc(100vw - 28px), var(--sv150-shell)) !important;
    max-width: var(--sv150-shell) !important;
    margin:0 auto !important;
    padding: calc(var(--sv150-reels-tabs-h) + 18px) 0 28px !important;
    background: transparent !important;
    min-height:100vh !important;
  }

  body.sv-reelsPage .sv-side,
  body.sv-reelsPage .sv-sideRight{
    display:block !important;
    position:sticky !important;
    top: calc(var(--sv150-reels-tabs-h) + 18px) !important;
    max-height: calc(100vh - var(--sv150-reels-tabs-h) - 36px) !important;
    overflow:auto !important;
    border:1px solid var(--sv150-border) !important;
    border-radius:26px !important;
    background: var(--sv150-surface) !important;
    box-shadow: var(--sv150-shadow) !important;
    padding:16px 14px 18px !important;
  }

  body.sv-reelsPage .sv-layoutReels > .sv-main{
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    background: transparent !important;
  }

  body.sv-reelsPage .sv-reelsTabs{
    position:fixed !important;
    top:12px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    z-index:130 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:calc(100vw - 40px) !important;
    padding:6px !important;
    border-radius:999px !important;
    border:1px solid var(--sv150-border) !important;
    background: color-mix(in srgb, var(--sv-card) 92%, transparent) !important;
    box-shadow: var(--sv150-shadow) !important;
    backdrop-filter: blur(16px) !important;
    gap:6px !important;
  }

  body.sv-reelsPage .sv-reelsTab{
    min-width:152px !important;
    height:50px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    font-size:15px !important;
    font-weight:900 !important;
    background:transparent !important;
    color: var(--sv-fg) !important;
    box-shadow:none !important;
  }
  body.sv-reelsPage .sv-reelsTab.is-on{
    background: color-mix(in srgb, var(--sv-link) 16%, var(--sv-card)) !important;
    border:1px solid color-mix(in srgb, var(--sv-link) 30%, transparent) !important;
  }

  body.sv-reelsPage #sv-reels.sv-reels{
    width:min(100%, 560px) !important;
    height: calc(100vh - var(--sv150-reels-tabs-h) - 28px) !important;
    min-height: calc(100vh - var(--sv150-reels-tabs-h) - 28px) !important;
    max-height: calc(100vh - var(--sv150-reels-tabs-h) - 28px) !important;
    margin:0 auto !important;
    padding:0 !important;
    gap:0 !important;
    overflow-y:auto !important;
    scroll-snap-type:y mandatory !important;
    overscroll-behavior-y: contain !important;
    background: transparent !important;
  }

  body.sv-reelsPage #sv-reels .sv-reel,
  body.sv-reelsPage #sv-reels > .sv-reelAd{
    width:100% !important;
    height: calc(100vh - var(--sv150-reels-tabs-h) - 28px) !important;
    min-height: calc(100vh - var(--sv150-reels-tabs-h) - 28px) !important;
    max-height: calc(100vh - var(--sv150-reels-tabs-h) - 28px) !important;
    margin:0 !important;
    border-radius:28px !important;
    border:1px solid var(--sv150-border) !important;
    background:#000 !important;
    box-shadow: var(--sv150-shadow-strong) !important;
    overflow:hidden !important;
    scroll-snap-align:start !important;
    scroll-snap-stop: always !important;
  }

  body.sv-reelsPage #sv-reels .sv-reelMedia,
  body.sv-reelsPage #sv-reels .sv-reelVid,
  body.sv-reelsPage #sv-reels .sv-reelFrame{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    background:#000 !important;
  }

  body.sv-reelsPage #sv-reels .sv-reelOverlay{ padding:18px 16px !important; }
  body.sv-reelsPage #sv-reels .sv-reelLeft,
  body.sv-reelsPage #sv-reels .sv-reelRight{ margin-bottom:0 !important; }
}