/* =====================================================================
 * styles.css — 追剧历 · 视觉样式
 * 设计基调：冷调四色 + 可爱(kawaii) + 浅色主题
 * 配色体系（2026-09-20 换新）：四色对应剧集生命周期 ——
 *   想看 #D8C2F9 薰衣草 → 在追 #A2E4E4 湖青 → 更新 #A2C5F2 天蓝 → 看完 #C1F0C1 薄荷绿
 *   四色本身是浅粉彩，直接当文字/图标会对比度不足，
 *   故每色另配「深色版 deep-*」专供文字/图标/描边，浅色版 tint-* 专供底色。
 * 按钮规范：高亮文本式胶囊按钮（深湖青文字 + 湖青半透明底）
 * ===================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* ---- 四色原色（仅作色块 / 大面积底 / 渐变，不用于文字） ---- */
  --p-mint:    #C1F0C1;   /* 薄荷绿 · 完结 / 已看 */
  --p-cyan:    #A2E4E4;   /* 湖青   · 在追 / 品牌主色 */
  --p-blue:    #A2C5F2;   /* 天蓝   · 更新 / 信息 */
  --p-lilac:   #D8C2F9;   /* 薰衣草 · 想看 / 强调 */

  /* ---- 浅色底 tint（标签底 / 卡片浅底） ---- */
  --t-mint:    #EEFBF1;
  --t-cyan:    #E9F9F9;
  --t-blue:    #EDF3FE;
  --t-lilac:   #F6F1FE;

  /* ---- 深色版 deep（文字 / 图标 / 描边，对比度 ≥ 4.5:1） ---- */
  --d-mint:    #2E7D5B;
  --d-cyan:    #1B7C86;
  --d-blue:    #3A6FB5;
  --d-lilac:   #7350C0;

  /* ---- 中性 / 文字 ---- */
  --bg:        #F5FBFB;   /* 页面底（极淡湖青白） */
  --bg-soft:   #F7F4FE;   /* 渐变另一端（极淡薰衣草白） */
  --card:      #FFFFFF;   /* 卡片白 */
  --ink:       #2F3E5C;   /* 主文字（深靛蓝，替代原暖棕 #5B4B51） */
  --ink-soft:  #6E7E9C;   /* 次要文字 */
  --ink-mute:  #9AA7BE;   /* 三级文字 / 占位 */
  --line:      #E4EDF9;   /* 分隔线 */

  /* ---- 旧变量名保留（app.js 与既有样式仍在引用） ---- */
  --mac-pink:  #D8C2F9;
  --mac-mint:  #B5EBD8;
  --mac-blue:  #A2C5F2;
  --mac-yellow:#A2E4E4;
  --mac-purple:#C3D5F5;
  --mac-green: #C1F0C1;

  /* ---- 事件色：上线（薄荷绿）/ 更新（天蓝） ---- */
  --ev-on:     #4CBB8C;
  --ev-on-bg:  #EEFBF1;
  --ev-up:     #6FA3E0;
  --ev-up-bg:  #EDF3FE;

  /* ---- 状态色（剧集生命周期四态） ---- */
  --st-want:   #7350C0;  --st-want-bg:  #F6F1FE;   /* 想看 */
  --st-watch:  #1B7C86;  --st-watch-bg: #E9F9F9;   /* 在追 */
  --st-done:   #2E7D5B;  --st-done-bg:  #EEFBF1;   /* 已看完 */

  /* ---- 功能性警示色（调色板内无红，唯一例外，仅用于删除/错误） ---- */
  --alert:     #C0566E;
  --alert-bg:  #FBEEF1;

  /* ---- 高亮文本胶囊按钮：深湖青文字 + 湖青半透明底 ---- */
  --gold:      #1B7C86;
  --gold-soft: rgba(27, 124, 134, 0.14);
  --gold-line: rgba(27, 124, 134, 0.42);

  --radius:    16px;
  --shadow:    0 6px 20px rgba(150, 178, 214, 0.20);
}

/* ---------- 2. 基础重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-soft) 100%);
  color: var(--ink);
  min-height: 100vh;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. 顶部标题栏 ---------- */
.topbar {
  max-width: 1080px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--mac-pink), var(--mac-purple));
  display: grid; place-items: center; font-size: 24px;
  box-shadow: var(--shadow);
}
.brand h1 { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.brand .sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.checkin-btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-size: 13px; padding: 7px 14px; }
.mine-sync { margin: 8px 2px 2px; font-size: 12px; color: var(--ink-soft); text-align: center; }

/* ---------- 4. 高亮文本式按钮（核心规范） ---------- */
/* 金色文字 + 半透明高亮底，圆角胶囊，hover 加深 */
.btn-hl {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
  text-decoration: none;
  user-select: none;
}
.btn-hl:hover { background: rgba(27,124,134,.26); transform: translateY(-1px); }
.btn-hl:active { transform: translateY(0); }
/* 次级高亮：并入主色，全站胶囊按钮统一（2026-09-20） */
.btn-hl.blue {
  color: var(--gold); border-color: var(--gold-line);
  background: var(--gold-soft);
}
.btn-hl.blue:hover { background: rgba(27,124,134,.26); }
/* 危险高亮：功能性警示色（调色板内无红，唯一例外） */
.btn-hl.danger {
  color: var(--alert); border-color: rgba(192,86,110,.4);
  background: var(--alert-bg);
}
.btn-hl.danger:hover { background: rgba(192,86,110,.22); }

