/* Cinema 影音图书室 —— 浅色 / 内容即界面
 *
 * 参考 Instagram：近白底、几乎没有色块和边框、靠留白和发丝线分区，
 * 图片是页面上唯一有重量的东西，其余全是黑白灰。字重只用两档撑层级。
 *
 * 唯一的偏离：网格保持海报本来的 2:3 竖比例，不裁成方图 —— 方图会把
 * 人脸和片名切掉，而这个站装的正是海报和书封。
 *
 * 字体全部走系统栈：Eileen 在国内，Google Fonts 加载会一直吊着。
 */

:root {
  --ground:     #fafafa;   /* 页面底，比纯白低一点，避免刺眼 */
  --surface:    #ffffff;
  --line:       #dbdbdb;   /* 发丝线，全站唯一的分隔手段 */
  --line-soft:  #efefef;
  --ink:        #262626;   /* 不用纯黑 */
  --ink-dim:    #737373;
  --ink-faint:  #a8a8a8;
  --link:       #00457c;   /* 功能性蓝，只用在可点的东西上 */
  --danger:     #c02b2b;
  --gold:       #c8952f;   /* 暖金，全站只标「重点」 */

  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", sans-serif;

  --gap-hair: 0.3rem;
  --gap-tight: 0.65rem;
  --gap: 1.15rem;
  --gap-loose: clamp(1.8rem, 4vw, 3rem);
  --gap-section: clamp(2.4rem, 6vw, 4rem);

  --edge: clamp(1rem, 4vw, 2.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--link); }

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0; }
img { max-width: 100%; display: block; }

/* ── 站头：白、贴顶、一条发丝线 ───────────────────── */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.95rem var(--edge);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.siteBrand { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; }

.siteNav { display: flex; gap: 1.35rem; font-size: 0.92rem; }
.siteNav a { color: var(--ink-dim); }
.siteNav a:hover { color: var(--ink); }

.siteMain { padding: var(--gap-loose) var(--edge) var(--gap-section); }

/* ── 提示条 ─────────────────────────────────────────── */

.flashMessage {
  margin: 0;
  padding: 0.8rem var(--edge);
  font-size: 0.9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.flashMessage--error { color: var(--danger); }

/* ── 书架筛选 ───────────────────────────────────────── */

.shelfFilter { max-width: 62rem; margin: 0 auto var(--gap-loose); }

.shelfFilter__search { display: flex; gap: var(--gap-tight); margin-bottom: 1.3rem; }
.shelfFilter__search input {
  flex: 1 1 auto;
  max-width: 22rem;
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shelfFilter__search input::placeholder { color: var(--ink-faint); }
.shelfFilter__search button { color: var(--ink-dim); background: transparent; border-color: var(--line); }
.shelfFilter__search button:hover { color: var(--ink); background: var(--line-soft); }

.filterRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 1.05rem;
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
}
.filterRow__label { color: var(--ink-faint); font-size: 0.8rem; min-width: 2.8rem; }
.filterRow a { color: var(--ink-dim); }
.filterRow a:hover { color: var(--ink); }
.filterRow a[aria-current="true"] { color: var(--ink); font-weight: 600; }
/* 地区后面的部数：给个量感就行，不跟地区名抢 */
.filterRow__count { font-size: 0.75rem; font-weight: 400; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── 海报墙：紧网格，图之间只留一线 ─────────────────── */

.shelfGrid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 62rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(104px, 14vw, 150px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem) clamp(0.5rem, 1.2vw, 0.9rem);
}

.shelfCard a { display: grid; gap: var(--gap-hair); }

.shelfCard__art {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--line-soft);
  transition: opacity 0.25s var(--ease);
}
.shelfCard a:hover .shelfCard__art { opacity: 0.86; }
.shelfCard__art img { width: 100%; height: 100%; object-fit: cover; }

/* 没有封面时用标题首字排版，比灰盒子体面 */
.shelfCard__placeholder {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--line-soft);
}

.shelfCard__title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.2rem;
}
.shelfCard__meta { font-size: 0.76rem; color: var(--ink-faint); }

