/* ============================================================
   剧集地图 · 全部样式
   ------------------------------------------------------------
   设计规范见 docs/03-设计规范.md

   ★ 想改配色，只改下面第一节的 CSS 变量就行。
     全文不许出现写死的颜色值（除了变量定义本身），
     这样暗色模式才能靠"只覆盖变量"生效。
   ============================================================ */

/* ============================================================
   1. 配色变量（明色）
   ============================================================ */
:root {
  /* 背景与表面 */
  --bg:            #F5F8FD;
  --surface:       #FFFFFF;
  --surface-2:     #EDF3FB;

  /* 主色（蓝）
     ⚠️ 这几个值不能随便往浅里调 —— 主色文字要压在 --primary-soft 上，
        实测最紧的一处只有 4.5 出头的余量。改了就跑 node tools/check-contrast.js */
  --primary:       #1A66D0;
  --primary-dark:  #1557B8;
  --primary-soft:  #E7F0FE;

  /* 文字与边线 */
  --text:          #0E1B2E;
  --text-muted:    #5A6B85;
  --border:        #D8E2F0;

  /* 画质标签：三层视觉层次 —— 实心 > 淡色描边 > 中性描边 */
  --tag-4k-bg:     #7A3FF2;   --tag-4k-fg:   #FFFFFF;
  --tag-4k-glow:   0 0 0 1px rgba(122, 63, 242, .35), 0 2px 10px rgba(122, 63, 242, .35);
  --tag-1080-bg:   #E7F0FE;   --tag-1080-fg: #1557B8;  --tag-1080-bd: #B9D2FB;
  --tag-720-bg:    #EEF1F6;   --tag-720-fg:  #4A5A72;  --tag-720-bd:  #D2DAE6;

  /* 会员状态标签 */
  --access-free-bg: #E4F7EA;  --access-free-fg: #0F7A3D;  --access-free-bd: #B6E6C6;
  --access-vip-bg:  #FDF1DC;  --access-vip-fg:  #8A5A00;  --access-vip-bd:  #F2D9A8;
  --access-ppv-bg:  #FDE7EA;  --access-ppv-fg:  #A32035;  --access-ppv-bd:  #F6C2CB;

  /* 置信度徽章 */
  --badge-high-bg: #E4F7EA;   --badge-high-fg: #0F7A3D;
  --badge-med-bg:  #EEF1F6;   --badge-med-fg:  #4A5A72;
  --badge-low-bg:  #FDF1DC;   --badge-low-fg:  #8A5A00;

  /* 提示条 */
  --danger-bg:     #FDE7EA;   --danger-fg:    #A32035;  --danger-bd: #F6C2CB;

  /* 其他 */
  --on-primary:    #FFFFFF;   /* 压在 --primary 上的文字颜色 */
  --on-brand:      #FFFFFF;   /* 压在【深色】平台品牌上的文字（徽章、首字块） */
  /* 压在【浅色】平台品牌上的文字。浅品牌色用白字看不清
     （搜狐视频只有 1.64:1，标准要 4.5:1），所以改用深色字。
     明暗两种模式都用这个值 —— 品牌色本身不随主题变，字色自然也不用变。 */
  --on-brand-light: #0E1B2E;
  --focus:         #1A66D0;
  --shadow:        0 1px 3px rgba(14, 27, 46, .06), 0 8px 24px rgba(29, 111, 224, .08);
  --radius:        12px;
}

