:root{
  --bg:#0f0f12; --card:#1a1a20; --card2:#22222a;
  --txt:#ececf1; --sub:#8b8b96; --acc:#e0453c; --line:#2a2a33;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 关键：class 里的 display 会覆盖 hidden 属性，必须强制压住 */
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;overscroll-behavior:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* 顶栏 */
#topbar{position:sticky;top:0;z-index:20;display:flex;gap:10px;align-items:center;
  padding:calc(10px + var(--safe-t)) 12px 10px;background:rgba(15,15,18,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:16px;white-space:nowrap;
  background:linear-gradient(90deg,#ff6a5e,#e0453c);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.searchbox{flex:1}
.searchbox input{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--txt);font-size:14px;outline:none}
.searchbox input:focus{border-color:var(--acc)}

/* 首页广告轮播 */
.banner{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 0 14px;scrollbar-width:none}
.banner::-webkit-scrollbar{display:none}
.banner .ad{position:relative;flex:0 0 100%;scroll-snap-align:start;
  border-radius:12px;overflow:hidden;aspect-ratio:16/7;background:var(--card2)}
.banner .ad img{width:100%;height:100%;object-fit:cover}
.banner .ad .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:12px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner .ad .badge{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.55);
  color:#bbb;font-size:10px;padding:1px 5px;border-radius:4px}

/* 列表 */
#view{padding:12px 12px calc(72px + var(--safe-b))}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.card{background:var(--card);border-radius:12px;overflow:hidden;position:relative}
.card .cover{position:relative;aspect-ratio:3/4;background:var(--card2)}
.card .cover .score{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.6);
  color:#ffb84d;font-size:11px;padding:2px 6px;border-radius:6px;font-weight:600}
.card .cover .eps-tag{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.65);
  color:#ddd;font-size:11px;padding:2px 6px;border-radius:6px}
.card .meta{padding:8px 9px 10px}
.card .t{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.card .sub{color:var(--sub);font-size:11px;margin-top:4px;display:flex;gap:6px}

.empty{text-align:center;color:var(--sub);padding:60px 0}
.more{display:block;width:100%;margin:14px 0;padding:12px;border-radius:10px;
  background:var(--card);color:var(--sub);font-size:13px}

/* 底部导航 */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  padding:6px 0 calc(6px + var(--safe-b));background:rgba(15,15,18,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.tab{flex:1;padding:8px 0;font-size:12px;color:var(--sub);text-align:center}
.tab.active{color:var(--acc);font-weight:600}

/* 播放层 / 详情层 */
.player-layer,.detail-layer{position:fixed;inset:0;background:var(--bg);
  display:flex;flex-direction:column;padding-top:var(--safe-t)}
/* 播放层必须压在详情层之上，否则会被盖住只剩声音 */
.detail-layer{z-index:50}
.player-layer{z-index:60}
.player-head{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line)}
.icon-btn{width:34px;height:34px;border-radius:9px;background:var(--card);
  font-size:20px;line-height:1;display:grid;place-items:center}
.ptitle{flex:1;font-size:14px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#video{width:100%;height:auto;max-height:56vh;background:#000;object-fit:contain}
.eps{flex:1;overflow-y:auto;padding:12px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:8px;align-content:start}
.eps button{padding:10px 0;border-radius:9px;background:var(--card);font-size:13px}
.eps button.on{background:var(--acc);color:#fff;font-weight:600}
.eps button:disabled{opacity:.35}

/* 详情 */
.dbody{flex:1;overflow-y:auto;padding:16px 14px calc(24px + var(--safe-b))}
.dhero{display:flex;gap:12px;margin-bottom:14px}
.dhero .c{width:110px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--card2);flex:none}
.dhero .info{flex:1;min-width:0}
.dhero h2{font-size:17px;margin:0 0 8px;line-height:1.3}
.dhero .line{color:var(--sub);font-size:12px;margin-bottom:6px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tags span{background:var(--card2);color:var(--sub);font-size:11px;padding:3px 8px;border-radius:20px}
.ddesc{color:#b9b9c3;font-size:13px;line-height:1.7;margin:14px 0 18px;white-space:pre-wrap}
.dsec{font-size:13px;font-weight:600;margin:0 0 10px;color:var(--sub)}
.dactions{display:flex;gap:10px;margin-bottom:20px}
.dactions button{flex:1;padding:12px;border-radius:11px;font-size:14px;font-weight:600}
.dactions .play{background:var(--acc);color:#fff}
.dactions .fav{background:var(--card)}
.dactions .fav.on{color:#ffb84d}

.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--acc);
  border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);
  background:rgba(40,40,48,.96);color:#fff;font-size:13px;padding:10px 18px;
  border-radius:20px;z-index:99;pointer-events:none;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}