/* ==========================================================================
   Melograph · 拾音
   设计基调：Apple HIG 的结构与留白 + 纸感暖白 + 宋体标题的文艺气质
   ========================================================================== */

:root {
  --bg: #FBFAF8;
  --surface: #FFFFFF;
  --surface-2: #F4F2ED;
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --text-3: #9C9CA1;
  --line: rgba(0, 0, 0, .07);
  --line-strong: rgba(0, 0, 0, .12);
  --accent: #A1654A;
  --accent-soft: rgba(161, 101, 74, .12);
  --like: #C05246;
  --like-soft: rgba(192, 82, 70, .12);
  --glass: rgba(251, 250, 248, .72);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04);
  --shadow-3: 0 -8px 40px rgba(0, 0, 0, .10);
  --grain-blend: multiply;
  --grain-op: .04;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
                Georgia, "Times New Roman", serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --ease: cubic-bezier(.22, .68, .3, 1);
  --topbar-h: 52px;
  --sidebar-w: 248px;
  --playbar-h: 78px;
}

html[data-theme="dark"] {
  --bg: #0D0D0F;
  --surface: #17171A;
  --surface-2: #1F1F23;
  --text: #F2F2F4;
  --text-2: #9B9BA1;
  --text-3: #6E6E75;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --accent: #CE9B7C;
  --accent-soft: rgba(206, 155, 124, .16);
  --like: #E0746A;
  --like-soft: rgba(224, 116, 106, .16);
  --glass: rgba(13, 13, 15, .70);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .55);
  --shadow-3: 0 -8px 40px rgba(0, 0, 0, .6);
  --grain-blend: overlay;
  --grain-op: .06;
}

* { box-sizing: border-box; }

/* 组件用 display:grid/flex 会盖掉 UA 的 [hidden]{display:none}，这里统一兜住 */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* 纸感噪点 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent-soft); color: var(--text); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }

.ic { width: 18px; height: 18px; flex: none; display: block; }

/* ============================ 布局骨架 ============================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr auto;
  grid-template-areas: "top top" "side main" "bar bar";
  height: 100vh;
  height: 100dvh;
}

/* ============================== 顶栏 ============================== */

.topbar {
  grid-area: top;
  position: relative;
  z-index: 40;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--line);
}

.topbar-inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-mark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  padding: 0 1px;
}
.brand-mark i {
  width: 2.5px;
  background: var(--text);
  border-radius: 2px;
  animation: eq 2.4s var(--ease) infinite;
}
.brand-mark i:nth-child(1) { height: 40%; animation-delay: 0s; }
.brand-mark i:nth-child(2) { height: 90%; animation-delay: .3s; }
.brand-mark i:nth-child(3) { height: 60%; animation-delay: .6s; }
.brand-mark i:nth-child(4) { height: 100%; animation-delay: .9s; }
.brand-mark.is-large { height: 40px; gap: 4px; }
.brand-mark.is-large i { width: 5px; border-radius: 3px; }

@keyframes eq {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1); }
}

.brand-text { display: flex; align-items: baseline; gap: 8px; }
.brand-text b {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .06em;
}
.brand-text em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: .5px solid transparent;
  transition: border-color .25s, background .25s;
}
.searchbox:focus-within { border-color: var(--line-strong); background: var(--surface); }
.searchbox .ic { width: 15px; height: 15px; color: var(--text-3); }
.searchbox input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 13px;
}
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox kbd {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-3);
  border: .5px solid var(--line-strong);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 15px;
}

.ghost-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-2);
  transition: background .2s, color .2s;
}
.ghost-btn:hover { background: var(--surface-2); color: var(--text); }

.account {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px 0 11px;
  border-radius: 16px;
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
}
.account .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.account .dot.is-demo { background: var(--text-3); }

/* ============================== 侧栏 ============================== */

.sidebar {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 14px;
  border-right: .5px solid var(--line);
  overflow-y: auto;
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 14px;
  transition: background .2s, color .2s;
}
.nav-item .ic { width: 17px; height: 17px; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.is-active { background: var(--surface-2); color: var(--text); font-weight: 500; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }

.agent-card {
  padding: 15px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.agent-label {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.agent-stage {
  margin: 0 0 3px;
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 500;
}
.agent-headline {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.agent-stats {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--text-2);
  padding-top: 10px;
  border-top: .5px solid var(--line);
}
.agent-stats b {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-right: 2px;
}

.provider-note {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-3);
  padding: 0 4px;
}

/* ============================== 主区 ============================== */

.main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 44px 60px;
  scroll-behavior: smooth;
}

.view { display: none; max-width: 1000px; }
.view.is-active { display: block; animation: viewIn .45s var(--ease); }

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

/* Hero */
.hero { margin-bottom: 30px; }

.hero-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
}

