/* Web feed (API.md §27) — full-height snap cards, app-like. Tokens from site.css, media pieces from share.css. */
html,body.feed-page{height:100%;overflow:hidden;background:#000}
.feed-top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,0));pointer-events:none}
.feed-top>*{pointer-events:auto}
.feed-top .brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:900;font-size:17px}
.feed-top .logo{width:30px;height:30px;flex:none}
.feed-top .wm{height:19px;width:46px;flex:none;color:#fff;--brand-tick:#C6FF00}
.web-badge{font-size:11px;font-weight:800;color:#C6FF00;border:1px solid rgba(198,255,0,.5);border-radius:999px;padding:2px 8px}
.feed-top .spacer{flex:1}
.pill{border:0;border-radius:999px;height:34px;padding:0 14px;background:#7C4DFF;color:#fff;font:800 13px/1 inherit;cursor:pointer}
.account{position:relative}
.avatar-btn{width:34px;height:34px;border-radius:17px;border:2px solid rgba(255,255,255,.7);background:#22222E;color:#fff;font-weight:900;overflow:hidden;padding:0;cursor:pointer}
.avatar-btn img{width:100%;height:100%;object-fit:cover}
.menu{position:absolute;right:0;top:42px;min-width:180px;background:#16161F;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.menu-name{font-size:13px;color:#B6B6C6;word-break:break-all}
.menu button{border:0;border-radius:10px;height:36px;background:#22222E;color:#fff;font:700 13px/1 inherit;cursor:pointer}

.feed{position:fixed;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.card{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#0B0B10;max-width:560px;margin:0 auto}
.card-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.card-stage video,.card-stage img{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.card-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0B0B10}
.card-stage .placeholder{color:#F5F5FA;font-weight:900;font-size:22px;padding:24px;text-align:center;background:linear-gradient(160deg,#2A1B5E,#0B0B10);width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.card .overlay{position:absolute;left:14px;top:calc(56px + env(safe-area-inset-top));z-index:3;pointer-events:none}
.poster{position:absolute;inset:0;border:0;background:#1a1333 center/cover no-repeat;display:flex;align-items:center;justify-content:center;cursor:pointer}
.poster-play{background:rgba(124,77,255,.92);color:#fff;font-weight:900;font-size:16px;border-radius:999px;padding:12px 22px;box-shadow:0 8px 24px rgba(0,0,0,.4)}

.card-info{position:absolute;left:0;right:72px;bottom:0;z-index:4;padding:0 14px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0));color:#fff;pointer-events:none}
.card-info>*{pointer-events:auto}
.card-info .creator{display:flex;align-items:center;gap:10px}
.card-info .names{display:flex;flex-direction:column;line-height:1.25}
.card-info .names b{font-size:14px;color:#fff}
.card-info .names .meta{color:#ddd}
.follow{margin-left:6px;border:0;border-radius:999px;height:28px;padding:0 12px;background:#7C4DFF;color:#fff;font:800 12px/1 inherit;cursor:pointer}
.follow.on{background:rgba(255,255,255,.18)}
.card-title{font-size:16px;font-weight:800;margin:10px 0 2px;color:#fff;line-height:1.35}
.card-desc{font-size:13px;color:#ddd;max-height:3.9em;overflow:hidden;white-space:pre-line}

.rail{position:absolute;right:8px;bottom:calc(28px + env(safe-area-inset-bottom));z-index:5;display:flex;flex-direction:column;gap:16px;align-items:center}
.rail-btn{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:#fff;text-decoration:none;cursor:pointer;font:inherit}
.rail-btn .ico{width:48px;height:48px;border-radius:24px;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900}
.rail-btn .n{font-size:12px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.rail-btn.like.on .ico{color:#FF4D6D}
.rail-btn.app .ico{background:rgba(0,0,0,.45) url(/assets/icon.svg) center/34px no-repeat;font-size:0;color:transparent}

.card .unmute{left:14px;bottom:auto;top:calc(88px + env(safe-area-inset-top));z-index:4}
.card .nudge{bottom:calc(110px + env(safe-area-inset-bottom));right:72px}
.card.end .btn{margin-top:14px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;background:rgba(22,22,31,.95);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 16px;font-size:13px;max-width:90vw}