:root {
  --accent: #7C5CFC;
  --bg: #0F0B1E;
  --card: #1B1533;
  --card2: #251C45;
  --text: #EDE9FE;
  --sub: #A79FC9;
  --line: #322858;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -5%, var(--bg-glow) 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  overscroll-behavior-y: none;
}
#app { min-height:100%; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ---------- 顶栏 ---------- */
.topbar {
  position: relative;
  display:flex; align-items:center; gap:10px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  background: linear-gradient(135deg, var(--card2) 0%, var(--bg) 70%);
  overflow:hidden;
}
.topbar .logo {
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg, #34D399, #059669);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; flex:none;
  box-shadow: 0 0 12px rgba(52,211,153,.5);
}
.topbar .title { font-size:19px; font-weight:700; letter-spacing:1px; z-index:1; }
.topbar .back {
  background:none; border:none; color:var(--text);
  font-size:22px; padding:4px 10px 4px 0; z-index:2;
}
.stars { position:absolute; inset:0; pointer-events:none; }
.stars::before, .stars::after {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%;
  background:#FFD75E; box-shadow: 60px 8px 0 #FFD75E, 140px 22px 0 1px #fff8,
    220px 6px 0 #FFD75E, 300px 26px 0 #fff6, 340px 12px 0 1px #FFD75E;
  top:10px; left:40%; animation: twinkle 2.4s infinite alternate;
}
.stars::after { top:26px; left:55%; animation-delay:1.2s; transform:scale(.7); }
@keyframes twinkle { from{opacity:.3} to{opacity:1} }

/* ---------- 搜索 ---------- */
.searchbox { display:flex; gap:8px; padding:12px 14px; }
.searchbox input {
  flex:1; height:44px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--text); padding:0 14px; font-size:16px;
  outline:none;
}
.searchbox input:focus { border-color: var(--accent); }
.searchbox button {
  height:44px; padding:0 20px; border:none; border-radius:12px;
  background: var(--accent); color:#fff; font-size:16px; font-weight:600;
}
.status { padding:4px 16px; font-size:13px; color:var(--sub); min-height:22px; }
.history { padding:0 14px; display:flex; flex-wrap:wrap; gap:8px; }
.history .chip {
  background:var(--card); border:1px solid var(--line); color:var(--sub);
  border-radius:16px; padding:5px 12px; font-size:13px;
}

/* ---------- 继续观看 ---------- */
.continue { padding:0 14px 4px; }
.continue:empty { display:none; }
.sec-title { font-size:14px; font-weight:700; color:var(--accent); margin:10px 0 8px; }
/* ---------- 搜索记录标题行 + 清除按钮 ---------- */
.sec-row { display:flex; align-items:center; justify-content:space-between; padding:6px 14px 0; }
.sec-row .sec-title { margin:4px 0; }
.link-btn {
  background:none; border:none; color:var(--accent);
  font-size:13px; padding:4px 6px; cursor:pointer; opacity:.85;
}
.link-btn:active { opacity:.5; }
.sec-row[hidden] { display:none; }
.continue .chip.cont {
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:16px; padding:6px 12px; font-size:13px; margin:0 8px 8px 0;
}
.continue .chip.cont .ep { color:var(--accent); font-size:12px; }

/* ---------- 结果网格 ---------- */
.grid {
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:10px; padding:12px 14px;
}
.vcard { background:var(--card); border-radius:10px; overflow:hidden; }
.vcard .cover {
  width:100%; aspect-ratio: 3/4.2; object-fit:cover; display:block;
  background: var(--card2);
}
.vcard .vt { font-size:13px; padding:6px 7px 2px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px; }

/* ---------- 封面占位 ---------- */
.cover.ph {
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: linear-gradient(135deg, var(--card2), var(--card));
  color: var(--sub); font-size:12px; padding:6px; line-height:1.35;
  word-break:break-all;
}
.detail-head .cover.ph { width:110px; aspect-ratio:3/4.2; border-radius:10px; }

/* ---------- 搜索骨架屏 ---------- */
.vcard.sk { background:var(--card); }
.vcard.sk::before {
  content:""; display:block; height:12px; margin:10px 8px 8px; border-radius:5px;
  background:linear-gradient(90deg, var(--card) 25%, var(--card2) 37%, var(--card) 63%);
  background-size:400% 100%; animation:sk 1.2s infinite;
}
.vcard.sk::after {
  content:""; display:block; width:100%; aspect-ratio:3/4.2;
  background:linear-gradient(90deg, var(--card) 25%, var(--card2) 37%, var(--card) 63%);
  background-size:400% 100%; animation:sk 1.2s infinite; border-radius:10px 10px 0 0;
}
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ---------- 搜索空 / 失败提示 ---------- */
.empty { grid-column:1/-1; padding:28px 16px; text-align:center; color:var(--sub);
  font-size:13px; line-height:1.6; background:var(--card); border-radius:12px; margin:6px; }