.hero-sub {
  margin: 0 0 22px;
  max-width: 46em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
}
.hero-sub:empty { display: none; }

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 18px;
  border-radius: 18px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  transition: transform .2s var(--ease), opacity .2s;
}
.pill-btn .ic { width: 15px; height: 15px; }
.pill-btn:hover { transform: translateY(-1px); }
.pill-btn:active { transform: scale(.98); }
.pill-btn.is-plain {
  background: var(--surface-2);
  color: var(--text);
  border: .5px solid var(--line);
}

.seed-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 22px;
  font-size: 11.5px;
  color: var(--text-3);
}
.seed-line .seed {
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
  border: .5px solid var(--line);
}
.seed-line .seed.is-explore { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.seed-line .seed-label { margin-right: 2px; }

/* 卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 22px 20px;
}

.card {
  position: relative;
  transition: transform .4s var(--ease);
  animation: cardIn .5s var(--ease) backwards;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.card:hover { transform: translateY(-4px); }
.card.is-dim { opacity: .42; }

.card-art {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  transition: box-shadow .4s var(--ease);
  cursor: pointer;
}
.card:hover .card-art { box-shadow: var(--shadow-2); }

.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease), filter .4s;
}
.card:hover .card-art img { transform: scale(1.04); }

.card-art .fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 40px;
  color: var(--text-3);
  background: linear-gradient(145deg, var(--surface-2), var(--bg));
}

.card-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .28);
  opacity: 0;
  transition: opacity .3s;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.card:hover .card-play, .card.is-playing .card-play { opacity: 1; }
.card-play span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #111;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transform: scale(.9);
  transition: transform .3s var(--ease);
}
.card:hover .card-play span { transform: scale(1); }
.card-play .ic { width: 19px; height: 19px; margin-left: 2px; }
.card-play .ic.is-pause { margin-left: 0; }

.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
}
.card-badge span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card-badge .is-like { background: rgba(192, 82, 70, .92); color: #fff; }
.card-badge .is-dislike { background: rgba(30, 30, 32, .78); color: #fff; }
.card-badge .ic { width: 12px; height: 12px; }

.card-info { padding: 11px 2px 0; }
.card-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-artist {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-why {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-actions {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s, transform .25s;
}
.card:hover .card-actions, .card.is-judged .card-actions { opacity: 1; transform: none; }

.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 27px;
  padding: 0 11px;
  border-radius: 14px;
  border: .5px solid var(--line-strong);
  font-size: 11.5px;
  color: var(--text-2);
  transition: background .2s, color .2s, border-color .2s;
}
.mini-btn .ic { width: 13px; height: 13px; }
.mini-btn:hover { background: var(--surface-2); color: var(--text); }
.mini-btn.is-on-like { background: var(--like-soft); border-color: transparent; color: var(--like); }
.mini-btn.is-on-dislike { background: var(--surface-2); border-color: transparent; color: var(--text); }

/* 分区标题 */
.section-head { margin-bottom: 28px; }
.section-head h2 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 500;
}
.section-head p { margin: 0; color: var(--text-2); font-size: 13.5px; }

/* 档案页标题行：左边标题说明，右边一颗「设置」 */
.section-head.is-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.section-head-main { min-width: 0; }
.section-head-main p { max-width: 72ch; }

.settings-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 15px;
  border: .5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.settings-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-3); }
.settings-btn .ic { width: 14px; height: 14px; }
.settings-btn svg { transition: transform .5s var(--ease); }
.settings-btn:hover svg { transform: rotate(60deg); }

.discover-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--surface);
  border: .5px solid var(--line);
  box-shadow: var(--shadow-1);
  margin-bottom: 28px;
}
.discover-search .ic { width: 18px; height: 18px; color: var(--text-3); }
.discover-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: none;
  font-size: 15px;
}

