/* 海外短剧工具 · 界面样式 */

/* ═══════════════════════════════════════════════════════════════════
   配色：两套主题（浅色为默认；切深色靠给 <html> 加 .dark）

   ⚠️ 所有颜色**必须走变量** —— 写死的色值切主题时会"漏"出来。
   ⚠️ 每一项都过了 WCAG 对比度（正文 ≥4.5:1、纯装饰 ≥3:1），由
      `cloud/tools/verify_theme.py` 自动校验 —— **改配色后必跑**。
   📌 色值不是随手挑的：保留原有色相/饱和度、只调明度，"反解"出刚好
      达标的那个值。所以观感还是同一个红/绿/蓝，只是能看清了。
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* —— 浅色（默认）—— */
  --bg: #f4f6f9;          /* 页面底：极浅冷灰 */
  --panel: #ffffff;       /* 卡片/顶栏：纯白（层次靠"页面灰、卡片白"） */
  --panel2: #f7f8fb;      /* 次级面：hover、输入框内 */
  --panel3: #eef1f5;      /* 三级面：按钮 hover、小标签底 */
  --line: #e4e8ef;        /* 细边框 */
  --line2: #d3d9e3;       /* 强调边框 */
  --text: #1c2430;        /* 主文字 15.6:1 */
  --dim: #586171;         /* 次要文字 5.5:1（按最暗的面 panel3 算） */
  --dim2: #646d7c;        /* 提示/占位 4.6:1（改前是 3.7 → 看不清） */
  --accent: #d8232f;      /* 品牌红，白字在其上 5.0:1（改前 3.24） */
  --accent2: #be1f29;     /* 红的深版（hover）6.1:1 */
  --on-accent: #ffffff;   /* ⭐ 落在主色底上的文字色（浅色=白字） */
  --accent-soft: rgba(216, 35, 47, .08);    /* 主色的浅底（选中行背景） */
  --accent-edge: rgba(216, 35, 47, .35);    /* 主色的半透明描边 */
  --blue: #236cd8;
  --ok: #1a7f44;
  --warn: #9e6208;
  --bad: #7d8798;
  --radius: 10px;
}

/* —— 深色（可选）—— 切到深色时给 <html> 加 .dark
   ⚠️ 挂在 <html> 上、不是 <body>：`<head>` 里那段"防闪烁"脚本必须在**首屏渲染前**
      就把 class 加上，而那一刻 `<body>` 还不存在（只能操作 documentElement）。
   ⚠️ 注意 `--on-accent` 在深色下是**深色字**、不是白字：
      同一个红不可能同时满足「白字在其上达标」（要求红够暗）和
      「它本身作为文字在深底上达标」（要求红够亮）—— 两个方向相反。
      所以深色走「亮红底 + 深字」，浅色走「深红底 + 白字」，两边都达标。 */
html.dark {
  --bg: #0e1116;
  --panel: #161a22;
  --panel2: #1c212b;
  --panel3: #232936;
  --line: #2a3140;
  --line2: #353d4d;
  --text: #e9ecf1;
  --dim: #939cab;
  --dim2: #8a92a0;        /* 原来 #6b7484 在 panel3 上只有 3.09:1 → 提亮到达标 */
  --accent: #ff4d5e;      /* 保持原品牌红（作为文字在深底上 5.4:1） */
  --accent2: #ff7a86;
  --on-accent: #0e1116;   /* ⭐ 深色下按钮文字用深色（5.3:1） */
  --accent-soft: rgba(255, 77, 94, .14);    /* 深色下红底可以更明显一点 */
  --accent-edge: rgba(255, 77, 94, .40);
  --blue: #4b8dff;
  --ok: #35c76a;
  --warn: #f5a524;
  --bad: #6b7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 "Microsoft YaHei", "PingFang SC", -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; font-size: inherit; }

/* ═══════════ 顶部导航 ═══════════ */

.topbar {
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px; height: 58px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}

.brand {
  font-size: 16px; font-weight: 700; letter-spacing: .3px;
  white-space: nowrap; flex-shrink: 0;
}
.brand::before {
  content: ""; display: inline-block;
  width: 8px; height: 18px; margin-right: 9px;
  background: var(--accent); border-radius: 2px; vertical-align: -3px;
}

.mainnav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }

