/* ============================================================
   MediaHub · 视觉规范（对标爱壹帆暗色影院风）
   底 #1a1a1a · 卡片 #252525 · 悬浮 #2f2f2f · 边框 #3a3a3a
   强调 #ff5f33（克制使用）· 标题 #fff · 正文 #ccc · 次要 #888
   ============================================================ */
:root {
  --bg: #1a1a1a;
  --bg-deep: #151515;
  --panel: #252525;
  --panel-hover: #2f2f2f;
  --border: #3a3a3a;
  --accent: #ff5f33;
  --accent-dim: rgba(255, 95, 51, 0.14);
  --text: #ffffff;
  --text-body: #cccccc;
  --text-muted: #888888;
  --radius: 6px;
  --topbar-h: 60px;
  --content-w: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-color: #444 #1a1a1a; }
body {
  background: var(--bg);
  color: var(--text-body);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  font-size: 14px;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--topbar-h);
  background: rgba(21, 21, 21, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 32px;
  padding: 0 32px;
}
.topbar-logo {
  font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: 1px;
}
.topbar-logo em { color: var(--accent); font-style: normal; }
.topbar-nav { display: flex; gap: 8px; flex: 1; }
.topbar-nav a {
  padding: 8px 14px; border-radius: var(--radius);
  color: var(--text-body); font-size: 15px; transition: all 0.2s;
}
.topbar-nav a:hover { color: var(--text); background: var(--panel-hover); }
.topbar-nav a.active { color: var(--accent); background: var(--accent-dim); }
.topbar-search { display: flex; gap: 8px; }
.topbar-search input {
  width: 260px; height: 36px; padding: 0 14px;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); outline: none; transition: border-color 0.2s;
}
.topbar-search input:focus { border-color: var(--accent); }
.topbar-search button {
  height: 36px; padding: 0 18px; border: none; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 14px; transition: opacity 0.2s;
}
.topbar-search button:hover { opacity: 0.85; }

/* ---------- 主体 ---------- */
.page { padding: calc(var(--topbar-h) + 24px) 32px 48px; max-width: var(--content-w); margin: 0 auto; }
.page-title { font-size: 20px; color: var(--text); margin-bottom: 16px; }
.page-title small { font-size: 13px; color: var(--text-muted); font-weight: normal; margin-left: 10px; }