.discover-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.discover-tab {
  appearance: none;
  border: .5px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.discover-tab:hover { border-color: var(--text-3); color: var(--text); }
.discover-tab.is-active { background: var(--text); border-color: var(--text); color: #fff; }

.discover-theme {
  margin: -8px 0 18px;
  font-size: 13.5px;
  color: var(--text-2);
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: .5px solid var(--line);
}

/* 一级页面双区块：电影 / 图书 同时展示 */
.discover-block { margin-top: 26px; }
.discover-block-title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
}
.discover-block-theme {
  margin-left: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}

/* 来源徽章：豆瓣绿 / 微信读书蓝 */
.media-badge.badge-douban {
  background: rgba(0, 150, 56, .1);
  color: #008c3a;
}
.media-badge.badge-weread {
  background: rgba(37, 119, 227, .1);
  color: #2577e3;
}

/* 图书卡 like / dislike */
.media-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.media-act {
  appearance: none;
  border: .5px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.media-act:hover { border-color: var(--accent); color: var(--accent); }
.media-act:disabled { opacity: .5; cursor: default; }
.media-act.act-dislike:hover { border-color: #d24b4b; color: #d24b4b; }
.media-card.is-liked .act-like {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(37, 119, 227, .08);
}
.media-card.is-liked { border-color: var(--accent-soft); }

/* 阅读模式：微信读书统计条 + 设置里的 Key 输入 */
.read-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 2px 16px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--text-2);
  background: var(--surface-2);
  border: .5px solid var(--line);
  border-radius: 12px;
}
.read-stats b { color: var(--text-1); font-weight: 600; }

.wr-key {
  flex: 1;
  min-width: 160px;
  padding: 7px 12px;
  font-size: 13.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-1);
  outline: none;
}
.wr-key:focus { border-color: var(--accent); }

/* 媒体卡（电影 / 图书）—— 复用 .card-grid 的网格 */
.media-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  background: var(--surface);
  border: .5px solid var(--line);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.media-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--text-3);
}
.media-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.media-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-rating {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(20,20,22,.82);
  color: #ffd66b;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.media-meta {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-badge {
  align-self: flex-start;
  font-size: 11px;
  color: var(--text-3);
  border: .5px solid var(--line);
  border-radius: 6px;
  padding: 1px 7px;
  margin-bottom: 2px;
}
.media-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 2px;
}
.media-badges .media-badge { margin-bottom: 0; }
.media-tag {
  font-size: 10.5px;
  border-radius: 6px;
  padding: 1px 7px;
  align-self: flex-start;
}
.tag-rating {
  color: #b07d2b;
  background: #faf3e4;
  border: .5px solid #ecdcb8;
}
.tag-weread-cap {
  color: #2b6bb0;
  background: #e9f2fb;
  border: .5px solid #c4dcf5;
}
.media-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-2);
}
.media-year {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.media-why {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  padding: 5px 8px;
  border-radius: 0 8px 8px 0;
}

.empty-state {
  padding: 60px 0;
  text-align: center;
  color: var(--text-3);
  font-size: 13.5px;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 50px 0;
  color: var(--text-3);
  font-size: 13px;
}
.bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.bars i {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: eq 1.1s var(--ease) infinite;
}
.bars i:nth-child(1) { height: 40%; animation-delay: 0s; }
.bars i:nth-child(2) { height: 90%; animation-delay: .15s; }
.bars i:nth-child(3) { height: 60%; animation-delay: .3s; }
.bars i:nth-child(4) { height: 100%; animation-delay: .45s; }

/* ============================= 档案页 ============================= */

.narrative-card {
  padding: 34px 36px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: .5px solid var(--line);
  box-shadow: var(--shadow-1);
  margin-bottom: 34px;
}
.narrative-stage {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.narrative-headline {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.35;
}
.narrative-lines p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-2);
}
.narrative-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.narrative-tags span {
  padding: 4px 12px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}
.narrative-next {
  margin-top: 22px;
  padding-top: 18px;
  border-top: .5px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
}
.narrative-next b { color: var(--text-2); font-weight: 500; }

.dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
.dim-card {
  padding: 20px 22px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: .5px solid var(--line);
}
.dim-card h4 {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}
.dim-row { margin-bottom: 12px; }
.dim-row:last-child { margin-bottom: 0; }
.dim-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  margin-bottom: 5px;
}
.dim-row-head span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dim-row-head em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.dim-bar {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.dim-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width .6s var(--ease), left .6s var(--ease);
}
.dim-bar i.is-neg { background: var(--text-3); }
.dim-axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.dim-empty { font-size: 12.5px; color: var(--text-3); }

.history { margin-bottom: 20px; }
.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.history-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
}
.text-btn {
  font-size: 12.5px;
  color: var(--text-3);
  padding: 4px 0;
  border-bottom: .5px solid transparent;
  transition: color .2s, border-color .2s;
}
.text-btn:hover { color: var(--like); border-color: var(--like); }

/* 「连接 Apple Music」的两段式状态：正在准备 / 可以点了。
   MusicKit 那 600 KB 在后台下，下好之前按钮是灰的，下好了才亮起来请用户点。 */
.text-btn.is-busy {
  color: var(--text-3);
  opacity: .65;
  cursor: progress;
}
.text-btn.is-cta {
  color: var(--like);
  border-color: var(--like);
  font-weight: 500;
}
.text-btn.is-cta::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: mkPulse 1.4s ease-in-out infinite;
}
@keyframes mkPulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .text-btn.is-cta::after { animation: none; }
}