/* 海报角上的暗底小牌：左下评分、左上 NC、右下播出状态共用一种，永远长得一样 */
.shelfCard__rating, .shelfCard__nc, .shelfCard__airing {
  position: absolute;
  font-weight: 600;
  color: var(--surface);
  background: rgb(0 0 0 / 0.55);
  border-radius: 4px;
}
.shelfCard__rating {
  left: 0.4rem;
  bottom: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* 待补全是正常状态不是错误：一个灰点，不用告警色 */
.shelfCard__pending {
  position: absolute;
  top: 0.4rem; right: 0.4rem;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1.5px rgb(0 0 0 / 0.25);
}
.shelfCard__pending span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.shelfEmpty {
  grid-column: 1 / -1;
  padding: var(--gap-section) 0;
  text-align: center;
  color: var(--ink-dim);
}
.shelfEmpty a { color: var(--link); font-weight: 600; }

/* ── 详情页 ─────────────────────────────────────────── */

.workDetail {
  display: grid;
  gap: var(--gap-loose);
  grid-template-columns: minmax(0, 1fr);
  max-width: 62rem;
  margin: 0 auto;
}

@media (min-width: 820px) {
  .workDetail {
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.2rem);
    align-items: start;
  }
  .workDetail__side { position: sticky; top: 5rem; }
  .workDetail__body { grid-column: 2; }
}

.workDetail__side { max-width: 250px; }
.workDetail__poster {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.workDetail__poster img { width: 100%; height: 100%; object-fit: cover; }

.workTitle { font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -0.01em; }
.workTitle__original {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-faint);
  margin-top: 0.35rem;
}

.workFacts {
  display: flex; flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  margin: 0.75rem 0 0; padding: 0;
  list-style: none;
  font-size: 0.87rem;
  color: var(--ink-dim);
}
.workFacts li + li::before { content: "·"; color: var(--ink-faint); margin-right: 0.5rem; }
/* 导演/作者在这一行里是可点的，但不能比左右的兄弟更抢眼——
   平时跟它们一个颜色，hover 才亮起来 */
.workFacts__link { color: inherit; }
.workFacts__link:hover { color: var(--link); }

.workSummary { margin: var(--gap) 0 0; max-width: 40rem; font-size: 0.94rem; }
.workCast { margin: var(--gap-tight) 0 0; max-width: 40rem; font-size: 0.85rem; color: var(--ink-dim); }
.workLinks { display: flex; gap: 1.1rem; margin-top: var(--gap); font-size: 0.88rem; }
.workLinks a { color: var(--link); font-weight: 600; }

/* 看片位置：在哪看是一个链接或一句给自己看的话，看到哪了跟在后面 */
.watchPlace {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem 0.7rem;
  margin: var(--gap) 0 0;
  font-size: 0.88rem;
}
.watchPlace__label, .progressForm__label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-faint);
}
.watchPlace__link { color: var(--link); font-weight: 600; overflow-wrap: anywhere; }
.watchPlace__text { color: var(--ink-dim); }
.watchPlace__progress { color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.progressForm {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--gap-hair) var(--gap-tight);
  margin-top: var(--gap-tight);
  font-size: 0.88rem;
}
.progressForm__episode { display: flex; align-items: center; gap: 0.3rem; color: var(--ink-dim); }
.progressForm__episode input { width: 4.2rem; }
.progressForm__position { width: 6.5rem; }

/* 搬到海报下面之后不再需要那条分隔线：海报本身就是上边界，
   而且这一栏只有 250px 宽，输入框得自己换行 */
.ratingBlock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem var(--gap-tight);
  margin: var(--gap) 0 0;
}
.ratingBlock__value {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ratingBlock__value--empty { color: var(--ink-faint); font-size: 1.05rem; font-weight: 400; }
.ratingBlock__scale { color: var(--ink-faint); font-size: 0.9rem; }
.ratingForm { display: flex; gap: var(--gap-hair); flex-basis: 100%; }
.ratingForm input[type="number"] { width: 5.5rem; }

/* 豆瓣分：参考值，不参与竞争 —— 小、灰、跟在她自己的分后面 */
.ratingBlock__external { font-size: 0.85rem; color: var(--ink-faint); }
.ratingBlock__external a { color: var(--ink-faint); }
.ratingBlock__external a:hover { color: var(--link); }

/* ── 板块与表单 ─────────────────────────────────────── */

.workSection { position: relative; margin-top: var(--gap-section); }

/* 板块的「加一个」统一停在标题那一行的右端。details 的 summary 也走这个类：
   它被抽出正常流，展开的表单于是留在板块底部铺满整行——多字段表单挤在
   右上角那个角落里是没法用的。 */
.sectionAction {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
  list-style: none;
}
.sectionAction::-webkit-details-marker { display: none; }
.sectionAction:hover { opacity: 0.75; }
.workSection__title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: var(--gap);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}