.navbtn {
  padding: 8px 15px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dim);
  cursor: pointer; white-space: nowrap;
  font-size: 13.5px; font-weight: 500;
  transition: background .12s, color .12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.navbtn:hover { background: var(--panel2); color: var(--text); }
.navbtn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.navbtn.active .pill { background: rgba(255,255,255,.28); color: var(--on-accent); }

.pill {
  display: inline-block; min-width: 18px; padding: 0 6px;
  border-radius: 9px; background: var(--panel3);
  font-size: 11px; line-height: 17px; text-align: center;
}

.meta { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.badge {
  padding: 3px 10px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--dim);
  font-family: ui-monospace, Consolas, monospace;
  white-space: nowrap;
}
.badge.ok   { color: var(--ok);   border-color: rgba(53,199,106,.4); }
.badge.bad  { color: var(--accent); border-color: var(--accent-edge); }
.badge.warn { color: var(--warn); border-color: rgba(245,165,36,.4); }

.acct {
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  background: var(--panel3); color: var(--text);
  border: 1px solid var(--line2); font-size: 13px;
}
.acct:hover { border-color: var(--accent); color: var(--accent2); }

/* ⭐ 主题切换按钮（2026-09-24）
   图标完全靠 CSS 切（由 html.dark 决定显示太阳还是月亮），JS 只负责加/去 class。
   图标用 currentColor 继承按钮颜色 —— 别写死色值，否则切主题会"漏"。 */
.themebtn {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel3); color: var(--dim);
  border: 1px solid var(--line2); cursor: pointer;
  transition: color .12s, border-color .12s;
}
.themebtn:hover { color: var(--accent); border-color: var(--accent); }
.themebtn .ticon { display: none; }
.themebtn .ticon.moon { display: block; }             /* 浅色 → 月亮（点一下变深色） */
html.dark .themebtn .ticon.moon { display: none; }
html.dark .themebtn .ticon.sun  { display: block; }   /* 深色 → 太阳（点一下变浅色） */

/* ⭐ 顶栏快捷按钮（2026-09-21）：登录后才出现 —— 一个「续费」一个「兑换」
   ⚠️ 显隐用的是现有的 `.hidden { display:none !important }`，这里不用再写一遍 */
.quick { display: inline-flex; align-items: center; gap: 6px; }

.qbtn {
  padding: 6px 13px; border-radius: 8px; cursor: pointer;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line2); font-size: 12.5px;
  white-space: nowrap;
  /* 「续费」是 <a target="_blank">（原生导航，不受弹窗拦截）—— 所以要按按钮的样子打扮 */
  display: inline-block; text-decoration: none; line-height: 1.4;
}
.qbtn:hover { border-color: var(--dim2); }
.qbtn.primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 600;
}
.qbtn.primary:hover { background: var(--accent2); border-color: var(--accent2); }

/* 窄屏别把导航挤没了（顶栏本来就靠 mainnav 横向滚动顶着） */
@media (max-width: 860px) {
  .qbtn { padding: 5px 9px; font-size: 12px; }
}

/* ═══════════ 面板 ═══════════ */

main { padding: 22px; max-width: 1180px; margin: 0 auto; }

.panel { display: none; }
.panel.active { display: block; }

.panelhead { margin-bottom: 18px; }
.panelhead h1 { margin: 0 0 4px; font-size: 20px; }
.sub { margin: 0; color: var(--dim); font-size: 13.5px; }
.tiny { color: var(--dim2); font-size: 12px; }

/* ═══════════ 按钮/输入 ═══════════ */

.btn {
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line);
  font-size: 13.5px; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--panel3); border-color: var(--line2); }
