/* ============================================================================
   BakaNeko 用户端站点样式

   一个纯 CSS 的「无闪烁深色主题」做法：
     1. 语义 token（--bg / --surface / --text / …）定义在 :root
     2. 一套深色覆写放在 html[data-theme="dark"]
     3. <html> 上有一段内联脚本，在样式表加载前就把 data-theme 定好
   这样浏览器不会先画一帧亮的再切成暗的。脚本见 site/views.js。

   主题有三档：light / dark / auto（跟随系统）。默认 auto，
   用户点一下切换器之后就变成显式选择并记住。
   ============================================================================ */

/* ---- 浅色（默认）---- */
:root{
  /* 语义层：样式规则只引用这一层 */
  --bg:#FFF6EA;
  --surface:#FFFFFF;
  --surface-2:#FDF8F0;
  --text:#2F2A3D;
  --text-dim:#5F5870;
  --text-mute:#8A8296;
  --line:#E4DED2;
  --line-strong:#2F2A3D;
  /*
   * 描边色。**必须跟 --text 分开**。
   *
   * 原来很多地方写 `border:2px solid var(--outline)`，浅色下没问题（墨色描边）。
   * 但深色下 --text 必须变浅才能读，于是所有描边一起变成白边 —— 满屏白框。
   * 描边要的是「跟背景有对比的界线」，跟文字色是两个用途。
   */
  --outline:#2F2A3D;

  --accent:#F7A44F;
  --accent-dk:#E08B33;
  /*
   * 强调色的**可读版本** —— 用来当文字色或小面积实底。
   *
   * ⚠ 这个变量以前**根本没定义**，但被 10 多处引用 ——
   * 失效的 var() 会让整条声明变成无效值（不是回退到默认色），
   * 于是「Bangumi」徽章白字配白底直接看不见。
   * 凡是引用一个变量，就必须有地方定义它。
   */
  --accent-ink:#C97A22;
  --danger:#B3341F;

  /* 装饰色。深色下会降饱和，否则在暗底上刺眼 */
  --c-rose:#FF9FB4;
  --c-sky:#A6EBF8;
  --c-blush:#FFE3E9;
  --c-mint:#C8EFD8;
  --c-peach:#FFDCC0;
  --c-lav:#DCD3F7;
  /* 同样的问题：这是自引用，等于没定义。给个真的值 */
  --c-danger-soft:#F7D9D3;

  /* 海报占位渐变 */
  --poster-a:var(--c-blush);
  --poster-b:var(--c-lav);

  /*
   * 输入框聚焦环 + 半透明遮罩。
   *
   * ⚠ 这两行原来是 `--focus:var(--focus)` 这种**自引用** ——
   * 效果跟完全没定义一样（CSS 变量自引用是无效的），于是浅色主题下
   * 实际用的是别处继承来的值，改一处忘一处。现在给真实值。
   */
  --focus:#8FB8E0;
  /* 播放器消息层的遮罩。浅色下压暗得轻一点，不然在亮背景上像一块黑斑 */
  --scrim:rgba(47,42,61,.55);

  --r-panel:18px;
  --r-card:16px;
  --r-chip:12px;
  --r-pill:999px;

  --shadow:0 5px 0 var(--line-strong);
  --shadow-sm:0 3px 0 var(--line-strong);

  --side-w:236px;
  --top-h:68px;
  /*
   * 内容区的左右留白。之前是 26px，加上卡片网格自动铺满，
   * 结果在宽屏上内容顶着侧栏和窗口边缘，很挤。
   * 现在左右各留 40px，并把内容宽度封在 1440px 居中 ——
   * 超宽屏上不会无限拉伸，阅读动线也短一些。
   */
  --gutter:40px;
  --content-max:1440px;
}

/* ---- 深色 ----
   注意硬阴影：浅色下是「墨色投影」，深色下如果还用深色投影就完全看不见了。
   这里改成一层带亮度的描边阴影，保住那种「贴纸感」而不是变成普通卡片。 */
html[data-theme="dark"]{
  --bg:#15131C;
  --surface:#1F1C29;
  --surface-2:#262233;
  --text:#EFE9F5;
  --text-dim:#A79FBD;
  --text-mute:#7C7492;
  --line:#332E42;
  --line-strong:#0B0910;
  /*
   * 深色下的描边：用中等亮度，不能跟着 --text 变白。
   * 太亮（比如直接用 #EFE9F5）会满屏白框；太暗就跟背景糊在一起，
   * 丢掉那种「硬描边」的识别度。这个是试出来的折中值。
   */
  --outline:#544C6B;

  /* 虎斑橙在暗底上要提亮一点才够对比 */
  --accent:#FFB05F;
  --accent-dk:#E89540;
  /* 深色下要更亮，否则在暗底上读不清 */
  --accent-ink:#FFC98A;
  --danger:#FF8A73;

  /* 装饰色降饱和、降明度，当作「彩色玻璃」而不是荧光笔 */
  --c-rose:#8E5A69;
  --c-sky:#3E6E7C;
  --c-blush:#4A2F38;
  --c-mint:#2F5B45;
  --c-peach:#5C4327;
  --c-lav:#453D63;
  --c-danger-soft:#5A2A26;

  --poster-a:#3A2C36;
  --poster-b:#2E2A45;

  --focus:#8FB8E0;
  --scrim:rgba(10,8,15,.9);

  /* 深色下的硬阴影：用近黑描边 + 一点橙，避免整块糊在一起 */
  --shadow:0 5px 0 #0B0910;
  --shadow-sm:0 3px 0 #0B0910;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.015em; line-height:1.3; }
h1{ font-size:26px; }
h2{ font-size:19px; }
p{ margin:0; }
img{ display:block; max-width:100%; }
svg{ flex:0 0 auto; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }

/* ---------------------------------------------------------------- 布局骨架 */
.app{ display:flex; min-height:100dvh; }

.side{
  width:var(--side-w); flex:0 0 var(--side-w);
  background:var(--surface);
  border-right:3px solid var(--outline);
  padding:18px 14px;
  display:flex; flex-direction:column; gap:20px;
  position:sticky; top:0; height:100dvh;
}
.side__brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; padding:4px 6px 12px;
  border-bottom:2px solid var(--line);
}
.side__brand img{ width:40px; height:34px; }
.side__brand span{ display:flex; flex-direction:column; line-height:1.2; }
.side__brand b{ font-size:16px; }
.side__brand i{ font-style:normal; font-size:11px; color:var(--text-dim); }

.side__nav{ display:flex; flex-direction:column; gap:3px; }
.side__nav a{
  display:flex; align-items:center; gap:11px;
  padding:9px 13px; border-radius:var(--r-chip);
  text-decoration:none; font-weight:700; font-size:14.5px; color:var(--text-dim);
  border:2px solid transparent;
}
.side__nav a svg{ width:18px; height:18px; }
.side__nav a:hover{ background:var(--bg); color:var(--text); }
.side__nav a[aria-current="page"]{
  background:var(--accent); color:var(--text); border-color:var(--outline);
  box-shadow:0 3px 0 var(--outline);
}

.side__foot{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.side__user{ padding:10px 12px; background:var(--bg); border-radius:var(--r-chip); }
.side__user-name{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13.5px; }
.side__user-name svg{ width:16px; height:16px; }
.side__user-name b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side__link{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:var(--r-chip);
  font:inherit; font-size:13.5px; font-weight:600; color:var(--text-dim);
  background:none; border:2px solid transparent;
  text-decoration:none; cursor:pointer; width:100%;
}
.side__link svg{ width:16px; height:16px; }
.side__link:hover{ background:var(--bg); color:var(--text); }

.main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.top{
  height:var(--top-h); flex:0 0 var(--top-h);
  display:flex; align-items:center; gap:16px;
  padding:0 26px;
  border-bottom:3px solid var(--outline);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  position:sticky; top:0; z-index:20;
}
.topsearch{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:2px solid var(--outline); border-radius:var(--r-pill);
  padding:5px 6px 5px 14px; max-width:460px; flex:1 1 320px;
}
.topsearch svg{ width:17px; height:17px; color:var(--text-dim); }
.topsearch input{
  flex:1 1 auto; min-width:0; border:0; background:none;
  font:inherit; font-size:14.5px; color:var(--text); padding:5px 0;
}
.topsearch input::placeholder{ color:var(--text-mute); }
.topsearch input:focus{ outline:none; }
.topsearch button{
  font:inherit; font-size:13.5px; font-weight:700;
  padding:6px 15px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--text);
  border:2px solid var(--outline); cursor:pointer; white-space:nowrap;
}
.topsearch button:hover{ background:var(--accent-dk); }
.top__spacer{ flex:1 1 auto; }
.top__tag{ font-size:13px; color:var(--text-dim); white-space:nowrap; }

/* 主题切换器：三档（自动/浅色/深色），点一下循环 */
.themesw{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:13px; font-weight:700;
  padding:6px 13px 6px 11px;
  border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-dim);
  border:2px solid var(--line-strong); cursor:pointer;
  white-space:nowrap;
}
.themesw:hover{ background:var(--bg); color:var(--text); }
.themesw__icon{ display:inline-flex; width:16px; height:16px; }
.themesw__icon svg{ width:16px; height:16px; }
.themesw[data-mode="light"],
.themesw[data-mode="dark"]{ color:var(--text); }
.themesw[data-mode="dark"]{ background:var(--c-lav); }

/*
 * 内容区。左右留白用 --gutter，整块居中并封顶 --content-max。
 *
 * 「wide」页面（首页 / 放送表）需要 banner 和板块贴边，所以外层不留白，
 * 由页面自己在内部套 .container 来限宽 —— 靠给一堆选择器加 padding 会跟
 * 元素自身的 padding 打架，不要那么做。
 */
.content{
  flex:1 1 auto;
  padding:30px var(--gutter) 56px;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
}
.content--wide{
  padding:0 0 56px;
  max-width:none;
}

/* wide 页面里的内容容器：限宽 + 居中 + 左右留白 */
.container{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
/* 顶部不能有额外留白时用它（比如紧跟在 banner 后面） */
.container--flush-top{ padding-top:0; }

/* ---------------------------------------------------------------- 首页 hero */
/*
 * 背景是当前那部番的封面本身，放大后做高斯模糊 —— 每切一部，整个 hero
 * 的色调跟着变，比固定背景有意思得多。
 *
 * 三个要点：
 *   1. 模糊层要 scale(1.12) 放大，否则 blur 会把边缘吃掉、露出一圈透明
 *   2. 上面压一层渐变（.hero__scrim），保证文字在任何封面上都读得清
 *   3. filter 很吃 GPU，加 will-change 让浏览器提前提升图层
 */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:3px solid var(--outline);
  padding:52px 0 0;
  margin-bottom:44px;
}
.hero__bg{
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  filter:blur(34px) saturate(1.5) brightness(.9);
  opacity:0; transition:opacity .5s ease;
  will-change:filter, opacity;
  pointer-events:none;
}
.hero__bg.is-on{ opacity:1; }
/* 深色主题下压得更暗，否则模糊的亮色封面会刺眼 */
html[data-theme="dark"] .hero__bg{ filter:blur(34px) saturate(1.3) brightness(.55); }

.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  /* 只压左侧和底部：让模糊的封面在右侧和上半部分露出来 */
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 42%, transparent 72%),
    linear-gradient(0deg, var(--bg) 0%, transparent 38%);
}

.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) 236px; gap:40px; align-items:center;
  max-width:1180px; margin:0 auto;
  padding:0 var(--gutter);
  min-height:400px;
}

/*
 * 左右切换按钮，**贴着海报两侧**。
 *
 * 试过两个位置都不行：
 *   贴窗口边   → hero 是全宽的，左箭头落进标题里
 *   贴内容区边 → 侧栏右边到内容区左边只有约 40px 空带，放不下 44px 按钮
 * 贴海报就永远是稳定的：它跟内容区一起居中，留白固定。
 * 左边要给箭头留出 60px，所以海报列设 236px 而不是 296px。
 */
.hero__nav{
  position:absolute; z-index:3;
  top:calc(50% - 32px);            /* 大致对上海报中心（含下方圆点的高度） */
  translate:0 -50%;
  width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center;
  font:inherit; font-size:27px; line-height:1; font-weight:700;
  color:var(--text); background:var(--surface);
  border:3px solid var(--outline); box-shadow:var(--shadow-sm);
  cursor:pointer; opacity:.85;
  transition:opacity .15s ease, background-color .15s ease, translate .12s ease;
}
.hero__nav:hover{ opacity:1; background:var(--accent); }
.hero__nav:active{ translate:0 calc(-50% + 3px); box-shadow:0 0 0 var(--outline); }
/* 236(海报) + 16(间隙) + 50(按钮) = 302 */
.hero__nav--prev{ right:302px; }
.hero__nav--next{ right:10px; }