/* ============================================================
   2. 配色变量（暗色）—— 只覆盖变量，不改任何规则
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0A101C;
    --surface:      #121B2C;
    --surface-2:    #1A2538;

    --primary:      #5492FF;
    --primary-dark: #2E6BE0;
    --primary-soft: #1B2A44;

    --text:         #E8EEF9;
    --text-muted:   #9BACC7;
    --border:       #26344D;

    --tag-4k-bg:    #6D34E0;  --tag-4k-fg: #FFFFFF;
    --tag-4k-glow:  0 0 0 1px rgba(122, 63, 242, .5), 0 2px 12px rgba(109, 52, 224, .5);
    --tag-1080-bg:  #17233A;  --tag-1080-fg: #93B8FB;  --tag-1080-bd: #2C4067;
    --tag-720-bg:   #1B2230;  --tag-720-fg:  #A7B4C9;  --tag-720-bd:  #2C3648;

    --access-free-bg: #12291C;  --access-free-fg: #63D68B;  --access-free-bd: #1F4430;
    --access-vip-bg:  #2A2213;  --access-vip-fg:  #EABC5F;  --access-vip-bd:  #4A3A1E;
    --access-ppv-bg:  #2C171B;  --access-ppv-fg:  #F0899B;  --access-ppv-bd:  #4E2830;

    --badge-high-bg: #12291C;  --badge-high-fg: #63D68B;
    --badge-med-bg:  #1B2230;  --badge-med-fg:  #A7B4C9;
    --badge-low-bg:  #2A2213;  --badge-low-fg:  #EABC5F;

    --danger-bg:    #2C171B;  --danger-fg: #F0899B;  --danger-bd: #4E2830;

    /* 暗色下主色是浅蓝，白字对比度不够，压在上面的文字要改成深色 */
    --on-primary:   #0A101C;
    --on-brand:     #FFFFFF;

    --focus:        #5492FF;
    --shadow:       0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

/* ============================================================
   3. 基础
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* 防止手机横屏时字号被自动放大 */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
               "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, p { margin: 0; }

/* 只在屏幕阅读器里朗读，视觉上不占位 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 焦点环：任何地方都不许 outline:none 而不给替代 */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

/* ============================================================
   4. 页头
   ============================================================ */
.site-head {
  margin-bottom: 22px;
}

.site-head__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3px;
}

.site-head__kicker {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 2px 8px;
  border-radius: 6px;
}