/* ---------- 轮播 ---------- */
.banner {
  position: relative; border-radius: var(--radius); overflow: hidden;
  height: 380px; background: var(--bg-deep); border: 1px solid var(--border);
}
.banner-track { display: flex; height: 100%; transition: transform 0.5s ease; }
.banner-item {
  position: relative; overflow: hidden;
  flex: 0 0 100%; height: 100%;
  display: flex; align-items: center;
  background: #101010;
}
.banner-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.28; transform: scale(1.1); filter: blur(10px) saturate(1.15);
}
.banner-poster {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
  width: 176px; aspect-ratio: 2 / 3; object-fit: cover; z-index: 2;
  border-radius: var(--radius); border: 1px solid #4a4a4a;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.65);
}
.banner-item .banner-info {
  position: relative; z-index: 3;
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 32px 300px 32px 46px; width: 100%;
  background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.72) 48%, rgba(10,10,10,0.15) 78%, transparent 100%);
}
.banner-item .banner-name { font-size: 28px; color: var(--text); font-weight: 600; margin-bottom: 8px; }
.banner-item .banner-meta { font-size: 13px; color: #bbb; margin-bottom: 14px; }
.banner-item .banner-desc {
  font-size: 13px; color: var(--text-body); max-width: 640px; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.banner-play {
  align-self: flex-start;
  display: inline-block; margin-top: 16px; padding: 8px 22px;
  background: var(--accent); color: #fff; border-radius: var(--radius); font-size: 13px;
}
.banner-dots { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 8px; z-index: 3; }
.banner-dots i {
  width: 22px; height: 4px; border-radius: 2px; background: #555; cursor: pointer; transition: background 0.2s;
}
.banner-dots i.on { background: var(--accent); }

/* ---------- 横向内容行 ---------- */
.row-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 14px; }
.row-head h2 { font-size: 18px; color: var(--text); border-left: 4px solid var(--accent); padding-left: 12px; }
.row-head .row-more { color: var(--text-muted); font-size: 13px; }
.row-head .row-more:hover { color: var(--accent); }
.row-body { position: relative; }
.row-scroll {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin;
}
.row-arrow {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(21,21,21,0.85); border: 1px solid var(--border); color: var(--text-body);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.row-body:hover .row-arrow { opacity: 1; }
.row-arrow.left { left: -8px; }
.row-arrow.right { right: -8px; }
.row-arrow:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 海报卡片 ---------- */
.card {
  flex: 0 0 160px; width: 160px; display: block;
  transition: transform 0.2s;
}
.card:hover { transform: translateY(-4px); }
.card-thumb {
  position: relative; width: 100%; padding-top: 150%; /* 2:3 */
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, #3a3a3a, #252525);
  border: 1px solid var(--border);
}
.card:hover .card-thumb { border-color: var(--accent); }
.card-thumb .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #555; font-size: 40px; font-weight: 700;
}
.card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-tag {
  position: absolute; left: 0; top: 8px; z-index: 2;
  background: var(--accent); color: #fff; font-size: 12px;
  padding: 2px 8px; border-radius: 0 var(--radius) var(--radius) 0;
}
.card-note {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  background: rgba(0,0,0,0.65); color: #eee; font-size: 12px;
  padding: 2px 6px; border-radius: 4px;
}
.card-title {
  margin-top: 8px; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
/* 奈飞专区：多季剧在卡片下挂一排季入口 */
.season-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.season-row a {
  font-size: 11px; color: var(--text-muted); text-decoration: none;
  border: 1px solid #3a3a3a; border-radius: 3px; padding: 0 5px; line-height: 17px;
}
.season-row a:hover { color: var(--accent); border-color: var(--accent); }
.card-src-badge {
  display: inline-block; font-size: 11px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px; margin-left: 6px;
}

/* ---------- 网格（分类/搜索页） ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 14px;
}
.grid .card { width: auto; flex: none; }

/* ---------- 筛选条 ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px;
}
.filter-bar a, .filter-bar span {
  padding: 5px 12px; border-radius: 4px; color: var(--text-body); font-size: 13px;
}
.filter-bar a:hover { background: var(--panel-hover); color: var(--text); }
.filter-bar a.on { background: var(--accent-dim); color: var(--accent); }
.filter-bar .fl { color: var(--text-muted); padding: 5px 4px; }

/* 纪录片页工具条：片库内搜索 / 排序 / 建库状态 */
.doc-tools { align-items: center; }
.doc-tools input[type="search"] {
  height: 32px; min-width: 250px; padding: 0 12px;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); outline: none; font-size: 13px;
}
.doc-tools input[type="search"]:focus { border-color: var(--accent); }
.doc-tools select, .doc-tools button {
  height: 32px; padding: 0 12px; font-size: 13px;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-body); cursor: pointer;
}
.doc-tools select:hover, .doc-tools button:hover { border-color: var(--accent); color: var(--text); }
.doc-tools #doc-search { background: var(--accent); border-color: var(--accent); color: #fff; }
.doc-tools #nflx-search { background: var(--accent); border-color: var(--accent); color: #fff; }
.doc-tools #doc-search:hover { opacity: 0.85; color: #fff; }
.doc-tools #nflx-search:hover { opacity: 0.85; color: #fff; }
.doc-tools .doc-build { margin-left: auto; color: var(--text-muted); font-size: 12px; padding: 5px 4px; }