.btn.primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 600;
}
.btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }
.btn.tiny { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

input[type=text], select {
  padding: 9px 12px; border-radius: 8px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line);
  outline: none;
}
input[type=text]:focus, select:focus { border-color: var(--accent); }
input[type=text]::placeholder { color: var(--dim2); }

/* ═══════════ 发现页 ═══════════ */

.platgrid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.platcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px;
  cursor: pointer; transition: border-color .15s, transform .1s;
  display: flex; flex-direction: column; gap: 7px;
}
.platcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.platcard.off { opacity: .45; cursor: not-allowed; }
.platcard.off:hover { border-color: var(--line); transform: none; }

.platcard .pname { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 7px; }
.platcard .pnote { color: var(--dim2); font-size: 12px; min-height: 19px; }
.platcard .pfoot { display: flex; justify-content: space-between; align-items: center; }

/* 平台中文名（跟在英文名旁边，帮助国内用户识别） */
.pzh { font-size: 12px; color: var(--dim2); font-weight: 400; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.ok { background: var(--ok); }
.dot.degraded { background: var(--warn); }
.dot.down { background: var(--bad); }

.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--panel3); color: var(--dim);
}
.tag.free { color: var(--ok); }
.tag.slow { color: var(--warn); }

/* 列表「平台」列：英文名一行 + 中文名一行（列宽只有 130px，横排会溢出） */
.tag.plat {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: 3px 8px; line-height: 1.3;
}
.tag.plat .pen { font-size: 11.5px; }
.tag.plat .pzh { font-size: 10.5px; color: var(--dim2); }

/* ═══════════ 搜索栏 ═══════════ */

.searchbar { display: flex; gap: 10px; margin-bottom: 12px; }
.searchbar input { flex: 1; }
.searchbar select { min-width: 150px; }