.site-head__desc {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

/* 数据可信度声明。放在页头最显眼处，但用弱化色，不靠颜色喊叫 ——
   要在字号和字重上区分，而不是染成红色警告。 */
.site-head__note {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.site-head__note strong {
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   5. 搜索区
   ============================================================ */
.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search__icon {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  pointer-events: none;
}

.search__input {
  width: 100%;
  height: 56px;
  padding: 0 48px 0 50px;
  font: inherit;
  font-size: 16px;            /* 16px 以下 iOS 会自动放大页面 */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .15s;
}

.search__input::placeholder { color: var(--text-muted); }

.search__input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--primary);
}

/* 去掉浏览器自带的那个小叉，我们自己画一个 */
.search__input::-webkit-search-decoration,
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search__clear {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* ============================================================
   ⚠️ 本文件里所有 :hover 都必须包在 @media (hover: hover) 里。
   ------------------------------------------------------------
   原因：iOS Safari 对带 :hover 的元素，**第一次点可能只触发 hover、
   第二次才触发 click** —— 用户看到的就是「点了没反应，要点两下」。
   触屏设备本来也没有"悬停"这回事，包起来只有好处。

   2026-10 用户在手机上报告"点加入我的数据没反应"，这是当时排查到的
   可能原因之一。新增 :hover 时记得照着这条写。
   ============================================================ */
@media (hover: hover) { .search__clear:hover { background: var(--surface-2); color: var(--text); } }
.search__clear[hidden] { display: none; }

/* 热门标签行 */
.chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.chip {
  padding: 4px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

@media (hover: hover) { .chip:hover { background: var(--primary); color: var(--on-primary); } }

/* 阶段 1 的临时提示，阶段 2 会删掉 */
.stage-note {
  margin-top: 14px;
  padding: 9px 13px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-left: 3px solid var(--primary);
  border-radius: 0 6px 6px 0;
}

/* ============================================================
   6. 结果区
   ============================================================ */
.results {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 上半部分：左图右文 */
.card__main {
  display: flex;
  gap: 14px;
  padding: 16px;
}

/* 首字色块（海报位）。2:3 比例 */
.poster {
  flex: 0 0 auto;
  width: 68px;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  /* 背景色由 JS 按标题哈希算出来，写在行内 style 上 */
}

.poster__char {
  font-size: 26px;
  font-weight: 700;
  color: var(--on-brand);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.card__info {
  min-width: 0;              /* 让长标题能正常省略而不是撑破布局 */
  flex: 1 1 auto;
}

.card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card__title {
  font-size: 18px;
  font-weight: 700;
}

.card__meta {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
}

.card__meta--genres { margin-top: 1px; }

.card__rating {
  color: var(--primary);
  font-weight: 600;
}

/* 评分更新于什么时候。过期的用琥珀色提醒该去核一下了。 */
.card__rated {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.card__rated--stale {
  padding: 1px 6px;
  font-weight: 600;
  color: var(--badge-low-fg);
  background: var(--badge-low-bg);
  border-radius: 4px;
}

/* ============================================================
   7.5 争议提示
   ------------------------------------------------------------
   有争议提示的作品不渲染平台行 —— 不显示在哪播、什么画质、
   也不给官网链接，只说明情况。
   提示文案来自数据里的 notice 字段，内容由维护数据的人填写。
   ============================================================ */
.show-notice {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.8;
  font-weight: 600;
  color: var(--badge-low-fg);
  background: var(--badge-low-bg);
  border-top: 1px solid var(--border);
}

/* 置信度徽章 */
.badge {
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  white-space: nowrap;
}

.badge--high { background: var(--badge-high-bg); color: var(--badge-high-fg); }
.badge--medium { background: var(--badge-med-bg); color: var(--badge-med-fg); }
.badge--low { background: var(--badge-low-bg); color: var(--badge-low-fg); }

/* ============================================================
   7. 平台行
   ============================================================ */
.offers {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: 10px 16px 12px;
}

/* 跨地区时的分组小标题 */
.offer-group + .offer-group { margin-top: 10px; }

.offer-group__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.offer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px 0;
}

/* 平台徽章：品牌色方块 + 白色首字 */
.pf-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  font-size: 14px;
  font-weight: 700;
  color: var(--on-brand);
  border-radius: 8px;
  /* 背景色由 JS 从 platforms.js 读出，写在行内 style 上 */
}

/* 黑色品牌（U-NEXT）加一圈描边，否则在白底上看不见 */
.pf-badge--dark { box-shadow: inset 0 0 0 1px var(--border); }

/* 浅色品牌改用深色字。由 app.js 按品牌色亮度自动加这个类。
   不加这个类就是白字（--on-brand）。 */
.pf-badge--light { color: var(--on-brand-light); }

.pf-name {
  font-size: 14px;
  font-weight: 600;
  margin-right: 2px;
}

/* 标签通用 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 6px;
}

/* 画质：三层视觉层次 —— 4K 实心最抢眼，1080p 淡蓝，720p 中性灰 */
.tag--4k {
  background: var(--tag-4k-bg);
  color: var(--tag-4k-fg);
  letter-spacing: .5px;
  box-shadow: var(--tag-4k-glow);
}

.tag--1080 {
  background: var(--tag-1080-bg);
  color: var(--tag-1080-fg);
  border-color: var(--tag-1080-bd);
}

.tag--720 {
  background: var(--tag-720-bg);
  color: var(--tag-720-fg);
  border-color: var(--tag-720-bd);
}

/* 会员状态：同款配方配暖色。永远带文字，不能只靠颜色区分 */
.tag--free { background: var(--access-free-bg); color: var(--access-free-fg); border-color: var(--access-free-bd); }
.tag--vip  { background: var(--access-vip-bg);  color: var(--access-vip-fg);  border-color: var(--access-vip-bd); }
.tag--ppv  { background: var(--access-ppv-bg);  color: var(--access-ppv-fg);  border-color: var(--access-ppv-bd); }

/* 官网入口 */
.pf-link {
  margin-left: auto;
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) { .pf-link:hover { text-decoration: underline; } }

/* offer 的补充说明 */
.offer__note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 36px;
}

/* 「中国大陆没有正规渠道」的提示。
   用琥珀色，是想让人注意到，但不像错误那样刺眼。 */
.offer-notice {
  margin-bottom: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--badge-low-fg);
  background: var(--badge-low-bg);
  border-radius: 6px;
  display: inline-block;
}

/* 这条作品一个平台都渲染不出来时的兜底文字 */
.offer-none {
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================================
   8. 空状态 / 无结果 / 错误提示 / 数据问题
   ============================================================ */
.empty {
  padding: 30px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.empty__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.empty__hint {
  margin-top: 6px;
  line-height: 1.7;
}

/* 相近建议的标签行 */
.suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}

/* 通用按钮 */
.btn {
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--ghost {
  margin-top: 16px;
  color: var(--primary);
  background: var(--primary-soft);
}

@media (hover: hover) { .btn--ghost:hover { background: var(--primary); color: var(--on-primary); } }

/* 首页底部的「展开全部」 */
.expand-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 13px;
  font-size: 14px;
}

/* 数据文件加载失败的红色提示条 */
.error-bar {
  margin-bottom: 18px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--danger-fg);
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
  border-radius: 10px;
}

/* 录入助手专用的「出错就摆在页面上」横幅。
   要原样保留换行，因为用户得把那段字念给我听。 */
.error-bar--fatal {
  white-space: pre-wrap;
  word-break: break-word;
}

/* 数据文件能读，但个别记录写错了 —— 列出具体问题 */
.problems {
  margin-bottom: 18px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--badge-low-fg);
  background: var(--badge-low-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* 录入助手的校验框 —— 故意比上面的 .problems 醒目。
   它是「点了按钮没反应」的唯一解释，必须一眼看到：
   换成危险色（而不是警示黄），字号从 13px 提到 14px。 */
.problems--validation {
  font-size: 14px;
  color: var(--danger-fg);
  background: var(--danger-bg);
  border-color: var(--danger-bd);
}

.problems__head {
  font-weight: 700;
  margin-bottom: 6px;
}

.problems__list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

/* ============================================================
   9. 页脚
   ============================================================ */
.site-foot {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-muted);
}

/* 免责声明和「加作品」入口里的关键词加粗一下，让它在一堆小字里能一眼看到。
   注意：不换颜色、只换字重 —— 这些都是常规内容，不该长成警告的样子。 */
.site-foot__disclaimer strong,
.site-foot__add strong,
.site-foot__help .help strong {
  font-weight: 600;
  color: var(--text);
}

.site-foot__add {
  margin-top: 8px;
}

/* 页脚里的链接。浏览器默认链接色是刺眼的纯蓝，统一换成主色。
   （主色文字 / 页面底色 的对比度 5.12:1，check-contrast.js 里已核过。） */
.site-foot a {
  color: var(--primary);
}

/* 「这是什么？数据准吗？」折叠块 —— 用原生 details，零 JS */
.site-foot__help {
  margin-top: 10px;
}

.site-foot__help summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
}

.site-foot__help .help {
  margin-top: 6px;
  font-size: 13px;
}

.site-foot__help .help p {
  margin: 6px 0;
}

/* ============================================================
   10. 响应式：窄屏改为小图在左、平台行整行铺满
   ============================================================ */
@media (max-width: 640px) {
  .wrap { padding: 20px 14px 44px; }

  .site-head__title { font-size: 20px; }

  /* 输入框降到 48px，但字号仍保持 16px 防止 iOS 放大 */
  .search__input { height: 48px; font-size: 16px; padding: 0 44px 0 44px; }
  .search__icon { left: 14px; width: 18px; height: 18px; }

  .card__main { padding: 14px; gap: 12px; }
  .poster { width: 58px; }
  .poster__char { font-size: 22px; }
  .card__title { font-size: 17px; }

  .offers { padding: 10px 14px 12px; }

  /* 官网链接不再挤在右边，改为单独占一行右对齐 */
  .pf-link { margin-left: auto; }

  .offer__note { padding-left: 0; }

  /* 表单：两列并排的字段在窄屏改成一列 */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-section { padding: 14px 12px; }
  .mode-switch { flex-direction: column; }
  /* 解析预览表列多，窄屏允许横向滚动，别把布局撑破 */
  #batch-preview-body { overflow-x: auto; }
  .batch-table { font-size: 12px; }
  .batch-table th, .batch-table td { padding: 6px; }
  .output-head { flex-direction: column; gap: 6px; }
  .btn { width: 100%; }
  .offer-block__del { width: auto; }
}

/* 更窄时进一步压缩，确保 360px 不出现横向滚动条 */
@media (max-width: 420px) {
  .poster { width: 52px; }
  .pf-name { font-size: 13px; }
  .offer { gap: 6px; }
}

/* ============================================================
   11. 表单控件
   ------------------------------------------------------------
   只有录入助手 tools/add-show.html 会用到。
   全部使用上面那套 CSS 变量，所以明暗模式自动跟着变。
   ============================================================ */

/* 顶部用法说明块 */
.notice {
  margin-bottom: 22px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text);
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
}