input[type="text"], input[type="search"], input[type="number"],
input[type="date"], input[type="password"], input[type="file"],
select, textarea {
  font: inherit;
  font-size: 16px;               /* 低于 16px 时 iOS 聚焦会自动放大 */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--ink-faint);
}
textarea { width: 100%; resize: vertical; line-height: 1.6; }
select { appearance: none; padding-right: 1.7rem; }

button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1.05rem;
  color: var(--surface);
  background: var(--link);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
button:hover { opacity: 0.85; }
button.ghost { color: var(--ink-dim); background: transparent; border-color: var(--line); }
button.ghost:hover { color: var(--ink); background: var(--line-soft); opacity: 1; }

.fieldError { color: var(--danger); font-size: 0.85rem; margin: 0.3rem 0 0; }

/* ── 主要演员：脸有分量，名字和介绍跟在下面 ──────────── */

.castGrid {
  list-style: none;
  margin: 0 0 var(--gap);
  padding: 0;
  display: grid;
  /* auto-fill + minmax：手机上两列，宽屏自动铺到五六列，不写断点 */
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--gap);
}
.castCard { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.castCard__art {
  aspect-ratio: 2 / 3;                 /* 和海报同一个比例，脸不被裁成方块 */
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--line-soft);
}
.castCard__art img { width: 100%; height: 100%; object-fit: cover; }
.castCard__placeholder { font-size: 1.7rem; font-weight: 600; color: var(--ink-faint); }
.castCard__name { font-weight: 600; line-height: 1.35; }
.castCard__actor { font-size: 0.85rem; color: var(--ink-dim); }
/* 介绍是纯文本不过 markdown，所以她敲的换行要靠 pre-line 留住 */
.castCard__intro {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-dim);
  white-space: pre-line;
  margin-top: 0.3rem;
}
.castCard__actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; font-size: 0.8rem; }
.castCard__actions a { color: var(--link); }

/* 「移除」要长得像次要动作，不像主按钮 */
button.linkish {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-faint);
  background: none;
  border: none;
  border-radius: 0;
}
button.linkish:hover { color: var(--danger); opacity: 1; }

.castForm__current { width: 110px; border-radius: 8px; border: 1px solid var(--line); }

/* ── 演员页：一张脸 + 他在这个图书室里的全部 ────────── */

/* 没有角色名时，卡片下面那行换成一句明说的入口，免得只剩一张图能点 */
.castCard__actor--only { color: var(--link); }

.personPage { max-width: 680px; }
.personHead { display: flex; align-items: center; gap: var(--gap); margin-bottom: var(--gap-loose); }
.personHead__art {
  flex: 0 0 auto;
  width: clamp(84px, 17vw, 128px);
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--line-soft);
}
.personHead__art img { width: 100%; height: 100%; object-fit: cover; }
.personHead__name { font-size: clamp(1.35rem, 4vw, 1.9rem); }
.personHead__count { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--ink-dim); }

/* 「饰 X」跟在片名下面：同一个人在不同作品里演的不是同一个角色，
   这一行才是这张卡区别于书架上那张的地方 */
.shelfCard__role { font-size: 0.76rem; color: var(--ink-dim); }
.shelfCard__intro {
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-dim);
  white-space: pre-line;
}

/* ── 关联作品：一条边存一次，两端各显示自己那半句 ──── */