.toolrow {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.toolrow .lbl { color: var(--dim); font-size: 13px; }
.toolrow .lbl b { color: var(--accent); }
.grow { flex: 1; }
.hint { color: var(--dim2); font-size: 12.5px; }

/* ═══════════ 列表 ═══════════ */

.listwrap {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}

.listhead, .listrow {
  display: grid;
  grid-template-columns: 42px 46px 1fr 130px 74px 178px;
  align-items: center; gap: 8px;
  padding: 0 14px;
}

.listhead {
  height: 42px; background: var(--panel2);
  border-bottom: 1px solid var(--line);
  color: var(--dim); font-size: 12.5px; font-weight: 600;
}

.listrow {
  min-height: 58px; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.listrow:last-child { border-bottom: 0; }
.listrow:hover { background: var(--panel2); }
.listrow.sel { background: var(--accent-soft); }

.c-idx { color: var(--dim2); font-family: ui-monospace, monospace; font-size: 12px; }
.c-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-eps { color: var(--dim); font-size: 12.5px; }
.c-act { display: flex; gap: 6px; justify-content: flex-end; }

.ttl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.thumb {
  width: 34px; height: 46px; border-radius: 5px; object-fit: cover;
  background: var(--panel3); flex-shrink: 0;
}
.ttl .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.chk { display: flex; justify-content: center; }

.empty {
  padding: 46px 20px; text-align: center;
  color: var(--dim2); font-size: 13.5px; line-height: 1.9;
}

/* ═══════════ 卡片网格（剧库） ═══════════ */

.cardgrid {
  display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.dcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: border-color .15s, transform .1s;
  display: flex; flex-direction: column;
  position: relative;                 /* 批次 3：「加清单」按钮要浮在右下角 */
}
.dcard:hover { border-color: var(--accent); transform: translateY(-2px); }

/* 剧库卡片上的「加清单」：平时隐着（卡片本身是整块可点的详情入口），
   鼠标移上去才露出来 —— 想一次加好几部的时候非常顺手 */
.dcard .dadd {
  position: absolute; right: 8px; bottom: 9px;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.dcard:hover .dadd { opacity: 1; pointer-events: auto; }

.dcard .cover {
  aspect-ratio: 3/4; background: var(--panel3);
  object-fit: cover; width: 100%; display: block;
}

/* ── 封面加载体验 ──────────────────────────────────────────
   封面来自第三方图床，国内加载偏慢。直接显示「一块暗色空格」会让人以为
   图挂了。这里换个思路：**图片没加载出来时，显示的是 img 自己的背景** ——
   所以把缓慢流动的微光画在这个背景上，就自然表达了「正在加载」；
   图片一加载出来就会盖住背景，动画也同时停掉（JS 会加 .loaded）。
   顺带淡入一下，避免生硬地「啪」一下出现。 */
img.cover, img.thumb {
  opacity: 0;
  transition: opacity .28s ease;
  background-color: var(--panel3);
  background-image: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, .07) 50%,
      rgba(255, 255, 255, 0) 70%);
  background-size: 220% 100%;
  animation: covshim 1.6s linear infinite;
}
img.cover.loaded, img.thumb.loaded {
  opacity: 1;
  background-image: none;
  animation: none;
}
@keyframes covshim {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}
.dcard .body { padding: 9px 10px 11px; }
.dcard .dtitle {
  font-size: 13px; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 38px;
}
.dcard .dmeta {
  margin-top: 6px; display: flex; justify-content: space-between;
  color: var(--dim2); font-size: 11.5px;
}
/* 剧库卡片的「平台 · 语言」小标 */
.dcard .dfrom {
  margin-top: 5px; color: var(--dim2); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 剧库翻页 */
.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 16px;
}
.pager .pinfo { color: var(--dim); font-size: 13px; min-width: 130px; text-align: center; }
.pager .btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ═══════════ 设置页 ═══════════ */

.setgrid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.setcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.setcard h3 {
  margin: 0 0 12px; font-size: 14px; color: var(--text);
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.setcard .tiny { margin: 12px 0 0; line-height: 1.8; }

.srow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.srow:last-of-type { border-bottom: 0; }
.srow > span { color: var(--dim); flex-shrink: 0; }
.srow code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; color: var(--text);
  background: var(--panel2); padding: 2px 8px; border-radius: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 62%;
}
.setcard .btn { margin-top: 10px; }

.platlist { display: flex; flex-direction: column; gap: 7px; }
.pitem {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; padding: 4px 0;
}
.pitem .pn { display: flex; align-items: center; gap: 8px; }
.pitem .pv { color: var(--dim2); font-size: 12px; }

/* ═══════════ 浮层 ═══════════ */

.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
}
.modalbox {
  background: var(--panel); border: 1px solid var(--line2);
  border-radius: 13px; width: 100%; max-width: 760px;
  max-height: 78vh; display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.modalhead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.modalhead h2 { margin: 0; font-size: 15px; }
.modalbody { padding: 16px 18px; overflow: auto; }

.urlrow {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 9px;
}
.urlrow .uhead {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--dim); margin-bottom: 6px;
}
.urow { display: flex; gap: 10px; align-items: flex-start; }
.urlrow .uurl {
  flex: 1; min-width: 0;
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  color: var(--blue); word-break: break-all; line-height: 1.75;
  background: rgba(75,141,255,.07); border-radius: 6px; padding: 6px 9px;
}
.urow .btn { flex-shrink: 0; }

/* ═══════════ 选集（详情浮层里） ═══════════ */

.epbox {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px;
}
.epbox .ephead {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--dim); margin-bottom: 9px;
}
.epbox .ephead b { color: var(--accent); }
.epbox .ephead .btn:first-of-type { margin-left: auto; }

.epgrid {
  display: grid; gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  max-height: 168px; overflow: auto;
}
.epitem {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 5px 2px;
  background: var(--panel3); border: 1px solid transparent;
  border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--dim);
  user-select: none; transition: background .12s, color .12s;
}
.epitem:hover { background: var(--panel2); }
.epitem input { display: none; }
.epitem:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent); color: var(--text); font-weight: 600;
}
/* 平台没开放的集：看得见、点不了 —— 让用户一眼知道「一共多少集、能下到第几集」 */
.epitem.off { opacity: .32; cursor: not-allowed; background: var(--panel2); }
.epitem.off:hover { background: var(--panel2); }

