* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; font-family:system-ui, -apple-system, sans-serif; }
.page { display:none; width:100%; height:100%; }
.page.active { display:block; }
#videoPage { position:relative; width:100%; height:100%; overflow:hidden; }
.video-list { height:100%; transition:transform .3s cubic-bezier(0.2,0,0,1); will-change:transform; }
.video-item { width:100%; height:100vh; position:absolute; left:0; background:#000; }
.video-player { width:100%; height:100%; object-fit:cover; background:#000; }
.video-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:transparent; z-index:5; }
.loading { position:absolute; top:50%; left:50%; width:40px; height:40px; border-radius:50%; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin .8s infinite; transform:translate(-50%,-50%); display:none; z-index:9; }
.loading.show { display:block; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.heart { position:absolute; top:50%; left:50%; font-size:80px; color:#ff3355; opacity:0; transform:translate(-50%,-50%) scale(0.5); pointer-events:none; transition:all .25s; z-index:20; }
.heart.show { opacity:1; transform:translate(-50%,-50%) scale(1.2); }
.progress-wrap { position:absolute; left:0; right:0; bottom:100px; height:3px; background:rgba(255,255,255,.15); margin:0 20px; z-index:10; border-radius:10px; overflow:hidden; }
.buffer-bar { position:absolute; left:0; top:0; height:100%; background:rgba(255,255,255,.4); width:0; border-radius:10px; }
.play-bar { position:absolute; left:0; top:0; height:100%; background:#ff3355; width:0; border-radius:10px; z-index:2; }
.info-box { position:absolute; left:16px; bottom:150px; color:#fff; z-index:10; width:70%; text-shadow:0 2px 6px rgba(0,0,0,.4); }
.at-text { font-size:16px; margin-bottom:6px; }
.at-text a { color:#fff; text-decoration:none; font-weight:bold; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tags span { background:rgba(20,20,20,.3); backdrop-filter:blur(4px); padding:4px 10px; border-radius:99px; font-size:12px; color:#fff; border:1px solid rgba(255,255,255,0.2); }
.toolbar { position:absolute; right:16px; bottom:130px; z-index:10; display:flex; flex-direction:column; gap:12px; }
.tool { width:48px; height:48px; border-radius:50%; background:rgba(20,20,20,.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; border:none; box-shadow:0 4px 8px rgba(0,0,0,.2); transition:transform .1s, background .2s; cursor:pointer; }
.tool:active { transform:scale(0.92); }
#likeBtn.active { color:#ff3355; }
#collectBtn.active { color:#ffcc00; }
#autoNextToggle.active { background:#ff3355; color:white; }
#nextBtn { font-size:24px; }
.nav { position:fixed; bottom:0; left:0; right:0; height:56px; background:#0f0f0f; display:flex; align-items:center; justify-content:space-around; color:#aaa; z-index:30; border-top:1px solid #222; }
.nav .item { flex:1; text-align:center; font-size:15px; padding:10px; cursor:pointer; transition:color .2s; }
.nav .item.active { color:#fff; font-weight:500; }
.context-menu { position:fixed; background:#1e1e1e; border-radius:12px; padding:4px 0; z-index:100; min-width:150px; box-shadow:0 8px 20px rgba(0,0,0,.6); display:none; border:1px solid #333; }
.context-menu.show { display:block; }
.context-item { padding:12px 20px; color:#fff; font-size:15px; cursor:pointer; }
.context-item:active { background:#2a2a2a; }
.list-page { padding:20px; padding-bottom:70px; overflow-y:auto; height:100%; color:#fff; background:#0a0a0a; }
.title { font-size:20px; margin-bottom:18px; font-weight:600; }
.video-card { display:flex; align-items:center; background:#1a1a1a; border-radius:14px; padding:10px; margin-bottom:12px; border:1px solid #2a2a2a; cursor:pointer; transition:background .2s; user-select:none; }
.video-card:active { background:#2a2a2a; }
.card-thumb { width:80px; height:110px; background:#2e2e2e; border-radius:10px; margin-right:14px; object-fit:cover; flex-shrink:0; border:1px solid #3a3a3a; }
.card-info { flex:1; overflow:hidden; }
.card-title { font-size:16px; font-weight:500; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-tag { display:inline-block; background:#2a2a2a; padding:4px 10px; border-radius:30px; font-size:12px; color:#ccc; }
.empty { text-align:center; color:#777; margin-top:60px; font-size:14px; }
.tab { display:flex; margin-bottom:16px; gap:8px; }
.tab span { flex:1; text-align:center; padding:10px; background:#1e1e1e; color:#aaa; border-radius:30px; font-size:15px; transition:all .2s; cursor:pointer; }
.tab span.active { background:#ff3355; color:#fff; }
.tab-content { display:none; }
.tab-content.active { display:block; }
.auto-play-tip { position:absolute; bottom:220px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); color:#fff; padding:8px 20px; border-radius:40px; font-size:14px; z-index:25; white-space:nowrap; border:1px solid rgba(255,255,255,0.2); opacity:0; transition:opacity 0.3s; pointer-events:none; }
.auto-play-tip.show { opacity:1; }
.error-toast { position:fixed; bottom:80px; left:20px; right:20px; background:rgba(0,0,0,0.8); color:#fff; padding:12px; border-radius:30px; text-align:center; z-index:100; font-size:14px; backdrop-filter:blur(8px); display:none; }
.thumb-placeholder { background:#2a2a2a; display:flex; align-items:center; justify-content:center; color:#666; font-size:28px; }
.announcement-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:1000; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.announcement-content { background:#1e1e1e; border-radius:20px; max-width:320px; width:90%; padding:20px; border:1px solid #333; box-shadow:0 10px 30px rgba(0,0,0,0.5); color:#fff; }
.announcement-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.announcement-header h3 { margin:0; font-size:18px; color:#ff3355; }
.announcement-close { background:none; border:none; color:#aaa; font-size:24px; cursor:pointer; padding:0; line-height:1; }
.announcement-body { margin-bottom:20px; font-size:15px; line-height:1.5; color:#ddd; max-height:200px; overflow-y:auto; }
.announcement-footer { display:flex; gap:10px; }
.announcement-footer .btn { flex:1; padding:10px; border:none; border-radius:30px; font-size:14px; cursor:pointer; font-weight:500; }
.btn-primary { background:#ff3355; color:white; }
.btn-secondary { background:#333; color:#ccc; }