:root {
  --bg: #0e0e12;
  --card: #1a1a22;
  --card2: #23232e;
  --acc: #ff5a4d;
  --txt: #f2f2f5;
  --sub: #9a9aa8;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.hidden { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 10; background: rgba(14,14,18,.92);
  backdrop-filter: blur(10px); padding: calc(env(safe-area-inset-top) + 10px) 12px 10px; }
.brand { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.search { display: flex; gap: 8px; }
.search input { flex: 1; background: var(--card); border: none; border-radius: 10px;
  padding: 11px 14px; color: var(--txt); font-size: 16px; outline: none; }
.search button { background: var(--acc); border: none; color: #fff; font-weight: 700;
  border-radius: 10px; padding: 0 18px; font-size: 15px; }

main { padding: 12px; }
.hint { text-align: center; color: var(--sub); margin-top: 30vh; line-height: 1.9; }
.hint .sub { color: var(--txt); }

.meta { color: var(--sub); font-size: 13px; margin-bottom: 10px; }
.meta b { color: var(--txt); }

.site { margin-bottom: 18px; }
.site h3 { font-size: 14px; color: var(--sub); margin: 0 0 8px; font-weight: 600; }
.site h3 .badge { background: var(--card2); color: var(--txt); font-size: 11px;
  padding: 1px 7px; border-radius: 8px; margin-left: 6px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.card { background: var(--card); border-radius: 10px; overflow: hidden; cursor: pointer; }
.card .poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: #2a2a34; display: block; }
.card .title { font-size: 12px; padding: 6px 7px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .remark { font-size: 10px; color: var(--sub); padding: 0 7px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.loadmore { text-align: center; color: var(--sub); padding: 14px; }

.back { background: none; border: none; color: var(--acc); font-size: 16px; padding: 4px 0 12px; }
.detail-head { display: flex; gap: 12px; margin-bottom: 14px; }
.detail-head img { width: 110px; border-radius: 10px; object-fit: cover; background: #2a2a34; }
.detail-head .info h2 { margin: 0 0 6px; font-size: 18px; }
.detail-head .info p { margin: 3px 0; font-size: 12px; color: var(--sub); }
.detail-head .info .des { font-size: 12px; color: var(--sub); line-height: 1.6; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.players { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.players .ptab { background: var(--card); color: var(--sub); padding: 7px 13px; border-radius: 20px; font-size: 13px; }
.players .ptab.active { background: var(--acc); color: #fff; }

.episodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.episodes .ep { background: var(--card); color: var(--txt); text-align: center; padding: 10px 4px;
  border-radius: 8px; font-size: 12px; cursor: pointer; }
.episodes .ep:active { background: var(--card2); }

.overlay { position: fixed; inset: 0; background: #000; z-index: 50; display: flex;
  flex-direction: column; align-items: center; justify-content: center; }
.overlay video { width: 100%; max-height: 100%; background: #000; }
.overlay .close { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 14px;
  background: rgba(255,255,255,.15); color: #fff; border: none; width: 38px; height: 38px;
  border-radius: 50%; font-size: 18px; z-index: 2; }
.fallback { position: absolute; bottom: 40px; text-align: center; color: #fff; }
.fallback a { color: var(--acc); font-weight: 700; font-size: 16px; display: inline-block; margin-top: 8px; }