/* ═══════════ 下载任务 ═══════════ */

.tasklist { display: flex; flex-direction: column; gap: 10px; }

.taskrow {
  display: grid;
  grid-template-columns: 1fr 250px 250px;
  gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.taskrow .tinfo { min-width: 0; }
.taskrow .ttl {
  font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.taskrow .tmeta { color: var(--dim2); font-size: 12px; margin-top: 5px; }
.taskrow .tprog .pbar {
  height: 6px; border-radius: 999px; background: var(--panel3);
  overflow: hidden;
}
.taskrow .tprog .pbar i {
  display: block; height: 100%; background: var(--accent);
  transition: width .3s;
}
.taskrow .tprog .ptext { color: var(--dim); font-size: 11.5px; margin-top: 6px; }
.taskrow .tact { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 940px) {
  .taskrow { grid-template-columns: 1fr; }
  .taskrow .tact { justify-content: flex-start; }
}

/* 本机下载引擎未连接时的常驻提示条（连上后自动消失） */
.engbar {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 20px 0; padding: 9px 14px;
  background: rgba(245, 165, 36, .09);
  border: 1px solid rgba(245, 165, 36, .34);
  border-radius: var(--radius);
  font-size: 12.5px; color: var(--text); line-height: 1.75;
}
.engbar .engtxt { flex: 1; min-width: 0; }
/* 本体更新提示：蓝色系，与「引擎未连接」的橙区分开 */
.updbar {
  background: rgba(84, 148, 255, .10);
  border-color: rgba(84, 148, 255, .38);
}
.engbar .btn { flex-shrink: 0; }

/* ── 账号浮层（登录 / 注册 / 兑换码 / 我的账号）────────── */
.authfield { margin-bottom: 11px; }
.authfield span {
  display: block; color: var(--dim); font-size: 12px; margin-bottom: 5px;
}
.authfield input {
  width: 100%; padding: 9px 12px; border-radius: 9px; font-size: 13.5px;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--text);
  font-family: inherit;
}
.authfield input:focus { outline: none; border-color: var(--accent); }
.btn.wide { width: 100%; justify-content: center; }
.authmsg { color: var(--accent); font-size: 12.5px; min-height: 18px; margin: 9px 0 0; }
.authnote {
  color: var(--dim2); font-size: 12px; line-height: 1.9; margin: 13px 0 0;
}
.authnote a { color: var(--blue); cursor: pointer; }
.biginfo { text-align: center; padding: 4px 0 16px; }
.biginfo .num { font-size: 26px; font-weight: 700; letter-spacing: .4px; }
.biginfo .lbl { color: var(--dim); font-size: 12px; margin-top: 3px; }
.biginfo .em { color: var(--dim2); font-size: 12px; margin-top: 9px; }
.authrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.authrow:last-of-type { border-bottom: none; }
.authrow .k { color: var(--dim); }
.acct.on { border-color: rgba(53,199,106,.45); color: var(--ok); }

.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  padding: 11px 26px; border-radius: 999px; font-size: 13.5px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 200;
  max-width: 80vw; text-align: center;
}
.hidden { display: none !important; }

/* ═══════════ 滚动条 ═══════════ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line2); }

/* ═══════════ 待下载清单（批次 3） ═══════════ */

.listhead.watch, .listrow.watch {
  grid-template-columns: 42px 1fr 132px 118px 196px 212px;
}
.c-ready { color: var(--dim); font-size: 12.5px; white-space: nowrap; }
.c-state { font-size: 12.5px; line-height: 1.55; min-width: 0; }