.history-list { display: flex; flex-direction: column; }
.history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: .5px solid var(--line);
}
.history-item img {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--surface-2);
}
.history-item .hi-main { flex: 1; min-width: 0; }
.history-item .hi-title {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-item .hi-sub {
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-item .hi-tag {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 10px;
}
.hi-tag.is-like { background: var(--like-soft); color: var(--like); }
.hi-tag.is-dislike { background: var(--surface-2); color: var(--text-2); }
.history-item button {
  font-size: 11.5px;
  color: var(--text-3);
  opacity: 0;
  transition: opacity .2s;
}
.history-item:hover button { opacity: 1; }
.history-item button:hover { color: var(--like); }

/* ============================= 播放条 ============================= */

.playbar {
  grid-area: bar;
  position: relative;
  z-index: 50;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: .5px solid var(--line);
  box-shadow: var(--shadow-3);
}

.playbar-progress {
  height: 3px;
  background: var(--line);
  cursor: pointer;
  transition: height .2s;
}
.playbar-progress:hover { height: 5px; }
.playbar-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .12s linear;
}

.playbar-inner {
  height: calc(var(--playbar-h) - 3px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}

.pb-cover {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 9px;
  overflow: hidden;
  flex: none;
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}
.pb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-cover-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  opacity: 0;
  transition: opacity .25s;
}
.pb-cover:hover .pb-cover-hint { opacity: 1; }

.pb-meta { min-width: 0; width: 190px; flex: none; }
.pb-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-artist {
  margin: 1px 0 0;
  font-size: 11.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
}

.ctl {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-2);
  transition: background .2s, color .2s, transform .15s;
}
.ctl:hover { background: var(--surface-2); color: var(--text); }
.ctl:active { transform: scale(.93); }
.ctl.is-primary { color: var(--text); }
.ctl.is-primary .ic { width: 21px; height: 21px; }
.ctl.is-small { width: 30px; height: 30px; }
.ctl.is-small .ic { width: 16px; height: 16px; }
.ctl.is-on { color: var(--like); background: var(--like-soft); }
.ctl.is-big { width: 60px; height: 60px; }
.ctl.is-big .ic { width: 26px; height: 26px; }

.pb-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: none;
}
.pb-time {
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}

/* ========================== 正在播放全屏 ========================== */

.nowplaying {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  animation: npIn .5s var(--ease);
}
@keyframes npIn {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: none; }
}

.np-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(60px) saturate(150%);
  opacity: .35;
  transform: scale(1.2);
}
.nowplaying::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: .84;
}
html[data-theme="dark"] .nowplaying::before { opacity: .88; }

.np-inner {
  position: relative;
  width: min(460px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-height: 92vh;
  overflow-y: auto;
}

.np-close {
  position: absolute;
  top: -8px;
  right: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-2);
}
.np-close:hover { background: var(--surface-2); }

.np-art {
  position: relative;
  width: min(320px, 74vw);
  aspect-ratio: 1;
  margin-bottom: 34px;
}
.np-art img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  background: var(--surface-2);
}
.np-vinyl {
  position: absolute;
  z-index: 1;
  top: 6%;
  left: 12%;
  width: 82%;
  height: 88%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, .05) 0 2px,
      rgba(0, 0, 0, .05) 2px 4px);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .3);
  transition: transform .8s var(--ease);
}
.np-art.is-spinning .np-vinyl { transform: translateX(26%) rotate(180deg); }
.np-art.is-spinning img { animation: artFloat 6s ease-in-out infinite; }
@keyframes artFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}

.np-eyebrow {
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.np-title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
}
.np-artist { margin: 0 0 14px; font-size: 14px; color: var(--text-2); }
.np-reason {
  margin: 0 0 26px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.7;
  max-width: 30em;
}
.np-reason:empty { display: none; }

.np-progress { width: 100%; margin-bottom: 22px; }
.np-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 8px;
}
.np-fill { height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
.np-time {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.np-controls {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 30px;
}
.np-controls .ctl { width: 44px; height: 44px; }
.np-controls .ctl .ic { width: 20px; height: 20px; }
.np-controls .ctl.is-primary {
  background: var(--text);
  color: var(--bg);
}
.np-controls .ctl.is-primary:hover { opacity: .88; background: var(--text); }

.np-verdict { display: flex; gap: 12px; }
.verdict-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  border: .5px solid var(--line-strong);
  font-size: 13.5px;
  color: var(--text-2);
  transition: all .22s var(--ease);
}
.verdict-btn .ic { width: 16px; height: 16px; }
.verdict-btn.is-like:hover, .verdict-btn.is-like.is-on {
  background: var(--like-soft);
  border-color: transparent;
  color: var(--like);
}
.verdict-btn.is-dislike:hover, .verdict-btn.is-dislike.is-on {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--text);
}