@media (max-width:900px){
  /* 移动端：海报挪到文案下方，按钮改放海报右侧外沿 */
  .hero__inner{ grid-template-columns:1fr auto; gap:20px; min-height:0; }
  .hero__poster{ max-width:160px; }
  .hero__nav{ top:auto; bottom:10px; translate:0; width:36px; height:36px; font-size:19px; }
  .hero__nav:active{ translate:0 3px; }
  .hero__nav--prev{ right:48px; }
  .hero__nav--next{ right:4px; }
}

.hero__badge{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--c-blush); border:2px solid var(--outline); border-radius:var(--r-pill);
  padding:5px 16px; font-size:13px; font-weight:700; margin-bottom:18px;
}
.hero__title{ font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem); margin-bottom:12px; line-height:1.2; }
.hero__desc{ color:var(--text-dim); font-size:15.5px; line-height:1.9; max-width:54ch; margin-bottom:24px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__actions .btn{ padding:13px 28px; font-size:15.5px; }

.hero__poster{
  border:3px solid var(--outline); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:2/3; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--poster-a),var(--poster-b));
}
.hero__poster img{ width:100%; height:100%; object-fit:cover; }
.hero__poster-empty{ color:var(--text-dim); font-size:13px; text-align:center; padding:12px; }

/* 圆点指示器 */
.hero__dots{
  position:relative; z-index:1;
  display:flex; justify-content:center; gap:9px; flex-wrap:wrap;
  padding:26px var(--gutter) 28px;
}
.hero__dot{
  width:10px; height:10px; padding:0; border-radius:50%;
  background:var(--line); border:2px solid var(--outline);
  cursor:pointer; transition:width .2s ease, background-color .2s ease;
}
.hero__dot:hover{ background:var(--text-dim); }
.hero__dot.is-active{ width:30px; border-radius:var(--r-pill); background:var(--accent); }

@media (max-width:900px){
  /* 移动端：海报挪到文案下方 */
  .hero__inner{ grid-template-columns:1fr; gap:24px; min-height:0; }
  .hero__poster{ max-width:170px; }
}

/* ---------------------------------------------------------------- 区块 */
.section{ padding:0 var(--gutter); margin-bottom:46px; }
.section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:20px;
}
.section__sub{ font-size:13px; color:var(--text-dim); }

.tips-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.tip{
  background:var(--surface); border:2px solid var(--outline); border-radius:var(--r-chip);
  padding:16px 18px;
}
.tip b{ display:block; font-size:14.5px; margin-bottom:6px; }
.tip p{ font-size:13.5px; color:var(--text-dim); line-height:1.8; }

/* ---------------------------------------------------------------- 放送表 */
/* 星期标签页。点一下切那天，计数直接标在标签上 */
.daytabs{
  display:grid; grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:10px; margin-bottom:22px;
}
.daytab{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font:inherit; cursor:pointer;
  padding:12px 6px 10px;
  background:var(--surface-2); color:var(--text-dim);
  border:2px solid var(--line); border-radius:var(--r-chip);
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
.daytab:hover{ background:var(--surface); color:var(--text); border-color:var(--outline); }
.daytab__k{ font-size:12.5px; font-weight:700; white-space:nowrap; }
.daytab__n{ font-size:19px; font-weight:800; color:var(--text); line-height:1.25; }
.daytab.is-active{
  background:var(--accent); color:var(--text);
  border-color:var(--line-strong); box-shadow:var(--shadow-sm);
}
.daytab.is-today .daytab__k{ color:var(--accent-dk); }
.daytab.is-active.is-today .daytab__k{ color:var(--text); }

.dayhead{ font-size:17px; margin-bottom:14px; }

/* 两列瀑布。用 JS 按索引奇偶分组而不是 CSS columns，
   这样原始顺序（按日期）在两列里都保持从上到下 */
.sched-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 22px; align-items:start; }
.sched-list{ display:flex; flex-direction:column; }

/* 一条排期：封面 | 标题+标签 | 状态 */
.srow{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center; gap:14px;
  padding:10px 6px;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:background-color .12s ease;
}
.srow:hover{ background:var(--surface-2); }
.srow__poster{
  width:56px; height:80px; border-radius:8px; overflow:hidden;
  border:2px solid var(--outline);
  background:linear-gradient(135deg,var(--poster-a),var(--poster-b));
  display:grid; place-items:center;
}
.srow__poster img{ width:100%; height:100%; object-fit:cover; }
.srow__poster .card__nopic{ font-size:9px; text-align:center; line-height:1.2; }
.srow__main{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.srow__title{
  font-size:13.5px; font-weight:700; line-height:1.45; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.srow__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.srow__tags span{
  font-size:11px; color:var(--text-dim);
  background:var(--surface-2); border-radius:5px; padding:1px 7px;
}
.srow__side{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.sched-score{
  font-size:11.5px; font-weight:700; color:var(--accent-dk);
  font-variant-numeric:tabular-nums;
}
.sched-badge{
  font-size:11.5px; font-weight:700; white-space:nowrap;
  padding:2px 9px; border-radius:var(--r-pill);
  border:2px solid var(--outline);
}
.sched-badge.is-ready{ background:var(--c-mint); }
.sched-badge.is-done{ background:var(--line); color:var(--text-dim); border-color:var(--line); }
.sched-badge.is-wait{ background:transparent; color:var(--text-dim); border-style:dashed; }
.srow__play{
  font-size:11px; font-weight:700; color:var(--text);
  background:var(--c-sky); border-radius:5px; padding:1px 7px;
}

.sched-sk{
  height:86px; border-radius:var(--r-chip);
  background:var(--line); opacity:.5; margin-bottom:8px;
}
.sched-note{ font-size:12.5px; color:var(--text-dim); margin-top:14px; line-height:1.8; }
.sched-note code{ background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }

/* 季度切换 */
.season-switch{ display:flex; gap:6px; flex-wrap:wrap; }
.season-btn{
  font-size:13px; font-weight:700; text-decoration:none;
  padding:6px 13px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-dim);
  border:2px solid var(--outline); white-space:nowrap;
}
.season-btn:hover{ background:var(--bg); color:var(--text); }
.season-btn.is-active{
  background:var(--accent); color:var(--text); box-shadow:0 3px 0 var(--outline);
}

/* 开关（「只看我的追番」） */
.switch{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{
  width:44px; height:26px; border-radius:var(--r-pill);
  background:var(--line); border:2px solid var(--outline);
  display:inline-flex; align-items:center; padding:2px;
  transition:background-color .16s ease;
}
.switch__track i{
  width:16px; height:16px; border-radius:50%;
  background:var(--surface); border:2px solid var(--outline);
  transition:translate .16s cubic-bezier(.22,.9,.3,1);
}
.switch input:checked + .switch__track{ background:var(--accent); }
.switch input:checked + .switch__track i{ translate:18px 0; }
.switch input:focus-visible + .switch__track{ outline:3px solid var(--focus); outline-offset:2px; }
.switch__text{ font-size:13px; font-weight:700; color:var(--text-dim); white-space:nowrap; }
.switch input:checked ~ .switch__text{ color:var(--text); }

@media (max-width:1100px){
  .daytabs{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .sched-cols{ grid-template-columns:1fr; }
  .daytabs{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .srow{ grid-template-columns:48px minmax(0,1fr) auto; gap:10px; }
  .srow__poster{ width:48px; height:68px; }
  .srow__side{ flex-direction:column; align-items:flex-end; gap:4px; }
}

/* ---------------------------------------------------------------- 季度番剧 */
/*
 * 两级选择器放在内容上方：
 *   第一行 年份（2010~2026 共 17 个，一行放得下）
 *   第二行 那一年的季度（最多 4 个）
 * 原来是一个 68 项的长列表塞在窄侧栏里，要滚很久。
 */
.season-picker{
  background:var(--surface); border:2px solid var(--outline);
  border-radius:var(--r-panel); padding:14px 16px;
  margin-bottom:22px;
}
.season-years{
  display:flex; flex-wrap:wrap; gap:6px;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:2px solid var(--line);
}
.season-year-btn{
  display:inline-block; text-decoration:none; white-space:nowrap;
  font-size:13px; font-weight:700; padding:5px 12px;
  border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-dim);
  border:2px solid transparent;
}
.season-year-btn:hover{ background:var(--bg); color:var(--text); }
.season-year-btn.is-active{
  background:var(--bg); color:var(--text); border-color:var(--outline);
}
.season-quarters{ display:flex; flex-wrap:wrap; gap:8px; }
.season-q-btn{
  display:inline-block; text-decoration:none; white-space:nowrap;
  font-size:14px; font-weight:800; padding:8px 20px;
  border-radius:var(--r-chip);
  background:var(--surface-2); color:var(--text-dim);
  border:2px solid transparent;
}
.season-q-btn:hover{ background:var(--bg); color:var(--text); }
.season-q-btn.is-active{
  background:var(--accent); color:var(--text);
  border-color:var(--outline); box-shadow:0 3px 0 var(--outline);
}

/* 首页底部的季度入口 */
.season-teaser{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--surface); border:2px solid var(--outline);
  border-radius:var(--r-panel); padding:20px 24px;
}
.season-teaser p{ font-size:14px; color:var(--text-dim); max-width:60ch; line-height:1.8; }
.section__more{ margin-top:16px; }

@media (max-width:560px){
  .season-years{ gap:4px; }
  .season-year-btn{ font-size:12px; padding:4px 9px; }
  .season-q-btn{ font-size:13px; padding:7px 14px; flex:1 1 auto; text-align:center; }
}

/* ---------------------------------------------------------------- 我的追番 */
.fav-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:16px;
}
.fav-item{
  position:relative;
  display:flex; align-items:stretch;
  background:var(--surface);
  border:3px solid var(--outline); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:translate .18s ease, box-shadow .18s ease;
}
.fav-item:hover{ translate:0 -4px; box-shadow:0 7px 0 var(--outline); }
.fav-item__link{ display:flex; gap:14px; padding:12px; text-decoration:none; flex:1 1 auto; min-width:0; }
.fav-item__poster{
  position:relative; flex:0 0 86px; width:86px; height:126px;
  border:2px solid var(--outline); border-radius:10px; overflow:hidden;
  background:linear-gradient(135deg,var(--c-blush),var(--c-lav));
  display:grid; place-items:center;
}
.fav-item__poster img{ width:100%; height:100%; object-fit:cover; }
.fav-item__progress{
  position:absolute; left:0; right:0; bottom:0; height:5px;
  background:rgba(47,42,61,.35);
}
.fav-item__progress i{ display:block; height:100%; background:var(--accent); }
/* 内容垂直居中，否则卡片比内容高的时候底部会空一大块 */
.fav-item__body{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column;
  justify-content:center; gap:7px; padding-right:8px; }
.fav-item__body h3{
  font-size:15px; line-height:1.4; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fav-item__meta{ font-size:12.5px; color:var(--text-dim); line-height:1.6; }
.fav-item__del{
  position:absolute; right:8px; top:8px;
  font:inherit; font-size:11.5px; font-weight:700;
  padding:3px 10px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-dim);
  border:2px solid var(--outline); cursor:pointer;
  opacity:0; transition:opacity .15s ease;
}
.fav-item:hover .fav-item__del{ opacity:1; }
.fav-item__del:hover{ background:var(--c-danger-soft); color:var(--danger); }

/* ---------------------------------------------------------------- 观看记录 */
.hist-list{ display:flex; flex-direction:column; gap:12px; }
.hist-row{
  position:relative;
  display:flex; align-items:stretch;
  background:var(--surface);
  border:2px solid var(--outline); border-radius:var(--r-card);
  overflow:hidden;
}
.hist-row:hover{ box-shadow:0 4px 0 var(--outline); }
.hist-row__link{ display:flex; gap:14px; padding:12px; text-decoration:none; flex:1 1 auto; min-width:0; }
.hist-row__poster{
  flex:0 0 62px; width:62px; height:90px;
  border:2px solid var(--outline); border-radius:9px; overflow:hidden;
  background:linear-gradient(135deg,var(--c-blush),var(--c-lav));
  display:grid; place-items:center;
}
.hist-row__poster img{ width:100%; height:100%; object-fit:cover; }
.hist-row__body{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:5px; }
.hist-row__body h3{ font-size:15px; margin:0; }
.hist-row__meta{ font-size:13px; color:var(--text); }
.hist-row__sub{ font-size:12px; color:var(--text-dim); }
.hist-row__bar{
  height:5px; background:var(--line); border-radius:var(--r-pill);
  overflow:hidden; max-width:420px;
}
.hist-row__bar i{ display:block; height:100%; background:var(--accent); }
.tag-done{
  display:inline-block; font-size:11.5px; font-weight:700;
  background:var(--c-mint); border:2px solid var(--outline);
  border-radius:var(--r-pill); padding:0 8px;
}
.hist-row__del{
  align-self:center; margin-right:12px;
  font:inherit; font-size:12px; font-weight:700;
  padding:5px 13px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-dim);
  border:2px solid var(--outline); cursor:pointer; white-space:nowrap;
}
.hist-row__del:hover{ background:var(--c-danger-soft); color:var(--danger); }

/* ---------------------------------------------------------------- 追番按钮 */
.fav-btn{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:14px; font-weight:800;
  padding:9px 18px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--text);
  border:3px solid var(--outline); box-shadow:var(--shadow-sm);
  cursor:pointer; white-space:nowrap;
  transition:translate .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.fav-btn svg{ width:17px; height:17px; }
.fav-btn:hover{ background:var(--bg); }
.fav-btn:active{ translate:0 3px; box-shadow:0 0 0 var(--outline); }
.fav-btn.is-on{ background:var(--c-rose); }
.fav-btn.is-on svg{ fill:var(--text); }
.fav-btn[disabled]{ opacity:.6; cursor:default; }

/* 播放器页的「继续观看」提示 */
.resume-note{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--c-sky); border:2px solid var(--outline); border-radius:var(--r-chip);
  padding:10px 16px; margin-bottom:14px; font-size:13.5px;
}
.resume-note .btn{ margin-left:auto; }