.relationList { list-style: none; margin: 0 0 var(--gap); padding: 0; }
.relationList li {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.relationList li:last-child { border-bottom: none; }
.relationList__link { display: flex; align-items: center; gap: var(--gap-tight); flex: 1 1 auto; min-width: 0; }
.relationList__art {
  flex: 0 0 auto;
  width: 42px;
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--line-soft);
}
.relationList__art img { width: 100%; height: 100%; object-fit: cover; }
.relationList__placeholder { color: var(--ink-faint); font-weight: 600; }
.relationList__text { display: flex; flex-direction: column; min-width: 0; }
/* 关系词压成小字灰字：这一行的主角是被关联的那部片名，不是「衍生自」三个字 */
.relationList__label { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-faint); }
.relationList__title { font-weight: 600; }
.relationList__link:hover .relationList__title { color: var(--link); }
.relationList__meta, .relationList__note { font-size: 0.82rem; color: var(--ink-dim); }
.relationList form { flex: 0 0 auto; }
.relationList button { font-size: 0.8rem; padding: 0.3rem 0.7rem; }

.sectionAdd[open] > form { margin-top: var(--gap-tight); }
.relationForm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tight);
  align-items: center;
  margin-top: var(--gap-tight);
}
.relationForm input[type="text"] { flex: 1 1 11rem; min-width: 0; }

/* ── 剧照条：箭头翻页，滚动条藏起来 ──────────────────
 *
 * 滚动条本身是灰的一长条，横在图片下面比图片还显眼；箭头只在放不下时
 * 才出现，到头那侧变淡但留在原地——按钮凭空消失比点不动更让人困惑。
 */

.stillRow { display: flex; align-items: center; gap: 0.3rem; }

.stillNav {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.stillNav:hover:not(:disabled) { color: var(--ink); background: var(--line-soft); opacity: 1; }
.stillNav:disabled { color: var(--ink-faint); border-color: var(--line-soft); cursor: default; opacity: 0.45; }

.stillStrip {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.2rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;             /* 箭头接管了，条本身不用露脸 */
}
.stillStrip::-webkit-scrollbar { display: none; }

.stillItem {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 150px;                  /* 竖构图的剧照也得放得下说明 */
  max-width: 78vw;
}
.stillItem__frame { position: relative; }
.stillItem img {
  height: clamp(110px, 16vw, 160px);
  width: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
  transition: opacity 0.2s var(--ease);
}
.stillItem a:hover img { opacity: 0.85; }

/* 删除键平时半透明地待在角上：一直在，但不抢图。 */
.stillItem__remove { position: absolute; top: 5px; right: 5px; }
.stillItem__remove button {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: 0.55;
}
.stillItem__remove button:hover { opacity: 1; color: var(--danger); }

/* 说明那一行平时看着就是一行小字，聚焦了才露出边框和「存」。 */
/* width:0 + min-width:100%：让这一行不参与「卡片该多宽」的计算，只跟着
   图片的宽度走。不这么写的话，说明用的 field-sizing 会连宽度一起长，
   一句长说明能把整张卡撑到几百像素宽，图还留在原地 */
.stillCaption { display: flex; align-items: flex-start; gap: 0.3rem; width: 0; min-width: 100%; }
.stillCaption textarea {
  flex: 1 1 auto;
  min-width: 0;
  /* 跟着内容自己长高，长说明整段折行显示，不在框边上截断 */
  field-sizing: content;
  resize: none;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-dim);
  padding: 0.15rem 0.25rem;
  background: transparent;
  border-color: transparent;
  border-radius: 5px;
}
.stillCaption textarea:focus-visible {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
.stillCaption button { flex: 0 0 auto; margin-top: 0.1rem; font-size: 0.75rem; padding: 0.2rem 0.5rem; opacity: 0; }
.stillCaption:focus-within button { opacity: 1; }

.stillForm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-tight);
  margin-top: var(--gap-tight);
}

/* ── 刷次 ───────────────────────────────────────────── */

