/* v33: final layout rules for shared navigation, story controls and full-screen reels. */
[hidden]{display:none!important}
body.spaces-list33 #main{padding-inline:3px!important;max-width:none!important}
.sp33-listing{max-width:none;padding-inline:0}
.sp33-listing .sp32-grid{gap:3px!important;padding-inline:0;margin-inline:0}
.sp33-listing .sp32-hero{margin-inline:12px}
.sp33-listing .sp32-context{padding-inline:12px}
#spaceActions33{display:flex;align-items:center;gap:4px;direction:rtl}
#spaceActions33>.icon{display:grid!important;place-items:center;width:38px!important;height:38px!important;min-width:38px;flex:none;border:1px solid var(--line)!important;border-radius:50%!important;background:transparent!important;color:var(--accent)!important;padding:8px!important}
#spaceActions33 svg{width:21px;height:21px}
#spaceActions33 [aria-expanded=true]{background:color-mix(in srgb,var(--accent) 12%,transparent)!important}
#spaceSearch33{position:sticky;top:var(--header-height,66px);z-index:68;padding:8px 12px;background:var(--paper);border-bottom:1px solid var(--line)}
#spaceSearch33 .sp32-search{max-width:100%;margin:0}
.sp33-search-wrap{margin-bottom:14px}
.quick-options33{display:grid;gap:10px}
.quick-options33 label{display:grid;gap:8px}
.quick-options33 select{width:100%;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px}
.quick-options33 button{display:flex;align-items:center;gap:10px;text-align:start}
.quick-options33 svg,.story-menu-list button>svg{width:22px;height:22px;flex:none}
.quick-options33 [aria-pressed=true]{color:var(--accent);font-weight:700}
.sp32-story-tools [aria-pressed=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.profile-tabs33{display:flex;gap:4px;position:relative;margin:22px 0 12px;border-bottom:1px solid var(--line);direction:rtl}
.profile-tabs33 button{flex:1;background:none;padding:14px 6px;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--ink);font-size:13px}
.profile-tabs33 button.active{border-bottom-color:var(--accent);color:var(--accent);font-weight:700}
.profile-panel33{min-width:0}
.profile-panel33>.profile-grid9{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px!important}
.profile-panel33 .section-head{margin-block:16px}
.avatar-button,.avatar-button.new-stories9,.avatar-button.has-stories{outline:none!important;box-shadow:none!important;border-color:transparent!important}
img.story-ring16{outline:2px solid var(--story-accent16,var(--accent))!important;outline-offset:2px;box-shadow:0 0 0 6px var(--tp-s400)!important}
.avatar-button>img:not(.story-ring16){outline:none!important;box-shadow:none!important;border-color:transparent!important}
.story-fullscreen .story-caption-v5,.story-fullscreen .story-reply-v5,.story-fullscreen .story-canvas-v5,.story-fullscreen .story-visual,.story-fullscreen .story-visual>*{box-shadow:none!important}
.story-fullscreen .story-caption-v5,.story-fullscreen .story-reply-v5{background:none!important;filter:none!important;text-shadow:none!important;backdrop-filter:none!important}
.story-fullscreen .story-canvas-v5::before,.story-fullscreen .story-canvas-v5::after{display:none!important}
.story-fullscreen #closeStory{position:fixed!important;top:max(12px,env(safe-area-inset-top));left:max(4px,env(safe-area-inset-left));right:auto!important;margin:0!important;z-index:30}
.story-fullscreen .story-header-v5{padding-inline:0!important;left:4px!important;right:12px!important}
#storyFit33{position:absolute;left:10px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:13;color:var(--story-accent)!important;border:0!important;background:none!important;filter:none!important}
#storyFit33 svg{width:24px;height:24px;stroke-width:2}
#storyFit33[aria-pressed=true]{opacity:1}
.story-fit33 #storyTouch{max-width:100%!important;max-height:100%!important}
.story-fullscreen .story-menu-list button{display:flex;align-items:center;gap:9px}
/* The reel occupies the entire viewport behind the transparent application header. */
body.reels-layout31{overflow:hidden!important}
body.reels-layout31 .sidebar,body.reels-layout31 #mobileNav,body.reels-layout31 .shell>footer{display:none!important}
body.reels-layout31 .shell{margin:0!important;width:100%!important;padding:0!important}
body.reels-layout31 #main{position:static!important;max-width:none!important;margin:0!important;padding:0!important;transform:none!important;animation:none!important}
body.reels-layout31 .topbar{position:fixed!important;inset:0 0 auto!important;min-height:54px!important;height:54px!important;z-index:90!important;background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important}
body.reels-layout31 .topbar::before,body.reels-layout31 .topbar::after{display:none!important}
body.reels-layout31 .topbar .breadcrumb{display:none!important}
body.reels-layout31 .topbar .top-actions{background:none!important;animation:none!important}
body.reels-layout31 .rx30{position:fixed!important;inset:0!important;width:100vw!important;height:var(--rx30-height,100dvh)!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;z-index:80}
.rx30 .rx30-heading{position:absolute;top:calc(54px + env(safe-area-inset-top,0px));left:0;right:0;z-index:9;background:none!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;padding:6px 12px;pointer-events:none}
.rx30-heading button{pointer-events:auto}
.rx30-heading small{display:none}
.rx30-heading h1{font-size:15px}
.rx30 .rx30-stream{position:absolute;inset:0;height:100%!important;max-height:none!important;width:100%;padding:0!important;scrollbar-width:none;scroll-snap-type:y mandatory;overscroll-behavior:contain}
.rx30-stream::-webkit-scrollbar{display:none}
.rx30 .rx30-item{height:100%!important;min-height:100%!important;border:0;border-radius:0}
.rx30 .pv28-stage-area{height:100%!important;max-height:none!important}
.rx30 .pv28-frame{box-shadow:none!important;border:0!important;border-radius:0!important}
.rx30 .pv28-gallery-tools{top:110px;bottom:auto}
.rx30 .rx30-actions{left:10px;bottom:max(40px,calc(24px + env(safe-area-inset-bottom,0px)));gap:12px;align-items:center;width:46px;filter:drop-shadow(0 1px 2px #0004)}
.rx30-actions .pv28-button{width:40px!important;height:36px!important;min-width:40px!important;padding:6px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--rx31-accent)!important}
.rx30-actions .pv28-button svg{width:25px!important;height:25px!important;stroke-width:2.1!important}
.rx30-actions .rx33-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:46px}
.rx30-actions small{display:block;text-align:center;width:100%;font-size:11px;line-height:14px;margin:0!important;color:var(--rx31-accent);font-weight:600;font-variant-numeric:tabular-nums;text-shadow:none}
.rx30-actions .rx33-save,.rx30-actions .rx33-save .pv28-button,.rx30-actions .rx33-save small{color:var(--rx33-save,var(--accent))!important;opacity:1!important}
.rx30-actions .rx30-selected svg{fill:currentColor;fill-opacity:.25}
.rx30-actions .rx33-save .rx30-selected svg{fill-opacity:1}
.rx30 .rx30-overlay{bottom:max(40px,calc(24px + env(safe-area-inset-bottom,0px)));left:72px}
.rx30 .pv28-player{position:absolute!important;inset:auto 0 0!important;display:block;padding:0!important;height:26px;min-height:0;z-index:8;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--rx31-accent)}
.rx30 .pv28-player [data-pv28-play],.rx30 .pv28-player [data-pv28-mute]{display:none!important}
.rx30 .pv28-player input[type=range]{position:absolute!important;left:0;right:0;bottom:0;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0;height:24px!important;min-height:0!important;background:transparent!important;appearance:none;-webkit-appearance:none;direction:ltr;cursor:pointer;touch-action:none;opacity:.7;--seek-color:var(--rx31-accent)}
.rx30 .pv28-player input::-webkit-slider-runnable-track{height:2px;border:0;border-radius:0;background:linear-gradient(to right,var(--seek-color) var(--played33,0%),color-mix(in srgb,var(--seek-color) 24%,transparent) var(--played33,0%))}
.rx30 .pv28-player input::-moz-range-track{height:2px;border:0;background:color-mix(in srgb,var(--seek-color) 24%,transparent)}
.rx30 .pv28-player input::-moz-range-progress{height:2px;background:var(--seek-color)}
.rx30 .pv28-player input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:6px;height:6px;margin-top:-2px;border:0;border-radius:50%;background:var(--seek-color)}
.rx30 .pv28-player input::-moz-range-thumb{width:6px;height:6px;border:0;background:var(--seek-color)}
.rx30 .pv28-clock{display:none!important;position:absolute;inset:auto 10px 27px;direction:ltr;font-size:12px;font-weight:600;color:var(--rx31-accent);font-variant-numeric:tabular-nums;pointer-events:none}
.rx30 .seeking33 .pv28-clock{display:flex!important;justify-content:space-between}
.rx30 .pv33-time-separator{display:none}
.rx30 .seeking33 input[type=range]{opacity:1}
.rx30 .seeking33 input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-5px}
.rx30 .seeking33 input::-moz-range-thumb{width:12px;height:12px}
.rx30 .rx30-status{top:120px}
@media(max-width:600px){
 body.spaces-list33 .topbar{padding-inline:4px!important;gap:2px!important}
 body.spaces-list33 .top-actions{gap:3px!important;flex:1!important;min-width:0!important;justify-content:flex-end!important}
 #spaceActions33{gap:3px;flex:none}
 #spaceActions33>.icon,body.spaces-list33 .top-actions>.icon{width:32px!important;height:32px!important;min-width:32px!important;flex:0 0 32px!important;padding:6px!important}
 body.spaces-list33 #navToggle{margin-inline-end:0!important;width:32px!important;height:32px!important;padding:6px!important}
 .profile-tabs33 button{font-size:12px}
 .rx30 .rx30-heading h1{font-size:13px}
 .rx30 .rx30-actions{gap:9px}
}
@media(max-width:370px){#spaceActions33>.icon,body.spaces-list33 .top-actions>.icon{width:28px!important;height:30px!important;min-width:28px!important;flex-basis:28px!important;padding:5px!important}#spaceActions33{gap:2px}}
body.reels-layout31 .topbar{display:flex!important}
body.reels-layout31 .topbar>.top-actions{display:flex!important;max-height:none!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;overflow:visible!important}
body.reels-layout31 .topbar>#navToggle{display:grid!important}
