html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #050308; }
#app { position: relative; display: flex; flex-direction: column; max-width: 480px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--bg); }
#view { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: env(safe-area-inset-top) 16px 28px; }
#view.v-foryou { padding: 0; overflow: hidden; }
#view::-webkit-scrollbar, .feed::-webkit-scrollbar, .hs::-webkit-scrollbar { display: none; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 56px; margin: 0 -16px; padding: 0 16px; background: var(--bg); }
.top h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: 17px; font-weight: 800; margin: 24px 0 10px; }

.hero { position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 4/5; max-height: 54vh; border-radius: 20px; overflow: hidden; isolation: isolate; text-align: left; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 74% 22%, rgba(255, 255, 255, .42), transparent 30%), radial-gradient(circle at 14% 66%, rgba(0, 0, 0, .35), transparent 55%); }
.hero .h { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 40px 18px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.hero b { font: italic 700 30px/1.05 var(--serif); }
.hero .h > span:nth-child(2) { font-size: 13px; color: var(--dim); }
.hero .btn { align-self: flex-start; height: 40px; margin-top: 4px; font-size: 14px; }

.hs { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.card .poster { font-size: 12px; border-radius: 12px; }
.card .t { font-size: 13px; }
.card:hover .poster { transform: none; }
.rank { width: 22px; height: 22px; font-size: 11px; }
.chips { margin: 0 -16px 14px; padding: 0 16px; }

.tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #0B0911; border-top: 1px solid var(--line); }
.tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--mute); }
.tabs svg { width: 24px; height: 24px; }
.tabs .on { color: #fff; }
.tabs .on svg { color: var(--p); }

.feed { position: relative; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; background: #000; }
.slide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.meta { position: absolute; left: 16px; right: 80px; bottom: 22px; pointer-events: none; }
.meta > * { pointer-events: auto; }
.meta h2 { font-size: 19px; font-weight: 800; }
.meta p { font-size: 13px; color: var(--dim); margin-top: 3px; }
.meta .blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta .btn { margin-top: 10px; }
.rail { position: absolute; right: 6px; bottom: 26px; display: flex; flex-direction: column; gap: 16px; }
.rail button { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 60px; font-size: 11px; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.rail svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.rail .act svg { fill: var(--p); stroke: var(--p); }

#player { position: absolute; inset: 0; z-index: 20; background: #000; }
.ptop { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 6px; height: 52px; margin-top: env(safe-area-inset-top); padding: 0 12px 0 6px; pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.ptop > * { pointer-events: auto; }
.ptop button { width: 40px; height: 40px; display: grid; place-items: center; }
.ptop svg { width: 26px; height: 26px; }
.ptop b { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptop span { flex: none; padding: 4px 10px; border-radius: 99px; background: rgba(0, 0, 0, .45); font-size: 13px; font-weight: 700; }

#sheet { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .58); }
.sh { width: 100%; max-height: 80%; overflow-y: auto; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--bg2); animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sh header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.sh h2 { font-size: 18px; }
.sh header button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); flex: none; }
.sh p { font-size: 13px; color: var(--dim); }
.sh .epg { margin-top: 14px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.packs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); text-align: left; }
.packs strong { font-size: 20px; }
.packs small { min-height: 17px; color: var(--gold); font-size: 12px; font-weight: 600; }
.packs em { margin-top: 6px; font-style: normal; font-weight: 700; font-size: 14px; color: var(--dim); }
.vipb { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 52px; margin-top: 8px; padding: 0 16px; border-radius: 14px; background: var(--grad); font-weight: 700; font-size: 15px; }
.sh .fine { margin-top: 12px; font-size: 12px; color: var(--mute); text-align: center; }

.wallet { display: flex; justify-content: space-between; align-items: center; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.wallet small { display: block; font-size: 12px; color: var(--mute); }
.wallet strong { font-size: 30px; font-weight: 800; }
.vip { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 10px; padding: 16px 18px; border-radius: 18px; background: var(--grad); text-align: left; }
.vip b { font-size: 17px; }
.vip span { font-size: 13px; color: rgba(255, 255, 255, .85); }
.ck { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.ck div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; background: rgba(255, 255, 255, .07); font-size: 12px; }
.ck small { font-size: 11px; color: var(--mute); }
.ck .done { opacity: .4; }
.ck .next { box-shadow: inset 0 0 0 2px var(--gold); }
.rows { border-radius: 16px; background: var(--card); overflow: hidden; }
.rows > * { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 50px; padding: 0 16px; font-size: 15px; text-align: left; }
.rows > * + * { border-top: 1px solid var(--line); }
.rows span { color: var(--mute); font-size: 14px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 20px; text-align: center; }
.empty b { font-size: 17px; }
.empty p { font-size: 14px; color: var(--dim); margin-bottom: 10px; }
.hrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; text-align: left; }
.hrow .poster { flex: none; width: 54px; padding: 0; border-radius: 8px; font-size: 0; }
.hrow .badge { display: none; }
.hrow div { min-width: 0; }
.hrow .t { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .s { font-size: 13px; color: var(--mute); }