.roundList { list-style: none; margin: 0 0 var(--gap); padding: 0; }
.roundList li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.2rem 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.roundList__seq { font-weight: 600; min-width: 3.4rem; }
.roundList__dates { color: var(--ink-dim); font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.roundList__score { font-weight: 600; font-variant-numeric: tabular-nums; }
.roundList__note { color: var(--ink-dim); font-size: 0.88rem; flex-basis: 100%; }

.roundForm { display: flex; flex-wrap: wrap; gap: var(--gap-hair); align-items: center; }
.roundForm input[type="number"] { width: 7.5rem; }
.roundForm input[type="text"] { flex: 1 1 11rem; min-width: 0; }

/* 行内的「编辑 / 删除」：一直在，但灰、小，不跟内容抢 */
.rowActions {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  font-size: 0.78rem;
}
.rowActions a { color: var(--ink-faint); }
.rowActions a:hover { color: var(--link); }
.rowActions a:last-child:hover { color: var(--danger); }

/* ── 感受流 ─────────────────────────────────────────── */

.noteForm { margin-bottom: var(--gap-loose); }
.noteForm__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight); margin-top: var(--gap-tight); }

.noteEntry {
  display: grid; gap: 0.15rem;
  padding: var(--gap) 0;
  border-top: 1px solid var(--line-soft);
}
.noteEntry:first-of-type { border-top: none; }
.noteEntry time { font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.noteEntry__body { font-size: 0.98rem; line-height: 1.75; max-width: 38rem; }
.noteEntry__body p:first-child { margin-top: 0.25rem; }
.noteEntry__body p:last-child { margin-bottom: 0; }
.noteEntry__body img { border-radius: 6px; margin: var(--gap-tight) 0; }

/* ── 分析块 ─────────────────────────────────────────── */

.analysisBlock { padding: var(--gap) 0; border-top: 1px solid var(--line-soft); }
.analysisBlock summary { font-size: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.analysisBlock summary::-webkit-details-marker { display: none; }
.analysisBlock summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.45rem;
  color: var(--ink-faint);
  transition: transform 0.25s var(--ease);
}
.analysisBlock[open] summary::before { transform: rotate(90deg); }
.analysisBlock__body { margin-top: var(--gap-tight); max-width: 42rem; }
.analysisBlock__body img { border-radius: 6px; margin: var(--gap-tight) 0; }
.analysisBlock__actions { display: flex; gap: 1rem; margin-top: var(--gap-tight); font-size: 0.83rem; }
.analysisBlock__actions a { color: var(--ink-faint); }
.analysisBlock__actions a:hover { color: var(--link); }

pre.mermaid {
  margin: var(--gap-tight) 0;
  padding: var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}


/* ── 单列表单页 ─────────────────────────────────────── */

.formPage { max-width: 32rem; margin: 0 auto; }
.formPage--wide { max-width: 44rem; }
.formPage__title { font-size: 1.35rem; margin-bottom: var(--gap-loose); }
.formPage__hint { color: var(--ink-faint); font-size: 0.87rem; margin: -1.3rem 0 var(--gap-loose); }

.stackForm { display: grid; gap: var(--gap); }
.stackForm label { display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--ink-dim); }
.stackForm input, .stackForm select, .stackForm textarea { width: 100%; }
.stackForm__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-tight); }
.stackForm__actions { display: flex; align-items: center; gap: var(--gap); margin-top: var(--gap-tight); }
.stackForm__actions a { font-size: 0.88rem; color: var(--ink-dim); }

.quickForm__title input { font-size: 1.15rem; font-weight: 600; padding: 0.65rem 0.75rem; }

.loginForm { display: grid; gap: var(--gap); max-width: 19rem; margin: clamp(3rem, 15vh, 7rem) auto 0; }

.deleteWarning {
  padding: var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  margin-bottom: var(--gap-loose);
}
.deleteWarning h1 { font-size: 1.15rem; margin-bottom: var(--gap-tight); }
.deleteWarning__extra { color: var(--danger); font-weight: 600; }
.deletePreview {
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0;
}

/* ── NC 标记与位置弹层 ──────────────────────────────── */

/* 事实行里的标记只靠字重区分，不加边框：这一行每项前面有个「·」伪元素，
   给 li 加框会把那个点也框进去 */
.ncBadge { font-weight: 600; color: var(--ink); }
.ncBadge--none { font-weight: 400; color: var(--ink-faint); }
/* 连载中/未开播要一眼看到（她不追更）；已完结是常态，跟其他事实一个颜色 */
.airingFact--airing, .airingFact--upcoming { font-weight: 600; color: var(--ink); }