/* 状态徽章：绿=已就绪 / 黄=部分 / 蓝=进行中 / 红=取不到 / 灰=无需预热 */
.wtag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--panel3); color: var(--dim);
  font-size: 12px; white-space: nowrap;
}
.wtag.ok   { background: rgba(53,199,106,.16); color: var(--ok); }
.wtag.warn { background: rgba(245,165,36,.16); color: var(--warn); }
.wtag.busy { background: rgba(75,141,255,.16); color: var(--blue); }
.wtag.bad  { background: var(--accent-soft);  color: var(--accent); }

/* 后台预热的开关：做成一个可点击的整块，而不是一个小勾选框 ——
   因为它是个"会占带宽和磁盘"的决定，值得被看清楚 */
.pfswitch {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 12px 0 2px; padding: 10px 12px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; line-height: 1.65;
}
.pfswitch input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.pfswitch:hover { border-color: var(--line2); }

@media (max-width: 860px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .mainnav { order: 3; width: 100%; }
  main { padding: 14px; }
  .listhead, .listrow { grid-template-columns: 36px 1fr 96px; }
  .c-idx, .c-eps { display: none; }
  .listhead.watch, .listrow.watch { grid-template-columns: 36px 1fr 150px; }
  .listhead.watch .c-plat, .listrow.watch .c-plat,
  .listhead.watch .c-ready, .listrow.watch .c-ready { display: none; }
}

/* ═══════════ 榜单（第二期，2026-09-24） ═══════════
   列表而不是卡片墙 —— 榜单要的是"扫一眼看清有哪些、哪个能秒下"：
   一屏 12 行 > 一屏 6 张卡片。封面在这里只是辅助认剧，34×46 够了。
   ⚠️ 颜色全部走变量（切主题必须自动跟着变）。 */

.rankcats {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 0 6px; margin-bottom: 10px;
  scrollbar-width: thin;
}
.chip {
  flex: 0 0 auto;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--dim);
  border: 1px solid var(--line); font-size: 12.5px;
  font-family: inherit; white-space: nowrap;
}
.chip:hover { border-color: var(--line2); color: var(--text); }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip b { margin-left: 6px; font-weight: 500; font-size: 11.5px; opacity: .7; }

.ranklist {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.rrow {
  display: grid;
  grid-template-columns: 40px 44px minmax(0, 1fr) 150px 158px;
  align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.rrow:last-child { border-bottom: 0; }
.rrow:hover { background: var(--accent-soft); }
/* 兜底段（标"刚入库"的那些）整行变淡 —— 让人一眼看出它不是真实下载榜 */
.rrow.fresh { opacity: .62; }
.rrow.fresh:hover { opacity: 1; }

.rno {
  font-size: 15px; font-weight: 600; text-align: center;
  color: var(--dim2); font-variant-numeric: tabular-nums;
}
.rno.top { color: var(--accent); font-size: 17px; }   /* 前三名高亮 */

.rcover {
  width: 34px; height: 46px; border-radius: 4px; display: block;
  object-fit: cover; background: var(--panel3);
}
.rcover.failed { visibility: hidden; }   /* 加载失败 → 留个灰块，不要破图 */

.rtitle { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rmeta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--dim2); }
.rplat { color: var(--dim); }

.rstat {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; font-size: 12px;
}
.rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); flex: 0 0 auto; }
.rdot.ok { background: var(--ok); }
.rdot.plain { background: var(--blue); }
.rtext { color: var(--dim2); white-space: nowrap; }
.rtext.ok { color: var(--ok); }

.rankgate { padding: 52px 20px; }

/* 窄屏：按优先级依次收掉，**名次 + 封面 + 标题永远保留** */
@media (max-width: 720px) {
  .rrow { grid-template-columns: 34px 40px minmax(0, 1fr) 96px 124px; }
  .reps { display: none; }              /* 先收「集数」 */
}
@media (max-width: 560px) {
  .rrow { grid-template-columns: 30px 40px minmax(0, 1fr) 28px; gap: 8px; }
  .rmeta { display: none; }             /* 再收「平台」（集数已在上一个断点收掉） */
  .rtext { display: none; }             /* 状态只留颜色点 */
  .rstat { justify-content: center; }
}