/* ============================== 登录 ============================== */

.onboarding {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  animation: viewIn .5s var(--ease);
}
.onboarding.is-hidden { display: none; }

.ob-card {
  width: min(420px, 88vw);
  padding: 52px 44px 40px;
  text-align: center;
  background: var(--surface);
  border: .5px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-2);
}
.ob-card .brand-mark { justify-content: center; margin-bottom: 22px; }
.ob-card h1 {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .14em;
}
.ob-sub {
  margin: 0 0 32px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-2);
}
.apple-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 46px;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
  font-size: 14.5px;
  font-weight: 500;
  transition: transform .2s var(--ease), opacity .2s;
}
.apple-btn:hover { transform: translateY(-1px); }
.apple-btn:active { transform: scale(.99); }
.apple-btn .ic { width: 19px; height: 19px; }
.apple-btn[disabled] { opacity: .45; cursor: default; transform: none; }

/* 邮箱登录：与 Apple 按钮之间的「或」分隔 */
.ob-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--text-3);
  font-size: 11px;
}
.ob-divider::before,
.ob-divider::after {
  content: '';
  flex: 1;
  height: .5px;
  background: var(--line);
}

.ob-form { display: grid; gap: 10px; }
.ob-field {
  width: 100%;
  height: 44px;
  padding: 0 15px;
  border: .5px solid var(--line);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ob-field::placeholder { color: var(--text-3); }
.ob-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.ob-submit {
  height: 44px;
  border-radius: 13px;
  border: .5px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: transform .2s var(--ease), background .2s;
}
.ob-submit:hover { transform: translateY(-1px); }
.ob-submit:active { transform: scale(.99); }
.ob-submit[disabled] { opacity: .5; cursor: default; transform: none; }
.ob-form-msg {
  margin: 2px 0 0;
  min-height: 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-3);
}
.ob-form-msg.is-error { color: #d0463a; }

.ob-card .text-btn { margin-top: 18px; }

/* Apple 弹窗报错时的备用通道：做成低调的一行小字，不抢主按钮 */
.ob-card .text-btn.ob-alt {
  margin-top: 10px;
  font-size: 12.5px;
  padding: 4px 10px;
  color: var(--muted);
  border-color: transparent;
}
.ob-hint {
  margin: 20px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-3);
}

/* ============================== Toast ============================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--playbar-h) + 22px);
  transform: translateX(-50%);
  z-index: 400;
  padding: 10px 20px;
  border-radius: 20px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  box-shadow: var(--shadow-2);
  animation: toastIn .35s var(--ease);
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================== 响应式 ============================== */

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "main" "bar";
  }
  .sidebar { display: none; }
  .main { padding: 28px 24px 48px; }
  .hero-title { font-size: 30px; }
  .searchbox { width: 160px; }
  .pb-meta { width: 120px; }
  .brand-text em { display: none; }
}

/* ========================== 今日 · 播放器 ========================== */

.stage {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
  padding: 20px 4px 8px;
  animation: fadeUp .55s var(--ease) both;
}

/* ---- 封面 ---- */
.stage-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.stage-halo {
  position: absolute;
  inset: 10% 6% -4% 6%;
  border-radius: 34%;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.5);
  opacity: .42;
  transition: background-image .6s var(--ease), opacity .4s var(--ease);
  pointer-events: none;
}
.stage-art.is-playing .stage-halo { opacity: .62; }
.stage-spin {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  box-shadow: 0 0 0 0 var(--accent-soft);
  transition: box-shadow .6s var(--ease);
  pointer-events: none;
}
/* .stage-art.is-playing .stage-spin { box-shadow: 0 0 0 7px var(--accent-soft); } */
.stage-art img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}
.stage-art img[src=""] { visibility: hidden; }