.shelfCard__flags {
  position: absolute;
  left: 0.4rem; top: 0.4rem;
  display: flex;
  gap: 0.25rem;
}
/* 容器里的牌子按顺序排，不再各自绝对定位 */
.shelfCard__nc, .shelfCard__priority {
  position: static;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
/* 重点用暖金底＋深色字：在黑底小牌里是唯一一处彩色，一眼能从一屏海报里挑出来 */
.shelfCard__priority {
  font-weight: 600;
  color: #2c1f05;
  background: var(--gold);
  border-radius: 4px;
}
/* 描边画在海报上而不是整张卡片上：卡片下面还有标题和那行灰字，
   框住它们会把卡片变成一个盒子，破坏现在这种「只有海报」的排版 */
.shelfCard--priority .shelfCard__art {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.shelfCard__airing { right: 0.4rem; bottom: 0.4rem; padding: 0.05rem 0.35rem; font-size: 0.7rem; }

.ncDialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100dvh - 2rem));
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ncDialog::backdrop { background: rgb(0 0 0 / 0.35); }
.ncDialog__inner { padding: 0 var(--gap); }

/* 标题和加一处的表单钉在两头，中间的集数列表自己滚——15 集的剧也不用滚到底才能加 */
.ncDialog__head {
  position: sticky; top: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-tight);
  padding: var(--gap) 0 var(--gap-tight);
  background: var(--surface);
}
.ncDialog__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.ncDialog__close { font-size: 1.5rem; line-height: 1; color: var(--ink-faint); }
.ncDialog__close:hover { color: var(--ink); }
.ncDialog__error { margin: 0 0 var(--gap-tight); }

/* 左栏的几组状态按钮（NC、播出）。只有 250px 宽：排不下一行时自己折行，标签单独占一行 */
.stateToggle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-hair); margin-top: var(--gap); }
.stateToggle__label { flex-basis: 100%; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-faint); }
/* 底色和 hover 来自 button.ghost，这里只管尺寸和「按下」的样子 */
.stateToggle__option { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
button.stateToggle__option[aria-pressed="true"] { color: var(--surface); background: var(--ink); border-color: var(--ink); }

.ncEpisodes { list-style: none; margin: 0; padding: 0; }
.ncEpisodes__row {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  gap: var(--gap-tight);
  align-items: baseline;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.ncEpisodes__no { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.ncEpisodes__empty { color: var(--ink-faint); }

.ncMarks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.ncMarks__item { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.ncMarks__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ncMarks__note { color: var(--ink-dim); overflow-wrap: anywhere; }
.ncMarks__item form { margin-left: auto; }

/* 每集的链接：有链接时是一个能点开的入口，没有时是一格等着贴的输入框 */
.episodeLink { display: flex; align-items: center; gap: 0.35rem; justify-self: end; }
.episodeLink__input { width: 8.5rem; font-size: 0.8rem; }
.episodeLink__open { font-size: 0.82rem; font-weight: 600; color: var(--link); white-space: nowrap; }
.episodeLink__save { padding: 0.15rem 0.55rem; font-size: 0.78rem; }
/* 窄屏放不下三列：链接整行另起，不去挤 NC 位置那一格 */
@media (max-width: 30rem) {
  .ncEpisodes__row { grid-template-columns: 4.2rem 1fr; }
  .episodeLink { grid-column: 2; justify-self: start; }
}

.ncAddForm {
  position: sticky; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-hair) var(--gap-tight);
  padding: var(--gap-tight) 0 var(--gap);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.ncAddForm__label { flex-basis: 100%; font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); }
.ncAddForm__episode { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; color: var(--ink-dim); }
.ncAddForm__episode input { width: 4.2rem; }
.ncAddForm__position { width: 6.5rem; }
.ncAddForm__note { flex: 1 1 9rem; min-width: 0; }

/* ── 入场 ───────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .shelfCard { animation: fadeUp 0.4s var(--ease) backwards; }
  .shelfCard:nth-child(1) { animation-delay: 0.02s; }
  .shelfCard:nth-child(2) { animation-delay: 0.04s; }
  .shelfCard:nth-child(3) { animation-delay: 0.06s; }
  .shelfCard:nth-child(4) { animation-delay: 0.08s; }
  .shelfCard:nth-child(n+5) { animation-delay: 0.10s; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}