/* 顶部右侧按钮组 */
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 5. 月份导航 + 图例 ---------- */
.calendar-head {
  max-width: 1080px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav .label { font-size: 20px; font-weight: 800; min-width: 130px; text-align: center; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }
/* 当月上线/更新统计 */
.month-stat {
  width: 100%; font-size: 13px; color: var(--ink-soft);
  padding: 2px 0 0; display: flex; gap: 16px; flex-wrap: wrap;
}
.month-stat b.on { color: var(--d-mint); }
.month-stat b.up { color: var(--d-blue); }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.legend .dot.on { background: var(--ev-on); }
.legend .dot.up { background: var(--ev-up); }

/* 视图切换 */
.view-switch { display: flex; gap: 6px; }

/* ---------- 6. 月历网格 ---------- */
.calendar {
  max-width: 1080px; margin: 0 auto;
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.week-row, .days-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.week-row { background: var(--bg-soft); }
.week-row .cell {
  padding: 10px 0; text-align: center; font-weight: 700; font-size: 13px;
  color: var(--ink-soft);
}
.days-grid { /* 6 行 */ }
.day {
  min-height: 120px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px 6px 8px;
  display: flex; flex-direction: column; gap: 5px;
  position: relative;
}
.day:nth-child(7n) { border-right: none; }
.day.other { background: #f7f9fc; }      /* 非本月日期 */
.day.other .date-num { opacity: .45; }
.day.today { background: #eaf9f9; }       /* 今天高亮 */

/* 日期数字：深湖青圆底 + 白字（原绿底青字对比度仅 1.4:1，读不清） */
.date-num {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 3;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--d-cyan);
  color: #FFFFFF;
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
/* 今天：薰衣草圆底 + 深紫字 + 白描边，在满屏海报里一眼可见 */
.day.today .date-num {
  background: var(--p-lilac);
  color: #4A2A80;
  box-shadow: 0 0 0 2px #FFFFFF, 0 2px 8px rgba(115,80,192,.45);
}

/* 单剧条给日期圆圈留出顶部空间；铺满格子的 .cover 不再留 */
.day > .ev:not(.cover) { margin-top: 28px; }

/* 事件小条（主页月历用海报缩略图 + 剧名） */
.ev {
  font-size: 11px; line-height: 1.2;
  padding: 4px 6px; border-radius: 8px;
  cursor: pointer; overflow: hidden;
  display: flex; align-items: center; gap: 6px;
  min-height: 36px;
}
.ev .name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
.ev-poster {
  width: 24px; height: 34px; border-radius: 4px; object-fit: cover;
  flex-shrink: 0; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.ev.on { background: var(--ev-on-bg); color: #2e7d5b; }
.ev.up { background: var(--ev-up-bg); color: #3a6fb5; }
.ev.dropped { opacity: .55; }
.ev:not(.cover):hover { filter: brightness(.97); transform: translateX(1px); }

/* 海报铺满整个日期格：单剧 + 多剧共用 */
.ev.cover {
  position: absolute;
  inset: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: 0;
  display: block;
  background: #f0f3f8;
}
.ev.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.32) 0%, transparent 45%);
  pointer-events: none;
}
.ev.cover .ev-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.ev.cover .ev-poster.ph {
  background: linear-gradient(135deg, #edfaf0, #fff) !important;
  display: grid;
  place-items: center;
  color: #565273;
  font-size: 28px;
}
/* 单剧铺满时，底部剧名 */
.ev.cover .ev-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  z-index: 2;
}

.ev-cover-count,
.ev.cover .ev-count {
  position: absolute;
  right: 6px;
  bottom: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(47,62,92,.78);   /* 半透明深靛底：原为 transparent，浅色海报上白字读不清 */
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
  z-index: 2;
}

/* ---------- 7. 即将到来列表视图 ---------- */
.upcoming {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.up-col {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.up-col h3 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.up-col h3 .pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.up-col.on h3 .pill { background: var(--ev-on-bg); color: #2e7d5b; }
.up-col.up h3 .pill { background: var(--ev-up-bg); color: #3a6fb5; }
.up-item {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer;
  transition: background .15s;
}
.up-item:hover { background: var(--bg-soft); }
.up-item.open { background: var(--mac-cream); }
.up-item .thumb {
  width: 46px; height: 60px; border-radius: 8px; object-fit: cover;
  background: var(--mac-purple); flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
}
.up-item .meta { flex: 1; min-width: 0; }
.up-item .meta .nm { font-weight: 700; font-size: 14px; }
.up-item .meta .dt { font-size: 12px; color: var(--ink-soft); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.up-item .meta .dt .count { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--ev-up-bg); color: #3a6fb5; font-weight: 600; }
.up-item .toggle {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--bg-soft); color: var(--ink-soft); cursor: pointer;
  font-size: 12px; display: grid; place-items: center; flex-shrink: 0;
  transition: transform .15s, background .15s;
}
.up-item .toggle:hover { background: var(--mac-yellow); color: #0f5a63; }
.up-item .up-dates {
  width: 100%; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding-left: 58px;
}
.up-item .up-dates .dchip {
  font-size: 12px; padding: 4px 9px; border-radius: 999px;
  background: var(--ev-up-bg); color: #3a6fb5; font-weight: 600;
}
.up-empty { color: var(--ink-soft); font-size: 13px; padding: 8px 4px; }

/* ---------- 8. 详情抽屉 ---------- */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(47,62,92,.35);
  display: none; align-items: flex-end; justify-content: center; z-index: 50;
}
.drawer-mask.open { display: flex; }
.drawer {
  width: 100%; max-width: 520px; background: var(--card);
  border-radius: 22px 22px 0 0; padding: 20px 22px 26px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.15);
  max-height: 88vh; overflow-y: auto;
}
.drawer .close {
  position: absolute; top: 16px; right: 20px; font-size: 22px;
  color: var(--ink-soft); cursor: pointer;
}
.drawer-body { display: flex; gap: 16px; margin-top: 6px; }
.drawer-body img.poster {
  width: 116px; height: 154px; border-radius: 12px; object-fit: cover;
  background: var(--mac-purple); flex-shrink: 0;
}
.drawer .info { flex: 1; min-width: 0; }
.drawer .info h2 { font-size: 20px; }
.drawer .info .row { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.drawer .info .row b { color: var(--ink); font-weight: 700; }
.drawer .note { margin-top: 10px; font-size: 13px; color: var(--ink); background: var(--bg-soft);
  padding: 8px 10px; border-radius: 10px; }
.drawer .acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ep-control { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ep-control input {
  width: 64px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; text-align: center;
}

/* ---------- 8b. 单日多剧集弹窗 ---------- */
.day-popup-mask {
  position: fixed; inset: 0; background: rgba(47,62,92,.4);
  display: none; align-items: center; justify-content: center; z-index: 55; padding: 16px;
}
.day-popup-mask.open { display: flex; }
.day-popup {
  width: 100%; max-width: 560px; background: var(--card);
  border-radius: 20px; padding: 20px 22px 26px; box-shadow: var(--shadow);
  max-height: 80vh; overflow-y: auto; position: relative;
}
.day-popup .close {
  position: absolute; top: 16px; right: 20px; font-size: 22px;
  color: var(--ink-soft); cursor: pointer;
}
.day-popup h2 { font-size: 17px; margin-bottom: 16px; padding-right: 28px; }
.day-popup-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px;
}
.day-card {
  background: var(--bg); border-radius: 14px; overflow: hidden; cursor: pointer;
  transition: transform .15s, box-shadow .15s; box-shadow: 0 2px 8px rgba(150,178,214,.12);
}
.day-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.day-card-poster {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--mac-purple);
}
.day-card-meta { padding: 10px 12px 12px; }
.day-card-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-bottom: 6px;
}
.day-card-tag.on { background: var(--ev-on-bg); color: #2e7d5b; }
.day-card-tag.up { background: var(--ev-up-bg); color: #3a6fb5; }
.day-card-name { font-size: 14px; font-weight: 800; line-height: 1.3; }
.day-card-plat { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- 8c. 单剧追更月历弹窗 ---------- */
.show-calendar-mask {
  position: fixed; inset: 0; background: rgba(47,62,92,.4);
  display: none; align-items: center; justify-content: center; z-index: 120; padding: 16px;
}
.show-calendar-mask.open { display: flex; }
.show-calendar {
  width: 100%; max-width: 760px; background: var(--card);
  border-radius: 22px; padding: 20px 22px 24px; box-shadow: var(--shadow);
  max-height: 88vh; overflow-y: auto; position: relative;
}
.show-calendar .close {
  position: absolute; top: 16px; right: 20px; font-size: 22px;
  color: var(--ink-soft); cursor: pointer;
}
.show-calendar h2 { font-size: 17px; margin-bottom: 14px; padding-right: 28px; }
.show-calendar-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.show-calendar-legend {
  display: flex; gap: 16px; justify-content: center; margin-top: 14px;
  font-size: 13px; color: var(--ink-soft);
}
.show-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.show-calendar-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.show-calendar-legend .dot.on { background: var(--ev-on); }
.show-calendar-legend .dot.up { background: var(--ev-up); }

.sc-month { background: var(--bg); border-radius: 16px; padding: 14px; }
.sc-month-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 10px; text-align: center; }
.sc-week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.sc-cell.sc-week { text-align: center; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.sc-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.sc-day {
  aspect-ratio: 1; border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 14px; color: var(--ink); border: 1px solid transparent;
  position: relative; padding: 2px;
}
.sc-day.other { color: #dce3ec; background: transparent; }
.sc-day.today { border-color: var(--mac-purple); font-weight: 800; }
.sc-day.on { background: var(--ev-on-bg); }
.sc-day.up { background: var(--ev-up-bg); }
.sc-date { line-height: 1; font-size: 13px; }
.sc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 1px;
}
.sc-dot.on { background: var(--ev-on); }
.sc-dot.up { background: var(--ev-up); }

/* ---------- 9. 表单弹窗（新增/编辑） ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(47,62,92,.4);
  display: none; align-items: center; justify-content: center; z-index: 60; padding: 16px;
}
.modal-mask.open { display: flex; }
.modal {
  width: 100%; max-width: 460px; background: var(--card);
  border-radius: 20px; padding: 22px; box-shadow: var(--shadow);
  max-height: 90vh; overflow-y: auto;
}
.modal h2 { font-size: 18px; margin-bottom: 14px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--ink);
  background: #fff;
}
.field textarea { resize: vertical; min-height: 56px; }
.field .hint { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.modal .footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.chip-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-pick .wday {
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13px; cursor: pointer; background: #fff; color: var(--ink-soft);
}
.chip-pick .wday.sel { background: var(--mac-blue); color: #2c5f96; border-color: var(--mac-blue); font-weight: 700; }

/* ---------- 10. 提示条 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 80;
}
.toast.show { opacity: .95; }

/* 已追完：日历事件条淡化 */
.ev.completed { opacity: .42; filter: grayscale(.3); }

/* =====================================================================
 * 11. 影视广场 / 底部导航 / 全屏详情（v2 重构）
 * ===================================================================== */

/* 视图容器统一给底部导航留位 */
.view { padding-bottom: 76px; }

/* ---------- 广场顶部（搜索 + 分类，吸顶） ---------- */
.plaza-top {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, #f5fbfb 0%, #f5fbfb 70%, rgba(245,251,251,0));
  padding: 14px 16px 8px;
}
.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 10px 14px; margin-top: 10px; box-shadow: var(--shadow);
}
.search-bar .s-ico { font-size: 15px; opacity: .6; }
.search-bar input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--ink);
}
/* 左上角分类触发按钮 */
.cat-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink); cursor: pointer;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); transition: all .15s;
}
.cat-trigger:hover { border-color: var(--mac-pink); }
.cat-trigger .ct-arrow { font-size: 10px; opacity: .6; margin-left: 2px; }

/* 广场分类抽屉（左侧滑出，半磨砂玻璃） */
.region-drawer-mask {
  position: fixed; inset: 0; background: rgba(41,52,78,.35);
  display: block; opacity: 0; visibility: hidden; pointer-events: none;
  z-index: 70; transition: opacity .25s, visibility .25s;
}
.region-drawer-mask.open { opacity: 1; visibility: visible; pointer-events: auto; }
.region-drawer {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: min(78vw, 300px); max-width: 320px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 0 24px 24px 0;
  box-shadow: 8px 0 34px rgba(0,0,0,.12);
  padding: 22px 18px 26px;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
}
.region-drawer-mask.open .region-drawer { transform: translateX(0); }
.region-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.region-drawer-head h3 { font-size: 18px; font-weight: 800; color: var(--ink); }
.region-drawer-head .close {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px; color: var(--ink-soft);
  cursor: pointer; transition: background .15s;
}
.region-drawer-head .close:hover { background: rgba(0,0,0,.05); }
.region-drawer-list { display: flex; flex-direction: column; gap: 8px; }
.rd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 14px; cursor: pointer;
  font-size: 15px; color: var(--ink); font-weight: 600;
  transition: background .15s, color .15s;
}
.rd-item:hover { background: rgba(255,255,255,.55); }
.rd-item.sel { background: var(--mac-pink); color: #63429f; }
.rd-emoji { font-size: 18px; width: 24px; text-align: center; }

/* ---------- 广场区块 ---------- */
.plaza-scroll { padding: 4px 16px 16px; }
.pblock { margin-top: 18px; }
.pblock-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px; }
/* 区块标题圆点：取代彩色 emoji，保证配色统一 */
.sec-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sec-dot.c-cyan  { background: var(--p-cyan);  box-shadow: 0 0 0 3px rgba(162,228,228,.28); }
.sec-dot.c-blue  { background: var(--p-blue);  box-shadow: 0 0 0 3px rgba(162,197,242,.28); }
.sec-dot.c-lilac { background: var(--p-lilac); box-shadow: 0 0 0 3px rgba(216,194,249,.30); }
.sec-dot.c-mint  { background: var(--p-mint);  box-shadow: 0 0 0 3px rgba(193,240,193,.34); }
.sec-dot.c-gray  { background: #C3CBDA;        box-shadow: 0 0 0 3px rgba(195,203,218,.28); }
.prow { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.prow::-webkit-scrollbar { height: 6px; }
.prow::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.pempty { color: var(--ink-soft); font-size: 13px; padding: 14px 2px; }

/* 广场卡片 */
.pcard { flex-shrink: 0; width: 124px; cursor: pointer; }
.pcard-poster { position: relative; width: 124px; height: 168px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.pcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-status {
  position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  /* 粉彩原色底 + 深色文字：守住调性，同时把对比度做到 7:1（原来是白字 2:1） */
  color: #0B4A52;
}
.pcard-status.upc { background: var(--p-lilac); color: #4A2A80; }  /* 待上线 · 薰衣草 */
.pcard-status.upg { background: var(--p-blue);  color: #102B4E; }  /* 连载中 · 天蓝 */
.pcard-status.end { background: var(--p-mint);  color: #1E5C3E; }  /* 已完结 · 薄荷绿 */
.pcard-badges {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 20px 6px 6px;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.25) 60%, transparent);
}
.pbadge {
  font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 5px;
  color: #fff; line-height: 1; white-space: nowrap;
}
.pbadge.db { background: #2E7D5B; }
.pbadge.im { background: #F5C518; color: #000; }
.pbadge.xg { background: #7350c0; color: #fff; }   /* 西瓜短剧评分 */
a.pbadge.im.link, a.d-rating.im.link { text-decoration: none; cursor: pointer; transition: filter .15s; }
a.pbadge.im.link:hover, a.d-rating.im.link:hover { filter: brightness(.9); text-decoration: underline; }
.pbadge.ep { margin-left: auto; background: rgba(0,0,0,.45); }
.pcount { font-size: 12px; font-weight: 700; color: #8a90a6; margin-left: 6px; opacity: .8; }
.short-more-wrap { display: flex; justify-content: center; padding: 10px 0 4px; }
.short-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 2px 4px; }
.short-toolbar .st-label { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin-right: 2px; }
.short-toolbar .st-sep { width: 1px; height: 16px; background: var(--line, rgba(0,0,0,.12)); margin: 0 6px; }
.short-toolbar .schip.sm { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft); cursor: pointer; }
.short-toolbar .schip.sm.sel { background: var(--mac-pink, #d8c2f9); color: #fff; }
.pcard-ms {
  position: absolute; right: 6px; top: 6px; font-size: 14px;
  background: rgba(255,255,255,.85); border-radius: 999px; padding: 1px 5px;
}
.pcard-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 7px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-plat { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 全部剧集 / 短剧 网格（用 .grid 显式类，兼容非末位区块） */
#plazaContent .pblock.grid .prow { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); overflow: visible; gap: 12px; }
#plazaContent .pblock.grid .pcard { width: 100%; }
#plazaContent .pblock.grid .pcard-poster { width: 100%; }

/* ---------- 子页面标题 ---------- */
.subhead { padding: 14px 16px 6px; }
.page-title { font-size: 20px; font-weight: 800; color: var(--ink); }
.month-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.month-nav .label { font-size: 16px; font-weight: 800; color: var(--ink); min-width: 96px; text-align: center; }

/* ---------- 底部导航栏 ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; height: 62px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(150,178,214,.16);
}
.bn-item {
  flex: 1; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-soft); font-size: 11px; padding: 6px 0; transition: color .15s;
}
.bn-item .bn-ico { font-size: 21px; line-height: 1; }
.bn-item.active { color: var(--gold); }
.bn-item.active .bn-ico { transform: translateY(-1px); }

/* ---------- 全屏详情弹窗 ---------- */
.detail-mask {
  position: fixed; inset: 0; z-index: 100; background: rgba(41,52,78,.55);
  display: none;
}
.detail-mask.open { display: block; }
.detail-modal {
  position: absolute; inset: 0; background: var(--bg); overflow-y: auto;
  animation: detailIn .22s ease;
}
@keyframes detailIn { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.d-back, .d-fav, .d-share {
  position: fixed; top: 14px; z-index: 5; width: 38px; height: 38px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.82); color: var(--ink); font-size: 20px;
  cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow);
}
.d-back { left: 14px; }
.d-fav { right: 62px; }
.d-share { right: 14px; }
.d-fav.on { color: #7350c0; }
.d-hero {
  height: 220px; background-size: cover; background-position: center;
  position: relative;
}
.d-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(245,251,251,.0) 30%, var(--bg));
}
.d-scroll { padding: 0 18px 90px; position: relative; margin-top: -54px; }
.d-main { display: flex; gap: 16px; align-items: flex-end; }
.d-poster-wrap { width: 116px; flex-shrink: 0; }
.d-poster { width: 116px; height: 158px; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow); display: block; }
.d-info { flex: 1; min-width: 0; }
.d-info h1 { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.d-en { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.d-meta { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.d-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.d-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--ink); }
.d-tag.status { background: var(--mac-mint); }
.d-ratings { display: flex; gap: 8px; margin-top: 10px; }
.d-rating {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--bg-soft); border-radius: 8px; padding: 3px 9px;
  font-size: 12px; color: var(--ink-soft);
}
.d-rating b { font-size: 16px; font-weight: 800; color: var(--ink); }
.d-rating.db b { color: var(--d-mint); }
.d-rating.im b { color: var(--d-cyan); }
.d-rating.xg b { color: var(--d-lilac); }
.d-score { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.d-score-num { font-size: 22px; font-weight: 800; color: var(--gold); }
.d-score-lbl { font-size: 11px; color: var(--ink-soft); }
.d-note { margin-top: 16px; background: var(--card); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.d-note-title { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.d-note { font-size: 13px; line-height: 1.6; color: var(--ink); }
.d-facts { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.d-fact { display: flex; justify-content: space-between; font-size: 13px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.d-fact span { color: var(--ink-soft); }
.d-fact b { color: var(--ink); }
.d-credits { margin-top: 16px; background: var(--card); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.d-credit { display: flex; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.d-credit:last-child { border-bottom: none; }
.d-credit span { color: var(--ink-soft); flex-shrink: 0; width: 40px; }
.d-credit b { color: var(--ink); flex: 1; line-height: 1.4; }
.d-status { margin-top: 16px; }
.d-status-title { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.d-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------- 我的视图 ---------- */
.mine { padding: 6px 16px 16px; }
.mine-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mstat { background: var(--card); border-radius: 14px; padding: 14px 4px; text-align: center; box-shadow: var(--shadow); }
.mstat b { display: block; font-size: 20px; font-weight: 800; color: var(--ink); }
.mstat span { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.mstat.watching b { color: var(--d-cyan); }
.mstat.planned b { color: var(--d-lilac); }
.mstat.completed b { color: var(--d-mint); }
.mstat.dropped b { color: var(--ink-soft); }
.mine-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mine-about { margin-top: 20px; background: var(--card); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.mabout-title { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.mine-about p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.mine-about p.mabout-credit { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--ink-soft); opacity: .78; }

/* 即将到来：状态筛选条（跨两列） */
.up-filters { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.fchip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13px; cursor: pointer; background: #fff; color: var(--ink-soft);
  transition: all .15s;
}
.fchip:hover { border-color: var(--mac-blue); }
.fchip.sel { background: var(--mac-blue); color: #2c5f96; border-color: var(--mac-blue); font-weight: 700; }

/* 地区筛选条（全局） */
.region-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; }
.rchip {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13px; cursor: pointer; background: #fff; color: var(--ink-soft);
  transition: all .15s;
}
.rchip:hover { border-color: var(--mac-pink); }
.rchip.sel { background: var(--mac-pink); color: #63429f; border-color: var(--mac-pink); font-weight: 700; }

/* 状态筛选条（全局：想追 / 在追 / 弃剧） */
.status-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.schip {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13px; cursor: pointer; background: #fff; color: var(--ink-soft);
  transition: all .15s;
}
.schip:hover { border-color: var(--mac-yellow); }
.schip.sel { background: var(--mac-yellow); color: #0f5a63; border-color: var(--mac-yellow); font-weight: 700; }

/* 地区标签（卡片/事件条内） */
.region-tag {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-soft); font-weight: 600; margin-left: 4px;
}
.up-item .nm .region-tag { background: var(--mac-cream); color: #63429f; }

/* 详情：我的状态选择 */
.ms-pick { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.ms-chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12px; cursor: pointer; background: #fff; color: var(--ink-soft);
}
.ms-chip.sel { background: var(--mac-yellow); color: #0f5a63; border-color: var(--mac-yellow); font-weight: 700; }

/* ---------- 11. 我的清单（按状态分组） ---------- */
.mylist { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.ml-group { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.ml-h { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ml-h .pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; font-weight: 700; background: var(--bg-soft); color: var(--ink-soft); }
.ml-h.watching { color: #2e939c; }
.ml-h.planned { color: #4c86d4; }
.ml-h.completed { color: var(--ink-soft); }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ml-card {
  display: flex; gap: 10px; align-items: center; padding: 10px;
  border-radius: 12px; cursor: pointer; transition: background .15s;
}
.ml-card:hover { background: var(--bg-soft); }
.ml-card.completed { opacity: .5; }
.ml-card .thumb {
  width: 40px; height: 54px; border-radius: 8px; object-fit: cover;
  background: var(--mac-purple); flex-shrink: 0; display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.ml-meta { flex: 1; min-width: 0; }
.ml-meta .nm { font-weight: 700; font-size: 14px; }
.ml-meta .pl { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.ml-meta .ne { font-size: 12px; color: var(--ev-up); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 12. 今日追剧提醒条（开播前提醒） ---------- */
.today-banner {
  max-width: 1080px; margin: 0 auto 12px; display: none; align-items: center; flex-wrap: wrap; gap: 8px;
  background: linear-gradient(135deg, var(--mac-yellow), #fff);
  border: 1px solid var(--gold-line); border-radius: 14px; padding: 10px 14px; font-size: 13px;
}
.today-banner.show { display: flex; }
.today-banner .tb-label { font-weight: 800; color: #0f5a63; margin-right: 2px; }
.tb-chip { padding: 4px 10px; border-radius: 999px; font-weight: 700; cursor: pointer; }
.tb-chip.on { background: var(--ev-on-bg); color: #2e7d5b; }
.tb-chip.up { background: var(--ev-up-bg); color: #3a6fb5; }
.tb-chip:hover { filter: brightness(.97); }
.tb-bell {
  margin-left: auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--gold-line);
  background: var(--gold-soft); color: var(--gold); font-weight: 700; cursor: pointer; font-size: 12px;
}
.tb-bell:hover { background: rgba(27,124,134,.26); }

/* 响应式：窄屏单列 */
@media (max-width: 720px) {
  .upcoming { grid-template-columns: 1fr; }
  .day { min-height: 84px; }
  .day .ev .name { display: none; }   /* 窄屏只留标签，省空间 */
}

/* =====================================================================
 * 12. 详情页新状态按钮 / 进度条 / 在追记录弹窗
 * ===================================================================== */

/* 工具栏（追更） */
.d-tools { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* 状态三选一 */
.d-status-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.d-status-btn {
  border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 6px;
  background: #fff; color: var(--ink-soft); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.d-status-btn:hover { transform: translateY(-1px); }
.d-status-btn.sel { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.d-status-btn.planned.sel { background: #f0eafd; color: #63429f; border-color: #b79df1; }
.d-status-btn.watching.sel { background: #e9f8f9; color: #14606b; border-color: #a2e4e4; }
.d-status-btn.completed.sel { background: #ecfaf1; color: #2e7d5b; border-color: #b0e5c6; }
.d-status-btn.dropped.sel { background: #f3f6fa; color: #5c6270; border-color: #b6bcc9; }

/* 进度条区域（仅在「在追」时显示） */
.d-progress { display: none; margin-top: 16px; background: var(--card); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
.d-progress.show { display: block; animation: progIn .2s ease; }
@keyframes progIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.d-progress-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; }
.d-progress-top .d-progress-title { color: #14606b; }
.d-progress-pct { color: var(--gold); font-size: 15px; }
.d-progress-bar { height: 8px; background: #f0eafd; border-radius: 999px; margin-top: 10px; overflow: hidden; }
.d-progress-fill { height: 100%; background: linear-gradient(90deg, #a2e4e4, #1b7c86); border-radius: 999px; transition: width .25s ease; }
.d-progress-ctl { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.d-ep-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: all .15s;
}
.d-ep-btn:hover { background: var(--bg-soft); border-color: var(--mac-blue); }
.d-ep-count { flex: 1; text-align: center; font-size: 14px; color: var(--ink-soft); }
.d-ep-count b { color: var(--ink); font-size: 17px; }
.d-ep-more {
  width: 34px; height: 30px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff;
  color: var(--ink-soft); font-size: 16px; letter-spacing: 1px; cursor: pointer;
  display: grid; place-items: center; transition: all .15s;
}
.d-ep-more:hover { background: var(--bg-soft); color: var(--ink); }

/* （原此处有一组重复的 .mstat 颜色规则，会覆盖上方定义，2026-09-20 已删除） */

/* 在追记录底部弹窗 */
.ep-mask {
  position: fixed; inset: 0; background: rgba(41,52,78,.45);
  display: none; align-items: flex-end; justify-content: center; z-index: 110;
}
.ep-mask.open { display: flex; }
.ep-sheet {
  width: 100%; max-width: 520px; max-height: 82vh;
  background: var(--card); border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.15);
  display: flex; flex-direction: column;
  animation: sheetUp .22s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.ep-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; border-bottom: 1px solid var(--line);
}
.ep-head h3 { flex: 1; font-size: 17px; margin: 0; }
.ep-add {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gold-line);
  background: var(--gold-soft); color: var(--gold); font-size: 12px; font-weight: 700; cursor: pointer;
}
.ep-close {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--bg-soft);
  color: var(--ink-soft); font-size: 18px; cursor: pointer; display: grid; place-items: center;
}
.ep-body { flex: 1; overflow-y: auto; padding: 10px 18px; }
.ep-foot {
  display: flex; gap: 10px; padding: 12px 18px 22px; border-top: 1px solid var(--line);
}
.ep-foot .btn-hl { flex: 1; justify-content: center; }

/* 单条记录 */
.ep-empty { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 28px 8px; }
.ep-item {
  background: var(--bg); border-radius: 14px; padding: 11px 12px; margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(150,178,214,.08);
}
.ep-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.ep-num { font-size: 15px; font-weight: 800; color: var(--ink); flex-shrink: 0; }
.ep-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ep-note-btn {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--ink-soft); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.ep-note-btn:hover { background: var(--bg-soft); color: var(--ink); }
.ep-note-btn.has { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }
.ep-date {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ink-soft); padding: 5px 10px;
  background: #fff; border: 1px dashed var(--line); border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.ep-date:hover { border-color: var(--mac-blue); color: var(--ink); }
.ep-date::before { content: '📅'; font-size: 11px; opacity: .6; }
.ep-date-input {
  font-size: 12px; color: var(--ink); padding: 4px 8px;
  border: 1.5px solid var(--mac-blue); border-radius: 999px;
  background: #fff; outline: none; font-family: inherit;
}
.ep-del {
  width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--bg-soft);
  color: #c0566e; font-size: 15px; cursor: pointer; display: grid; place-items: center;
  transition: all .15s; flex-shrink: 0;
}
.ep-del:hover { background: #f6effc; transform: scale(1.05); }
.ep-tip { text-align: center; font-size: 12px; color: var(--ink-soft); margin: 14px 0 6px; }

/* =====================================================================
 * 14. 记录视图 · 卡片式进度（v3）
 * ===================================================================== */

.record-top {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, #f5fbfb 0%, #f5fbfb 70%, rgba(245,251,251,0));
  padding: 14px 16px 8px;
}
.record-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
}
.rc-tab {
  flex-shrink: 0; padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.rc-tab:hover { border-color: var(--mac-blue); }
.rc-tab.sel { color: #fff; border-color: transparent; }
.rc-tab.watching.sel { background: #2e939c; }
.rc-tab.planned.sel { background: #7350c0; }
.rc-tab.completed.sel { background: #3faf7a; }
.rc-tab.dropped.sel { background: #99a0af; }

.record-tools {
  display: flex; gap: 10px; margin-top: 10px; align-items: center;
}
.record-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 9px 14px; box-shadow: var(--shadow);
}
.record-search .rs-ico { font-size: 15px; opacity: .6; }
.record-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--ink);
}
.record-sort {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink-soft); font-size: 16px; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow); flex-shrink: 0;
}
.record-sort:hover { border-color: var(--mac-blue); color: var(--ink); }
.record-count {
  font-size: 13px; color: var(--ink-soft); margin-top: 8px;
}

.record-list { padding: 4px 16px 22px; }
.rc-empty { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 40px 8px; }
.rc-card {
  display: flex; gap: 14px; background: var(--card); border-radius: 16px;
  padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.rc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(150,178,214,.2); }
.rc-card.dropped { opacity: .7; }
.rc-poster {
  width: 84px; height: 112px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  background: var(--mac-purple); box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.rc-poster .rc-poster-img, .rc-poster img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.rc-title-row {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px;
}
.rc-title {
  font-size: 16px; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-year {
  font-size: 12px; color: var(--ink-soft); flex-shrink: 0;
}
.rc-sub {
  font-size: 12px; color: var(--ink-soft); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-progress-wrap { margin-top: 10px; }
.rc-progress-bar {
  height: 6px; background: #f0eafd; border-radius: 999px; overflow: hidden;
}
.rc-progress-fill {
  height: 100%; background: linear-gradient(90deg, #a2e4e4, #1b7c86); border-radius: 999px;
  transition: width .25s ease;
}
.rc-progress-row {
  display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
}
.rc-ep-ctl {
  display: flex; align-items: center; gap: 8px;
}
.rc-ep-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: all .15s;
}
.rc-ep-btn:hover { background: var(--bg-soft); border-color: var(--mac-blue); }
.rc-ep-count { font-size: 13px; color: var(--ink-soft); }
.rc-ep-count b { color: var(--ink); font-size: 15px; font-weight: 800; }
.rc-tag {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  color: #fff; flex-shrink: 0;
}
.rc-tag.watching { background: #2e939c; }
.rc-tag.planned { background: #7350c0; }
.rc-tag.completed { background: #3faf7a; }
.rc-tag.dropped { background: #99a0af; }
.rc-start {
  font-size: 11px; color: var(--ink-soft); margin-top: 6px;
}

/* 响应式：窄屏记录卡片 */
@media (max-width: 720px) {
  .record-tabs { gap: 6px; }
  .rc-tab { padding: 6px 12px; font-size: 13px; }
  .rc-poster { width: 72px; height: 96px; }
  .rc-title { font-size: 15px; }
}

/* ============================================================
   萌宠 AI 助手（常驻右上角悬浮组件）
   ============================================================ */
.aipet{
  position:fixed; top:14px; right:14px; z-index:900;
  display:flex; flex-direction:column; align-items:flex-end;
}
.aipet-btn{
  width:62px; height:62px; border:none; background:transparent; padding:0;
  cursor:pointer; animation:ap-bob 3.2s ease-in-out infinite;
  transition:transform .2s ease;
}
.aipet-btn img{
  width:100%; height:100%; object-fit:contain; display:block; pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(199,174,246,.40));
  animation:ap-breathe 2.6s ease-in-out infinite;
}
.aipet-btn:hover{ transform:scale(1.08) rotate(-4deg); }
.aipet-btn:active{ transform:scale(.93); }
.aipet-btn.wave{ animation:ap-wave .7s ease; }
.aipet-btn.think{ animation:ap-think .5s ease-in-out 2; }
.aipet-btn.hop{ animation:ap-hop .5s ease; }
.aipet-btn.blink{ animation:ap-blink .22s ease; }
.aipet-btn.nod{ animation:ap-nod .65s ease; }
.aipet-btn.walk{ animation:ap-walk 1.3s ease; }
@keyframes ap-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ap-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes ap-wave{0%{transform:rotate(0)}25%{transform:rotate(-13deg)}50%{transform:rotate(9deg)}75%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
@keyframes ap-think{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes ap-hop{0%{transform:translateY(0)}40%{transform:translateY(-12px) scale(1.06)}100%{transform:translateY(0)}}
@keyframes ap-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}
@keyframes ap-nod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(5px) rotate(7deg)}60%{transform:translateY(0) rotate(-3deg)}}
@keyframes ap-walk{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(-14px) rotate(-7deg)}50%{transform:translateX(-26px) rotate(5deg)}75%{transform:translateX(-14px) rotate(-4deg)}100%{transform:translateX(0) rotate(0)}}

.aipet-bubble{
  margin-bottom:8px; background:#fff; color:#7350c0; font-size:12px;
  padding:6px 11px; border-radius:14px; box-shadow:0 4px 14px rgba(199,174,246,.25);
  position:relative; opacity:0; transform:translateY(6px) scale(.9);
  pointer-events:none; transition:all .3s ease; white-space:nowrap;
}
.aipet-bubble.show{ opacity:1; transform:translateY(0) scale(1); }
.aipet-bubble::after{
  content:""; position:absolute; bottom:-5px; right:20px;
  border:6px solid transparent; border-top-color:#fff; border-bottom:0;
}

/* 聊天面板 */
.aipet-chat{
  position:fixed; top:88px; right:14px; width:min(340px,calc(100vw - 28px));
  height:auto; max-height:min(520px,calc(100vh - 110px));
  background:#fff; border-radius:26px; box-shadow:0 16px 50px rgba(199,174,246,.30);
  z-index:901; display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(16px) scale(.96); opacity:0; pointer-events:none;
  transition:all .28s cubic-bezier(.34,1.56,.64,1);
}
.aipet-chat.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.apc-head{
  padding:13px 14px; background:linear-gradient(90deg,#f4eefe,#f1ebfe);
  display:flex; align-items:center; gap:10px;
}
.apc-ava{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.apc-info{ flex:1; min-width:0; }
.apc-name{ font-weight:700; color:#4a4569; font-size:15px; line-height:1.2; }
.apc-status{ font-size:11px; color:#8a90a6; margin-top:1px; }
.apc-brain, .apc-close{
  width:30px; height:30px; border-radius:50%; border:none; background:#fff; cursor:pointer;
  font-size:16px; line-height:30px; text-align:center; flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.06); color:#4a4569;
}
.apc-brain{ font-size:14px; }

.apc-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:11px; }
.apc-msg{ max-width:82%; padding:10px 13px; border-radius:17px; font-size:13.5px; line-height:1.55; word-break:break-word; animation:ap-pop .25s ease; }
.apc-msg.bot{ align-self:flex-start; background:#f7f2fe; color:#4a4569; border-bottom-left-radius:5px; }
.apc-msg.user{ align-self:flex-end; background:linear-gradient(135deg,#d8c2f9,#c7aef6); color:#fff; border-bottom-right-radius:5px; }
.apc-msg .t{ font-size:10px; opacity:.6; margin-top:3px; text-align:right; }
@keyframes ap-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.apc-typing{ display:flex; gap:4px; padding:12px 14px; align-self:flex-start; }
.apc-typing span{ width:7px; height:7px; background:#c7aef6; border-radius:50%; animation:ap-tb 1.2s infinite; }
.apc-typing span:nth-child(2){ animation-delay:.15s; }
.apc-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ap-tb{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

.apc-persona{
  max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease;
  background:#fbfafe; border-top:1px solid #f1ebfe;
}
.apc-persona.open{ max-height:220px; padding:12px 14px; overflow-y:auto; }
.apc-persona-title{ font-size:12px; color:#7350c0; font-weight:700; margin-bottom:8px; }
.apc-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.apc-tag{ padding:5px 10px; border-radius:16px; font-size:12px; background:#f7f2fe; color:#7350c0; }
.apc-tag.empty{ background:#f3f5fa; color:#a6abbc; }

.apc-foot{ padding:10px 12px 14px; border-top:1px solid #f1ebfe; display:flex; gap:8px; background:#fff; }
.apc-foot input{
  flex:1; border:1px solid #e6dcfa; border-radius:20px; padding:9px 13px; outline:none;
  font-size:13.5px; background:#fbfafe; color:#454a5c;
}
.apc-foot input:focus{ border-color:#c7aef6; }
.apc-foot button{
  width:38px; height:38px; border-radius:50%; border:none; flex-shrink:0;
  background:linear-gradient(135deg,#d8c2f9,#c7aef6); color:#fff; font-size:16px; cursor:pointer;
  box-shadow:0 4px 12px rgba(199,174,246,.30);
}
.apc-gear{
  width:30px; height:30px; border-radius:50%; border:none; background:#fff; cursor:pointer;
  font-size:15px; line-height:30px; text-align:center; flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.06); color:#4a4569;
}
.apc-gear:hover{ transform:rotate(45deg); }

/* AI 设置面板 */
.apc-settings{
  max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease;
  background:#fbfafe; border-top:1px solid #f1ebfe; padding:0 14px;
}
.apc-settings.open{ max-height:min(340px,calc(100vh - 220px)); padding:12px 14px; overflow-y:auto; }
.apcs-title{ font-size:12px; color:#7350c0; font-weight:700; margin-bottom:8px; }
.apc-settings label{ display:block; font-size:11px; color:#8a90a6; margin-bottom:7px; }
.apc-settings label input{
  display:block; width:100%; margin-top:3px; border:1px solid #e6dcfa; border-radius:10px;
  padding:7px 10px; font-size:12.5px; outline:none; background:#fff; color:#454a5c; box-sizing:border-box;
}
.apc-settings label input:focus{ border-color:#c7aef6; }
.apcs-actions{ display:flex; gap:8px; margin:4px 0 8px; }
.apcs-actions .btn-hl{ flex:1; padding:7px 0; font-size:13px; }
.apcs-note{ font-size:11px; line-height:1.5; color:#8a90a6; }
.apcs-note.ok{ color:#2e9e6e; }
.apcs-note.warn{ color:#1b7c86; }
.apcs-sep{ height:1px; background:#e6dcfa; margin:12px 0; }
.apcs-row{ display:flex; justify-content:center; margin:6px 0 10px; }
.apcs-textbtn{
  background:none; border:none; color:#8a63ce; font-size:12px; cursor:pointer;
  padding:4px 10px; border-radius:999px; transition:background .2s;
}
.apcs-textbtn:hover{ background:#f3eefe; }

/* 「我的」页 · 芽芽养成卡 */
.m-ai{
  margin:14px 0; background:linear-gradient(135deg,#f8f4fe,#f5f1fe);
  border:1px solid #f1ebfe; border-radius:18px; padding:14px; box-shadow:0 6px 20px rgba(199,174,246,.16);
}
.m-ai-head{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.m-ai-ava{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.m-ai-name{ font-weight:700; color:#4a4569; font-size:15px; }
.m-ai-sub{ font-size:11px; color:#8a90a6; margin-top:2px; }
.m-ai-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.m-ai-acts{ display:flex; gap:8px; }
.m-ai-acts .btn-hl{ flex:1; padding:9px 0; font-size:13px; }

/* =====================================================================
 * 追剧历 · UI / 功能清单 50 项改造 — 新增样式（2026-09-20）
 * 说明：本段追加在原样式之后，同特异性时以本段为准。
 * 新增分区：A 顶栏 / B 首页 / C 月历 / D 记录 / E 我的 / F 弹窗 / H 详情 / 主题 / 宽屏
 * ===================================================================== */

/* ---------- A. 顶栏：主题按钮 / 搜索增强 / 快捷入口 / 今日横幅 ---------- */
.brand-txt { min-width: 0; flex: 1; }
.icon-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: transform .15s ease, background .15s ease;
}
.icon-btn:hover { background: var(--t-cyan); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }

.search-clear {
  border: 0; background: transparent; color: var(--ink-mute);
  font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.search-clear:hover { color: var(--ink); }
.search-hint {
  font-size: 12px; color: var(--ink-soft); padding: 2px 4px 0;
}
.search-hint b { color: var(--d-cyan); }

.quick-chips {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.quick-chips::-webkit-scrollbar { display: none; }
.qchip {
  flex-shrink: 0; font-size: 12.5px; font-weight: 700; line-height: 1;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  transition: all .15s ease;
}
.qchip:hover { border-color: var(--p-cyan); color: var(--d-cyan); }
.qchip.sel {
  background: var(--t-cyan); border-color: var(--p-cyan); color: var(--d-cyan);
}
.qchip-clear { border-style: dashed; }

.tb-bell.on { color: var(--d-mint); border-color: var(--p-mint); background: var(--t-mint); }

/* ---------- B. 首页卡片：已追标识 / 平台·年份可点 ---------- */
.pcard-mine {
  position: absolute; right: 6px; top: 6px; z-index: 3;
  font-size: 10px; font-weight: 800; line-height: 1;
  padding: 3px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(47, 62, 92, .18);
}
.pcard-mine.watching  { color: var(--st-watch); }
.pcard-mine.planned   { color: var(--st-want); }
.pcard-mine.completed { color: var(--st-done); }
.pcard.is-mine .pcard-img { outline: 2px solid var(--p-cyan); outline-offset: -2px; }

.pc-link { cursor: pointer; border-bottom: 1px dashed transparent; }
.pc-link:hover { color: var(--d-cyan); border-bottom-color: var(--p-cyan); }
.pcard-plat { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pc-dot { color: var(--ink-mute); }

.pe-sub { font-size: 12px; color: var(--ink-soft); }
.pe-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.link-btn {
  border: 0; background: transparent; color: var(--d-cyan);
  font: inherit; font-weight: 700; cursor: pointer; padding: 0 2px;
  border-bottom: 1px solid var(--p-cyan);
}
.link-btn:hover { color: var(--d-lilac); border-bottom-color: var(--p-lilac); }

.psearch-empty { padding: 6px 4px 10px; }
.psearch-empty ul { margin: 8px 0 0; padding-left: 20px; }
.psearch-empty li { font-size: 13px; color: var(--ink-soft); line-height: 1.9; }

/* ---------- C. 月历：月/周切换、仅我追的、过去淡化、周视图 ---------- */
.seg {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; background: var(--card); margin-left: auto;
}
.seg-btn {
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: 12.5px; font-weight: 700; padding: 6px 13px; cursor: pointer;
}
.seg-btn.sel { background: var(--t-cyan); color: var(--d-cyan); }

.cal-mine-toggle {
  margin-left: 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
}
.cal-mine-toggle.on { background: var(--t-lilac); border-color: var(--p-lilac); color: var(--d-lilac); }

.day.past { opacity: .55; }
.day.past .date-num { box-shadow: none; }
.ev-plus { font-style: normal; margin-left: 4px; opacity: .9; font-size: 9px; }

.week-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 12px; }
.wk-day {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 12px;
}
.wk-day.today { border-color: var(--p-cyan); background: var(--t-cyan); }
.wk-day.past { opacity: .6; }
.wk-date {
  flex-shrink: 0; width: 46px; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.wk-date b { font-size: 20px; color: var(--ink); line-height: 1.1; }
.wk-date span { font-size: 10.5px; color: var(--ink-soft); }
.wk-evs { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.wk-ev {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--bg); border-radius: 9px; padding: 6px 9px;
  transition: background .15s ease;
}
.wk-ev:hover { background: var(--t-blue); }
.wk-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wk-ev.on .wk-dot { background: var(--d-mint); }
.wk-ev.up .wk-dot { background: var(--d-blue); }
.wk-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-tag { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 999px; }
.wk-ev.on .wk-tag { background: var(--t-mint); color: var(--d-mint); }
.wk-ev.up .wk-tag { background: var(--t-blue); color: var(--d-blue); }
.wk-none { font-size: 12px; color: var(--ink-mute); }

/* ---------- D. 记录：筛选行 / 进度 / 网格视图 / 批量 ---------- */
.rec-filter-row {
  display: flex; align-items: center; gap: 6px; overflow-x: auto;
  padding: 6px 2px 4px; margin-top: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rec-filter-row::-webkit-scrollbar { display: none; }
.rf-label { flex-shrink: 0; font-size: 11.5px; color: var(--ink-mute); font-weight: 700; }
.rf-sep { flex-shrink: 0; width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.rfchip {
  flex-shrink: 0; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
}
.rfchip.sel { background: var(--t-cyan); border-color: var(--p-cyan); color: var(--d-cyan); font-weight: 800; }
.rf-clear {
  flex-shrink: 0; font-size: 12px; color: var(--ink-mute); cursor: pointer;
  padding: 5px 8px; border-bottom: 1px dashed var(--line); margin-left: 4px;
}
.rf-clear:hover { color: var(--alert); }

.rc-tab-n {
  font-style: normal; margin-left: 5px; font-size: 10.5px;
  opacity: .8; font-weight: 700;
}
.rc-pct { font-style: normal; color: var(--ink-soft); font-size: 11.5px; margin-left: 3px; }
.rc-behind {
  font-size: 11px; font-weight: 700; color: var(--d-blue);
  background: var(--t-blue); padding: 2px 7px; border-radius: 999px;
}
.rc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 5px;
}
.rc-note-n { font-size: 11.5px; color: var(--d-lilac); font-weight: 600; }

.rc-check {
  position: absolute; right: 8px; top: 8px; z-index: 4;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(255, 255, 255, .55);
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff;
  box-shadow: 0 1px 4px rgba(47, 62, 92, .25);
}
.rc-check.on { background: var(--st-watch); border-color: var(--st-watch); }
.rc-card.batch { cursor: pointer; }
.rc-card.checked, .rg-card.checked { outline: 2px solid var(--p-cyan); border-radius: 16px; }
.rc-poster { position: relative; }

.record-list.grid-mode {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; padding: 8px 2px 20px;
}
.rg-card { cursor: pointer; min-width: 0; }
.rg-poster {
  position: relative; width: 100%; aspect-ratio: 2 / 3;
  border-radius: 12px; overflow: hidden; background: var(--bg-soft);
}
.rg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .6); }
.rg-fill { height: 100%; background: var(--st-watch); }
.rg-name {
  font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rg-sub { font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }

.batch-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 9px 12px; border-radius: 14px;
  background: var(--t-cyan); border: 1px solid var(--p-cyan);
}
.bb-info { font-size: 12.5px; font-weight: 800; color: var(--d-cyan); margin-right: auto; }
.batch-bar .btn-hl { font-size: 12px; padding: 6px 11px; }

/* ---------- E. 我的：分区 / 回顾 / 热力图 / 成就 / 概览 / 提醒 ---------- */
.mine-sec {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px 14px 12px; margin-bottom: 12px;
}
.mine-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.mine-sec-head h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; }
.mine-more { font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.mine-more:hover { color: var(--d-cyan); }
.mine-empty {
  font-size: 13px; color: var(--ink-soft); line-height: 1.8;
  background: var(--bg); border-radius: 12px; padding: 14px; text-align: center;
}
.mine-tip {
  background: var(--t-lilac); border: 1px solid var(--p-lilac);
  color: var(--d-lilac); border-radius: 14px; padding: 11px 13px;
  font-size: 12.5px; line-height: 1.7; margin-bottom: 12px;
}

.mr-list { display: flex; flex-direction: column; gap: 10px; }
.mr-item {
  display: flex; gap: 10px; align-items: center; cursor: pointer;
  border-radius: 12px; padding: 6px; transition: background .15s ease;
}
.mr-item:hover { background: var(--bg); }
.mr-poster { width: 44px; height: 62px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg-soft); }
.mr-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-info { flex: 1; min-width: 0; }
.mr-name { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-bar { height: 6px; border-radius: 999px; background: var(--line); margin: 6px 0 4px; overflow: hidden; }
.mr-fill { height: 100%; background: linear-gradient(90deg, var(--p-cyan), var(--d-cyan)); border-radius: 999px; }
.mr-sub { font-size: 11.5px; color: var(--ink-soft); }

.hm-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.hm-head h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; }
.hm-sub { font-size: 11.5px; color: var(--ink-soft); }
.hm-grid { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 2px; }
.hm-col { display: flex; flex-direction: column; gap: 3px; }
.hm-cell {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  background: var(--line); cursor: pointer;
}
.hm-cell.lv0 { background: #EDF2F6; }
.hm-cell.lv1 { background: var(--p-cyan); }
.hm-cell.lv2 { background: var(--d-cyan); }
.hm-cell.lv3 { background: #0F5A63; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; color: var(--ink-mute); }
.hm-legend i { width: 12px; height: 12px; }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.ach {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--t-cyan); border-radius: 14px; padding: 10px 4px;
}
.ach-ico { font-size: 22px; line-height: 1; }
.ach-name { font-size: 11px; font-weight: 700; color: var(--d-cyan); text-align: center; }
.ach-next { margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.ach-empty { font-size: 13px; color: var(--ink-soft); text-align: center; padding: 12px; background: var(--bg); border-radius: 12px; }

.mstat-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mstat-i { font-size: 12.5px; color: var(--ink-soft); }
.mstat-i b { font-size: 15px; font-weight: 800; color: var(--ink); margin-right: 2px; }
.mstat-i.watching b  { color: var(--st-watch); }
.mstat-i.planned b   { color: var(--st-want); }
.mstat-i.completed b { color: var(--st-done); }

/* ---------- F. 通用大弹窗 Sheet ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 220; display: none;
  background: rgba(31, 41, 62, .42); backdrop-filter: blur(3px);
  align-items: flex-end; justify-content: center;
}
.sheet-mask.open { display: flex; }
.sheet-modal {
  width: 100%; max-width: 640px; max-height: 86vh;
  background: var(--card); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  animation: sheetUp .26s cubic-bezier(.22, .9, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--line);
}
.sheet-head h2 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.sheet-close {
  border: 0; background: transparent; font-size: 16px; color: var(--ink-soft);
  cursor: pointer; padding: 2px 6px;
}
.sheet-content { padding: 12px 14px 24px; overflow-y: auto; }
.sheet-empty { font-size: 13px; color: var(--ink-soft); line-height: 1.9; text-align: center; padding: 24px 8px; }
.sheet-list { display: flex; flex-direction: column; gap: 8px; }
.sheet-row {
  display: flex; gap: 10px; align-items: center; cursor: pointer;
  background: var(--bg); border-radius: 12px; padding: 8px 10px;
  transition: background .15s ease;
}
.sheet-row:hover { background: var(--t-cyan); }
.sr-thumb { width: 40px; height: 56px; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: var(--bg-soft); }
.sr-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-main { flex: 1; min-width: 0; }
.sr-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sr-ep { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; margin-left: 4px; }
.sr-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.sr-sub { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.sr-go { color: var(--ink-mute); font-size: 18px; }

/* 足迹时间轴 */
.fp-timeline { display: flex; flex-direction: column; gap: 14px; }
.fp-day { display: flex; gap: 12px; }
.fp-date {
  flex-shrink: 0; width: 52px; text-align: right;
  display: flex; flex-direction: column; gap: 1px;
  border-right: 2px solid var(--line); padding-right: 10px;
}
.fp-date b { font-size: 14px; color: var(--ink); }
.fp-date span { font-size: 10.5px; color: var(--ink-mute); }
.fp-items { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fp-item {
  display: flex; gap: 9px; align-items: center; cursor: pointer;
  background: var(--bg); border-radius: 11px; padding: 7px 9px;
}
.fp-item:hover { background: var(--t-cyan); }
.fp-thumb { width: 34px; height: 48px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--bg-soft); }
.fp-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-txt b { font-size: 13px; color: var(--ink); }
.fp-txt span { font-size: 11.5px; color: var(--ink-soft); }

/* 年度报告 */
.ar-hero { text-align: center; padding: 14px 0 18px; }
.ar-big { font-size: 52px; font-weight: 900; line-height: 1; color: var(--d-cyan); }
.ar-hero-t { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.ar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.ar-cell {
  background: var(--bg); border-radius: 12px; padding: 10px 4px; text-align: center;
  display: flex; flex-direction: column; gap: 3px;
}
.ar-cell b { font-size: 18px; font-weight: 800; color: var(--ink); }
.ar-cell span { font-size: 10.5px; color: var(--ink-soft); }
.ar-sec { margin-bottom: 16px; }
.ar-sec h4 { font-size: 13.5px; font-weight: 800; color: var(--ink); margin: 0 0 9px; }
.ar-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.ar-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.ar-bar i { width: 100%; min-height: 3px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--p-cyan), var(--d-cyan)); }
.ar-bar span { font-size: 9.5px; color: var(--ink-mute); }
.ar-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ar-tag { font-size: 12px; background: var(--t-lilac); color: var(--d-lilac); padding: 5px 11px; border-radius: 999px; font-weight: 700; }
.ar-foot { text-align: center; font-size: 11.5px; color: var(--ink-mute); padding-top: 6px; }

.discover-hint { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }

/* 云同步 */
.cloud-box { display: flex; flex-direction: column; gap: 10px; }
.cloud-tip { font-size: 12.5px; color: var(--ink-soft); line-height: 1.85; margin: 0; }
.cloud-tip code { background: var(--bg); padding: 1px 5px; border-radius: 5px; }
.cloud-label { font-size: 12px; font-weight: 800; color: var(--ink); }
.cloud-input {
  width: 100%; box-sizing: border-box; font-size: 14px;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.cloud-input:focus { outline: none; border-color: var(--p-cyan); background: var(--card); }
.cloud-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cloud-status { font-size: 12.5px; color: var(--d-cyan); min-height: 18px; }
.cloud-note { font-size: 11.5px; color: var(--ink-mute); line-height: 1.7; margin: 0; }

/* ---------- H. 详情页：大图收起 / 行内进度 / 二刷 ---------- */
.d-hero { transition: height .25s ease, opacity .25s ease; }
.detail-modal.scrolled .d-hero { height: 96px; opacity: .82; }
.detail-modal.scrolled .d-main { margin-top: -18px; }

.d-status-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.d-status-title { font-size: 14px; font-weight: 800; color: var(--ink); }
.d-rewatch-tag {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--t-lilac); color: var(--d-lilac);
}
.d-inline { display: flex; align-items: center; gap: 8px; }
.d-inline-bar {
  flex: 1; height: 10px; border-radius: 999px; background: var(--line);
  overflow: hidden; min-width: 60px;
}
.d-inline-fill { height: 100%; background: linear-gradient(90deg, var(--p-cyan), var(--d-cyan)); border-radius: 999px; transition: width .2s ease; }
.d-inline-num { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.d-inline-num b { font-size: 16px; font-weight: 800; color: var(--d-cyan); }
.d-inline-pct { font-size: 12.5px; font-weight: 800; color: var(--d-cyan); min-width: 36px; text-align: right; }
.d-progress-hint { font-size: 11.5px; color: var(--ink-soft); margin-top: 7px; }
.d-rewatch {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 11px;
  padding-top: 11px; border-top: 1px dashed var(--line);
}
.d-rewatch-hint { font-size: 11.5px; color: var(--ink-mute); }

/* ---------- 底部导航：SVG 图标（跨设备一致，替代 emoji） ---------- */
.bn-svg {
  width: 22px; height: 22px; display: block; margin: 0 auto 3px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.bn-item.active .bn-svg { stroke: var(--d-cyan); }
.bn-item .bn-svg { stroke: var(--ink-mute); }

/* ---------- 动效（F3）：视图切换淡入、卡片轻浮起 ---------- */
.view { animation: viewIn .22s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pcard { transition: transform .16s ease, box-shadow .16s ease; }
.pcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(47, 62, 92, .12); }
.rc-card, .rg-card { transition: transform .16s ease; }
.rc-card:hover, .rg-card:hover { transform: translateY(-1px); }

/* ---------- 骨架屏（B4） ---------- */
.skl-row { display: flex; gap: 12px; padding: 10px 4px; overflow: hidden; }
.skl-card { width: 120px; flex-shrink: 0; }
.skl-poster {
  width: 120px; height: 160px; border-radius: 14px;
  background: linear-gradient(100deg, var(--line) 30%, var(--bg-soft) 50%, var(--line) 70%);
  background-size: 240% 100%; animation: skl 1.3s linear infinite;
}
.skl-line {
  height: 11px; border-radius: 6px; margin-top: 8px;
  background: linear-gradient(100deg, var(--line) 30%, var(--bg-soft) 50%, var(--line) 70%);
  background-size: 240% 100%; animation: skl 1.3s linear infinite;
}
.skl-line.s { width: 62%; }
@keyframes skl { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* ---------- E3 暗色主题 ---------- */
[data-theme="dark"] {
  --bg:        #141A24;
  --bg-soft:   #171E2B;
  --card:      #1C2431;
  --ink:       #E8EEF7;
  --ink-soft:  #A3B0C4;
  --ink-mute:  #71809A;
  --line:      #2C3849;

  --t-mint:    #1B2E29;
  --t-cyan:    #16303A;
  --t-blue:    #1A283D;
  --t-lilac:   #241E38;

  --d-mint:    #7FD9AE;
  --d-cyan:    #7AD4DE;
  --d-blue:    #9CC0F0;
  --d-lilac:   #C0A6F5;

  --ev-on:     #7FD9AE;
  --ev-on-bg:  #1B2E29;
  --ev-up:     #9CC0F0;
  --ev-up-bg:  #1A283D;

  --st-want:   #C0A6F5;  --st-want-bg:  #241E38;
  --st-watch:  #7AD4DE;  --st-watch-bg: #16303A;
  --st-done:   #7FD9AE;  --st-done-bg:  #1B2E29;
  --alert:     #F09CB0;

  color-scheme: dark;
}
[data-theme="dark"] .pcard-mine { background: rgba(28, 36, 49, .92); }
[data-theme="dark"] .hm-cell.lv0 { background: #232D3C; }
[data-theme="dark"] .hm-cell.lv3 { background: #7AD4DE; }
[data-theme="dark"] .psearch-empty li,
[data-theme="dark"] .mine-empty,
[data-theme="dark"] .cloud-tip { color: var(--ink-soft); }
[data-theme="dark"] .sheet-mask { background: rgba(0, 0, 0, .55); }

/* ---------- F4 宽屏布局：电脑上不再是一条窄栏 ---------- */
@media (min-width: 900px) {
  body { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
  .bottom-nav { max-width: 560px; left: 50%; transform: translateX(-50%); border-radius: 20px 20px 0 0; }
  .plaza-scroll .prow { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .record-list.grid-mode { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .sheet-modal { border-radius: 22px; max-height: 80vh; margin-bottom: 6vh; }
  .sheet-mask { align-items: center; }
  .detail-modal { max-width: 720px; margin: 0 auto; border-radius: 22px; }
  .mine-sec { padding: 18px; }
  .wk-evs { flex-direction: row; flex-wrap: wrap; }
  .wk-ev { flex: 1 1 220px; }
}

/* ---------- 无障碍：尊重「减少动效」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .view, .sheet-modal, .skl-poster, .skl-line { animation: none; }
  .pcard, .rc-card, .rg-card, .d-hero { transition: none; }
}

/* ---------- H6 记录卡片快捷状态菜单（点标签弹出） ---------- */
.rc-tag-btn {
  border: 1px solid transparent; cursor: pointer;
  font-family: inherit; line-height: 1.4;
  transition: transform .16s ease, box-shadow .16s ease;
}
.rc-tag-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(20,40,60,.18); }
.status-menu {
  position: fixed; z-index: 3000; min-width: 148px;
  background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 34px rgba(16,36,56,.22);
  animation: smIn .16s ease;
}
@keyframes smIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sm-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  text-align: left; cursor: pointer;
}
.sm-item:hover { background: var(--t-cyan); }
.sm-item.on { background: var(--t-cyan); }
.sm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #c4ccd8; }
.sm-dot.watching { background: #2e939c; }
.sm-dot.planned { background: #7350c0; }
.sm-dot.completed { background: #3faf7a; }
.sm-dot.none { background: #b9c1cd; }
.sm-ok { margin-left: auto; color: var(--d-cyan); font-style: normal; font-weight: 800; }
[data-theme="dark"] .status-menu { background: #1B2330; border-color: #2C384A; box-shadow: 0 14px 38px rgba(0,0,0,.55); }
[data-theme="dark"] .sm-item:hover, [data-theme="dark"] .sm-item.on { background: #22303F; }

/* ---------- A2 桌宠：改挂右下角（避开新顶栏），并适配暗色 ---------- */
.aipet { top: auto; bottom: 92px; right: 12px; }
.aipet-chat { top: auto; bottom: 164px; right: 12px; max-height: min(520px, calc(100vh - 260px)); }
@media (min-width: 900px) {
  .aipet { bottom: 24px; right: 26px; }
  .aipet-chat { bottom: 98px; right: 26px; max-height: min(560px, calc(100vh - 220px)); }
}
[data-theme="dark"] .aipet-chat { background: #1B2330; box-shadow: 0 16px 50px rgba(0,0,0,.6); }
[data-theme="dark"] .apc-head { background: linear-gradient(90deg, #22303F, #26313F); }
[data-theme="dark"] .apc-name { color: var(--ink); }
[data-theme="dark"] .apc-status { color: var(--ink-soft); }
[data-theme="dark"] .apc-brain,
[data-theme="dark"] .apc-close,
[data-theme="dark"] .apc-gear { background: #26313F; color: var(--ink); }
[data-theme="dark"] .apc-body { background: #1B2330; }
[data-theme="dark"] .apc-msg.bot { background: #22303F; color: var(--ink); }
[data-theme="dark"] .apc-persona,
[data-theme="dark"] .apc-settings { background: #1F2836; border-color: #2C384A; }
[data-theme="dark"] .apc-tag { background: #22303F; color: #9DC6EA; }
[data-theme="dark"] .apc-persona-title,
[data-theme="dark"] .apcs-title { color: #9DC6EA; }
[data-theme="dark"] .apc-settings label { color: var(--ink-soft); }
[data-theme="dark"] .apc-foot { background: #1B2330; border-color: #2C384A; }
[data-theme="dark"] .apc-foot input,
[data-theme="dark"] .apc-settings label input { background: #22303F; border-color: #33425A; color: var(--ink); }
[data-theme="dark"] .apcs-note { color: var(--ink-mute); }
[data-theme="dark"] .aipet-bubble { background: #22303F; color: #9DC6EA; }
[data-theme="dark"] .aipet-bubble::after { border-top-color: #22303F; }
[data-theme="dark"] .m-ai { background: linear-gradient(135deg, #1F2836, #212B3B); border-color: #2C384A; }
[data-theme="dark"] .m-ai-name { color: var(--ink); }
[data-theme="dark"] .m-ai-sub { color: var(--ink-soft); }

/* ---------- A2 桌宠层级修正（原 900/901 会浮在详情/表单/大弹窗之上，挡住关闭按钮） ---------- */
.aipet { z-index: 55; }
.aipet-chat { z-index: 56; }
/* 桌宠容器本身不吃点击，只有按钮可点（否则会挡住其上方内容的点击） */
.aipet { pointer-events: none; }
.aipet .aipet-btn { pointer-events: auto; }