/* ---- 文字区 ---- */
.stage-body { min-width: 0; }
.stage-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(196, 128, 58, .13);
  color: #93601F;
  border: .5px solid rgba(196, 128, 58, .26);
  white-space: nowrap;
}
.mode-badge.is-full {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(161, 101, 74, .28);
}
.mode-badge.is-mini { padding: 2px 8px; font-size: 10.5px; }
html[data-theme="dark"] .mode-badge { color: #E2AC69; background: rgba(226, 172, 105, .14); border-color: rgba(226, 172, 105, .26); }
html[data-theme="dark"] .mode-badge.is-full { color: #D3A08A; background: rgba(211, 160, 138, .14); border-color: rgba(211, 160, 138, .26); }

.pos-badge {
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* —— 主页音质切换器：胶囊分段控件，选中项点亮 —— */
.q-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-2);
  border: .5px solid var(--line);
}
.q-chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.q-chip:hover { color: var(--text); }
.q-chip.is-on {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.q-chip.is-dim { opacity: .55; }
html[data-theme="dark"] .q-chip.is-on { color: #D3A08A; }

.stage-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--text);
}
.stage-artist {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-2);
}
.stage-why { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.stage-why span {
  font-size: 11.5px;
  color: var(--text-3);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
}

/* ---- Agent 的转译 ---- */
.stage-read {
  margin: 16px 0 4px;
  padding: 12px 16px;
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-soft), transparent 78%);
  border-radius: 0 12px 12px 0;
  animation: fadeUp .4s var(--ease) both;
}
.read-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.read-line { margin: 0; font-size: 13.5px; color: var(--text); font-family: var(--font-serif); }
.read-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.read-tags span {
  font-size: 11px;
  padding: 2.5px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: .5px solid var(--line-strong);
  color: var(--text-2);
}

/* ---- 进度 ---- */
.stage-progress { margin: 22px 0 4px; }
.stage-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
}
.stage-bar:hover { background: var(--line-strong); }
.stage-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--text);
}
.stage-bar.is-preview .stage-fill { background: linear-gradient(90deg, #C4803A, #E0A75E); }
.stage-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .18s var(--ease);
  pointer-events: none;
}
.stage-bar:hover .stage-knob { opacity: 1; }
.stage-time {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.stage-dur.is-preview { color: #A5712C; }

/* ---- 控制 ---- */
.stage-controls { display: flex; align-items: center; gap: 18px; margin: 16px 0 2px; }
.round-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: .5px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease);
}
.round-btn:hover { transform: translateY(-1px); }
.round-btn:active { transform: translateY(0) scale(.96); }
.round-btn .ic { width: 19px; height: 19px; }
.round-btn.is-primary {
  width: 62px;
  height: 62px;
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
  box-shadow: var(--shadow-2);
}
.round-btn.is-primary .ic { width: 25px; height: 25px; }

.stage-verdict { display: flex; gap: 12px; margin: 16px 0 6px; }
.stage-verdict .verdict-btn { background: var(--surface); cursor: pointer; }

.stage-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--text-3);
  min-height: 18px;
}
.stage-foot .text-btn { font-size: 11.5px; color: var(--accent); }

#stageLoading, .stage-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
  color: var(--text-3);
  font-size: 13px;
}

@media (max-width: 860px) {
  .stage {
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 460px;
    padding-top: 8px;
  }
  .stage-art { max-width: 300px; margin: 0 auto; }
  .stage-title { font-size: 27px; }
}

/* ========================== 档案页 · 双层结构 ========================== */
/* 上层是用户亲自写定的（可增删），下层是 Agent 推断的（只读）。
   两层视觉上必须有明确分野，否则用户会误以为自己能改 Agent 的判断。 */

.layer { margin-bottom: 42px; }

.layer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.layer-title h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
}

.layer-title h3 .ic { width: 15px; height: 15px; color: var(--accent); }

.layer-title p {
  margin: 0;
  max-width: 60ch;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-2);
}

.layer-count {
  flex: none;
  padding: 4px 12px;
  border-radius: 13px;
  background: var(--surface-2);
  border: .5px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  transition: background .2s, color .2s, border-color .2s;
}

.layer-count.is-full {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.layer-lock {
  flex: none;
  padding: 4px 12px;
  border-radius: 13px;
  border: .5px dashed var(--line-strong);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: .02em;
}

/* ------------------------------ 点名区 ------------------------------ */

.pin-tabs { display: flex; gap: 6px; margin-bottom: 16px; }

.pin-tab {
  padding: 6px 15px;
  border-radius: 15px;
  border: .5px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-2);
  transition: background .18s, color .18s, border-color .18s;
}

.pin-tab:hover { color: var(--text); border-color: var(--line-strong); }
.pin-tab.is-active { background: var(--text); border-color: var(--text); color: #fff; }

.pin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}

.pin-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px 9px 9px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: .5px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: border-color .18s, transform .18s;
}

.pin-chip img,
.pin-chip .pin-glyph {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex: none;
  object-fit: cover;
  background: var(--surface-2);
}

.pin-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--accent);
  border: .5px solid var(--line);
}

.pin-chip-main { flex: 1; min-width: 0; }