/* ---------- 详情页 ---------- */
.detail-hero { display: flex; gap: 28px; }
.detail-poster {
  flex: 0 0 260px; height: 390px; border-radius: var(--radius);
  background: linear-gradient(160deg, #3a3a3a, #252525); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: #555; font-size: 44px; font-weight: 700;
}
.detail-info { flex: 1; }
.detail-info h1 { font-size: 26px; color: var(--text); margin-bottom: 12px; }
.detail-meta { color: var(--text-muted); font-size: 13px; line-height: 2; }
.detail-meta b { color: var(--text-body); font-weight: normal; }
.detail-desc {
  margin-top: 14px; color: var(--text-body); line-height: 1.8; font-size: 13px;
  max-height: 120px; overflow: hidden;
}
.detail-actions { margin-top: 20px; display: flex; gap: 12px; }
.btn-primary {
  background: var(--accent); border: none; color: #fff;
  padding: 10px 28px; border-radius: var(--radius); font-size: 14px;
}
.btn-primary:hover { opacity: 0.88; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text-body);
  padding: 10px 28px; border-radius: var(--radius); font-size: 14px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 剧集网格 ---------- */
.ep-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ep-grid a {
  min-width: 72px; text-align: center; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-body); font-size: 13px; transition: all 0.2s;
}
.ep-grid a:hover { background: var(--panel-hover); color: var(--text); }
.ep-grid a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 播放页 ---------- */
.play-wrap { display: flex; gap: 18px; }
.player-box {
  flex: 1; aspect-ratio: 16/9; background: #000; border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.play-side { flex: 0 0 300px; }
.play-side .ep-list {
  max-height: 560px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px;
}
.play-side .ep-list a {
  display: block; padding: 9px 12px; border-radius: 4px;
  color: var(--text-body); font-size: 13px; margin-bottom: 4px;
}
.play-side .ep-list a:hover { background: var(--panel-hover); color: var(--text); }
.play-side .ep-list a.on { background: var(--accent-dim); color: var(--accent); }
.play-bar {
  margin-top: 14px; display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 13px;
}
.play-bar select {
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-body); padding: 6px 10px; outline: none;
}

/* ---------- 设置页 ---------- */
.settings-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 18px;
}
.settings-card h3 { color: var(--text); font-size: 16px; margin-bottom: 14px; }
.settings-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.settings-row label { color: var(--text-body); min-width: 90px; font-size: 13px; }
.settings-row input[type="text"] {
  height: 34px; padding: 0 12px; flex: 1; min-width: 240px;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px; color: var(--text); outline: none;
}
.settings-row input[type="text"]:focus { border-color: var(--accent); }
.settings-row select {
  height: 34px; padding: 0 10px; background: var(--bg-deep);
  border: 1px solid var(--border); border-radius: 4px; color: var(--text); outline: none;
}
.table-scroll { overflow-x: auto; margin-top: 6px; }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.src-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.src-table th, .src-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.src-table th { color: var(--text-muted); font-weight: normal; }
.src-table td { color: var(--text-body); }
.src-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.src-dot.ok { background: #4caf50; }
.src-dot.bad { background: #e04b3f; }
.src-dot.off { background: #666; }

/* ---------- 提示/占位 ---------- */
.hint-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 40px; text-align: center; color: var(--text-muted); line-height: 2;
}
.footer {
  margin-top: 40px; text-align: center; color: #555; font-size: 12px; padding-bottom: 20px;
}

/* ---------- 页面切换淡入 ---------- */
.fade-in { animation: fadein 0.2s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 骨架屏 ---------- */
.card.sk { pointer-events: none; }
.card.sk .card-thumb {
  background: linear-gradient(100deg, #242424 30%, #2e2e2e 45%, #242424 60%);
  background-size: 200% 100%;
  animation: skmove 1.2s infinite linear;
}
.sk-line {
  height: 12px; margin-top: 10px; border-radius: 3px;
  background: linear-gradient(100deg, #242424 30%, #2e2e2e 45%, #242424 60%);
  background-size: 200% 100%;
  animation: skmove 1.2s infinite linear;
}
.sk-line.short { width: 55%; }
@keyframes skmove { from { background-position: 200% 0; } to { background-position: -100% 0; } }

/* ---------- 分页 ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 28px 0 8px; }
.pager a, .pager span {
  min-width: 36px; height: 34px; padding: 0 12px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-body); font-size: 13px;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager a.disabled { opacity: 0.35; pointer-events: none; }
.pager .pager-info { background: transparent; border: none; color: var(--text-muted); }
.pager .pager-jump {
  background: transparent; border: none; padding: 0 0 0 10px; min-width: 0; gap: 6px;
}
.pager-jump input {
  width: 66px; height: 34px; padding: 0 8px; font-size: 13px;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); outline: none;
}
.pager-jump input:focus { border-color: var(--accent); }
.pager-jump button {
  height: 34px; padding: 0 12px; font-size: 13px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-body);
}
.pager-jump button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 线路选择 / 剧集头 ---------- */
.line-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 4px; }
.line-bar .lb-label { color: var(--text-muted); font-size: 13px; }
.line-chip {
  padding: 6px 14px; border-radius: var(--radius); font-size: 13px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-body);
}
.line-chip:hover { border-color: var(--accent); color: var(--accent); }
.line-chip.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.ep-scroll { max-height: 420px; overflow-y: auto; }

/* ---------- 详情补充 ---------- */
.detail-poster img { width: 100%; height: 100%; object-fit: cover; }
.detail-desc { white-space: pre-line; }
.detail-desc.expanded { max-height: none; }
.link-more { color: var(--text-muted); font-size: 13px; cursor: pointer; }
.link-more:hover { color: var(--accent); }
.other-lines { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.other-lines a {
  padding: 8px 16px; border-radius: var(--radius); font-size: 13px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-body);
}
.other-lines a:hover { border-color: var(--accent); color: var(--accent); }
.other-lines a.fast { border-color: #2bb673; }
.other-lines a .line-tag { margin-left: 0; margin-right: 6px; }

/* ---------- 播放页 ---------- */
.play-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.play-head h1 { font-size: 18px; color: var(--text); font-weight: 500; }
.play-head .play-sub { color: var(--text-muted); font-size: 13px; }
.play-head .spacer { flex: 1; }
.play-head select {
  height: 32px; background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-body); padding: 0 8px; outline: none;
}
.player-box { padding: 0; overflow: hidden; display: block; position: relative; }
.player-box .placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); }
.play-side h3 { font-size: 14px; color: var(--text); margin-bottom: 10px; font-weight: normal; }
.play-side .ep-list { max-height: 520px; }

/* ---------- 提示 ---------- */
#mh-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px);
  background: #2f2f2f; color: #fff; padding: 10px 20px; border-radius: var(--radius);
  border: 1px solid var(--border); font-size: 13px; opacity: 0; pointer-events: none;
  transition: all 0.25s; z-index: 9999;
}
#mh-toast.show { opacity: 1; transform: translate(-50%, 0); }
#mh-toast.error { border-color: #e04b3f; color: #ffb3ac; }
#mh-toast.ok { border-color: #4caf50; color: #b6e6b9; }

