.story-ring-button { appearance:none; border:0; padding:0; background:transparent; cursor:pointer; border-radius:30px; }
.story-ring-button.has-story { padding:4px; background:conic-gradient(from 145deg,#ff5c9a,#ffb347,#48c6ff,#8065ff,#ff5c9a); box-shadow:0 0 0 3px rgba(71,215,255,.14),0 12px 28px rgba(6,18,46,.45); }
.story-ring-button:not(.has-story) { cursor:default; }
.story-ring-button:focus-visible { outline:3px solid #6edbff; outline-offset:4px; }
.story-viewer { position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:20px; background:rgba(0,5,16,.86); backdrop-filter:blur(10px); }
.story-viewer-card { position:relative; width:min(100%,430px); min-height:min(82vh,720px); overflow:hidden; border:1px solid rgba(111,205,255,.42); border-radius:22px; background:#050b19; box-shadow:0 28px 80px rgba(0,0,0,.55); }
.story-viewer-image { width:100%; height:min(82vh,720px); object-fit:cover; display:block; background:#0b1428; }
.story-viewer-top { position:absolute; inset:0 0 auto; z-index:2; padding:14px; background:linear-gradient(180deg,rgba(0,0,0,.64),transparent); color:#fff; }
.story-progress { display:flex; gap:4px; margin-bottom:12px; }
.story-progress span { height:3px; flex:1; border-radius:999px; background:rgba(255,255,255,.35); overflow:hidden; }
.story-progress span.active::after,.story-progress span.done::after { content:""; display:block; height:100%; background:#fff; }
.story-progress span.active::after { animation:story-progress 7s linear forwards; }
.story-progress span.done::after { width:100%; }
@keyframes story-progress { from { width:0 } to { width:100% } }
.story-viewer-heading { display:flex; align-items:center; gap:10px; font-weight:750; }
.story-viewer-heading img { width:34px; height:34px; border-radius:50%; object-fit:cover; background:#17233d; }
.story-viewer-close,.story-viewer-remove { appearance:none; border:1px solid rgba(255,255,255,.42); background:rgba(2,10,25,.58); color:white; border-radius:999px; padding:8px 12px; cursor:pointer; }
.story-viewer-close { position:absolute; right:14px; top:42px; z-index:4; }
.story-viewer-caption { position:absolute; inset:auto 0 0; z-index:2; padding:45px 18px 18px; color:#fff; line-height:1.45; background:linear-gradient(transparent,rgba(0,0,0,.76)); }
.story-viewer-tap { position:absolute; inset:60px 0 0; z-index:1; display:grid; grid-template-columns:1fr 1fr; }
.story-viewer-tap button { appearance:none; border:0; background:transparent; cursor:pointer; }
.engagement-studio { margin-bottom:18px; }
.engagement-studio [hidden] { display:none !important; }
.engagement-studio .panel-inner { display:grid; gap:11px; }
.engagement-studio textarea { min-height:80px; width:100%; resize:vertical; box-sizing:border-box; padding:12px; border:1px solid rgba(117,188,255,.24); border-radius:12px; background:rgba(4,12,28,.82); color:var(--text); font:inherit; }
.engagement-studio textarea:focus { outline:0; border-color:#48c6ff; box-shadow:0 0 0 3px rgba(72,198,255,.13); }
.engagement-studio input[type="file"] { width:100%; box-sizing:border-box; padding:8px; border:1px solid rgba(117,188,255,.24); border-radius:12px; background:rgba(4,12,28,.82); color:var(--muted); font:inherit; }
.engagement-studio input[type="file"]::file-selector-button { margin-right:10px; border:1px solid rgba(105,194,255,.45); border-radius:8px; padding:7px 10px; background:rgba(25,94,191,.5); color:#f2fbff; font:700 .84rem/1 inherit; cursor:pointer; }
.engagement-status { min-height:1.3em; margin:0; color:var(--muted); }
.engagement-status.error { color:#ffb4b4; }
.story-list { display:flex; gap:14px; overflow-x:auto; padding:4px 2px 8px; }
.story-list-item { flex:0 0 74px; display:grid; gap:6px; justify-items:center; color:var(--muted); font-size:.76rem; text-align:center; }
.story-list-item .story-ring-button { width:62px; height:62px; border-radius:50%; }
.story-list-item img,.story-list-item .story-list-fallback { width:54px; height:54px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#15233e; color:#bceaff; }
.reel-note { color:var(--muted); margin:0; line-height:1.5; }
.post-card-reel { border-color:rgba(77,193,255,.35); }
.reel-media { aspect-ratio:9/16; width:min(100%,420px)!important; object-fit:cover; background:#050b19; }
.reel-duration { font-size:.78rem; padding:4px 8px; border-radius:999px; color:#bfeaff; background:rgba(47,130,255,.16); }
.reels-shell { width:min(1080px,calc(100% - 32px)); margin:42px auto 80px; }
.reels-intro { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:22px; }
.reels-intro h1 { margin:0; font-size:clamp(2rem,5vw,3.3rem); }
.reels-intro p { color:var(--muted); max-width:660px; line-height:1.55; }
.reels-feed { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,340px)); justify-content:start; gap:20px; }
.reel-card { overflow:hidden; border:1px solid rgba(119,183,255,.25); border-radius:20px; background:rgba(5,12,28,.72); box-shadow:0 18px 45px rgba(0,0,0,.18); }
.reel-card video { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#030714; }
.reel-card-copy { padding:14px; }
.reel-card-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:.86rem; }
@media(max-width:620px){ .reels-shell{width:min(100% - 22px,1080px);margin-top:24px}.reels-intro{align-items:start;flex-direction:column}.story-viewer{padding:10px}.story-viewer-card{width:min(100%,430px);min-height:calc(100vh - 20px)}.story-viewer-image{height:calc(100vh - 20px)} }