/* ---------- 播放失败 / 详情操作 ---------- */
.err-btns { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.detail-actions { padding:12px 16px 4px; }
.detail-actions .btn-line { color:var(--accent); border-color:var(--accent); }
.vcard .vs { font-size:11px; color:var(--sub); padding:0 7px 7px;
  display:flex; justify-content:space-between; }
.vcard .vs .src { color:var(--accent); }

/* ---------- 站点 ---------- */
.tip { padding:10px 16px; font-size:13px; color:var(--sub); }
.site-list { padding: 0 12px; }
.site-item {
  display:flex; align-items:center; gap:10px;
  background:var(--card); border-radius:12px; padding:12px 14px; margin-bottom:8px;
}
.site-item .nm { flex:1; font-size:15px; }
.site-item .nm .u { display:block; font-size:11px; color:var(--sub); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:56vw; }
.site-item .del { background:none; border:none; color:#f87171; font-size:17px; padding:4px; }
.fab {
  position:fixed; right:18px; bottom:calc(84px + env(safe-area-inset-bottom));
  width:52px; height:52px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:26px;
  box-shadow:0 4px 16px rgba(124,92,252,.5); z-index:20;
}

/* ---------- 开关 ---------- */
input[type=checkbox] { width:44px; height:26px; appearance:none; -webkit-appearance:none;
  background:var(--line); border-radius:13px; position:relative; transition:.2s; flex:none; }
input[type=checkbox]:checked { background:var(--accent); }
input[type=checkbox]::after { content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; background:#fff; border-radius:50%; transition:.2s; }
input[type=checkbox]:checked::after { left:21px; }

/* ---------- 设置 ---------- */
.card { background:var(--card); border-radius:14px; margin:10px 14px; padding:14px; }
.card-title { font-size:15px; font-weight:700; margin-bottom:10px; color:var(--accent); }
.theme-row { display:flex; gap:14px; }
.theme-dot { width:36px; height:36px; border-radius:50%; border:3px solid transparent; }
.theme-dot.on { border-color:#fff; box-shadow:0 0 8px rgba(255,255,255,.5); }
.switch-row { display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; font-size:14px; gap:10px; }
.btn-line { width:100%; margin-top:8px; height:40px; border-radius:10px;
  border:1px solid var(--line); background:none; color:#f87171; font-size:14px; }
.set-line { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 2px; }
.set-line .set-label { font-size:14px; color:var(--text); white-space:nowrap; }
.text-in { flex:1; max-width:60%; min-width:0; padding:8px 10px; border-radius:9px;
  border:1px solid var(--line); background:var(--card2); color:var(--text);
  font-size:13px; outline:none; }
.text-in:focus { border-color:var(--accent); }
.text-in::placeholder { color:var(--sub); opacity:.7; }
.tiny { font-size:12px; color:var(--sub); line-height:1.7; }
.center { text-align:center; }

/* ---------- 浮层 ---------- */
.overlay {
  position:fixed; inset:0; background:var(--bg); z-index:50;
  transform: translateX(100%); transition: transform .25s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom: env(safe-area-inset-bottom);
}
.overlay.show { transform: translateX(0); }
.overlay.dark { background:#000; }
/* v1.5.3：播放器浮层固定黑底，内部文字强制浅色（不随全局明亮模式变深，避免黑底深字看不清） */
#overlay-player { --text:#f5f5f7; --sub:#c9c9d4; --card:rgba(255,255,255,.16); --card2:rgba(255,255,255,.24); --line:rgba(255,255,255,.22); }
#overlay-player .topbar .title { color:#fff; }
#overlay-player .back { color:#fff; }

/* ---------- 详情 ---------- */
.detail-body { padding: 0 0 30px; }
.detail-head { display:flex; gap:14px; padding:16px; }
.detail-head img { width:110px; border-radius:10px; aspect-ratio:3/4.2; object-fit:cover; background:var(--card2); }
.detail-head .meta { flex:1; font-size:13px; color:var(--sub); line-height:1.9; }
.detail-head .meta b { color:var(--text); font-size:17px; display:block; margin-bottom:4px; }
.detail-desc { padding:0 16px 10px; font-size:13px; color:var(--sub); line-height:1.8; }
.tabs { display:flex; gap:8px; padding:8px 16px; overflow-x:auto; }
.tabs .tab { flex:none; padding:7px 16px; border-radius:18px; font-size:13px;
  background:var(--card); color:var(--sub); border:1px solid var(--line); }
.tabs .tab.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.ep-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px 16px; }
.ep-grid .ep { padding:10px 4px; border-radius:9px; background:var(--card);
  border:1px solid var(--line); color:var(--text); font-size:13px; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep-grid .ep.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- 播放器 ---------- */
.player-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
#video { width:100%; height:100%; background:#000; }
.player-ctrls { padding:8px 14px 2px; }
.ctrl-row { display:flex; align-items:center; gap:10px; margin:6px 0; flex-wrap:wrap; }
.ctrl-label { font-size:13px; color:var(--sub); flex:none; }
.ctrl-flex { flex:1; }
.speed-row { display:flex; gap:6px; flex-wrap:wrap; }
.speed-btn { padding:6px 11px; border-radius:14px; font-size:13px;
  background:var(--card); color:var(--text); border:1px solid var(--line); }
.speed-btn.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-sleep { padding:7px 14px; border-radius:14px; font-size:13px; font-weight:600;
  background:var(--card); color:var(--text); border:1px solid var(--line); }
.btn-sleep.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.sleep-menu { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.sleep-opt { padding:6px 12px; border-radius:14px; font-size:13px;
  background:var(--card2); color:var(--text); border:1px solid var(--line); }
.sleep-opt.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- 屏幕锁 ---------- */
.lock-fab {
  position:absolute; top:10px; right:10px; z-index:50;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; cursor:pointer; user-select:none;
  background:rgba(0,0,0,.45); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  -webkit-tap-highlight-color:transparent;
}
/* 锁定时：禁用所有手势（避免误触进度/音量/亮度），并隐藏除锁头外的控件 */
#overlay-player.locked #gesture-layer { pointer-events:none; }
#overlay-player.locked .topbar,
#overlay-player.locked #player-ctrls,
#overlay-player.locked #player-eps,
#overlay-player.locked #player-status { display:none !important; }
/* 锁定时隐藏锁头（锁定满 3 秒后由 JS 加 .locked-hidden） */
#overlay-player.locked-hidden #lock-fab { display:none !important; }

/* ---------- 搜索探测 ---------- */
.probe-bar { display:none; padding:8px 14px; gap:8px; align-items:center; flex-wrap:wrap; }
.probe-bar.show { display:flex; }
.btn-probe { padding:7px 14px; border-radius:14px; font-size:13px; font-weight:600;
  background:var(--accent); color:#fff; border:none; }
.probe-stats { font-size:12px; color:var(--sub); line-height:1.6; }
.probe-stats b.ok { color:#34D399; }
.probe-stats b.slow { color:#F5B915; }
.probe-stats b.fail { color:#f87171; }
.probe-stats .sort-link { color:var(--accent); text-decoration:underline; margin-left:6px; }

/* ---------- 结果卡片探测徽标 ---------- */
.vcard { position:relative; }
.vcard .badge { position:absolute; top:6px; right:6px; font-size:10px; padding:2px 6px;
  border-radius:8px; background:rgba(0,0,0,.6); color:#fff; z-index:2; }
.vcard .badge.ok { background:rgba(52,211,153,.85); }
.vcard .badge.slow { background:rgba(245,185,21,.9); color:#1a1205; }
.vcard .badge.fail { background:rgba(248,113,113,.9); }
.vcard .badge.busy { background:rgba(124,92,252,.85); animation:badgePulse 1.2s infinite; }
@keyframes badgePulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ---------- 轻提示 ---------- */
.toast {
  position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(10px); z-index:200;
  background:rgba(20,14,40,.96); color:var(--text);
  border:1px solid var(--line); border-radius:14px;
  padding:10px 16px; font-size:13px; max-width:80vw; text-align:center;
  opacity:0; pointer-events:none; transition:.2s;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 底部导航 ---------- */
.navbar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; background:rgba(20,14,40,.96); backdrop-filter: blur(12px);
  border-top:1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item { flex:1; background:none; border:none; color:var(--sub);
  font-size:11px; padding:8px 0 6px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.nav-item .ic { font-size:20px; }
.nav-item.active { color:var(--accent); }

.page { display:none; }
.page.active { display:block; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--accent);
  border-top-color:transparent; border-radius:50%; animation:sp 1s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes sp { to { transform:rotate(360deg); } }

/* ---------- 电视直播 ---------- */
.live-tabs { display:flex; gap:8px; padding:12px 14px 4px; }
.lt { flex:1; padding:9px 0; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--sub); font-size:14px; }
.lt.on { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }
.live-tip { padding:8px 16px 2px; font-size:12px; color:var(--sub); opacity:.8; line-height:1.6; }
.live-list { padding:10px 12px 96px; }
.live-ch { display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 14px; margin-bottom:8px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:14.5px; text-align:left; }
.live-ch:active { transform:scale(.985); }
.lc-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-go { font-size:12px; color:var(--accent); background:var(--card2); padding:3px 10px; border-radius:999px; white-space:nowrap; }
.lc-go.ext { color:var(--sub); }
.lc-del { font-size:12px; color:var(--sub); padding:2px 8px; margin-right:4px; }
