* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.feed { width: 100%; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; }
.video-card { position: relative; width: 100%; height: 100dvh; min-height: 520px; scroll-snap-align: start; background: #161616; overflow: hidden; }
.video, .shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pause-indicator { position: absolute; z-index: 3; left: 50%; top: 50%; width: 96px; height: 96px; display: grid; place-items: center; color: rgba(255,255,255,.92); font: 74px/1 -apple-system, BlinkMacSystemFont, sans-serif; text-shadow: 0 2px 12px rgba(0,0,0,.36); transform: translate(-45%, -50%) scale(.78); opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }.video-card.is-paused .pause-indicator { opacity: 1; transform: translate(-45%, -50%) scale(1); }
.gallery { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; background: #111; overscroll-behavior-x: contain; }
.gallery::-webkit-scrollbar { display: none; }
.gallery img, .gallery video { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; background: #111; }
.standalone-live, .live-photo-card, .only-live-gallery, .old-content { display: none; }
.gallery-progress { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); pointer-events: none; }.gallery-track { display: flex; gap: 2px; width: 100%; }.gallery-track i { display: block; flex: 1 1 0; min-width: 0; height: 3px; border-radius: 4px; background: rgba(255,255,255,.38); transition: background .16s, transform .16s; }.gallery-track i.active { background: #fff; transform: scaleY(1.35); }
.shade { background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.8) 100%); pointer-events: none; }
.topbar { position: absolute; z-index: 1; top: max(18px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; gap: 34px; align-items: center; color: #ddd; font-size: 15px; }
.topbar strong { font-size: 17px; color: #fff; border-bottom: 2px solid #fff; padding-bottom: 5px; }
.video-copy { display: none; }
.video-copy h2 { margin: 0 0 9px; font-size: 17px; }.video-copy p { margin: 0; font-size: 15px; line-height: 1.5; }.music { margin-top: 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { position: absolute; z-index: 1; right: 13px; bottom: calc(78px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; align-items: center; }.actions button { color: #fff; border: 0; background: transparent; }.avatar { width: 43px; height: 43px; border-radius: 50% !important; background: linear-gradient(135deg,#f75d71,#7358e8) !important; border: 2px solid #fff !important; font-weight: 700; }.action { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; text-shadow: 0 1px 4px #000; }.action b { font-size: 32px; line-height: .85; font-weight: 400; }.comment { opacity: .82; }.comment-icon { display: block; width: 32px; height: 29px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }.share-placeholder { display: none; }.action.liked b, .action.saved b { color: #ff2f55; }.action.saved b { color: #ffd34d; }
.tap-heart { position: absolute; z-index: 3; left: var(--tap-x); top: var(--tap-y); color: #fff; font: 92px/1 -apple-system, BlinkMacSystemFont, sans-serif; text-shadow: 0 3px 14px rgba(0,0,0,.32); pointer-events: none; transform: translate(-50%, -50%) scale(.25); animation: tap-heart-pop .76s cubic-bezier(.17,.7,.28,1) forwards; }.tap-heart::after { content: ''; position: absolute; inset: 15%; border-radius: 50%; background: rgba(255,255,255,.12); z-index: -1; }.tap-heart { color: #ff2f55; } @keyframes tap-heart-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(var(--tap-rotate)); } 24% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(0); } 52% { opacity: 1; transform: translate(-50%, -50%) scale(.96) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -95%) scale(1.05) rotate(var(--tap-rotate)); } }
.bottom-nav { position: fixed; z-index: 2; bottom: 0; left: 0; right: 0; height: calc(62px + env(safe-area-inset-bottom)); padding: 10px 14px env(safe-area-inset-bottom); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(transparent,rgba(0,0,0,.88)); font-size: 12px; }.bottom-nav button { border: 0; }.bottom-nav .nav-item { width: 42px; height: 28px; padding: 0; background: transparent; color: rgba(255,255,255,.65); font-size: 12px; font-weight: 400; }.bottom-nav .nav-item.active { color: #fff; font-weight: 700; }.bottom-nav #uploadButton { border-radius: 7px; width: 42px; height: 28px; font-size: 27px; line-height: 20px; font-weight: 300; color: #fff; background: linear-gradient(90deg,#22d7e7 0 48%,#ff4563 48%); }
.comment-panel { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; min-height: 42dvh; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: #fff; color: #111; }.panel-head { display: flex; justify-content: space-between; align-items: center; }.panel-head button { border: 0; background: transparent; font-size: 28px; }.comment-panel p { color: #888; text-align: center; margin: 80px 0; }.comment-input { display: flex; justify-content: space-between; padding: 11px; border-radius: 20px; background: #f2f2f2; color: #999; }.comment-input button { border: 0; background: transparent; color: #2378ff; }
.delete-panel { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: #fff; color: #111; }.delete-panel p { color: #777; margin: 18px 0; }.delete-panel input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 9px; font-size: 16px; }.delete-panel > button:last-child { width: 100%; margin-top: 14px; padding: 13px; border: 0; border-radius: 9px; background: #ff2f55; color: #fff; font-size: 16px; font-weight: 700; }
@media (min-width: 720px) { .video-card { max-width: 430px; margin: auto; }.bottom-nav { width: 430px; left: 50%; right: auto; transform: translateX(-50%); }.comment-panel { max-width: 430px; left: 50%; right: auto; transform: translateX(-50%); } }