/* ═══════════ 榜单（第二期，2026-09-24） ═══════════
   列表而不是卡片墙 —— 榜单要的是"扫一眼看清有哪些、哪个能秒下"：
   一屏 12 行 > 一屏 6 张卡片。封面在这里只是辅助认剧，34×46 够了。
   ⚠️ 颜色全部走变量（切主题必须自动跟着变）。 */

.rankcats {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 0 6px; margin-bottom: 10px;
  scrollbar-width: thin;
}
.chip {
  flex: 0 0 auto;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--dim);
  border: 1px solid var(--line); font-size: 12.5px;
  font-family: inherit; white-space: nowrap;
}
.chip:hover { border-color: var(--line2); color: var(--text); }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip b { margin-left: 6px; font-weight: 500; font-size: 11.5px; opacity: .7; }

.ranklist {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.rrow {
  display: grid;
  grid-template-columns: 40px 44px minmax(0, 1fr) 150px 158px;
  align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.rrow:last-child { border-bottom: 0; }
.rrow:hover { background: var(--accent-soft); }
/* 兜底段（标"刚入库"的那些）整行变淡 —— 让人一眼看出它不是真实下载榜 */
.rrow.fresh { opacity: .62; }
.rrow.fresh:hover { opacity: 1; }

.rno {
  font-size: 15px; font-weight: 600; text-align: center;
  color: var(--dim2); font-variant-numeric: tabular-nums;
}
.rno.top { color: var(--accent); font-size: 17px; }   /* 前三名高亮 */

.rcover {
  width: 34px; height: 46px; border-radius: 4px; display: block;
  object-fit: cover; background: var(--panel3);
}
.rcover.failed { visibility: hidden; }   /* 加载失败 → 留个灰块，不要破图 */

.rtitle { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rmeta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--dim2); }
.rplat { color: var(--dim); }

.rstat {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; font-size: 12px;
}
.rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); flex: 0 0 auto; }
.rdot.ok { background: var(--ok); }
.rdot.plain { background: var(--blue); }
.rtext { color: var(--dim2); white-space: nowrap; }
.rtext.ok { color: var(--ok); }

.rankgate { padding: 52px 20px; }

/* 窄屏：按优先级依次收掉，**名次 + 封面 + 标题永远保留** */
@media (max-width: 720px) {
  .rrow { grid-template-columns: 34px 40px minmax(0, 1fr) 96px 124px; }
  .reps { display: none; }              /* 先收「集数」 */
}
@media (max-width: 560px) {
  .rrow { grid-template-columns: 30px 40px minmax(0, 1fr) 28px; gap: 8px; }
  .rmeta { display: none; }             /* 再收「平台」（集数已在上一个断点收掉） */
  .rtext { display: none; }             /* 状态只留颜色点 */
  .rstat { justify-content: center; }
}

/* ═══════════ 下载客户端（2026-09-24） ═══════════
   网页版不能直接下视频 → 这一页是"新用户怎么才能开始下载"的唯一入口。
   ⚠️ 颜色全部走变量（切主题必须自动跟着变）。 */

/* <a> 当按钮用（下载按钮必须是锚点：原生导航不受弹窗拦截） */
a.btn { display: inline-block; text-decoration: none; line-height: 1.4; text-align: center; }

.dlcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
  max-width: 720px;
}
.dlhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.dlname { font-size: 16px; font-weight: 600; }
.dlmeta { color: var(--dim); font-size: 12.5px; margin-top: 4px; }
.dlmeta b { color: var(--text); }

.dltools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 8px; }
.dlurl {
  color: var(--dim2); font-size: 11.5px; word-break: break-all;
  margin: 0 0 4px; opacity: .85;
}

.dlh3 {
  font-size: 13.5px; font-weight: 600; margin: 20px 0 8px;
  color: var(--text);
}
.dlsteps, .dlnotes {
  margin: 0; padding-left: 22px;
  color: var(--dim); font-size: 13px; line-height: 2;
}
.dlsteps li { color: var(--text); }
.dlnotes li { color: var(--dim); font-size: 12.5px; line-height: 1.95; }

