/* Phase 158x: desktop shell + sidebars aligned to screenshot reference. */
:root{
  --sv158-shell: 1520px;
  --sv158-left: 218px;
  --sv158-right: 268px;
  --sv158-gap: 16px;
  --sv158-header-h: 72px;
  --sv158-header-bg: rgba(255,255,255,.94);
  --sv158-card: #ffffff;
  --sv158-card-2: #fafafc;
  --sv158-border: #ececf3;
  --sv158-border-2: #e6e7ee;
  --sv158-shadow: 0 8px 24px rgba(17,24,39,.06);
  --sv158-shadow-soft: 0 4px 16px rgba(17,24,39,.05);
  --sv158-text: #161827;
  --sv158-muted: #75798b;
  --sv158-chip: #f3f4f9;
  --sv158-active: #f5f2ff;
  --sv158-accent: var(--sv-link, #6d5dfc);
}

@media (min-width: 1180px){
  html[data-theme="light"] body:not(.sv-auth-page):not(.sv-authPage),
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-dark){
    background: #f5f5f7 !important;
    color: var(--sv158-text) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed){
    --sv150-header-h: var(--sv158-header-h);
  }

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

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTop{
    position:fixed !important;
    inset:0 0 auto 0 !important;
    z-index:140 !important;
    display:grid !important;
    grid-template-columns: minmax(260px, 1.2fr) auto auto !important;
    align-items:center !important;
    gap:16px !important;
    width:100vw !important;
    max-width:none !important;
    padding:10px max(16px, calc((100vw - var(--sv158-shell)) / 2 + 4px)) !important;
    min-height: var(--sv158-header-h) !important;
    border:0 !important;
    border-bottom:1px solid var(--sv158-border) !important;
    border-radius:0 !important;
    background: var(--sv158-header-bg) !important;
    box-shadow:none !important;
    backdrop-filter: blur(14px) !important;
  }

  body.sv-dark .sv-dTop,
  html[data-theme="dark"] body .sv-dTop{
    background: rgba(16,18,24,.9) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopBrand{
    display:inline-flex !important;
    align-items:center !important;
    min-width:140px !important;
    max-width:180px !important;
    padding:0 !important;
    margin-right:6px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopBrand .sv-brandLogoWrap{ --sv-brand-w: 136px !important; }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTop__left{
    gap:12px !important;
    min-width:0 !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTop__search{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    border-radius:999px !important;
    border:1px solid var(--sv158-border) !important;
    background:#f4f4f8 !important;
    box-shadow:none !important;
    padding-inline:14px !important;
  }
  body.sv-dark .sv-dTop__search,
  html[data-theme="dark"] body .sv-dTop__search{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.08) !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTop__search input{
    font-size:15px !important;
    font-weight:700 !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTop__search input::placeholder{ color:#8a8ea0 !important; }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTop__center{
    gap:6px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopNavLink{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    border-radius:999px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopNavLink:hover,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopNavLink.is-active{
    background:#eef0f6 !important;
    border-color: var(--sv158-border) !important;
    color: var(--sv158-accent) !important;
  }
  body.sv-dark .sv-dTopNavLink:hover,
  body.sv-dark .sv-dTopNavLink.is-active,
  html[data-theme="dark"] body .sv-dTopNavLink:hover,
  html[data-theme="dark"] body .sv-dTopNavLink.is-active{
    background: rgba(255,255,255,.08) !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopNavLbl{ display:none !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopNavIco,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopNavIco .sv-ico{ width:19px !important; height:19px !important; }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTop__right{
    gap:8px !important;
    justify-content:flex-end !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopIco,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopProfile{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    border-radius:999px !important;
    border:1px solid var(--sv158-border) !important;
    background:#f8f8fb !important;
    box-shadow:none !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopIco:hover,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopProfile:hover{
    background:#eff1f7 !important;
  }
  body.sv-dark .sv-dTopIco,
  body.sv-dark .sv-dTopProfile,
  html[data-theme="dark"] body .sv-dTopIco,
  html[data-theme="dark"] body .sv-dTopProfile{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.08) !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopIco .sv-ico{ width:18px !important; height:18px !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopCreate{
    height:42px !important;
    min-height:42px !important;
    padding:0 24px !important;
    border-radius:999px !important;
    border:0 !important;
    background: linear-gradient(135deg, var(--sv158-accent), color-mix(in srgb, var(--sv158-accent) 74%, #3f69ff)) !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:900 !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--sv158-accent) 28%, transparent) !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopCreate:hover{ transform:none !important; filter:brightness(.98); }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopProfileAv{ width:100% !important; height:100% !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-dTopProfileTxt{ display:none !important; }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-side,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-sideRight{
    display:block !important;
    position:sticky !important;
    top: calc(var(--sv150-header-h) + 12px) !important;
    max-height: calc(100vh - var(--sv150-header-h) - 24px) !important;
    overflow:auto !important;
    padding:14px 12px !important;
    border:1px solid var(--sv158-border) !important;
    border-radius:20px !important;
    background: var(--sv158-card) !important;
    box-shadow: var(--sv158-shadow) !important;
    backdrop-filter:none !important;
  }
  body.sv-dark .sv-side,
  body.sv-dark .sv-sideRight,
  html[data-theme="dark"] body .sv-side,
  html[data-theme="dark"] body .sv-sideRight{
    background:#15171d !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-side .sv-logo{ display:none !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-side .sv-nav{ display:grid !important; gap:6px !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navLink,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navMore > summary{
    min-height:44px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    font-size:16px !important;
    font-weight:800 !important;
    color: inherit !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navLink:hover,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navMore > summary:hover{
    background:#f6f6fb !important;
    border-color: var(--sv158-border) !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navLink.is-active,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navMore[open] > summary{
    background: var(--sv158-active) !important;
    border-color: #ebe6ff !important;
    color: var(--sv158-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(109,93,252,.04) !important;
  }
  body.sv-dark .sv-navLink:hover,
  body.sv-dark .sv-navMore > summary:hover,
  html[data-theme="dark"] body .sv-navLink:hover,
  html[data-theme="dark"] body .sv-navMore > summary:hover{ background: rgba(255,255,255,.05) !important; }
  body.sv-dark .sv-navLink.is-active,
  body.sv-dark .sv-navMore[open] > summary,
  html[data-theme="dark"] body .sv-navLink.is-active,
  html[data-theme="dark"] body .sv-navMore[open] > summary{ background: rgba(109,93,252,.14) !important; border-color: rgba(109,93,252,.24) !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navIco,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navIco .sv-ico{ width:20px !important; height:20px !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navMore{ display:grid !important; gap:6px !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navMore > summary{ list-style:none !important; display:flex !important; align-items:center !important; justify-content:space-between !important; cursor:pointer !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navMore > summary::marker,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navMore > summary::-webkit-details-marker{ display:none !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-navMore .sv-navLink{ margin-top:0 !important; }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-main{
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
    padding-top:0 !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed):not(.sv-reelsPage) .sv-main > .sv-shell,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed):not(.sv-reelsPage) .sv-shell{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-stories,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-feed > .sv-card,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-feed > .sv-shelf,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-feed > .sv-homeTabs,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-card,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-profileCardV2,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-profileShell,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-walletViewport,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-verifyViewport{
    background: var(--sv158-card) !important;
    border:1px solid var(--sv158-border) !important;
    border-radius:20px !important;
    box-shadow: var(--sv158-shadow-soft) !important;
    overflow:hidden !important;
  }
  body.sv-dark .sv-stories,
  body.sv-dark .sv-feed > .sv-card,
  body.sv-dark .sv-feed > .sv-shelf,
  body.sv-dark .sv-feed > .sv-homeTabs,
  body.sv-dark .sv-card,
  body.sv-dark .sv-profileCardV2,
  body.sv-dark .sv-profileShell,
  html[data-theme="dark"] body .sv-stories,
  html[data-theme="dark"] body .sv-feed > .sv-card,
  html[data-theme="dark"] body .sv-feed > .sv-shelf,
  html[data-theme="dark"] body .sv-feed > .sv-homeTabs,
  html[data-theme="dark"] body .sv-card,
  html[data-theme="dark"] body .sv-profileCardV2,
  html[data-theme="dark"] body .sv-profileShell{
    background:#15171d !important;
    border-color: rgba(255,255,255,.08) !important;
  }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-feed{ gap:14px !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-feed > .sv-card{ margin-bottom:0 !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-head{ padding:14px 16px !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-body{ padding:0 16px 16px !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-actions{ padding:10px 16px 14px !important; }

  body.sv-reelsPage .sv-main{
    background:transparent !important;
    min-height: calc(100vh - var(--sv150-header-h) - 24px) !important;
  }
  body.sv-reelsPage .sv-reelsTabs{
    position:sticky !important;
    top: calc(var(--sv150-header-h) + 8px) !important;
    z-index:20 !important;
    width:100% !important;
    margin:0 0 12px !important;
    border-radius:16px !important;
    border:1px solid var(--sv158-border) !important;
    background: var(--sv158-card) !important;
    box-shadow: var(--sv158-shadow-soft) !important;
  }
  body.sv-dark .sv-reelsTabs,
  html[data-theme="dark"] body .sv-reelsTabs{ background:#15171d !important; border-color: rgba(255,255,255,.08) !important; }
  body.sv-reelsPage #sv-reels{
    border-radius:22px !important;
    overflow:hidden !important;
  }

  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv158-card{
    border:1px solid var(--sv158-border) !important;
    border-radius:16px !important;
    background: var(--sv158-card) !important;
    box-shadow:none !important;
    padding:14px !important;
  }
  body.sv-dark .sv158-card,
  html[data-theme="dark"] body .sv158-card{ background:#15171d !important; border-color: rgba(255,255,255,.08) !important; }
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-sideRight{ padding:12px !important; display:grid !important; gap:12px !important; }
  .sv158-headRow{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
  .sv158-title{ margin:0; font-size:15px; font-weight:900; letter-spacing:-.01em; }
  .sv158-dots{ display:inline-flex; gap:6px; align-items:center; }
  .sv158-dots i{ width:6px; height:6px; border-radius:999px; background:#b6bac8; display:block; }
  .sv158-miniLink{ color: var(--sv158-muted); font-size:12px; font-weight:800; }

  .sv158-quickGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .sv158-quickBtn,
  .sv158-toolBtn{
    display:flex; align-items:center; gap:10px; min-height:42px; padding:0 12px;
    border:1px solid var(--sv158-border); border-radius:12px; background:var(--sv158-card-2); color:inherit; font-weight:800; font-size:13px;
  }
  .sv158-quickBtn:hover,.sv158-toolBtn:hover{ background:#f1f3fa; }
  body.sv-dark .sv158-quickBtn,
  body.sv-dark .sv158-toolBtn,
  html[data-theme="dark"] body .sv158-quickBtn,
  html[data-theme="dark"] body .sv158-toolBtn{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
  .sv158-quickIco,
  .sv158-toolIco{ width:24px; height:24px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--sv158-active); color:var(--sv158-accent); flex:0 0 auto; }
  .sv158-quickIco .sv-ico,.sv158-toolIco .sv-ico{ width:15px; height:15px; }
  .sv158-toolGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .sv158-toolBtn--wide{ grid-column:1 / -1; }

  .sv158-tagCloud{ display:flex; flex-wrap:wrap; gap:8px; }
  .sv158-tag{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:#f3f5fb; color:#5e62c6; font-size:13px; font-weight:800; }
  body.sv-dark .sv158-tag,
  html[data-theme="dark"] body .sv158-tag{ background:rgba(109,93,252,.12); color:#d0c8ff; }

  .sv158-topicList{ display:grid; gap:10px; }
  .sv158-topic{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:10px; align-items:center; }
  .sv158-topicThumb{ width:56px; height:56px; border-radius:12px; overflow:hidden; background:#eceef6; }
  .sv158-topicThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sv158-topicText{ min-width:0; display:flex; flex-direction:column; }
  .sv158-topicText strong{ font-size:12px; line-height:1.3; color:inherit; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sv158-topicText small{ margin-top:4px; font-size:11px; color:var(--sv158-muted); }

  .sv158-suggestGrid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
  .sv158-suggestItem{
    display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; text-align:center;
    border-radius:12px; padding:8px 4px; border:1px solid transparent; background:transparent;
  }
  .sv158-suggestItem:hover{ background:#f7f7fb; border-color:var(--sv158-border); }
  body.sv-dark .sv158-suggestItem:hover,
  html[data-theme="dark"] body .sv158-suggestItem:hover{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
  .sv158-suggestAvatar{ width:46px; height:46px; border-radius:999px; overflow:hidden; background:#eceef6; display:block; }
  .sv158-suggestAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sv158-suggestName{ display:block; min-width:0; max-width:100%; font-size:11px; line-height:1.25; font-weight:800; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* App-rendered suggestion tiles inside #sv-right-suggest */
  #sv-right-suggest .sv-uTile{ min-width:0 !important; border:1px solid var(--sv158-border) !important; border-radius:12px !important; padding:8px 6px !important; background:var(--sv158-card-2) !important; box-shadow:none !important; }
  #sv-right-suggest .sv-uLink{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px !important; }
  #sv-right-suggest .sv-uAv{ width:46px !important; height:46px !important; margin:0 auto !important; }
  #sv-right-suggest .sv-uNm,#sv-right-suggest .sv-uHd,#sv-right-suggest .sv-uMutual{ text-align:center !important; }
  #sv-right-suggest .sv-uStats{ display:none !important; }
  #sv-right-suggest .sv-uFollow{ width:100% !important; margin-top:6px !important; border-radius:999px !important; }

  .sv158-card--cta{ padding-top:12px !important; padding-bottom:12px !important; }
  .sv158-ctaBtn{ display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 16px; border-radius:999px; background: linear-gradient(135deg, var(--sv158-accent), color-mix(in srgb, var(--sv158-accent) 74%, #3f69ff)); color:#fff; font-size:13px; font-weight:900; }

  /* Bring sidebars back on desktop pages previously forced full-width */
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-layout > .sv-side,
  body:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-layout > .sv-sideRight,
  body.sv-reelsPage:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-layoutReels > .sv-side,
  body.sv-reelsPage:not(.sv-auth-page):not(.sv-authPage):not(.sv-embed) .sv-layoutReels > .sv-sideRight{ display:block !important; }
}