code {
  padding: 1px 5px;
  font-size: 13px;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  color: var(--primary-dark);
  background: var(--surface-2);
  border-radius: 4px;
}

.form-section {
  margin-bottom: 26px;
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-section__title {
  margin-bottom: 14px;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

.field { margin-bottom: 16px; }

.field__label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
}

.req {
  font-size: 11px;
  font-weight: 600;
  color: var(--access-ppv-fg);
  background: var(--access-ppv-bg);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.opt {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* ---------- 模式切换（单条 / 批量） ---------- */
.mode-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.mode-btn {
  flex: 1;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}

@media (hover: hover) { .mode-btn:hover { border-color: var(--primary); } }

.mode-btn.is-active {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--primary);
}

.mode-btn__hint {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

/* ---------- 批量录入的解析预览 ---------- */
.batch-summary {
  font-size: 14px;
  margin-bottom: 10px;
}

.batch-error, .batch-warn {
  margin-bottom: 10px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.7;
  border-radius: 8px;
}

.batch-error {
  color: var(--danger-fg);
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
}

.batch-warn {
  color: var(--badge-low-fg);
  background: var(--badge-low-bg);
  border: 1px solid var(--border);
}

.batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.batch-table th,
.batch-table td {
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.batch-table th {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.batch-table tr.row-error { background: var(--danger-bg); }

.dim { color: var(--text-muted); }

.miss {
  color: var(--danger-fg);
  font-size: 12px;
  margin-top: 2px;
}

.field__hint {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-muted);
}

.field__hint.warn {
  padding: 8px 10px;
  color: var(--access-vip-fg);
  background: var(--access-vip-bg);
  border-radius: 6px;
}

.input, .select, .textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 15px;          /* 16px 以下 iOS 会放大页面 */
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.textarea {
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
}

.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--primary);
}

/* 两列并排的字段 */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* 勾选框 / 单选按钮组 */
.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
}

.check input { width: 16px; height: 16px; }

/* 拼音 / 搜索键预览 */
.preview {
  margin-top: 9px;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--surface-2);
  border-radius: 8px;
}