@media (max-width: 620px) {
  .dlcard { padding: 16px 14px; }
  .dltools { flex-direction: column; align-items: stretch; }
  .dltools .btn { width: 100%; }
}

/* ═══════════ 下载客户端（2026-09-24） ═══════════
   网页版不能直接下视频 → 这一页是"新用户怎么才能开始下载"的唯一入口。
   ⚠️ 颜色全部走变量（切主题必须自动跟着变）。 */

/* <a> 当按钮用（下载按钮必须是锚点：原生导航不受弹窗拦截） */
a.btn { display: inline-block; text-decoration: none; line-height: 1.4; text-align: center; }

.dlcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
  max-width: 720px;
}
.dlhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.dlname { font-size: 16px; font-weight: 600; }
.dlmeta { color: var(--dim); font-size: 12.5px; margin-top: 4px; }
.dlmeta b { color: var(--text); }

.dltools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 8px; }
.dlurl {
  color: var(--dim2); font-size: 11.5px; word-break: break-all;
  margin: 0 0 4px; opacity: .85;
}

.dlh3 {
  font-size: 13.5px; font-weight: 600; margin: 20px 0 8px;
  color: var(--text);
}
.dlsteps, .dlnotes {
  margin: 0; padding-left: 22px;
  color: var(--dim); font-size: 13px; line-height: 2;
}
.dlsteps li { color: var(--text); }
.dlnotes li { color: var(--dim); font-size: 12.5px; line-height: 1.95; }

@media (max-width: 620px) {
  .dlcard { padding: 16px 14px; }
  .dltools { flex-direction: column; align-items: stretch; }
  .dltools .btn { width: 100%; }
}


/* ═══════════ 平台会员（VIP 绑定）卡片 ═══════════
 *
 * 配色全部走 CSS 变量，所以深浅色主题自动跟着变，不用写两套。
 * ⚠️ 状态**不能只靠颜色区分**（色觉障碍用户看不出红绿），
 *    每种状态都另有一行文字说明，颜色只是辅助。
 */
.vipstate {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; margin-bottom: 4px;
}
.vipstate .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vipstate.on   { color: var(--ok); }
.vipstate.on .dot { background: var(--ok); }
.vipstate.busy { color: var(--warn); }
.vipstate.busy .dot { background: var(--warn); animation: vippulse 1.2s ease-in-out infinite; }
.vipstate.off  { color: var(--dim2); }
.vipstate.off .dot { background: var(--dim2); }
.vipstate.bad  { color: var(--warn); }
.vipstate.bad .dot { background: var(--warn); }

@keyframes vippulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
/* 动效要尊重系统的"减少动效"设置 —— 前庭功能障碍的用户会因此头晕 */
@media (prefers-reduced-motion: reduce) {
  .vipstate.busy .dot { animation: none; }
}

/* 绑定中的进度条：确定进度会撒谎（我们不知道他登录到哪一步了），
   所以做成**不确定进度**的循环滚动，而不是假百分比。 */
.vipbar {
  height: 4px; border-radius: 3px; background: var(--panel2);
  overflow: hidden; margin: 8px 0 6px;
}
.vipbar > i {
  display: block; height: 100%; width: 38%; border-radius: 3px;
  background: var(--warn);
  animation: vipslide 1.6s ease-in-out infinite;
}
@keyframes vipslide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .vipbar > i { animation: none; width: 100%; opacity: .5; }
}

.vipmsg { font-size: 12px; color: var(--dim); line-height: 1.7; }
.vipmsg.err { color: var(--warn); }
.vipacts { display: flex; gap: 8px; flex-wrap: wrap; }
.vipacts .btn { margin-top: 10px; }
/* 换账号是破坏性操作（会把当前登录态清掉），不给主色，避免误点 */
.vipacts .btn.danger { color: var(--warn); border-color: var(--line2); }
.vipacts .btn.danger:hover { border-color: var(--warn); }