.pin-chip-main b {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-chip-main span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-chip > button {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: background .18s, color .18s;
}

.pin-chip > button:hover { background: var(--like-soft); color: var(--like); }
.pin-chip > button .ic { width: 12px; height: 12px; }

/* 替换态：名额已满，整条 chip 变成「点我换掉」的目标 */
.pin-list.is-replacing .pin-chip {
  cursor: pointer;
  border-style: dashed;
  border-color: var(--accent);
  animation: pinPulse 1.7s var(--ease) infinite;
}

.pin-list.is-replacing .pin-chip:hover { transform: translateY(-1px); }
.pin-list.is-replacing .pin-chip > button { display: none; }

@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50% { box-shadow: 0 0 0 5px var(--accent-soft); }
}

.pin-empty {
  grid-column: 1 / -1;
  padding: 20px 2px;
  font-size: 12.5px;
  color: var(--text-3);
}

.pin-adder { margin-top: 14px; }

.pin-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  max-width: 420px;
  border-radius: 18px;
  background: var(--surface);
  border: .5px solid var(--line);
  transition: border-color .18s, box-shadow .18s;
}

.pin-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pin-search .ic { width: 14px; height: 14px; flex: none; color: var(--text-3); }

.pin-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: 13.5px;
}

.pin-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  max-width: 520px;
  /* 风格档会一次列出三十多个官方流派，给个滚动区免得把页面撑太长 */
  max-height: 330px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.pin-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 11px;
  text-align: left;
  transition: background .16s;
}

.pin-option:hover { background: var(--surface-2); }

.pin-option img,
.pin-option .pin-glyph { width: 36px; height: 36px; border-radius: 8px; flex: none; object-fit: cover; }

.pin-option-main { flex: 1; min-width: 0; }
.pin-option-main b { display: block; font-size: 13px; font-weight: 500; }
.pin-option-main span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-3); }

.pin-option-state { flex: none; font-size: 11.5px; color: var(--text-3); }
.pin-option-state.is-on { color: var(--accent); }

.pin-hint {
  margin: 10px 0 0;
  min-height: 17px;
  font-size: 12px;
  color: var(--text-3);
}

.pin-hint.is-warn { color: var(--like); }
.pin-hint.is-ok { color: var(--accent); }

/* ── Apple Music 连接态 ─────────────────────────────────────────────
   .chip-sub   账户胶囊里表示「可播完整曲目」
   .note-warn  侧栏底部把 MusicKit 的真实失败原因摆出来
   ──────────────────────────────────────────────────────────────── */
.chip-sub {
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid var(--line);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .02em;
}

.note-warn { color: var(--like); }

/* ── Agent 控制台 ────────────────────────────────────────────────────
   说话而不是填表。模型档位、对话流、图片上传都收在这一块里，
   视觉上沿用「纸面 + 赭石」的克制调子，不引入新的色系。
   ──────────────────────────────────────────────────────────────── */
.agent-console .layer-title p { max-width: 62ch; }

.agent-log {
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-msg { max-width: 82%; font-size: 13.5px; line-height: 1.62; }
.agent-msg.is-user {
  align-self: flex-end;
  padding: 9px 13px;
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
  background: var(--accent-soft);
  color: var(--text);
}
.agent-msg.is-agent {
  align-self: flex-start;
  padding: 9px 13px;
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-serif);
}
.agent-msg.is-error { color: var(--like); border-color: var(--like-soft); }
.agent-msg.is-pending { color: var(--text-3); font-style: italic; }

.agent-acts { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.agent-act { position: relative; padding-left: 12px; font-size: 11.5px; color: var(--text-3); }
.agent-act::before { content: '·'; position: absolute; left: 3px; }
.agent-act.is-ok { color: var(--accent); }

.agent-cands { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.agent-cand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.agent-cand img { flex: none; width: 38px; height: 38px; border-radius: 7px; object-fit: cover; }
.agent-cand-main { flex: 1; min-width: 0; }
.agent-cand-main b { display: block; font-size: 13px; font-weight: 500; }
.agent-cand-main span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-3); }
.agent-cand button {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}
.agent-cand button:disabled { opacity: .5; cursor: default; }

.agent-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color .18s var(--ease);
}
.agent-form:focus-within { border-color: var(--accent); }

.agent-attach {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.agent-attach:hover { color: var(--accent); background: var(--accent-soft); }
.agent-attach .ic { width: 17px; height: 17px; }

#agentMessage {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.agent-thumb { position: relative; flex: none; width: 34px; height: 34px; }
.agent-thumb img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.agent-thumb button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.agent-send {
  flex: none;
  padding: 7px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 13px;
  cursor: pointer;
  transition: opacity .18s var(--ease);
}
.agent-send:hover { opacity: .88; }
.agent-send:disabled { opacity: .5; cursor: default; }

.agent-hint { margin: 9px 0 0; font-size: 11.5px; color: var(--text-3); }
.agent-hint.is-warn { color: var(--like); }

/* ==========================================================================
   设置弹窗
   —— 独立呼出的一层，遮罩是黑色半透明（用户点名要的）。
      面板本身仍然跟随主题（浅底深字 / 深底浅字），只有遮罩恒定压暗。
   ========================================================================== */

.settings {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 24px;
}
.settings[hidden] { display: none; }

.settings-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .52);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  animation: maskIn .22s var(--ease);
}
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }

.settings-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  background: var(--surface);
  border: .5px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
  overflow: hidden;
  animation: panelIn .3s var(--ease);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 16px;
  border-bottom: .5px solid var(--line);
}
.settings-head h2 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .04em;
}
.settings-head p { margin: 0; font-size: 12px; color: var(--text-3); }
.settings-close {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.settings-close:hover { background: var(--line-strong); color: var(--text); }
.settings-close .ic { width: 14px; height: 14px; }

.settings-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 26px;
  border-bottom: .5px solid var(--line);
  background: var(--surface-2);
}
.settings-tab {
  height: 30px;
  padding: 0 15px;
  border: .5px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.settings-tab:hover { color: var(--text); }
.settings-tab.is-active {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 28px;
  -webkit-overflow-scrolling: touch;
}
.settings-pane[hidden] { display: none; }
.settings-loading { margin: 40px 0; text-align: center; font-size: 13px; color: var(--text-3); }

/* —— 弹窗里的分组（沿用「分组灰底 + 卡片」那套语言）—— */
.set-block { margin-bottom: 22px; }
.set-block:last-child { margin-bottom: 0; }
.set-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.set-block-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.set-block-head p { margin: 3px 0 0; font-size: 11.5px; color: var(--text-3); }

.set-rows {
  border: .5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  border-bottom: .5px solid var(--line);
}
.set-row:last-child { border-bottom: none; }
.set-row-key { font-size: 12.5px; color: var(--text-2); }
.set-row-val {
  font-size: 12.5px;
  color: var(--text);
  text-align: right;
  word-break: break-all;
}
.set-row-val.is-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
}

.set-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.set-pill.is-on { color: var(--accent); background: var(--accent-soft); }
.set-pill.is-off { color: var(--like); background: var(--like-soft); }
.set-pill.is-mute { color: var(--text-3); background: var(--line); }

/* 档位卡片：和档案页控制台里的 chip 是同一套视觉，只是在这里排得更开 */
.set-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.set-mode {
  padding: 12px 13px;
  border: .5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.set-mode:hover { border-color: var(--text-3); transform: translateY(-1px); }
.set-mode.is-active { border-color: var(--accent); background: var(--accent-soft); }
.set-mode.is-active b { color: var(--accent); }
.set-mode:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.set-mode b { display: block; font-size: 13px; font-weight: 600; }
.set-mode span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.set-mode i {
  display: inline-block;
  margin-top: 7px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--line);
  color: var(--text-2);
  font-size: 10px;
  font-style: normal;
}

/* 开关 */
.set-toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 23px;
  border: none;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.set-toggle::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s var(--ease);
}
.set-toggle.is-on { background: var(--accent); }
.set-toggle.is-on::after { transform: translateX(17px); }

.set-pref {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 15px;
  border-bottom: .5px solid var(--line);
}
.set-pref:last-child { border-bottom: none; }
.set-pref-main b { display: block; font-size: 13px; font-weight: 600; }
.set-pref-main span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }

/* 工具 / 技能清单 */
.set-tool {
  display: flex;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: .5px solid var(--line);
}
.set-tool:last-child { border-bottom: none; }
.set-tool-name {
  flex: none;
  min-width: 132px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--accent);
  word-break: break-all;
}
.set-tool-desc { font-size: 12px; color: var(--text-2); line-height: 1.65; }
.set-tool-params { display: block; margin-top: 4px; font-size: 10.5px; color: var(--text-3); }
.set-tool-params code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--line);
  font-size: 10.5px;
}

.set-code {
  position: relative;
  margin: 0;
  padding: 14px 15px;
  border: .5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-2);
  overflow-x: auto;
  white-space: pre;
}
.set-copy { margin-top: 9px; }

.set-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.7;
}

.set-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.set-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 14px;
  border: .5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.set-btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.set-btn:disabled { opacity: .55; cursor: default; }
.set-btn .ic { width: 13px; height: 13px; }
.set-probe { font-size: 11.5px; color: var(--text-3); }
.set-probe.is-ok { color: var(--accent); }
.set-probe.is-bad { color: var(--like); }

@media (max-width: 620px) {
  .settings { padding: 0; }
  .settings-panel { max-height: 100vh; border-radius: 0; }
  .set-modes { grid-template-columns: 1fr; }
  .set-tool { flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}