/* ---------- 设置页 · 扩展（v1.0.0） ---------- */
.settings-hint { color: var(--text-muted); font-size: 12px; line-height: 1.9; margin-top: 10px; }
.tvbox-box {
  width: 100%; min-height: 110px; padding: 10px 12px; resize: vertical;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-family: Consolas, "Courier New", monospace;
  font-size: 12px; line-height: 1.6; outline: none;
}
.tvbox-box:focus { border-color: var(--accent); }
.field-pwd {
  height: 34px; padding: 0 12px; min-width: 200px;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); outline: none;
}
.field-pwd:focus { border-color: var(--accent); }
.import-result {
  margin-top: 12px; font-size: 12px; max-height: 240px; overflow: auto;
  border: 1px solid var(--border); border-radius: 4px;
}
.import-result div { padding: 6px 10px; display: flex; gap: 10px; border-bottom: 1px solid #2c2c2c; }
.import-result div:last-child { border-bottom: none; }
.import-result .ok { color: #8fd694; flex: none; width: 74px; }
.import-result .bad { color: #e08b83; flex: none; width: 74px; }
.import-result .nm { color: var(--text-body); flex: none; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-result .ap { color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-box {
  background: #101010; border: 1px solid var(--border); border-radius: 4px; padding: 12px;
  color: #a8a8a8; font-family: Consolas, "Courier New", monospace;
  font-size: 11.5px; line-height: 1.7; max-height: 320px; overflow: auto;
  white-space: pre-wrap; word-break: break-all;
}
.import-result div span.ap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.settings-card input[type="file"] { color: var(--text-muted); font-size: 12px; }
.settings-card input[type="file"]::file-selector-button {
  background: var(--panel-hover); color: var(--text-body);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 12px; margin-right: 10px; cursor: pointer;
  font-family: inherit; font-size: 12px;
}
.settings-card input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 登录页 ---------- */
.login-page {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #262626 0%, #151515 62%);
}
.login-box {
  width: 340px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 34px 30px; text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.login-logo { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: 1px; margin-bottom: 6px; }
.login-logo em { color: var(--accent); font-style: normal; }
.login-tip { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
.login-box input {
  width: 100%; height: 40px; padding: 0 14px; font-size: 14px;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px;
  color: #fff; outline: none;
}
.login-box input:focus { border-color: var(--accent); }
.login-box button {
  width: 100%; height: 40px; margin-top: 12px; border: none; border-radius: 4px;
  background: var(--accent); color: #fff; font-size: 15px;
}
.login-box button:hover { opacity: 0.9; }
.login-box button:disabled { opacity: 0.6; cursor: default; }
.login-err { color: #ff9c92; font-size: 12px; min-height: 18px; margin-top: 10px; }
.login-foot { margin-top: 20px; color: #555; font-size: 11px; line-height: 1.7; }

/* ---------- 豆瓣榜单 / 线路测速（v1.2.0） ---------- */
.row-head .row-tag {
  display: inline-block; margin-left: 8px; padding: 1px 6px; vertical-align: 2px;
  font-size: 11px; font-weight: 400; color: #2bb673;
  border: 1px solid rgba(43, 182, 115, 0.45); border-radius: 3px;
}
.card-douban .card-note { background: rgba(43, 182, 115, 0.85); color: #fff; }

.line-spd { color: var(--text-muted); font-size: 12px; }
.line-chip.on .line-spd { color: rgba(255, 95, 51, 0.8); }
.line-chip.fast { border-color: #2bb673; }
.line-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  font-size: 11px; color: #2bb673; border: 1px solid rgba(43, 182, 115, 0.5); border-radius: 3px;
}

/* ---------- 观看历史（v1.3.0） ---------- */
.page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-title-row .page-title { margin-bottom: 0; }
.his-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px 12px;
}
.his-card { display: block; color: var(--text); }
.his-post { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 2/3; background: var(--panel-hover); }
.his-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.his-nopic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; }
.his-del {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.his-card:hover .his-del { opacity: 1; }
.his-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); }
.his-progress i { display: block; height: 100%; background: var(--accent); }
.his-pct {
  position: absolute; right: 6px; bottom: 8px;
  font-size: 11px; color: #fff; background: rgba(0,0,0,.55);
  padding: 1px 6px; border-radius: 4px;
}
.his-name {
  margin-top: 8px; font-size: 13px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.his-sub { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.his-card:hover .his-name { color: var(--accent); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  :root { --topbar-h: 108px; }
  .banner { height: 300px; }
  .banner-poster { display: none; }
  .banner-item .banner-info { padding: 24px 20px; }
  .banner-item .banner-name { font-size: 22px; }
  .topbar {
    height: auto; flex-wrap: wrap; align-items: center;
    padding: 10px 14px; gap: 8px 12px;
  }
  .topbar-logo { font-size: 19px; }
  .topbar-search { flex: 1 1 140px; justify-content: flex-end; min-width: 0; }
  .topbar-search input { width: auto; flex: 1 1 0; min-width: 0; height: 34px; }
  .doc-tools input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .doc-tools .doc-build { margin-left: 0; flex: 1 1 100%; }
  .topbar-search button { height: 34px; padding: 0 14px; white-space: nowrap; flex: none; }
  .topbar-nav {
    order: 3; flex: 1 0 100%; overflow-x: auto; white-space: nowrap;
    gap: 2px; padding-bottom: 2px;
  }
  .topbar-nav a { padding: 6px 10px; font-size: 14px; }
  .page { padding-left: 14px; padding-right: 14px; }
  .detail-hero { flex-direction: column; }
  .detail-poster { flex: none; width: 200px; height: 300px; }
  .play-wrap { flex-direction: column; }
  .play-side { flex: none; }
  .src-table { min-width: 660px; }
  .src-table th, .src-table td { white-space: nowrap; }
  .src-table td:nth-child(2) { min-width: 120px; }
  .settings-card { padding: 16px 14px; }
  .settings-row label { min-width: 76px; }
  .settings-row input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .field-pwd { min-width: 0; flex: 1 1 100%; }
}

/* ---------- 本地分片缓存（v1.6.0） ---------- */
.play-side .ep-list .ep-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px; border-radius: 4px;
}
.play-side .ep-list .ep-row.on { background: var(--accent-dim); }
.play-side .ep-list .ep-row .ep-name {
  flex: 1 1 auto; min-width: 0; margin-bottom: 0; padding: 9px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.play-side .ep-list .ep-row .ep-name:hover { background: var(--panel-hover); color: var(--text); }
.play-side .ep-list .ep-row.on .ep-name { color: var(--accent); background: transparent; }
.ep-ops { display: flex; align-items: center; gap: 4px; flex: none; padding-right: 4px; }
.ep-cache, .ep-play-local {
  height: 24px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-deep); color: var(--text-muted); font-size: 11px;
  line-height: 1; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.ep-cache { min-width: 72px; padding: 0 6px; }
.ep-play-local { width: 26px; padding: 0; }
.ep-cache:hover:not(:disabled), .ep-play-local:hover { border-color: var(--accent); color: var(--accent); }
.ep-cache:disabled { opacity: .9; cursor: default; }
.ep-cache.running { color: #ffb26b; border-color: rgba(255,178,107,.45); }
.ep-cache.ready { color: #8fd694; border-color: rgba(143,214,148,.45); }
.ep-cache.error { color: #ff9a90; border-color: rgba(255,154,144,.45); }
.ep-play-local.on { color: var(--accent); border-color: var(--accent); }
#p-cache-state.local { color: #8fd694; }
.topbar-nav a.nav-cache { padding: 6px 10px; font-size: 13px; color: var(--text-muted); }
.topbar-nav a.nav-cache:hover { color: var(--accent); }
.cache-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.cache-item .nm { flex: 1 1 190px; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cache-item .st { color: var(--text-muted); min-width: 120px; }
.cache-item .sz { color: var(--text-muted); min-width: 78px; }
.cache-item button {
  padding: 4px 10px; font-size: 12px; border-radius: 4px;
  background: transparent; border: 1px solid var(--border); color: var(--text-body); cursor: pointer;
}
.cache-item button:hover { border-color: var(--accent); color: var(--accent); }
.cache-bar { width: 100px; height: 4px; flex: none; background: var(--bg-deep); border-radius: 2px; overflow: hidden; }
.cache-bar i { display: block; height: 100%; background: var(--accent); }
.cache-empty { color: var(--text-muted); font-size: 13px; padding: 12px; }
.cache-num { width: 74px; height: 34px; padding: 0 10px; background: var(--bg-deep);
  border: 1px solid var(--border); border-radius: 4px; color: var(--text); outline: none; }
.cache-num:focus { border-color: var(--accent); }

/* ---------- v1.7.0：每集 MP4 下载按钮 ---------- */
.ep-grid .ep-cell {
  display: inline-flex; align-items: stretch; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-body); font-size: 13px; transition: all 0.2s;
}
.ep-grid .ep-cell:hover { background: var(--panel-hover); color: var(--text); }
.ep-grid .ep-cell.on { background: var(--accent); border-color: var(--accent); }
.ep-grid .ep-link {
  min-width: 72px; text-align: center; padding: 10px 12px;
  color: inherit; background: transparent; border: 0; display: block;
}
.ep-grid a.ep-link:hover { background: transparent; color: inherit; }
.ep-grid .ep-link.on, .ep-grid .ep-cell.on .ep-link,
.ep-grid .ep-cell.on a.ep-link:hover { background: transparent; color: #fff; }
.ep-grid .ep-dl {
  width: 30px; min-height: 36px; padding: 0;
  border: 0; border-left: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 13px;
  line-height: 1; cursor: pointer; font-family: inherit;
}
.ep-grid .ep-cell.on .ep-dl { border-left-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .85); }
.ep-grid .ep-dl:hover { color: var(--accent); background: rgba(255, 95, 51, .10); }
button.ep-dl {
  height: 24px; min-width: 26px; padding: 0 5px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-deep); color: var(--text-muted);
  font-size: 11px; line-height: 1; cursor: pointer; white-space: nowrap; font-family: inherit;
}
button.ep-dl:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button.ep-dl:disabled { opacity: .9; cursor: default; }
button.ep-dl.busy { color: #ffb26b; border-color: rgba(255, 178, 107, .45); }
button.ep-dl.done { color: #8fd694; border-color: rgba(143, 214, 148, .45); }
button.ep-dl.fail { color: #ff9a90; border-color: rgba(255, 154, 144, .45); }

/* ---------- v1.7.0：缓存与下载列表页 ---------- */
.cl-subtitle { font-size: 13px; color: var(--text-muted); font-weight: normal; margin-left: 12px; }
.cl-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cl-stat { flex: 1 1 180px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.cl-stat-name { color: var(--text-muted); font-size: 12px; }
.cl-stat-val { color: var(--text); font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.cl-stat-sub { color: var(--text-muted); font-size: 12px; }
.cl-tabs { display: flex; align-items: center; gap: 8px; margin: 18px 0 14px; flex-wrap: wrap; }
.cl-tabs button {
  padding: 7px 16px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--border); color: var(--text-body); font-size: 13px; font-family: inherit; cursor: pointer;
}
.cl-tabs button.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.cl-tip { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.cl-section { margin-bottom: 28px; }
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.cl-head h2 { font-size: 17px; color: var(--text); }
.cl-head h2 small { font-size: 12px; color: var(--text-muted); font-weight: normal; margin-left: 8px; }
.cl-actions { display: flex; gap: 8px; }
.cl-actions button, .cl-ops .cl-btn {
  padding: 5px 10px; font-size: 12px; border-radius: 4px; background: var(--bg-deep);
  border: 1px solid var(--border); color: var(--text-body); cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.cl-actions button:hover, .cl-ops .cl-btn:hover { border-color: var(--accent); color: var(--accent); }
.cl-ops .cl-btn.play { color: var(--accent); border-color: rgba(255, 95, 51, .45); }
.cl-ff { font-size: 12px; color: #8fd694; }
.cl-ff.bad { color: #ff9a90; }
.cl-dlset { margin-bottom: 6px; }
.table-scroll { overflow-x: auto; }
.cl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cl-table th, .cl-table td {
  padding: 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top;
}
.cl-table th { color: var(--text-muted); font-weight: normal; white-space: nowrap; }
.cl-table td { color: var(--text-body); }
.cl-name {
  color: var(--text); font-size: 13px; display: block; max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-name:hover { color: var(--accent); }
.cl-url {
  display: block; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #8ab4f8; font-family: Consolas, "Courier New", monospace; font-size: 11px;
}
.cl-url:hover { text-decoration: underline; }
.cl-mini {
  color: var(--text-muted); font-size: 11px; margin-top: 3px;
  line-height: 1.4; word-break: break-all; max-width: 330px;
}
.cl-mini a { color: var(--text-muted); text-decoration: underline; }
.cl-copy {
  background: none; border: 0; color: var(--text-muted); font-size: 11px;
  cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit;
}
.cl-copy:hover { color: var(--accent); }
.cl-src { color: var(--text-body); font-size: 12px; }
.cl-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; border: 1px solid var(--border);
}
.cl-badge.active { color: #ffb26b; border-color: rgba(255, 178, 107, .45); }
.cl-badge.ready { color: #8fd694; border-color: rgba(143, 214, 148, .45); }
.cl-badge.error { color: #ff9a90; border-color: rgba(255, 154, 144, .45); }
.cl-bar { display: block; width: 120px; height: 4px; background: var(--bg-deep); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.cl-bar i { display: block; height: 100%; background: var(--accent); }
.cl-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-empty { text-align: center !important; color: var(--text-muted) !important; padding: 24px !important; }
@media (max-width: 900px) {
  .cl-table { min-width: 900px; }
  .cl-tip { width: 100%; margin-left: 0; }
}

/* ============================================================
   电影分类页（/movies）：分类树瓷砖 + 逐级下钻
   ============================================================ */
.cats {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.cat-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 12px; }
.cpath-link { color: var(--text-muted); }
.cpath-link:hover { color: var(--accent); }
.cpath-sep { color: #555; }
.cpath-cur { color: var(--text); font-weight: 600; }
.cat-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-tile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-deep); color: var(--text-body); font-size: 13px;
  transition: border-color .15s, background .15s, color .15s;
}
.cat-tile:hover { border-color: var(--accent); background: var(--panel-hover); color: var(--text); }
.cat-tile.on { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.cat-count { font-size: 11px; color: var(--text-muted); }
.cat-tile.on .cat-count { color: var(--accent); }
.cat-arrow { color: #666; font-size: 14px; line-height: 1; }
.cat-leaf-note { color: var(--text-muted); font-size: 13px; padding: 4px 0; }
.cat-more { margin-top: 10px; }
.cat-more-btn {
  background: none; border: 1px dashed var(--border); color: var(--text-muted);
  font-size: 12px; padding: 4px 10px; border-radius: 12px; font-family: inherit;
}
.cat-more-btn:hover { color: var(--text-body); border-color: var(--text-muted); }
.cat-tiles-small { margin-top: 8px; }
.cat-tiles-small .cat-tile { font-size: 12px; padding: 4px 10px; }
/* 注意：.cat-tiles 的 display:flex 会盖掉 [hidden] 的 UA 默认 display:none，
   所以折叠区必须显式声明，否则「隐藏」只是属性上的，页面上照样铺开 */
.cat-tiles[hidden], .cat-more[hidden] { display: none; }
.cat-note { color: var(--text-muted); font-size: 12px; margin-bottom: 12px; line-height: 1.6; }

/* 分面行：普通 filter-bar 是横向流式，分类页要「一行一维」 */
.filter-bar .fk { flex: 1 1 100%; display: flex; gap: 6px; align-items: flex-start; }
.filter-bar .fk .fl { flex: none; }
.filter-bar .f-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-bar .cnt { opacity: .55; margin-left: 4px; font-size: 11px; }

/* ============================================================
   H5 自适应增强（v1.9.5）：纯 CSS 路线，桌面端默认样式零改动。
   仅在媒体查询块内覆盖；顺序位于既有 900px 断点之后，同特异性下后定义胜出。
   ============================================================ */
/* 触屏体验：禁止双击缩放误触、去除点击高亮、锁纵向回弹 */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }

@media (max-width: 768px) {
  :root { --topbar-h: 56px; }
  .topbar {
    height: auto; gap: 8px 10px; padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  .topbar-logo { font-size: 18px; }
  .topbar-nav {
    order: initial; flex: 0 1 auto; overflow-x: auto; white-space: nowrap;
    gap: 2px; padding-bottom: 2px; -webkit-overflow-scrolling: touch;
  }
  .topbar-nav a { padding: 6px 10px; font-size: 14px; }
  .topbar-search { flex: 1 1 auto; min-width: 0; }
  .topbar-search input { width: 100%; }
  .page { padding: calc(var(--topbar-h) + 12px) 12px 40px; }
  /* 播放器：竖排下列向 flex:1 会拉伸变形，显式锁定 16:9 全宽 */
  .player-box { width: 100%; flex: none; aspect-ratio: 16 / 9; }
  .play-side .ep-list { max-height: 360px; }
  .banner { height: 220px; }
  .banner-item .banner-info {
    padding: 18px 16px;
    background: linear-gradient(90deg, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.55) 68%, transparent 100%);
  }
  .banner-item .banner-name { font-size: 19px; }
  .banner-item .banner-desc { -webkit-line-clamp: 2; }
  .detail-poster { width: 150px; height: 225px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px 10px; }
  .ep-grid a { min-width: 64px; padding: 9px 10px; }
  .footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  #mh-toast { bottom: calc(40px + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .topbar { padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); gap: 6px 8px; }
  .topbar-search input { height: 34px; }
  .topbar-search button { padding: 0 12px; }
  .page { padding: calc(var(--topbar-h) + 8px) 10px 36px; }
  .banner { height: 180px; }
  .banner-item .banner-name { font-size: 17px; }
  .detail-hero { gap: 16px; }
  .detail-poster { width: 120px; height: 180px; }
  .detail-info h1 { font-size: 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px 8px; }
  .row-head h2 { font-size: 16px; }
  .play-side .ep-list { max-height: 300px; }
  .settings-card { padding: 14px 12px; }
  .cl-stat { flex: 1 1 140px; }
  .pager a, .pager span { min-width: 32px; padding: 0 8px; }
}