:root { --bg:#0d0d0f; --card:#16161a; --line:#26262c; --txt:#e8e8ea; --sub:#8a8a93; --acc:#f43f6b; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { background:var(--bg); color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.hidden { display:none !important; }

/* 顶部 */
.topbar { display:flex; align-items:center; gap:10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; position:sticky; top:0; z-index:20; background:rgba(13,13,15,.92); backdrop-filter:blur(10px); }
.brand { font-weight:900; font-size:17px; color:var(--acc); letter-spacing:1px; }
.searchbox { flex:1; display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:8px 12px; }
.searchbox .ic { width:16px; height:16px; color:var(--sub); flex:none; }
.searchbox input { flex:1; background:none; border:none; outline:none; color:var(--txt); font-size:14px; }
.searchbox input::placeholder { color:var(--sub); }

/* 分类导航 */
.catnav { display:flex; gap:8px; overflow-x:auto; padding:4px 14px 10px; position:sticky; top:calc(52px + env(safe-area-inset-top)); z-index:19; background:rgba(13,13,15,.92); backdrop-filter:blur(10px); scrollbar-width:none; }
.catnav::-webkit-scrollbar { display:none; }
.chip { flex:none; padding:6px 14px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:13px; font-weight:500; cursor:pointer; transition:background .15s,color .15s,border-color .15s,transform .12s; }
.chip:active { transform:scale(.96); }
.chip.on { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:700; }
.catnav.dim { opacity:.85; }
.catnav.dim .chip { color:#fff; }
.pay-methods { display:flex; gap:8px; margin:14px 0 8px; flex-wrap:wrap; }
.pay-method { flex:1; min-width:28%; padding:12px 8px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--sub); font-size:13px; font-weight:600; cursor:pointer; }
.pay-method.on { border-color:var(--acc); color:#fff; box-shadow:0 0 0 1px var(--acc); }

/* 视频网格 */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 12px; }
@media(min-width:480px){ .grid{grid-template-columns:repeat(4,1fr);} @media(min-width:760px){ .grid{grid-template-columns:repeat(6,1fr);} } }
.card { cursor:pointer; }
.card .pic { position:relative; width:100%; aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:#1c1c22; }
.card .pic-ph { width:100%; height:100%; background:linear-gradient(145deg,#1c1c22,#2a2a33); }
.card img { width:100%; height:100%; object-fit:cover; display:block; }
.card .tag { position:absolute; left:6px; top:6px; background:rgba(0,0,0,.6); color:#ffd; font-size:10px; padding:2px 6px; border-radius:6px; }
.card .lock { position:absolute; right:6px; bottom:6px; background:var(--acc); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px; }
.card .owned { position:absolute; left:6px; bottom:6px; background:rgba(0,180,120,.88); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px; }
.card .share-btn { position:absolute; right:6px; top:6px; width:28px; height:28px; border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.card .share-btn svg { width:14px; height:14px; }
.card.locked .pic::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); }
.share-box { text-align:left; }
.share-desc { color:var(--sub); font-size:13px; line-height:1.5; margin:8px 0 12px; }
.share-progress { background:#111; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:12px; color:var(--sub); margin-bottom:12px; }
.share-progress b { color:var(--acc); }
.share-link { background:#111; border:1px dashed var(--line); border-radius:10px; padding:12px; font-size:12px; word-break:break-all; color:#cfcfd6; margin-bottom:12px; max-height:90px; overflow:auto; }
.share-actions { display:flex; gap:8px; flex-wrap:wrap; }
.share-actions button { flex:1; min-width:90px; width:auto !important; margin-bottom:0 !important; }
.share-tip { margin-top:10px; min-height:16px; font-size:12px; color:var(--acc); text-align:center; }
.card .t { margin-top:5px; font-size:12px; color:var(--txt); line-height:1.35; height:2.7em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* VIP 商城 */
.vip-hero { text-align:center; padding:36px 16px 10px; }
.vip-badge { display:inline-block; background:linear-gradient(135deg,#f43f6b,#ff8a5c); color:#fff; font-weight:900; letter-spacing:2px; padding:6px 14px; border-radius:8px; margin-bottom:12px; }
.vip-hero h2 { font-size:20px; margin-bottom:8px; }
.vip-hero p { color:var(--sub); font-size:13px; }
.vip-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 14px; }
.plan { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 8px; text-align:center; cursor:pointer; }
.plan.on { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.plan b { display:block; font-size:14px; }
.plan .price { display:block; color:var(--acc); font-size:20px; font-weight:800; margin:8px 0 4px; }
.plan small { color:var(--sub); font-size:11px; }
.vip-cta { display:block; width:calc(100% - 28px); margin:4px 14px 8px; background:var(--acc); color:#fff; border:none; border-radius:12px; padding:14px; font-size:15px; font-weight:600; cursor:pointer; }
.vip-hint { text-align:center; color:var(--sub); font-size:12px; margin-bottom:16px; }

/* 登录框 */
.authbox { margin:0 14px 14px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.auth-tabs { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.auth-tabs span { flex:1; text-align:center; color:var(--sub); font-size:14px; cursor:pointer; padding:8px 4px 10px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.auth-tabs span.on { color:var(--acc); border-bottom-color:var(--acc); font-weight:600; }
.auth-panel { display:block; }
.auth-tip { color:var(--sub); font-size:12px; line-height:1.45; margin:0 0 10px; }
.authbox input { width:100%; background:#111; border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:10px 12px; font-size:14px; margin-bottom:8px; box-sizing:border-box; }
.authbox button { width:100%; background:var(--acc); color:#fff; border:none; border-radius:8px; padding:11px; font-size:14px; cursor:pointer; margin-bottom:8px; }
.authbox button.gray { background:#222; color:var(--sub); border:1px solid var(--line); }
.authbox button:last-child { margin-bottom:0; }
.authbox .msg { color:var(--acc); font-size:12px; min-height:16px; margin-top:4px; text-align:center; line-height:1.4; }

/* 弹窗 */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal.hidden { display:none !important; }
.modal-box { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; width:100%; max-width:320px; text-align:center; }
.modal-box h3 { margin-bottom:8px; }
.modal-box p { color:var(--sub); font-size:13px; margin-bottom:16px; }
.modal-box button { width:100%; background:var(--acc); color:#fff; border:none; border-radius:10px; padding:12px; font-size:14px; margin-bottom:8px; cursor:pointer; }
.modal-box button.gray { background:#222; color:var(--sub); }

.sect { display:flex; align-items:center; gap:10px; font-size:16px; padding:16px 14px 10px; }
.mini { background:var(--card); color:var(--sub); border:1px solid var(--line); border-radius:14px; padding:4px 12px; font-size:12px; }
.mini.danger { color:#ff6b6b; }
.more { text-align:center; color:var(--sub); font-size:12px; padding:14px 0 20px; }

/* 视图 */
.view { padding-top:6px; }

/* 占位 */
.placeholder { text-align:center; padding:90px 0 120px; }
.ph-ic { font-size:52px; }
.placeholder h2 { margin:14px 0 6px; font-size:20px; }
.placeholder p { color:var(--sub); font-size:13px; }

/* 我的 */
.me-card { display:flex; align-items:center; gap:14px; margin:12px 14px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.avatar { width:52px; height:52px; border-radius:50%; background:var(--acc); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex:none; }
.me-card p { color:var(--sub); font-size:12px; margin-top:4px; }
.hist { padding:0 14px; }
.hist-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.hist-item img { width:52px; height:76px; object-fit:cover; border-radius:6px; background:#1c1c22; flex:none; }
.hist-item .ht { flex:1; min-width:0; }
.hist-item .ht b { display:block; font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-bar { height:3px; background:var(--line); border-radius:2px; margin-top:8px; overflow:hidden; }
.hist-bar i { display:block; height:100%; background:var(--acc); }
.hist-item small { color:var(--sub); font-size:11px; display:block; margin-top:5px; }
.order-list { padding:0 14px 6px; }
.order-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; }
.order-item b { font-weight:600; }
.order-item small { display:block; color:var(--sub); font-size:11px; margin-top:4px; }
.order-item .mini { flex:none; padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--txt); font-size:12px; }
.setrow { margin:0 14px 10px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:12px; font-size:14px; cursor:pointer; }
.about { text-align:center; color:#55555e; font-size:11px; padding:24px 0 12px; }
.vip-cta:disabled { opacity:.55; }

/* 骨架屏与空状态 */
.skel { background:linear-gradient(100deg,#1a1a20 40%,#22222a 50%,#1a1a20 60%); background-size:200% 100%; animation:shine 1.2s infinite; }
.skel-line { height:12px; margin-top:6px; border-radius:4px; }
@keyframes shine { to { background-position:-200% 0; } }
.empty { grid-column:1/-1; text-align:center; color:var(--sub); font-size:14px; padding:60px 0; line-height:1.8; cursor:pointer; }
.empty small { color:#55555e; }

/* 搜索层 */
.searchlayer { position:fixed; inset:0; background:var(--bg); z-index:50; overflow-y:auto; padding-top:calc(10px + env(safe-area-inset-top)); }
.sl-head { display:flex; justify-content:space-between; align-items:center; padding:4px 14px 12px; position:sticky; top:0; background:var(--bg); }

/* 底部导航 */
.tabbar { position:fixed; left:0; right:0; bottom:0; display:flex; background:rgba(18,18,21,.96); backdrop-filter:blur(14px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); z-index:30; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 6px; color:#fff; cursor:pointer; }
.tab svg { width:22px; height:22px; }
.tab span { font-size:10px; font-weight:500; }
.tab.on { color:var(--acc); }