.preview__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 3px 0;
}

.preview__k {
  flex: 0 0 62px;
  font-size: 12px;
  color: var(--text-muted);
}

.preview__tip {
  font-size: 12px;
  color: var(--text-muted);
}

.preview__err {
  margin-top: 6px;
  padding-top: 6px;
  font-size: 12px;
  color: var(--danger-fg);
  border-top: 1px solid var(--border);
}

/* 一个平台区块 */
.offer-block {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.offer-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.offer-block__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.offer-block__del {
  padding: 4px 12px;
  font-size: 12px;
  margin-top: 0;
}

/* 生成结果 */
.output-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.output {
  margin-top: 8px;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre;
}

.btn--primary {
  color: var(--on-primary);
  background: var(--primary);
}

/* ---------- 「你的数据」面板 ---------- */
.mydata-count {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 2px 9px;
  border-radius: 999px;
}

.mydata-list {
  margin-bottom: 16px;
  max-height: 340px;
  overflow-y: auto;
}

.mydata-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.mydata-row__title {
  font-weight: 600;
  flex: 0 0 auto;
}

.mydata-row__flag {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--badge-low-fg);
  background: var(--badge-low-bg);
  border-radius: 4px;
}

/* 「已并入」—— 这条已经写进 data/shows-my.js、网站上也有了。
   用和「有提示」同一套尺寸，只把配色换成达标绿，好一眼分出来。 */
.mydata-row__flag--ok {
  color: var(--badge-high-fg);
  background: var(--badge-high-bg);
}

.mydata-row__info {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mydata-row__btn {
  flex: 0 0 auto;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

@media (hover: hover) { .mydata-row__btn:hover { background: var(--primary); color: var(--on-primary); } }

.mydata-row__btn--del {
  color: var(--danger-fg);
  background: var(--danger-bg);
}

/* 暗色下 --danger-fg 是浅粉，白字只有 2.4:1，所以用 --on-primary
   （它在明色下是白、暗色下是深色，两边都够） */
@media (hover: hover) { .mydata-row__btn--del:hover { background: var(--danger-fg); color: var(--on-primary); } }

.mydata-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mydata-actions .btn { width: auto; margin-top: 0; }

.import-box {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.import-box .input { padding: 7px 10px; font-size: 13px; }

.import-error { color: var(--danger-fg); font-weight: 600; }

@media (hover: hover) { .btn--primary:hover { background: var(--primary-dark); } }

/* ============================================================
   12. 动效偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}