/* ---------------------------------------------------------------- 登录/注册 */
.auth-wrap{
  max-width:460px; margin:6vh auto 0;
}
.auth-wrap--wide{ max-width:760px; }
.auth-card{
  background:var(--surface);
  border:3px solid var(--outline); border-radius:var(--r-panel);
  box-shadow:var(--shadow);
  padding:30px 32px 26px;
}
.auth-card h1{ font-size:23px; margin-bottom:8px; }
.auth-card .lede{ color:var(--text-dim); font-size:14px; line-height:1.8; margin-bottom:18px; }
.auth-card .lede b{ color:var(--text); }
.auth-card .muted{ font-size:13px; color:var(--text-dim); margin-top:14px; line-height:1.8; }
.auth-card .muted a{ font-weight:700; }

.auth-form{ display:flex; flex-direction:column; gap:14px; margin-bottom:6px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:13.5px; font-weight:700; }
.field input{
  font:inherit; font-size:15px; color:var(--text);
  padding:11px 14px; border-radius:var(--r-chip);
  background:var(--bg); border:2px solid var(--outline);
}
.field input::placeholder{ color:var(--text-mute); }
.field input:focus{ outline:3px solid var(--accent); outline-offset:1px; }
.field__hint{ font-size:12px; color:var(--text-dim); }
.code-input{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:22px !important; letter-spacing:.28em; text-align:center;
}
.inline-form{ margin-top:10px; }
.inline-form .btn{ width:100%; }

@media (max-width:560px){
  .auth-card{ padding:22px 18px 20px; }
  .auth-wrap{ margin-top:13px; }
}

/* ---------------------------------------------------------------- 卡片网格 */
.grid{
  display:grid;
  /*
   * 卡片最小 190px，间距 22px。
   * 之前是 168px / 18px，在宽屏上一行挤 7 张、每张都很小。
   * 现在一行 6 张左右，图更好认，留白也够。
   */
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:22px;
}

.card{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:3px solid var(--outline); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  overflow:hidden; text-decoration:none;
  transition:translate .2s cubic-bezier(.22,.9,.3,1), box-shadow .2s ease;
}
.card:hover{ translate:0 -6px; box-shadow:0 9px 0 var(--outline); }
.card:active{ translate:0 -2px; }

.card__poster{
  position:relative; aspect-ratio:2/3;
  background:linear-gradient(135deg, var(--c-blush), var(--c-lav));
  border-bottom:3px solid var(--outline);
  display:grid; place-items:center;
}
.card__poster img{ width:100%; height:100%; object-fit:cover; }
.card__nopic{ color:var(--text-dim); font-size:13px; }

.card__remarks{
  position:absolute; left:8px; bottom:8px;
  background:var(--text); color:var(--bg);
  font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:var(--r-pill);
  max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card__badge{
  position:absolute; right:8px; top:8px;
  background:var(--c-mint); color:var(--text);
  border:2px solid var(--outline); border-radius:var(--r-pill);
  font-size:11px; font-weight:700; padding:2px 8px;
}
/* 排行榜名次。放在标题行末尾，跟标题一起读更连贯，
   也避开了封面左下角的「集数」角标。 */
.card__rank{
  display:inline-block; vertical-align:middle;
  margin-left:6px; padding:0 7px;
  font-size:11px; font-weight:700;
  color:var(--text-dim);
  background:var(--surface-2);
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;
}
.card__score{
  position:absolute; left:8px; top:8px;
  background:var(--c-peach); color:var(--text);
  border:2px solid var(--outline); border-radius:var(--r-pill);
  font-size:11px; font-weight:700; padding:2px 8px;
}

.card__body{ padding:10px 12px 14px; }
.card__title{
  font-size:14.5px; font-weight:700; line-height:1.4; margin:0 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__meta{ font-size:12.5px; color:var(--text-dim); }

/* 骨架屏 */
.card--skeleton{ opacity:.6; }
.card--skeleton .card__poster{ background:var(--line); border-bottom-color:var(--line); }
.sk-line{ height:11px; border-radius:6px; background:var(--line); margin-bottom:7px; }
.sk-line--short{ width:56%; margin-bottom:0; }

/* ---------------------------------------------------------------- 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px;
  font:inherit; font-weight:800; font-size:14.5px; line-height:1.2;
  white-space:nowrap; color:var(--text); background:var(--accent);
  border:3px solid var(--outline); border-radius:var(--r-pill);
  box-shadow:var(--shadow);
  text-decoration:none; cursor:pointer;
  transition:translate .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover{ background:var(--accent-dk); }
.btn:active{ translate:0 5px; box-shadow:0 0 0 var(--outline); }
.btn--ghost{ background:var(--surface); }
.btn--ghost:hover{ background:var(--bg); }
.btn--sm{ padding:7px 15px; font-size:13.5px; border-width:2px; box-shadow:var(--shadow-sm); }
.btn--sm:active{ translate:0 3px; }

/* ---------------------------------------------------------------- 搜索栏 */
.searchbar{
  display:flex; gap:12px; margin-bottom:26px;
  background:var(--surface); border:3px solid var(--outline); border-radius:var(--r-panel);
  padding:12px; box-shadow:var(--shadow);
}
.searchbar input{
  flex:1 1 auto; min-width:0;
  padding:12px 16px; font:inherit; color:var(--text);
  background:var(--bg); border:2px solid var(--outline); border-radius:var(--r-chip);
}
.searchbar input::placeholder{ color:var(--text-mute); }
.searchbar input:focus{ outline:3px solid var(--accent); outline-offset:1px; }

/* ---------------------------------------------------------------- 卡片网格 */
/* ---------------------------------------------------------------- 面板 */
.panel{
  background:var(--surface); border:3px solid var(--outline);
  border-radius:var(--r-panel); box-shadow:var(--shadow);
  overflow:hidden; margin-top:24px;
}
.panel__head{
  padding:16px 20px; border-bottom:2px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.panel__head .sub{ color:var(--text-dim); font-size:13px; }
.panel__body{ padding:20px; }

/* ---------------------------------------------------------------- 提示 */
.alert{
  padding:13px 18px; border:2px solid var(--outline); border-radius:var(--r-chip);
  margin-bottom:18px; font-size:13.5px; line-height:1.75;
}
.alert b{ display:block; }
.alert--bad{ background:var(--c-danger-soft); }
.alert--warn{ background:var(--c-peach); }
.alert--info{ background:var(--c-sky); }

/* ---------------------------------------------------------------- 页头 */
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:22px;
}
.page-head .sub{ color:var(--text-dim); font-size:13.5px; margin-top:4px; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---------------------------------------------------------------- 空态 */
.empty-state{
  text-align:center; padding:64px 24px;
  background:var(--surface); border:3px dashed color-mix(in srgb, var(--outline) 26%, transparent);
  border-radius:var(--r-panel);
}
.empty-state__cat{ font-size:26px; color:var(--text-dim); margin-bottom:10px; }
.empty-state h1,.empty-state h2{ margin-bottom:8px; }
.empty-state p{ color:var(--text-dim); font-size:14px; margin-bottom:10px; }

/* ---------------------------------------------------------------- 详情页 */
.detail{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:26px; align-items:start; }
.detail__poster{
  border:3px solid var(--outline); border-radius:var(--r-card); overflow:hidden;
  box-shadow:var(--shadow); aspect-ratio:2/3;
  background:linear-gradient(135deg, var(--c-blush), var(--c-lav));
  display:grid; place-items:center;
}
.detail__poster img{ width:100%; height:100%; object-fit:cover; }
.detail__info h1{ margin-bottom:10px; }
.detail__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.detail__meta span{
  background:var(--surface); border:2px solid var(--outline); border-radius:var(--r-pill);
  padding:3px 12px; font-size:12.5px; font-weight:700;
}
.detail__synopsis{ color:var(--text-dim); font-size:14px; line-height:1.85; max-width:70ch; margin-bottom:14px; }
.detail__src{ font-size:13.5px; color:var(--text-dim); }
.detail__src b{ color:var(--text); }
.detail__dropped{ margin-top:10px; font-size:12.5px; color:var(--text-dim); }
.tag-mini{
  display:inline-block; margin-left:6px;
  background:var(--c-sky); border:2px solid var(--outline); border-radius:var(--r-chip);
  padding:1px 8px; font-size:11.5px; font-weight:700;
}

/* 线路切换 */
.roads{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.road{
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  background:var(--surface); color:var(--text-dim);
  border:2px solid var(--outline); border-radius:var(--r-pill);
  padding:7px 16px;
}
.road:hover{ background:var(--bg); color:var(--text); }
.road.is-active{ background:var(--accent); color:var(--text); box-shadow:0 3px 0 var(--outline); }

/* 剧集 */
/*
 * 选集网格。
 *
 * minmax 的下限不能太小。原来是 96px，但 Kazumi 规则源的每一集是
 * 「集数 + 嗅探」并排（见下面的 .ep-pair），96px 里塞两个东西的结果是
 * **集数全被截成「第0…」**（实测踩到）。
 * 现在按「第01集」+「嗅探」的实际宽度留够。
 */
.episodes{ display:none; grid-template-columns:repeat(auto-fill, minmax(146px, 1fr)); gap:10px; }
.episodes.is-active{ display:grid; }
.ep{
  display:block; text-align:center; text-decoration:none;
  padding:9px 6px; font-size:13.5px; font-weight:700;
  background:var(--surface); color:var(--text);
  border:2px solid var(--outline); border-radius:var(--r-chip);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ep:hover{ background:var(--accent); }

/* 窄屏：横向塞不下时把格子缩到只放集数 */
@media (max-width:600px){
  .episodes{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
}

/*
 * Kazumi 规则源的集数：一条集数配两个入口。
 * 左边的集数本体 = 服务端解析（快），右边的「嗅探」= 浏览器嗅探（覆盖面广）。
 *
 * 用外层容器把两者**包成一个整体**（同一条边框、同一个圆角），
 * 而不是两个各自带框的按钮并排 —— 后者看起来像两个不相干的按钮，
 * 用户不知道「嗅探」是哪一集的（实测反馈过）。
 */
.ep-pair{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch; min-width:0;
  border:2px solid var(--outline); border-radius:var(--r-chip);
  background:var(--surface); overflow:hidden;
}
/* 里面的两个链接不再各自画框，靠分隔线区分 */
.ep-pair .ep{
  border:0; border-radius:0; background:transparent;
  padding:9px 8px;
  font-size:13px;
}
.ep-pair .ep:hover{ background:var(--accent); }

/*
 * 「需要服务端解析」的集数按钮。
 *
 * ⚠ 这里原来有一条 `border-right: 2px dashed` —— 想表达「这一集要多走一步」。
 * 但用户反馈**右边那条虚线很碍眼**：KZ 源的集数全都走 /resolve，
 * 于是整片按钮右边齐刷刷一条虚线，像一排没画完的框。去掉了。
 *
 * 也不能靠「字色压暗」来区分 —— 深色底上变得很难读（试过，糊）。
 * 改用**淡一点的底色 + 常规字色**：一眼能看出跟普通集数不是一类，
 * 但不影响读。
 */
.ep--resolve{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--line);
  border-style:solid;
}
.ep--resolve:hover{ background:var(--accent); border-color:var(--outline); }

/* 嗅探入口：视觉上退到次要位置，但一直可点 */
.ep-sniff{
  display:grid; place-items:center;
  padding:9px 11px; font-size:12px; font-weight:700;
  text-decoration:none; white-space:nowrap;
  color:var(--text-dim); background:var(--surface-2);
}
.ep-sniff:hover{ background:var(--c-mint); color:var(--text); }

/* 解析失败页的说明列表 */
.tips{ margin:0; padding-left:1.3em; }
.tips li{ margin-bottom:8px; font-size:14px; line-height:1.8; }

/* 源状态折叠 */
.srcdetail{ margin-top:20px; font-size:13px; color:var(--text-dim); }
.srcdetail summary{ cursor:pointer; padding:6px 0; }
.srclist{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; }
.srclist li{ font-size:12.5px; }
.srclist li.bad{ color:var(--danger); }

/* ---------------------------------------------------------------- 搜索进度 */
.progress{
  margin-bottom:18px;
  background:var(--surface); border:2px solid var(--outline);
  border-radius:var(--r-chip); padding:12px 16px;
}
.progress__bar{
  height:8px; background:var(--line); border-radius:var(--r-pill);
  overflow:hidden; margin-bottom:8px;
}
.progress__bar span{
  display:block; height:100%; width:0;
  background:var(--accent); border-radius:var(--r-pill);
  transition:width .25s ease;
}
.progress__text{ font-size:12.5px; color:var(--text-dim); }

/* ---------------------------------------------------------------- 播放页 */
/*
 * 注意：.player-page 的宽度在下面「播放页两栏布局」那节统一定义，
 * 这里不要再写一遍（写两处会互相覆盖，改一个不生效）。
 */
.player-head{
  display:flex; align-items:center; gap:16px;
  /* 头部跟播放器之间留够距离 —— 挨太近会显得两块钱粘在一起 */
  margin-bottom:22px; flex-wrap:wrap;
}
.player-head__title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.player-head__title h1{ font-size:20px; }
.player-head__title .sub{ color:var(--text-dim); font-size:14px; }

.player-wrap{
  position:relative; background:#000;
  border:3px solid var(--outline); border-radius:var(--r-panel);
  overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:16/9;
  /*
   * 高度上限 —— 播放器**不能无限长高**。
   *
   * 播放页现在是撑满视口宽度的（wide 模式），1920 宽的时候 16:9
   * 就是 1080 高，一屏只剩播放器，下面的信息条和评论区全在屏幕外。
   * 加个上限之后播放器居中、留一点左右空间，下面能看到东西。
   *
   * 用「视口高度的百分比」而不是固定 px：笔记本和小屏上才不会太满。
   */
  max-height:min(66vh, 720px);
  width:auto; max-width:100%;
  margin:0 auto;
}
.player-wrap video{ width:100%; height:100%; display:block; background:#000; }
.player-msg{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--text-dim); font-size:14.5px; background:var(--scrim);
  text-align:center; padding:20px;
}
.player-msg.is-error{ color:var(--danger); }

.player-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px;
}
.player-foot__info{
  margin-left:auto; font-size:12px; color:var(--text-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%;
}

/* ---------------------------------------------------------------- 页脚 */
/*
 * 页脚**固定在页面最底部**。
 *
 * 怎么做到的：.app 是 min-height:100dvh 的 flex 行，.main 是里面的
 * flex 列，.content 用 flex:1 吃掉剩余高度 —— 内容不够长时页脚就被
 * 顶到视口底部，内容够长时它自然落在内容之后（两种情况都正确）。
 *
 * ⚠ 只靠 .foot 的 margin-top:auto 是不够的：auto 只在父容器
 * **有多余空间**时才起作用，而 .main 本身没有撑高，根本没有多余空间。
 */
.foot{
  border-top:2px solid var(--line);
  margin-top:auto;
  padding:24px 0 30px;
}
.foot__inner{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-dim);
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__poster{ max-width:190px; }
}
@media (max-width:820px){
  /* 侧栏折成顶部横向滚动条 */
  .app{ flex-direction:column; }
  .side{
    width:100%; flex:0 0 auto; height:auto;
    position:static; border-right:0; border-bottom:3px solid var(--outline);
    padding:12px 14px; gap:12px;
  }
  .side__brand{ padding-bottom:10px; }
  .side__nav{ flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:2px; }
  .side__nav a{ white-space:nowrap; padding:7px 12px; font-size:13.5px; }
  .side__foot{ margin-top:0; flex-direction:row; align-items:center; justify-content:space-between; }
  .side__user{ flex:1 1 auto; display:flex; align-items:center; gap:10px; }
  .side__user-name{ margin-bottom:0; }
  .side__user form{ flex:0 0 auto; }
  .side__link{ width:auto; }
  .top{ position:static; height:auto; flex:0 0 auto; padding:12px 16px; flex-wrap:wrap; }
  .top__tag{ display:none; }
  .content{ padding:18px 16px 32px; }
  .hero{ padding:22px 16px 0; }
  .section{ padding:0 16px; }
}
@media (max-width:560px){
  body{ font-size:15px; }
  h1{ font-size:21px; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); gap:13px; }
  .episodes{ grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); }
  .player-foot__info{ max-width:100%; margin-left:0; }
  .searchbar{ flex-direction:column; }
}

/* ---------------------------------------------------------------- 选源面板 */
/*
 * 详情页点「立即播放」弹出来的播放源列表。
 *
 * 照 Kazumi 的做法：把**所有**源都列出来，能用的直接点，
 * 不能用的写清原因 —— 而不是替用户把源藏起来。
 * 页面上是一次性渲染的（数据来自搜索时记下的每条源状态），
 * 所以这里只做显隐，不用轮询或异步。
 */
.srcpanel{
  margin-top:20px;
  background:var(--surface);
  border:3px solid var(--outline); border-radius:var(--r-panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}
/* hidden 属性要能压住下面的 display:flex —— 否则面板收不起来 */
.srcpanel[hidden]{ display:none; }

.srcpanel__head{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:2px solid var(--line);
}
.srcpanel__head b{ font-size:16px; }
.srcpanel__sub{ color:var(--text-dim); font-size:13px; flex:1; }
.srcpanel__close{
  font:inherit; font-size:22px; line-height:1;
  background:none; border:0; cursor:pointer; color:var(--text-dim);
  padding:0 6px;
}
.srcpanel__close:hover{ color:var(--text); }

.srcpanel__body{ padding:8px 0; max-height:52vh; overflow:auto; }

/* 一条源。用 grid 让「图标 名称 说明 按钮」四列对齐 */
.srcrow{
  display:grid; grid-template-columns:22px minmax(0,1.1fr) minmax(0,1.6fr) auto;
  gap:12px; align-items:center;
  padding:10px 18px; border-top:1px solid var(--line);
}
.srcrow:first-child{ border-top:0; }
.srcrow.is-current{ background:var(--surface-2); }
.srcrow.is-bad{ color:var(--text-dim); }

.srcrow__ico{ text-align:center; font-size:14px; }
.srcrow__ico.ok{ color:var(--accent); }
.srcrow__ico.wait{ color:var(--text-dim); }
.srcrow__ico.bad{ color:var(--text-mute); }

.srcrow__name{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srcrow__name .tag-mini{ margin-left:6px; }
.srcrow__note{
  font-size:12.5px; color:var(--text-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.srcpanel__sep{
  padding:12px 18px 6px; font-size:12.5px; color:var(--text-mute);
  border-top:2px solid var(--line); margin-top:6px;
}
.srcpanel__foot{
  padding:12px 18px; border-top:2px solid var(--line);
  font-size:12.5px; color:var(--text-dim); background:var(--surface-2);
}

@media (max-width:720px){
  /* 窄屏把「说明」挤到第二行，按钮仍在右侧 */
  .srcrow{ grid-template-columns:22px minmax(0,1fr) auto; row-gap:4px; }
  .srcrow__note{ grid-column:2 / 4; }
}

/* 选源面板：数据还在查时的占位 */
.srcpanel__loading{
  padding:18px; font-size:13px; color:var(--text-dim); text-align:center;
}

/* ---------------------------------------------------------------- 页面上那排「换源」 */
/*
 * 多来源切换直接摊在详情页上（不等用户点「立即播放」才发现有别的源）。
 * 每个 chip 跳的是「同一个作品在另一个源里的详情页」。
 */
.srclist-inline{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin-top:10px;
}
.srclist-inline[hidden]{ display:none; }
.srclist-inline__label{
  font-size:12.5px; color:var(--text-dim); margin-right:1px;
}
.srcchip{
  display:inline-block; text-decoration:none;
  font-size:12.5px; font-weight:700;
  padding:4px 11px;
  background:var(--surface); color:var(--text-dim);
  border:2px solid var(--line-strong); border-radius:var(--r-pill);
  white-space:nowrap;
}
.srcchip:hover{
  background:var(--accent); color:var(--text); border-color:var(--outline);
}

/* ---------------------------------------------------------------- 画面增强（Anime4K 超分） */
/*
 * 默认 hidden —— 只有浏览器真的支持 WebGPU 时才由脚本显示。
 * 不支持还摆着按钮，用户点了没反应只会以为坏了。
 */
.player-enhance{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:12px; padding:10px 14px;
  background:var(--surface); border:2px solid var(--line);
  border-radius:var(--r-chip);
  font-size:12.5px;
}
.player-enhance[hidden]{ display:none; }
.player-enhance__label{ color:var(--text-dim); font-weight:700; }
.player-enhance__modes{ display:flex; gap:6px; }
.sr-mode{
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  padding:5px 13px;
  background:var(--surface-2); color:var(--text-dim);
  border:2px solid var(--line-strong); border-radius:var(--r-pill);
}
.sr-mode:hover{ background:var(--bg); color:var(--text); }
.sr-mode.is-active{
  background:var(--accent); color:var(--text); border-color:var(--outline);
  box-shadow:0 2px 0 var(--outline);
}
.player-enhance__note{ color:var(--text-dim); flex:1; min-width:0; }

/* 超分画布和 video 叠在同一位置，切换时不能跳布局 */
.player-wrap #sr-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  background:#000; display:block;
}
.player-wrap #sr-canvas[hidden]{ display:none; }

/* ---------------------------------------------------------------- 评论区 */
.comments .panel__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cm-rating{ display:flex; align-items:baseline; gap:6px; }
.cm-rating b{ font-size:22px; color:var(--accent-ink); }

.cm-form{ margin-bottom:18px; }
.cm-form__row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.cm-stars{ display:flex; gap:3px; }
.cm-star{
  font:inherit; font-size:11px; font-weight:800; cursor:pointer;
  width:24px; height:24px; padding:0;
  background:var(--surface-2); color:var(--text-dim);
  border:2px solid var(--line-strong); border-radius:6px;
}
.cm-star:hover{ background:var(--accent); color:var(--text); }
.cm-star.is-on{ background:var(--accent); color:var(--text); border-color:var(--outline); }
.cm-clear{
  font:inherit; font-size:12px; cursor:pointer; padding:4px 10px;
  background:none; color:var(--text-dim);
  border:2px dashed var(--line-strong); border-radius:var(--r-pill);
}
.cm-form textarea{
  width:100%; font:inherit; font-size:13.5px; resize:vertical;
  padding:10px 12px; min-height:64px;
  background:var(--bg); color:var(--text);
  border:2px solid var(--line-strong); border-radius:var(--r-chip);
}
.cm-form textarea:focus{ outline:none; border-color:var(--accent); }
.cm-form__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.cm-form__hint{ font-size:12.5px; color:var(--text-dim); }
.cm-form__hint.is-bad{ color:var(--danger, #d9534f); }
.cm-login{ margin-bottom:16px; }
.cm-empty{ padding:22px 0; text-align:center; color:var(--text-dim); font-size:13px; }

.cm-item{ padding:14px 0; border-top:2px solid var(--line); }
.cm-item:first-child{ border-top:0; }
.cm-item--reply{ margin-left:38px; padding:10px 0; border-top:2px dashed var(--line); }
.cm-item--hidden{ opacity:.55; }
.cm-item__head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.cm-avatar{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--text);
  font-size:13px; font-weight:800;
}
.cm-name{ font-weight:800; font-size:13px; }
.cm-meta{ font-size:11.5px; color:var(--text-dim); margin-left:auto; }
.cm-body{ font-size:13.5px; line-height:1.75; white-space:pre-wrap; word-break:break-word; }

/* 十分制用十个点表示，比星星更省地方也更清楚 */
.cm-score{ display:inline-flex; align-items:center; gap:1.5px; }
.cm-score i{ width:4px; height:10px; border-radius:1px; background:var(--line-strong); display:block; }
.cm-score i.on{ background:var(--accent); }
.cm-score b{ font-size:11px; color:var(--text-dim); margin-left:4px; }

.cm-actions{ display:flex; gap:14px; margin-top:7px; }
.cm-act{
  font:inherit; font-size:12px; cursor:pointer;
  background:none; border:0; padding:0;
  color:var(--text-dim); display:inline-flex; align-items:center; gap:4px;
}
.cm-act:hover{ color:var(--text); }
.cm-act__ico{ font-size:13px; }
.cm-act--danger:hover{ color:var(--danger, #d9534f); }
.cm-more{ text-align:center; margin-top:14px; }

/* ---------------------------------------------------------------- 弹幕画布 */
/*
 * 叠在最上层：超分画布处理视频帧，弹幕不该被拿去跑 CNN。
 * pointer-events:none 让它不挡播放器的点击（控制条、双击全屏）。
 *
 * 弹幕的**控件**（开关、发送框、颜色、类型）都在播放器控制条里，
 * 见下面「自研播放器」一节 —— 这里只管画布。
 */
.player-wrap #dm-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; display:block;
}

/* ================================================================ 自研播放器 */
/*
 * 结构（见 public/player.js 的说明）：
 *   .bk-player
 *     ├─ <video>          原生画面
 *     ├─ canvas.sr        Anime4K 输出
 *     ├─ canvas.dm        弹幕
 *     └─ .bk-chrome       控制条 ← 永远在最上层
 *
 * 控制条是 video 的**兄弟**而不是子节点，所以开超分把 video 盖住时
 * 控件照样能用 —— 从结构上避免「开了超分就拖不动进度条」。
 */
.bk-player{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:var(--r-card); overflow:hidden;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.bk-player video{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; background:#000; object-fit:contain; cursor:pointer;
}
.bk-player canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; display:block;
}
.bk-player canvas.sr{ background:#000; }
.bk-player canvas[hidden]{ display:none; }

/* 光标：播放中不动就藏起来，跟控制条一起 */
.bk-player.is-idle{ cursor:none; }
.bk-player.is-idle video{ cursor:none; }
.bk-player.is-idle .bk-chrome{ opacity:0; pointer-events:none; }

.bk-chrome{
  position:absolute; inset:0; z-index:5;
  opacity:1; transition:opacity .22s ease;
  display:flex; flex-direction:column; justify-content:flex-end;
  /* 控制条下面压一层渐变，白色控件压在亮画面上才看得清 */
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 14%, transparent 30%);
}

/* ---------------- 进度条 ---------------- */
.bk-seek{
  position:relative; margin:0 14px 2px; padding:9px 0;
  cursor:pointer; touch-action:none;
}
.bk-seek__track{
  position:relative; height:5px; border-radius:3px;
  background:rgba(255,255,255,.26); overflow:visible;
  transition:height .12s ease;
}
.bk-seek:hover .bk-seek__track{ height:8px; }
.bk-seek__buf{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:rgba(255,255,255,.4); border-radius:3px;
}
.bk-seek__played{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--accent); border-radius:3px;
}
.bk-seek__knob{
  position:absolute; top:50%; left:0; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--accent); border:2.5px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
  opacity:0; transition:opacity .12s ease;
}
.bk-seek:hover .bk-seek__knob,
.bk-player.is-scrubbing .bk-seek__knob{ opacity:1; }
.bk-seek__tip{
  position:absolute; bottom:26px; transform:translateX(-50%);
  padding:3px 7px; border-radius:6px; pointer-events:none;
  background:rgba(0,0,0,.85); color:#fff;
  font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bk-seek__tip[hidden]{ display:none; }

/* ---------------- 按钮行 ---------------- */
.bk-bar{
  display:flex; align-items:center; gap:5px;
  padding:0 10px 9px;
}
.bk-spacer{ flex:1; }
.bk-btn{
  display:grid; place-items:center; flex:0 0 auto;
  width:35px; height:35px; padding:0; cursor:pointer;
  background:none; border:0; border-radius:9px;
  color:#fff; opacity:.92;
  transition:background .12s ease, opacity .12s ease;
}
.bk-btn:hover{ background:rgba(255,255,255,.16); opacity:1; }
.bk-btn--sm{ width:30px; height:30px; }
.bk-btn--text{
  /* 文字按钮（倍速、画质增强）：宽度撑开，别被 35px 的固定宽截断 */
  width:auto; min-width:46px; max-width:none; padding:0 11px;
  font:inherit; font-size:12.5px; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bk-btn.is-on{ color:var(--accent); }

.bk-time{
  font-size:12.5px; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.9); margin-left:4px; white-space:nowrap;
}
.bk-time__cur{ font-weight:700; }

/* 音量 */
.bk-vol{ display:flex; align-items:center; }
.bk-vol__slider{
  position:relative; width:0; height:22px; overflow:hidden;
  display:flex; align-items:center; cursor:pointer;
  transition:width .16s ease; touch-action:none;
}
/* 悬停才展开：平时只占一个按钮宽度，别跟进度条抢视觉 */
.bk-vol:hover .bk-vol__slider,
.bk-vol__slider:active{ width:74px; }
.bk-vol__slider::after{
  content:''; position:absolute; left:8px; right:8px; height:4px;
  border-radius:2px; background:rgba(255,255,255,.3);
}
.bk-vol__fill{
  position:relative; z-index:1;
  height:4px; margin-left:8px; border-radius:2px;
  background:#fff; width:100%; max-width:calc(100% - 16px);
}

/* 弹出菜单 */
.bk-pop{ position:relative; }
.bk-pop__menu{
  position:absolute; bottom:calc(100% + 8px); right:0;
  min-width:104px; padding:5px;
  background:rgba(22,20,28,.96); border:1.5px solid rgba(255,255,255,.14);
  border-radius:11px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:none; max-height:280px; overflow:auto;
}
.bk-pop.is-open .bk-pop__menu{ display:block; }
.bk-pop__menu button{
  display:block; width:100%; text-align:left;
  font:inherit; font-size:12.5px; cursor:pointer;
  padding:6px 10px; border:0; border-radius:7px;
  background:none; color:#fff; white-space:nowrap;
}
.bk-pop__menu button:hover{ background:rgba(255,255,255,.14); }
.bk-pop__menu button.is-on{ color:var(--accent); font-weight:800; }

/* ---------------- 中央大按钮（暂停时） ---------------- */
.bk-center{
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none;
}
.bk-big{
  display:grid; place-items:center; pointer-events:auto; cursor:pointer;
  width:74px; height:74px; border-radius:50%;
  background:rgba(0,0,0,.5); border:2.5px solid rgba(255,255,255,.7);
  color:#fff; opacity:0; transform:scale(.92);
  transition:opacity .18s ease, transform .18s ease;
}
.bk-player.is-paused .bk-big{ opacity:1; transform:scale(1); }
.bk-big:hover{ background:rgba(0,0,0,.72); }

/* ---------------- 状态提示 ---------------- */
.bk-toast{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  z-index:6; padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.82); color:#fff; font-size:12.5px;
  pointer-events:none;
}
.bk-toast[hidden]{ display:none; }

/* 缓冲中：中间转一圈 */
.bk-player.is-buffering::after{
  content:''; position:absolute; left:50%; top:50%;
  width:38px; height:38px; margin:-19px 0 0 -19px; z-index:6;
  border:3px solid rgba(255,255,255,.28); border-top-color:#fff;
  border-radius:50%; animation:bk-spin .8s linear infinite;
  pointer-events:none;
}
@keyframes bk-spin{ to{ transform:rotate(360deg); } }

/* 全屏时去掉圆角，贴着屏幕边 */
.bk-player.is-fullscreen{ border-radius:0; }

/* 手机上控制条给大一点，手指点得准 */
@media (max-width:640px){
  .bk-bar{ padding:0 6px 7px; gap:2px; }
  .bk-btn{ width:38px; height:38px; }
  .bk-time{ font-size:12px; }
  .bk-vol{ display:none; }   /* 手机用系统音量键，屏幕上再摆一个反而误触 */
}

/* 控制条里的弹幕发送框 —— 弹幕是播放的一部分，摆在控制条里 */
.bk-dm-send{
  display:flex; align-items:center; gap:6px;
  flex:0 1 auto; min-width:0; max-width:46%;
}
.bk-dm-send[hidden]{ display:none; }
.bk-dm-input{
  flex:1 1 auto; min-width:90px; width:auto;
  font:inherit; font-size:12.5px;
  padding:5px 11px;
  background:rgba(255,255,255,.12); color:#fff;
  border:1.5px solid rgba(255,255,255,.26); border-radius:var(--r-pill);
}
.bk-dm-input::placeholder{ color:rgba(255,255,255,.55); }
.bk-dm-input:focus{ outline:none; border-color:var(--accent); background:rgba(0,0,0,.4); }

.bk-dm-colors{ display:flex; gap:3px; flex:0 0 auto; }
.bk-dm-color{
  width:16px; height:16px; padding:0; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.45); border-radius:50%;
}
.bk-dm-color.is-on{ border-color:#fff; box-shadow:0 0 0 2px var(--accent); }

.bk-dm-mode{
  font:inherit; font-size:12px; flex:0 0 auto;
  padding:4px 6px;
  background:rgba(255,255,255,.12); color:#fff;
  border:1.5px solid rgba(255,255,255,.26); border-radius:8px;
}
.bk-dm-mode option{ color:#111; }

/* 控制条窄了（手机/小窗）就把发送框收起来，先保进度条和播放按钮 */
@media (max-width:820px){
  .bk-dm-send{ max-width:none; }
  .bk-dm-colors{ display:none; }
}
@media (max-width:640px){
  .bk-dm-send{ display:none !important; }
}

/* ---------------------------------------------------------------- 演职员 */
.credits__loading{ color:var(--text-dim); font-size:13px; padding:8px 0; }
.credits__h{
  font-size:12.5px; font-weight:800; color:var(--text-dim);
  margin:16px 0 10px; letter-spacing:.03em;
}
.credits__h:first-child{ margin-top:0; }

/*
 * 用 auto-fill + minmax 而不是固定列数：角色数不定，
 * 让它自己决定一行放几个，窄屏也不会挤成一列一个字。
 */
.credits__grid{
  display:grid; gap:14px 10px;
  grid-template-columns:repeat(auto-fill, minmax(76px, 1fr));
}
.credit{
  display:flex; flex-direction:column; align-items:center;
  gap:5px; text-align:center; min-width:0;
}
.credit__pic{
  width:64px; height:64px; flex:0 0 64px;
  border-radius:50%; object-fit:cover;
  background:var(--surface-2);
  border:2px solid var(--line-strong);
}
.credit__pic--none{ display:block; }
.credit--char .credit__pic{ border-color:var(--accent); }
.credit__name{
  font-size:12px; font-weight:700; line-height:1.35;
  /* 名字可能很长（尤其日文），最多两行，超了省略 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
.credit__cv, .credit__role{
  font-size:11px; color:var(--text-dim); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
.credits__more{ margin-top:12px; font-size:11.5px; color:var(--text-dim); }
.credits__score{
  font-weight:800; color:var(--accent-ink); font-size:13px;
}

/* ---------------------------------------------------------------- hero 切换过渡 */
/*
 * 切换方向由 JS 写进 --hero-dir（1 = 往左切下一部，-1 = 往右切上一部），
 * 位移动画跟着方向走 —— 往左切就向左淡出，符合「翻页」的直觉。
 */
.hero__copy{
  transition:opacity .18s ease, transform .18s ease;
  will-change:opacity, transform;
}
.hero__copy.is-leaving{
  opacity:0;
  transform:translateX(calc(var(--hero-dir, 1) * -22px));
}

/* 海报也跟着轻轻动一下，但幅度更小、方向相反，做出「错位」的层次感 */
.hero__poster{
  transition:opacity .2s ease, transform .2s ease;
}
.hero__poster:has(+ .hero__copy.is-leaving),
.hero__copy.is-leaving ~ .hero__poster{
  opacity:.45;
  transform:translateX(calc(var(--hero-dir, 1) * 14px)) scale(.98);
}

/* 背景（模糊封面）切换时淡一点，避免整块颜色硬切 */
#hero-bg{
  transition:opacity .45s ease, background-image .3s ease;
}

/*
 * 尊重系统的「减少动态效果」：
 * 开了这个设置的用户（前庭功能敏感）不该被强上动画。
 */
@media (prefers-reduced-motion: reduce){
  .hero__copy,
  .hero__poster,
  #hero-bg{ transition:none !important; }
  .hero__copy.is-leaving{ transform:none; }
}

/* ================================================================ 播放页两栏布局 */
/*
 * 左边播放区，右边选集/吐槽。
 * 窄屏（<1000px）时右栏落到下面 —— 手机上横着放两栏两边都不能用。
 */
/*
 * 两栏：左边播放区，右边选集。
 *
 * 播放页跑在 wide 模式（layout 传 wide:true），不受 .content 的
 * 1440px 限宽 —— 宽度**跟着视口走**，只留一点左右内边距。
 *
 * ⚠ 别再设小上限（1680 / 1760 都试过）：在 1912 宽的屏幕上照样留白，
 * 而「留白太多」正是反馈的问题。2200 只是防超宽屏，不是常用值。
 *
 * ⚠ 上内边距**不能是 0**：.content--wide 的 padding 是 `0 0 56px`，
 * 上边为零。别的 wide 页面（首页 hero）自带大块内边距所以看不出来，
 * 播放页没有 —— 于是「返回」按钮和标题直接贴着顶栏。这里补上。
 */
.player-page{
  max-width:2200px; margin:0 auto;
  padding:26px clamp(16px, 2vw, 44px) 56px;
}
.player-main{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 420px;
  gap:26px;
  align-items:start;
}
.player-col{ min-width:0; }

@media (max-width:1100px){
  .player-main{ grid-template-columns:minmax(0, 1fr); }
}

/* ---------------- 右侧栏 ---------------- */
.player-side{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  /* 侧栏自己滚动，页面不跟着长 —— 播放时不想让整页上下跳 */
  max-height:calc(100vh - 120px);
  display:flex; flex-direction:column;
}
@media (max-width:1000px){
  .player-side{ max-height:none; }
}

.pside-tabs{
  display:flex; gap:0; border-bottom:2px solid var(--line);
  background:var(--surface-2); flex:0 0 auto;
}
.pside-tab{
  flex:1; font:inherit; font-size:13px; font-weight:800; cursor:pointer;
  padding:11px 8px; border:0; background:none; color:var(--text-dim);
  border-bottom:3px solid transparent; margin-bottom:-2px;
}
.pside-tab:hover{ color:var(--text); }
.pside-tab.is-active{ color:var(--text); border-bottom-color:var(--accent); }

.pside-panel{ display:none; padding:12px; overflow-y:auto; flex:1 1 auto; }
.pside-panel.is-active{ display:block; }

.pside-loading, .pside-empty{
  color:var(--text-dim); font-size:12.5px; padding:14px 4px; line-height:1.7;
}
/*
 * ⚠ 光靠 HTML 的 hidden 属性不够：这些元素设了 padding，
 * 而有些浏览器/样式组合下 hidden 的 display:none 会被覆盖，
 * 结果「正在载入…」和内容一起显示。显式写一遍最稳。
 */
.pside-loading[hidden], .pside-empty[hidden],
.cm-more[hidden], .pinfo[hidden], .pcm-bar__form[hidden], .pcm-bar__login[hidden]{
  display:none;
}
.pside-empty a{ color:var(--accent-ink); }

/* ---------------- 切源 / 换线路 ---------------- */
.pside-switch{
  display:flex; flex-direction:column; gap:8px;
  padding-bottom:11px; margin-bottom:11px;
  border-bottom:2px solid var(--line);
}
.pside-switch__row{ display:flex; align-items:center; gap:9px; }
.pside-switch__row[hidden]{ display:none; }
.pside-switch__label{
  font-size:12px; font-weight:800; color:var(--text-dim);
  flex:0 0 30px;
}
.pside-select{
  flex:1; min-width:0;
  font:inherit; font-size:12.5px;
  padding:6px 9px;
  background:var(--bg); color:var(--text);
  border:2px solid var(--line-strong); border-radius:9px;
}
.pside-select:focus{ outline:none; border-color:var(--accent); }
.pside-select:disabled{ opacity:.55; cursor:wait; }

/* ---------------- 选集 ---------------- */
.pside-eps{
  display:grid; gap:6px;
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
}
.pside-ep{
  display:block; text-decoration:none;
  font-size:12px; font-weight:700;
  padding:8px 7px; text-align:center;
  background:var(--surface-2); color:var(--text-dim);
  border:2px solid var(--line); border-radius:9px;
  /* 集名可能很长（「那我们走吧」这种），单行省略 */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pside-ep:hover{ background:var(--bg); color:var(--text); border-color:var(--line-strong); }
.pside-ep.is-playing{
  background:var(--accent); color:var(--text); border-color:var(--outline);
  box-shadow:0 2px 0 var(--outline);
}

/* ---------------- 吐槽 ---------------- */
.pside-cm__avg{
  display:flex; align-items:baseline; gap:7px;
  padding:0 2px 11px; margin-bottom:11px;
  border-bottom:2px solid var(--line);
}
.pside-cm__avg b{ font-size:21px; color:var(--accent-ink); }
.pside-cm__avg span{ font-size:11.5px; color:var(--text-dim); }

.pside-cm__item{ padding:11px 2px; border-bottom:1px solid var(--line); }
.pside-cm__item:last-child{ border-bottom:0; }
.pside-cm__head{ display:flex; align-items:center; gap:7px; margin-bottom:5px; flex-wrap:wrap; }
.pside-cm__head .cm-avatar{
  width:22px; height:22px; flex:0 0 22px; font-size:11px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--text); font-weight:800;
}
.pside-cm__head .cm-name{ font-size:12px; font-weight:800; }
.pside-cm__score{
  font-size:11px; font-weight:800; color:var(--accent-ink);
  padding:1px 6px; background:var(--surface-2); border-radius:var(--r-pill);
}
.pside-cm__time{ font-size:11px; color:var(--text-dim); margin-left:auto; }
.pside-cm__body{ font-size:12.5px; line-height:1.7; word-break:break-word; }
.pside-cm__likes{ font-size:11px; color:var(--text-dim); margin-top:4px; }
.pside-cm__replies{
  margin-top:7px; padding-left:9px;
  border-left:2px solid var(--line-strong);
}
.pside-cm__reply{ font-size:11.5px; color:var(--text-dim); line-height:1.6; }
.pside-cm__reply b{ color:var(--text); }
.pside-cm__more{ text-align:center; padding:10px 0 2px; }

/* ---------------------------------------------------------------- 侧边栏底部的合作联系 */
/*
 * 放在最底下（登录块 + 后台入口之后）。
 * 做成一个小卡片而不是普通导航项 —— 它是「联系信息」不是「功能入口」，
 * 视觉上跟上面的链接分开更清楚。
 */
.side__contact{
  display:flex; align-items:center; gap:9px;
  padding:7px 10px;
  text-decoration:none;
  background:var(--surface); border:2px dashed var(--line-strong);
  border-radius:var(--r-chip);
  transition:border-color .14s ease, background .14s ease;
}
.side__contact:hover{
  border-color:var(--accent);
  border-style:solid;
  background:var(--surface-2);
}
.side__contact svg{
  width:16px; height:16px; flex:0 0 16px;
  color:var(--accent-ink);
}
.side__contact span{
  display:flex; flex-direction:column; gap:1px; min-width:0;
}
.side__contact i{
  font-style:normal; font-size:10.5px; font-weight:700;
  color:var(--text-dim); letter-spacing:.04em;
}
.side__contact b{
  /* 邮箱可能超过侧边栏宽度，单行省略 */
  font-size:12px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------------------------------------------------------------- 详情页只读吐槽 */
/*
 * 详情页那份是只读的（完整版在播放页右侧栏），
 * 所以底部给一条引导，说清楚「想发就去播放页」。
 */
.comments--readonly .cm-item{ padding:13px 0; border-top:2px solid var(--line); }
.comments--readonly .cm-item:first-child{ border-top:0; }
.comments__to-play{
  margin-top:14px; padding-top:13px;
  border-top:2px dashed var(--line);
  font-size:12.5px; color:var(--text-dim); line-height:1.7;
}
.comments__to-play a{ color:var(--accent-ink); font-weight:700; }
.comments__to-play[hidden]{ display:none; }

/* ---------------- 播放页右侧栏的完整吐槽 ---------------- */
.pside-cm__form{
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:2px solid var(--line);
}
.pside-cm__form[hidden]{ display:none; }
.pside-cm__rate{ display:flex; gap:6px; margin-bottom:8px; }
.pside-cm__star{
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
  padding:5px 11px; flex:1;
  background:var(--surface-2); color:var(--text-dim);
  border:2px solid var(--line-strong); border-radius:var(--r-pill);
}
.pside-cm__star:hover{ background:var(--bg); color:var(--text); }
.pside-cm__star.is-on{ background:var(--accent); color:var(--text); border-color:var(--outline); }

.pside-cm__form textarea{
  width:100%; font:inherit; font-size:12.5px; resize:vertical;
  padding:8px 10px; min-height:52px;
  background:var(--bg); color:var(--text);
  border:2px solid var(--line-strong); border-radius:9px;
}
.pside-cm__form textarea:focus{ outline:none; border-color:var(--accent); }
.pside-cm__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:7px;
}
.pside-cm__hint{ font-size:11.5px; color:var(--text-dim); }
.pside-cm__hint.is-bad{ color:var(--danger, #d9534f); }
.pside-cm__login{ margin-bottom:12px; }
.pside-cm__login[hidden]{ display:none; }

.pside-cm__me{
  font-size:10px; font-weight:800; padding:1px 5px;
  background:var(--accent); color:var(--text); border-radius:var(--r-pill);
}
.pside-cm__acts{ display:flex; gap:13px; margin-top:6px; }
.pside-cm__act{
  font:inherit; font-size:11.5px; cursor:pointer;
  background:none; border:0; padding:0;
  color:var(--text-dim); display:inline-flex; align-items:center; gap:3px;
}
.pside-cm__act:hover{ color:var(--text); }
.pside-cm__act.is-danger:hover{ color:var(--danger, #d9534f); }
.pside-cm__replies{
  margin-top:8px; padding-left:9px;
  border-left:2px solid var(--line-strong);
}
.pside-cm__item.is-reply{
  padding:8px 0; border-bottom:0;
}
.pside-cm__item.is-reply .pside-cm__head{ margin-bottom:3px; }
.pside-cm__item.is-reply .pside-cm__body{ font-size:12px; }

/* ================================================================ 评论区（详情页 + 播放页共用） */
/*
 * 两边共用一份 JS（public/comments.js），类名也统一：
 *   .cm-avatar / .cm-name / .cm-mine / .cm-score-tag
 *   .cm-like-ico / .cm-like-n / .cm-replies
 * 播放页侧栏那份用 .pside-cm__* 做紧凑排版（见上面的布局一节）。
 */
.cm-mine{
  font-size:10px; font-weight:800; padding:1px 5px;
  background:var(--accent); color:var(--text); border-radius:var(--r-pill);
}
.cm-score-tag{
  font-size:11px; font-weight:800; color:var(--accent-ink);
  padding:1px 7px; background:var(--surface-2); border-radius:var(--r-pill);
}
.cm-replies{
  margin-top:9px; padding-left:11px;
  border-left:2px solid var(--line-strong);
}
.cm-replies .cm-item{ padding:9px 0; border-top:0; }
.cm-replies .cm-body{ font-size:12.5px; }
.cm-replies .cm-item__head{ margin-bottom:4px; }

/* 分页按钮 */
.cm-more{ text-align:center; margin-top:14px; }
.cm-more[hidden]{ display:none; }

/* ================================================================ 播放页下半部分 */
/*
 * 播放器下面依次是：番剧信息条 → 完整评论区 → sticky 输入框。
 * 这样播放页可以一直往下滚，而不只是「一屏播放器 + 一个右侧栏」。
 */

/* ---------------- 番剧信息条（仿 Bangumi 条目页的排版）---------------- */
/*
 * 左边海报，右边资料。资料里的顺序是刻意排的：
 * 标题 → 数据 → 标签 → 声优 → 简介 → 评分，
 * 越往上越是「一眼要看到」的。
 */
.pinfo{
  display:grid;
  grid-template-columns:190px minmax(0, 1fr);
  gap:22px;
  margin-top:26px; padding:20px;
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--r-card);
}
.pinfo[hidden]{ display:none; }
.pinfo__poster{
  border-radius:var(--r-chip); overflow:hidden;
  background:var(--bg); aspect-ratio:2/3;
}
.pinfo__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.pinfo__main{ min-width:0; display:flex; flex-direction:column; gap:11px; }

.pinfo__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.pinfo__title{ font-size:22px; line-height:1.3; margin:0; }
.pinfo__actions{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.pinfo__badge{
  font-size:11.5px; font-weight:800; padding:3px 10px;
  background:var(--surface-2); color:var(--text-dim);
  border:1.5px solid var(--line-strong); border-radius:var(--r-pill);
}

/* 统计行（播放量 / 弹幕 / 追番数这类）*/
.pinfo__stats{ display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--text-dim); }
.pinfo__stats b{ color:var(--text); font-weight:800; }

/* 标签 */
.pinfo__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.pinfo__tags span{
  font-size:11.5px; padding:2px 9px;
  background:var(--surface-2); color:var(--text-dim);
  border-radius:var(--r-pill);
}

/* 资料定义列表（声优、放送时间等）*/
.pinfo__dl{
  display:grid; grid-template-columns:auto minmax(0, 1fr);
  gap:5px 12px; margin:0; font-size:12.5px; line-height:1.65;
}
.pinfo__dl dt{ color:var(--text-dim); white-space:nowrap; }
.pinfo__dl dd{ margin:0; min-width:0; }
.pinfo__dl dd a{ color:var(--accent-ink); }

.pinfo__syn{
  margin:0; font-size:12.5px; line-height:1.8;
  color:var(--text-dim); word-break:break-word;
}
.pinfo__syn.is-clamped{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.pinfo__syn-more{
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
  background:none; border:0; padding:0; color:var(--accent-ink);
}

.pinfo__score{
  display:flex; align-items:baseline; gap:10px;
  margin-top:6px; padding-top:11px;
  border-top:1px solid var(--line);
}
.pinfo__score b{ font-size:26px; color:var(--accent-ink); line-height:1; }
.pinfo__score i{ font-style:normal; font-size:12px; color:var(--text-dim); }

@media (max-width:720px){
  .pinfo{ grid-template-columns:120px minmax(0, 1fr); gap:14px; padding:14px; }
  .pinfo__title{ font-size:18px; }
}

/* ---------------- 完整评论区 ---------------- */
.pcomments{ margin-top:20px; }
.pcomments__head{ position:sticky; top:0; z-index:3; background:var(--surface); }

/* 列表里的每条评论，间距比详情页松一点（这里宽度大）*/
.pcomments .cm-item{ padding:16px 0; }
.pcomments .cm-body{ font-size:13.5px; line-height:1.85; }

/* ---------------- 跟着滚的评论输入框 ---------------- */
/*
 * position:sticky + bottom:0 让它在**页面滚动时贴在视口底部**，
 * 但滚到页脚时会被页脚推上去 —— 正好停在版权那行上面。
 *
 * ⚠ 用 sticky 而不是 fixed：fixed 会永远盖在页脚上面，
 * 而且盖住内容（页脚最后几行看不到）。sticky 在容器内滚动，
 * 到边界自然停住，不需要 JS 计算位置。
 */
.pcm-bar{
  position:sticky; bottom:0; z-index:20;
  margin-top:18px;
  padding:11px 0;
  background:linear-gradient(to top, var(--bg) 68%, transparent);
}
.pcm-bar__inner{
  background:var(--surface);
  border:2px solid var(--line-strong);
  border-radius:var(--r-card);
  box-shadow:0 -4px 18px rgba(0,0,0,.10);
  padding:9px 11px;
}
.pcm-bar__form{ display:flex; align-items:center; gap:10px; }
.pcm-bar__form[hidden]{ display:none; }
.pcm-bar__rate{ display:flex; gap:5px; flex-shrink:0; }
.pcm-bar__star{
  font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  padding:5px 10px; white-space:nowrap;
  background:var(--surface-2); color:var(--text-dim);
  border:2px solid var(--line-strong); border-radius:var(--r-pill);
}
.pcm-bar__star:hover{ background:var(--bg); color:var(--text); }
.pcm-bar__star.is-on{ background:var(--accent); color:var(--text); border-color:var(--outline); }

.pcm-bar__form textarea{
  flex:1 1 auto; min-width:0;
  font:inherit; font-size:13px; resize:none;
  padding:8px 11px; min-height:38px; max-height:110px;
  background:var(--bg); color:var(--text);
  border:2px solid var(--line-strong); border-radius:9px;
  line-height:1.5;
}
.pcm-bar__form textarea:focus{ outline:none; border-color:var(--accent); }
.pcm-bar__hint{ font-size:11.5px; color:var(--text-dim); flex-shrink:0; max-width:230px; }
.pcm-bar__hint.is-bad{ color:var(--danger, #d9534f); }
.pcm-bar__login{ display:flex; justify-content:center; padding:3px 0; }
.pcm-bar__login[hidden]{ display:none; }

@media (max-width:720px){
  .pcm-bar__form{ flex-wrap:wrap; }
  .pcm-bar__form textarea{ order:3; flex-basis:100%; }
}

/* ---------------- 侧栏「吐槽」标签的跳转入口 ---------------- */
.pside-jump{ padding:6px 2px; }
.pside-jump__text{
  font-size:12.5px; line-height:1.8; color:var(--text-dim);
  margin:0 0 12px;
}
.pside-jump__text b{ color:var(--text); }

/* ================================================================ 播放页等比放大 */
/*
 * 反馈：「组件全部等比放大一点，不然页面留白太多」。
 *
 * 做法：这里集中覆盖一遍尺寸，**不去改上面散落的原规则**。
 *   · CSS 后者胜出，所以这份放最后就能生效
 *   · 要调整只动这一节，不用满文件找
 *   · 万一以后要加「界面缩放」设置，这里就是现成的挂点
 *
 * 放大的是：字号 +1~2px、内边距 +2~5px、选集栏 380→420。
 * 播放器本身不动 —— 它是 16:9 跟着容器宽度走的，容器已经放宽过了。
 */

/* ---- 选集侧栏 ---- */
.player-side{ border-radius:calc(var(--r-card) + 2px); }
.pside-tab{ padding:14px 12px; font-size:14px; }
.pside-panel{ padding:16px; }
.pside-switch{ gap:11px; padding-bottom:14px; margin-bottom:14px; }
.pside-switch__label{ font-size:13px; }
.pside-select{ font-size:13.5px; padding:9px 11px; }
.pside-loading, .pside-empty{ font-size:13.5px; padding:16px 4px; }

.pside-eps{ gap:8px; }
.pside-ep{
  font-size:13.5px; padding:10px 11px; border-radius:10px;
}
.pside-ep.is-playing{ padding-left:14px; }

/* ---- 播放器下方：信息条 ---- */
.pinfo{
  grid-template-columns:215px minmax(0, 1fr);
  gap:26px; margin-top:30px; padding:24px;
}
.pinfo__title{ font-size:25px; }
.pinfo__badge{ font-size:12.5px; padding:4px 12px; }
.pinfo__stats{ font-size:13.5px; gap:20px; }
.pinfo__tags span{ font-size:12.5px; padding:3px 11px; }
.pinfo__dl{ font-size:13.5px; gap:7px 14px; }
.pinfo__syn{ font-size:13.5px; line-height:1.9; }
.pinfo__syn-more{ font-size:13px; }
.pinfo__score b{ font-size:30px; }
.pinfo__score i{ font-size:13px; }

/* ---- 完整评论区 ---- */
.pcomments{ margin-top:26px; }
.pcomments .cm-item{ padding:19px 0; }
.pcomments .cm-body{ font-size:14.5px; line-height:1.9; }
.pcomments .cm-item__head{ gap:9px; }
.pcomments .cm-avatar{ width:34px; height:34px; font-size:15px; }
.pcomments .cm-name{ font-size:14px; }
.pcomments .cm-meta{ font-size:12.5px; }
.pcomments .cm-actions{ gap:18px; margin-top:9px; }
.pcomments .cm-act{ font-size:13px; }
.pcomments .cm-score-tag{ font-size:12.5px; padding:2px 9px; }

/* ---- 底部跟着滚的输入框 ---- */
.pcm-bar{ padding:14px 0; }
.pcm-bar__inner{ padding:12px 14px; border-radius:calc(var(--r-card) + 2px); }
.pcm-bar__star{ font-size:13px; padding:7px 13px; }
.pcm-bar__form textarea{ font-size:14px; padding:10px 13px; min-height:44px; max-height:130px; }
.pcm-bar__form .btn{ font-size:14px; padding:10px 20px; }
.pcm-bar__hint{ font-size:12.5px; }

/* ---- 面板通用（评论区/信息条用的 .panel）在播放页里也放大一点 ---- */
.pcomments .panel__head h2{ font-size:19px; }
.pcomments .cm-rating{ font-size:14px; }
.pcomments .cm-rating b{ font-size:23px; }

/* 封面取不到时：网格收成一列，别让内容被挤在窄柱里 */
.pinfo--noposter{ grid-template-columns:minmax(0, 1fr); }

/* ---- 头部：返回 / 标题 / 集数 三者的间距 ---- */
/*
 * 反馈「返回按钮、标题和上面的靠得太近」。上面的顶栏间距在 .player-page
 * 的上内边距里（见那一节），这里管头部**内部**的间距。
 */
.player-head{ gap:18px; margin-bottom:22px; }
.player-head__title{ gap:14px; }
.player-head__title h1{ font-size:24px; }
.player-head__title .sub{ font-size:15px; }

/* ================================================================ 规范详情页 /anime/{bgmId} */
/*
 * 这页是**给搜索引擎和 AI 爬虫看的主页面**（服务端渲染，首屏就有内容），
 * 所以排版上把「能被读懂的信息」放在最前面：标题 → 评分/年份 → 标签
 * → 来源入口 → 声优 → 简介。
 *
 * 跟播放页的信息条（.pinfo）刻意用了不同的类名：那个是前端渲染的
 * 紧凑条，这个是完整的页面级排版，混用会互相牵制。
 */
.subject-page{ max-width:1000px; margin:0 auto; }

.subject-hero{
  display:grid; grid-template-columns:210px minmax(0, 1fr);
  gap:26px; margin-bottom:26px;
}
.subject-hero__poster{
  border-radius:var(--r-card); overflow:hidden;
  background:var(--surface); border:2px solid var(--line);
  aspect-ratio:2/3;
}
.subject-hero__poster img{ width:100%; height:100%; object-fit:cover; display:block; }

.subject-hero__main{ min-width:0; display:flex; flex-direction:column; gap:13px; }
.subject-hero__title{ font-size:28px; line-height:1.25; margin:0; }
.subject-hero__sub{ margin:0; font-size:14px; color:var(--text-dim); }

.subject-hero__meta{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:16px;
  font-size:14px; color:var(--text-dim);
}
.subject-score{ display:inline-flex; align-items:baseline; gap:7px; }
.subject-score b{ font-size:30px; color:var(--accent-ink); line-height:1; }
.subject-score i{ font-style:normal; font-size:12px; color:var(--text-dim); }

.subject-hero__actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; }

/* 声优列表：两列，窄屏一列。名字加粗、角色名次要 */
.subject-persons{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(184px, 1fr));
  gap:9px 18px;
}
.subject-persons li{ font-size:13.5px; display:flex; gap:8px; min-width:0; }
.subject-persons li b{ flex-shrink:0; }
.subject-persons li span{
  color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.subject-synopsis{
  font-size:14.5px; line-height:1.95; margin:0;
  color:var(--text); white-space:pre-wrap;
}

@media (max-width:720px){
  .subject-hero{ grid-template-columns:132px minmax(0, 1fr); gap:16px; }
  .subject-hero__title{ font-size:21px; }
  .subject-score b{ font-size:24px; }
  .subject-synopsis{ font-size:13.5px; }
}

/* 外部来源标记（目前只有 Bangumi 的吐槽） */
/*
 * 外部数据是**只读**的 —— 不能点赞/回复/删除。标出来免得用户
 * 点了没反应以为是 bug。
 */
.cm-ext{
  font-size:10px; font-weight:800; letter-spacing:.03em;
  padding:1px 6px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color:var(--text-dim);
  border:1px solid var(--line-strong);
}
/* 外部评论整条稍微收一点、左侧加一条细线，跟本站讨论区分开 */
.cm-item--ext{
  border-left:2px solid var(--line);
  padding-left:12px;
  margin-left:-2px;
}

/* 侧栏切源时的一句提示 */
/*
 * 切源**不自动跳转**（不同源的集名对不上，自动猜容易跳错），
 * 所以要用一句话告诉用户「现在去点一集」。
 * 空的时候不占高度 —— 免得没提示时列表上多一块空白。
 */
.pside-hint{
  margin:0 0 10px; font-size:12.5px; line-height:1.6;
  color:var(--accent-ink); font-weight:600;
}
.pside-hint:empty{ display:none; }

/* ---------------------------------------------------------------- 详情页「换到」那一行 */
/*
 * 反馈「换源太紧凑」。原来 chip 之间只有 7px、跟上下两块也贴得很近，
 * 一行挤四五个就像一坨。放宽：
 *   · chip 之间 9px，label 和第一个 chip 之间多留一点
 *   · chip 自身 padding 加大（原来是 4px 11px，太小不好点）
 *   · 整行上下留白，跟「来源」那行和按钮区分开
 */
.srclist-inline{
  gap:9px 10px;
  margin-top:14px;
  margin-bottom:4px;
}
.srclist-inline__label{
  font-size:13px;
  margin-right:4px;
}
.srcchip{
  font-size:13px;
  padding:7px 15px;
  /* 小屏上换行时行间距别太挤 */
  line-height:1.4;
}

/* 「来源：xxx」那行也松一点，不然跟 chip 连在一起 */
.detail__src{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-bottom:2px;
}

/* 外部评论的头像（Bangumi 有真头像） */
/*
 * 头像是 lain.bgm.tv 上的，国内打不开，所以走 /img 中转。
 * 用 object-fit 裁成圆的，尺寸跟首字母版一致。
 */
.cm-avatar--img{
  padding:0; overflow:hidden; background:none;
}
.cm-avatar--img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* 收藏状态（看过/在看/抛弃）—— 判断一条评价有没有参考价值时有用 */
.cm-collect{
  font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-dim);
  border:1px solid var(--line);
}

/* ---------------------------------------------------------------- 搜索页：筛选 + 排序 */
/*
 * 照 Animaku 的 SearchPage：上面一排「全部 / 动漫 / 非动漫」，
 * 右边一排「最新放送 / 默认匹配 / 最早放送」。
 * 都用胶囊按钮，选中的那个用强调色 —— 跟站里其它 pill 一致。
 */
.search-tools{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 18px;
  margin:18px 0 22px;
}
.search-tabs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.search-sorts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.search-sorts__label{ font-size:12.5px; color:var(--text-dim); }

.kz-pill{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:13px; font-weight:700;
  padding:6px 14px; cursor:pointer;
  background:var(--surface); color:var(--text-dim);
  border:2px solid var(--line-strong); border-radius:var(--r-pill);
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.kz-pill:hover{ border-color:var(--accent); color:var(--text); }
.kz-pill.is-active{
  background:var(--accent); color:var(--text);
  border-color:var(--outline);
  box-shadow:0 2px 0 var(--outline);
}
/* 后面那个条数用小字、别抢戏 */
.kz-pill__n{ font-size:11px; opacity:.75; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- 详情页头部：把三行拉开 */
/*
 * 反馈「来源 / 换到 / 按钮 挨得太紧」。原来是三行各自 margin-top:10px 叠着，
 * 挤成一坨。现在给每一行明确的上下留白，视觉上分成三块。
 */
.detail__src{ margin-bottom:4px; }
.detail__main .srclist-inline{ margin-top:16px; margin-bottom:6px; }
.detail__main .detail__actions{ margin-top:18px; }

/* ---------------------------------------------------------------- 播放器「点一下播放」提示 */
/*
 * 自动播放被浏览器拦下时显示这句。它长得像按钮，那就让它**真能点** ——
 * 原来是个纯文字，点了没反应（用户会以为坏了）。
 *
 * 另外：真的播起来时必须把它收掉（见 player 脚本里的 playing 监听）。
 * 之前没有那个监听，于是已经在播了还挂着「点一下播放开始」。
 */
.player-msg.is-tap{
  cursor:pointer;
  pointer-events:auto;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:2px solid var(--outline);
  border-radius:var(--r-pill);
  padding:10px 22px;
  font-weight:700;
  box-shadow:0 3px 0 var(--outline);
  transition:transform .12s ease, background .12s ease;
}
.player-msg.is-tap:hover{ background:var(--accent); }
.player-msg.is-tap:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--outline); }

/* ================================================================ Bangumi 吐槽的显示细节 */
/*
 * 这一段的规则**故意放在文件最后**：CSS 同优先级下后者胜出，
 * 所以它能盖掉前面那些早期版本。这样改样式不用去精确匹配旧文本，
 * 少一类「替换没生效」的坑。
 */

/*
 * 外部评论的头像（Bangumi 有真头像）。
 *
 * 踩过两个坑：
 *   1. .cm-avatar 原本是 `display:grid; place-items:center`（给「首字母」
 *      那种文字头像用的）。套在 <img> 上会让图片不撑满、缩在中间 ——
 *      看起来像图挂了。必须改成 block。
 *   2. Bangumi 的**默认头像**是 /pic/user/l/icon.jpg，一张很小的预览图，
 *      放大到 26px 会糊、还偏在左上角。所以给一层底色兜底 + 居中裁剪。
 */
.cm-avatar--img{
  display:block !important;
  padding:0 !important;
  overflow:hidden;
  background:var(--surface-2);
}
.cm-avatar--img img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; border-radius:50%;
}

/*
 * 「Bangumi」来源徽章。
 *
 * 原来 `--text-dim` + 很淡的背景 —— 浅色主题下几乎看不见（用户反馈）。
 * 改成实色底 + 反白字：两种主题都清楚，而且一眼认得出是外部来源。
 */
.cm-ext{
  font-size:10px !important;
  font-weight:800;
  padding:2px 7px !important;
  border-radius:var(--r-pill);
  background:var(--accent-ink) !important;
  color:var(--surface) !important;
  border:1px solid var(--outline);
}

/* 收藏状态（看过 / 在看 / 抛弃）—— 同样要够清楚 */
.cm-collect{
  font-size:10px !important;
  font-weight:800;
  padding:2px 7px !important;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  color:var(--text) !important;
  border:1px solid var(--line-strong);
}

/*
 * 外部评论条目：左侧一条竖线 + 稍微内缩，跟本站讨论区分开。
 * 用 border-left 而不是 margin，免得把正文挤窄。
 */
.cm-item--ext{
  border-left:3px solid var(--line-strong);
  padding-left:14px;
  margin-left:0;
}
.cm-item--ext .cm-item__head{ margin-bottom:8px; }

/* ================================================================ 评论区：头像与间距（覆盖版） */
/*
 * 反馈「头像和边距太挤」。三个原因叠在一起：
 *
 *   1. 我给外部评论加的 `border-left:3px + padding-left:14px` 把内容整体
 *      右推 —— 窄容器下头像被裁掉左边，看起来「贴边」。
 *   2. 头像 26px + head 的 gap 8px，在窄栏里留给名字的空间太少。
 *   3. .cm-item 本身还有内边距，几个 8~14px 叠起来就很紧。
 *
 * 改法：外部评论用**更轻**的左边线（2px + 10px），头像加大到 30px
 * 并给名字多留 gap；窄屏（<560px）干脆去掉左边线，避免挤。
 */

/* 头部间距：头像 → 名字 → 徽章 之间都松一点 */
.cm-item__head{
  gap:11px !important;
  margin-bottom:9px !important;
  align-items:center;
}

/* 头像：30px 圆，别被 flex 压扁 */
.cm-avatar{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  font-size:14px;
}
.cm-avatar--img img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; border-radius:50%;
}

/* 外部评论：轻一点的左边线，别把内容挤出去 */
.cm-item--ext{
  border-left:2px solid var(--line) !important;
  padding-left:10px !important;
  margin-left:0 !important;
}

/* 正文跟头部也要留开 —— 原来紧贴着 */
.cm-item .cm-body{ margin-top:2px; }

/* 条目之间松一点，不然头像上下也挤 */
#cm-list .cm-item{ padding-top:16px; padding-bottom:16px; }
#cm-list .cm-item:first-child{ padding-top:0; }

/*
 * 窄屏：去掉外部评论的左边线，把宽度还给内容。
 * 手机上本来就窄，再扣掉 12px 的线+内距，头像和名字就贴在一起了。
 */
@media (max-width:560px){
  .cm-item--ext{ border-left:0 !important; padding-left:0 !important; }
  .cm-item__head{ gap:9px !important; }
}

/* ================================================================ 评论区头像（最终版） */
/*
 * ⚠⚠ 这一版把前面所有关于头像的规则**全部盖掉**。踩过的坑按顺序记一下：
 *
 *   1. 头像容器 .cm-avatar 原本是 `display:grid; place-items:center` ——
 *      那是给「首字母」文字头像用的。
 *   2. 我给它套 <img> 时没有先重置 display，图片被 grid 拉伸 → **变成椭圆**。
 *   3. 我又用 `width/height !important` 去压，反而把宽高比锁死在错误的值上，
 *      椭圆更明显。
 *
 * 正确做法：**容器和图片都显式方形 + object-fit:cover**，
 * 并且不跟旧的 grid 规则打架（display:block 覆盖掉 grid）。
 *
 * 用 aspect-ratio 而不是只写死 width/height —— 这样即使外面有 flex
 * 把它压窄，高度也会跟着变，始终保持正方形。
 */
.cm-avatar{
  display:block !important;
  place-items:initial !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  aspect-ratio:1 / 1;
  flex:0 0 30px !important;
  border-radius:50% !important;
  overflow:hidden;
  /* 文字头像（首字母）也要居中 —— 用 line-height 而不是 grid */
  text-align:center;
  line-height:30px;
  font-size:14px;
  font-weight:800;
}

/* 图片：撑满容器、裁成正方形、圆角在容器上 */
.cm-avatar img,
.cm-avatar--img img{
  display:block !important;
  width:30px !important;
  height:30px !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:1 / 1;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:50%;
}

/* 带图头像的容器不需要文字排版那套 */
.cm-avatar--img{
  display:block !important;
  padding:0 !important;
  line-height:0 !important;
  background:var(--surface-2);
}

/* ================================================================ 外部评论：不要割裂感 */
/*
 * 反馈「不需要区分出来，打来源标记就够了，但不要有割裂感」。
 *
 * 所以把之前加的左边线、内缩、左边距**全部撤掉** ——
 * 外部评论跟本站评论排版完全一致，只靠头像旁边的「Bangumi」徽章标明来源。
 *
 * （原来那套 `border-left + padding-left + margin-left` 是想做视觉分组，
 *   实测在窄容器里会把头像挤到边、还显得整块跟上下文断开。）
 */
.cm-item--ext{
  border-left:0 !important;
  padding-left:0 !important;
  margin-left:0 !important;
  background:none !important;
}
/* 之前给外部评论调整过的内边距也一并还原成跟普通条目一样 */
#cm-list .cm-item{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------------------------------------------------------------- 账号设置：头像 */
.avatar-row{
  display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap;
}
/* 预览：跟站点其它地方的圆形头像保持一致（30px 那套是评论区的，这里大一点） */
.avatar-preview{
  width:96px; height:96px; flex:0 0 96px;
  aspect-ratio:1 / 1;
  border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--accent); color:var(--text);
  font-size:38px; font-weight:800;
  border:3px solid var(--outline);
}
.avatar-preview img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.avatar-actions{ flex:1 1 260px; min-width:220px; }
.avatar-actions .btn{ margin-right:8px; }
/* 账号信息那种「键 — 值」两列 */
.kv{
  display:flex; align-items:baseline; gap:14px;
  padding:9px 0; border-top:2px solid var(--line);
}
.kv:first-child{ border-top:0; }
.kv__k{ flex:0 0 88px; font-size:12.5px; color:var(--text-dim); }
.kv__v{ font-weight:700; font-size:13.5px; word-break:break-all; }

/* ================================================================ 「Bangumi」来源徽章（最终版） */
/*
 * ⚠ 这个徽章坏过一次，根因值得记下来：
 *
 * 我原来写的是 `background:var(--accent-ink); color:var(--surface)`。
 * 而 `--accent-ink` **在主题里根本没定义** —— 失效的 var() 会让整条声明
 * 变成无效值（**不是**回退到某个默认色），于是 background 回落到前面
 * 那条 `color-mix(...)` 的浅色底，而文字是 `var(--surface)` = **白色**。
 * 结果就是**白字白底，徽章成了一个空药丸**。
 *
 * 现在：底色用 --accent（一定存在），文字用 --outline（一定存在，
 * 而且是「跟背景有对比的界线色」，两种主题下都够深）。
 * 不再依赖任何可能没定义的变量。
 */
.cm-ext{
  background:var(--accent) !important;
  color:var(--outline) !important;
  border:1px solid var(--outline) !important;
  font-weight:800;
}